UI and UX design are two disciplines that are often confused and misunderstood. The two are closely related and there is a degree of overlap, but they refer to distinct parts of the design process. Through this post we’ll talk about what the terms UX and UI mean, what their respective workflows look like and how they fit together.
What is UX Design?
The UX stands for ‘User Experience’. So, if we think about the design process for a website or app the UX refers to the experience that a user will have when they interact with it.
While a UI designer is focused on how an app looks, the UX designers focus is on how the user interacts with it. Their goal is to understand journeys that a user will take and how they will navigate through the application in order to make it as intuitive and easy to use as possible.
Common elements that a UX designer might consider include:
- User Journeys
- Site maps
- User testing+
- Ease of use
- Information hierarchy
- Conversion rates
- Key performance indicators
There can however be overlap between the considerations for UX and UI. For example, a UX designer might suggest a particular font size or colour as it solves an accessibility issue, or make changes to the layout to prioritise key information that the user is struggling to find.
What a UX workflow looks like
You will want to start your process by gathering any specifications and requirements. This is a crucial part of the project as if you fail to grasp the needs of a client and their users or what functionality your design needs to cover it’s going to be very hard to solve their problems.
One you’ve gathered the requirements it’s time to move on to research. Key areas to cover here are, identifying a target market (who it is that you’re trying to reach), researching similar products and products with similar target users, identifying competitors and understanding if there are any established best practices in dealing with the problems you are trying to solve.
The third step, would be to produce some low-fidelity designs. This is where you apply everything that you’ve learned during your research and would usually take the form of some wireframes which ideally you want to use as the basis for an interactive prototype, allowing you to test your assumptions.
From here you will iterate your designs based on the feedback to solve any problems and move forwards. Once your experience is nailed down the next phase would be to move on to user interface design.
What is UI design?
The UI stands for ‘User Interface’. When you’re talking about a website or app the UI refers to the graphical representation of everything that you can see on the screen. This covers everything for your very basic elements such as colours, font and icons, through to more complex interactions like hover states for button and menus. So, if you’re working on a design for a new app, the UI Designers role would be to develop the look and feel of everything the user sees.
Common elements that a UI designer might consider include:
- Icons and Illustration
- Consistency with the company brand
In addition to this, UI design can also encompass the disciplines of Interaction Design (how things work when the user clicks or taps them) and Motion design (how things move between two states – such as what happens is a user clicks on a dropdown menu).
What a UI workflow looks like
A good place to start with UI design is to look at any brand guidelines the client or project has, as it’s always going to be important that your outcome is on brand. If you’re working with a client then it’s also useful to present them with a few different styles to gauge their likes and dislikes, or ask them for specific design references. A good next step is to put all of this together as a moodboard, so you can start to build up an idea of the tone and appearance of the project. This also gives you a chance to check in with the clients and see if they’re happy with your direction before you’ve started creating the actual designs.
Once everybody is happy with the direction the next step is to start applying this design language to the wireframes provided by the UX designers. This usually takes the form of a high-fidelity mockup that will show how the final developed outcome will look once built.
A further step here is to consider the application of interaction design and motion design, which illustrates to the developers how everything should move and fit together. Little details like these are becoming key skills for UI designers.
Once you have your visual designs completed, they will either go back to UX designers for testing or moved onto the next stage of the project which is development and build.
How UX and UI work together
The two practices work hand in hand to create great designs with seamless functionality and in an ideal world UI and UX should be considered for all digital projects. If you have an app that looks great with a really slick user interface but provides a poor experience for the user then it’s a bad product. Similarly, if you have an app that provides great functionality and has the ability to do everything a user needs, but its user interface turns people off then it’s not going to reach as many people as it could. If you effectively research and apply both UI and UX principles, you will always improve your product.
If you’ve like to find out more about UX and UI principles, check out the rest of our blog. If you are ready to start your next digital project, give us as call on 0345 200 2650 to speak to our Sales Team or email email@example.com.