NZ Digital | Blog | What’s the difference between UI and UX?

What’s the difference between UI and UX?

A quick guide to User Interface and Experience design.

A quick guide to User Interface and Experience design.

The terms UI and UX have been banded around when it comes to websites for a number of years now. UI (User Interface) and UX (User Experience) are key components we carefully consider in every project we create.

At it’s most simplistic level, User interface (UI) is the series of screens, pages, and visual elements—like buttons and icons—that users interact with on a device such as websites, apps, wearables, and software.

While User Experience (UX) is user-centric. The purpose is to focus on the usability, ease of use, and pleasure provided in the interaction between the customer and the online presence. In turn, this will increase customer satisfaction and loyalty to that company/brand.

User Experience – People First

User experience design is a human-first way of designing products.

UX is predominantly made up of the following areas:

  • Strategy and Content
  • Competitor Analysis
  • Customer Analysis
  • Product Structure/Strategy
  • Content Development
  • Wireframing and Prototyping
  • Wireframing
  • Prototyping
  • Testing/Iteration
  • Development Planning
  • Execution and Analytics
  • Coordination with UI Designer(s)
  • Coordination with Developer(s)
  • Tracking Goals and Integration
  • Analysis and Iteration

User Interface = Visual and interactions

Good user interface design supports usability with clear, consistent visual layouts and content which provides users explanations, expressions, gestures and hints to help users complete tasks while reducing the time it takes them to get to where they want to be with a website, software or an app.

UI is predominantly made up of the following areas:

  • Customer Analysis
  • Look and Feel
  • Design Research
  • Branding and Graphic Development
  • User Guides/Storyline
  • UI Prototyping
  • Interactivity and Animation
  • Adaptation to All Device Screen Sizes
  • Implementation with Developer


A great example of how the use of animations and gesture helps the user to understand that progress has been actioned. Source: @kyokim

Here at NZ Digital, we have dedicated in house UX and UI designers who implement these practices into every website design we create. Over the past few months, we have worked on a number of projects where we have improved the UI and UX of existing sites along with new sites, such as The Apple Press.

The Apple Press (theapplepress.co.nz) came to NZ Digital to build a digital platform that communicated their unique brand story, highlighting their mission to make the world’s best apple juice, from what they believe are the world’s best apples – this is apple juice like you’ve never tasted before.

The new website accomplishes this through multiple forms of media such as video, interactive content and highly visual imagery. Simply by navigating through the site, the customer can obtain an understanding of what makes The Apple Press unique, but one area that principally highlights this important brand story is the ‘mix it up’ section. This is an area where the brand can really promote to the customer why and how they are different. They reiterate their love of apples, the importance of their juice making practices and that each and every apple is given the 5-star treatment.

Need help with content marketing for your niche or technical offering?
Let’s have a conversation.

Digital Insights

Explore marketing tips & advice

Website price guide: What does a website cost in New Zealand

Mar 26, 2024

For most businesses a website is a critical piece of it’s online reputation and service provision strategy.

Learn more

How to Avoid Common Web Design Mistakes

Mar 14, 2024

Knowing what to look out for at the start of your project will help you execute a new website and avoid the most common and costly problems to fix.

Learn more

How to Leverage the Power of Video Advertising

Mar 8, 2024

We breakdown the most popular online advertising platforms, pros and cons, cost effectiveness and tips for the best results.

Learn more