Website design by UI & UX experts | Fixate

View Original

User Experience Design (UX) and User Interface Design (UI). What’s the difference?

Every business needs a website, right? So, you Google the words “website design agency”. You do your due diligence and find a couple of agencies you like. Except these agencies don’t offer plain, old web design. They offer something called “UX and UI design”! 

A little confused? Well, don’t worry - so are a lot of people. How about we dive into what these terms mean, and check out what kind of value they provide in the web design process.   

So, what exactly is UX Design?

Forget about colour, images and fancy-schmancy graphics. “User experience design” or “UX design” is where you focus on validating ideas, creating value and fulfilling your customer’s needs. 

This nifty comic explains the UX quandary in which so many companies find themselves:

Cartoon by Brady Bonus

Sometimes we get so caught up in what we think our customers need, that we forget to actually ask them what they need. Taking the time to engage with them, will clarify the problems you need to solve. In other words, do my customers need a rocket ship, or will a bike suffice? I promise you, the answers will surprise you! Plus, you’ll save a whole lot of time and money.

So how do you actually find out what your users need? Hold onto your hats folks, let’s get this party started ;)

Let’s talk about some of the most common UX techniques:

  1. UX Research

  2. Buyer Personas

  3. Wireframes

  4. Interactive Prototype

  5. User Testing

1. UX Research

“UX research” or “user research” helps you understand your customer’s pain points, emotions, attitudes and needs. This approach is all about engaging directly with your customers, so that relevant data can be collected to inform your design process. After all, a site that speaks your customers' language means good business for you! 

What are the benefits of UX research?

In the words of Frank Chimero, “People ignore designs that ignore people”. So take the time to invest in user research. It’ll help you: 

  • Understand what your customers want

  • Remove personal bias from your design process

  • Avoid critical mistakes that will cost you additional time and money 

2. Buyer Personas

A buyer persona is a fictional representation of your website’s typical users. Personas should ideally be informed from the user research you have collected. This will ensure a more accurate picture of your target customer.

What are some persona best practices?

  • Create your personas from research you’ve gathered about your customers

  • Make sure your personas represent a large portion of your site’s users

  • Ensure you include insights about your typical customer’s behaviour, motivations, goals and needs

  • Don’t forget to include your target customer’s personality traits and demographics

  • Make sure your personas provide insight into the design problems you’re trying to solve

3. Wireframes

A wireframe is a simple blue-print of your website. They’re usually not very pretty. They outline the placement of elements and features across your website pages. Wireframes help you to translate your user research into something visual. 

Illustration by thedesignteam.io

What are the benefits of creating wireframes?

  • It provides a clear picture of the site structure and content 

  • It helps clarify website functionality and features

  • It encourages stakeholders to focus on user experience

  • It helps to minimise revisions during UI design and development

4. Interactive Prototype

Interactive prototypes are realistic, clickable mockups that allow your customers and stakeholders to get a feel for what you’re creating. It’s one of the best ways to validate your ideas early on in the design process. Prototypes can either be created from wireframes, or from more finalised designs. If you need fast feedback early on, we’d recommend converting your wireframes into clickable prototypes.

What are some of the benefits of creating prototypes?

  • It brings concepts to life

  • It allows users and stakeholders to provide valuable feedback

  • It helps validate ideas early on

  • It helps detect issues early on, saving you time and money

5. User Testing

Ok, this one’s a biggie! Sites that perform well, consistently test, iterate and improve concepts. User testing will help you analyse the user experience of your website through various testing methods. 

Why should you user test?

  • It helps you get a fresh, unbiased perspective

  • It helps you pick up usability issues 

  • It helps you make informed, user-centric decisions

What exactly is UI Design?

Illustration by thedesignteam.io

Ok, so I’ve given you the down low on what UX is, how about we talk about UI! UI design stands for “User Interface Design”. Here the focus is solely on looks! So, say hello to colour, images, fonts and all those nice things. Great UI delights your customers and makes your website all the more loveable.

Let’s check out some of the most common UI deliverables:

1. Mood Board

A mood board is a collage of inspiration - images, graphics, colours and typography - collected from various sources. The aim of a mood board is to represent the expected style of the UI design. It’s also a great way to get the creative juices flowing!

Mood board by Wandering Aimfully

Why are mood boards useful in the UI process?

Mood boards ensure everyone is happy with the visual direction before any design work begins. They’re also a great tool to help the client and designer define the overall mood and tone of the website. It also ensures no surprises when the designer presents the initial look-and-feel design.

2. Design

This is the most important part of the UI process. It’s where designers convert dreary wireframes into something visually appealing.

User interface design focuses on looks and layout. In other words, the designer focuses on all the visual interface elements your customers will interact with. This can include buttons, text, links, checkboxes and so on. However, it doesn’t stop there. Designers also need to ensure the layouts speak your brand language. This can be done by including elements like illustration, icons and photography that match your brand personality. A combination of all these aspects will create a holistic design that captures your brand essence. 

What are the benefits of a well-designed UI?

  • It creates a positive and intuitive user experience

  • It separates you from your competitors

  • It encourages customer engagement and brand loyalty

  • It ensures a good experience across devices

Need some inspiration for your UI design? Check out Awwwards, Dribbble and Behance for some of the most on trend websites.

3. Design System

A design system is a collection of brand standards, style guides, pattern libraries, reusable graphics and development resources. In essence, it’s one big goodie bag filled to the brim with everything designers and developers need to know about your brand. It’s an awesome way to document how your brand assets should be used across your marketing.

What are the benefits of a design system?

  • It helps define a clear set of rules to ensure all digital content has a consistent experience

  • It increases efficiency as teams can tap into a library of reusable assets, rather than creating similar assets from scratch

  • It helps teams add new pages and functionality to your website faster

Polaris by Shopify

4. Style Guide

A style guide forms part of a design system. While a design system focuses on various aspects of your brand, a style guide focuses on well... style. Style guides typically outline the colours, fonts, icons, headings and images that should be employed across a website. They also include something called a pattern library. This refers to a set of design elements that appear multiple times across your website, such as buttons and forms.

A picture is worth a thousand words - see Disqus’s style guide below:

Disqus Style Guide

Why is a style guide important?

  • It ensures consistency across your website

  • It helps establish guidelines for any future designers and developers working on your website

  • It makes it easier for developers to maintain and make improvements to your site

5. Interaction design

Interaction design strengthens your website’s user experience. It focuses on things like animations, page transitions and loading indicators. For example, what happens when a customer hovers or clicks on a button? Does it change colour? Does it go bigger? This helps the customer recognise the button as something with which they can interact.

Why is interaction design important?

Interaction design helps drive an intuitive, exciting and positive user experience. Your customer expects an interface that responds and nudges them to their ultimate goal. If interactions are poorly implemented, this could have a detrimental effect on your website’s user experience.

That’s a wrap

UX and UI are very different, but they work hand-in-hand for website success! If there’s one thing to remember, UI focuses on looks, while UX focuses on how things work.

Good UX design creates positive experiences by anticipating and fulfilling your customer’s needs. But good UX would be nowhere without beautiful visuals to support it. So make sure you invest in both processes. It’ll totally be worth it. Your website will be a force to be reckoned with.

Keen to learn more about the website design process? Check out The Marketing Manager’s 10 Step Guide to Website Design. It’s one handy guide!