-p-130x130q80.png)
Authors:
Last Updated: 21 December, 2022
Before writing even a single line of code (even tests!) in any user-facing application, there is a very important task that must be completed: designing the UI/UX. UI, or user interface, is what your application will look like--the font you use, the color of your buttons, how the page is arranged, what the menu looks like, and every other aesthetic aspect of your page is part of the user interface. UX, or user experience, is how users interact with your app--what happens when they click certain buttons and links and, more broadly, the typical steps they would take to get the most use out of your app.
The Process
Typically, design follows the following process to pin down the UI and UX:
- User Research & Features
- User Flow
- Site Map
- Low Fidelity Mockups
- High Fidelity Mockups
User Research & Features
Before you start thinking about where things go, you need to think about what you’re making. Think about who’s going to use what you’re making. What features will they find the most useful, how should you use this to prioritize the features that will be in what you’re making?
How do I do this?
- Make a list of features for your product. Be ready and willing to rearrange, clarify, add, and remove items as you research your user.
User Flow
Now that you have the features pinned down, think about how the user will access these features. How should you organize the information in a way that is best suited to their needs. What do they do first, what follows, etc.
How do I do this?
- Flowcharts are often a useful tool! Drawing them on paper or whiteboards is really easy, but if you want to use a tool like Lucidchart, that works too.
Site Map
It’s time to turn your User Flow into a Site Map. A Site Map is a graph of all the screens in your app. What will be on each of them? What purpose do they serve? How do they connect?
How do I do this?
- Pencil and paper is a very useful tool. Draw screens, descriptions of their contents, and write down what needs to be on each one. You’re just expanding your User Flow into a series of deliverables.
Low-fidelity Mockups
These are mockups that give a rough presentation of the app’s design and where people might interact with it. They lack significant detail of the minute details of the design, such as color schemes, and (if computer-based) are generally not clickable.
Examples of low-fidelity mockups include:
- A basic sketch of the app on the back of a napkin
- A simple, bland static wireframe made with a computer software
- A slightly more detailed sketch on printer paper
Although relatively low in quality, low-fidelity mockups are a vital part of the design process and come with numerous advantages including:
- They are quick to make. New designs can be interacted quickly.
- Since the design is very simple, feedback isn’t as substantive as often desired.
They are a great starting point to get rolling with a design for your app. However, once you venture out of the early-concept phase, you will want to start moving towards making a high-fidelity mockup
How do I make these?
- Draw screens on post-its, paper, a whiteboard, or in an app on a tablet.
High-Fidelity Mockups
High fidelity mockups are very close to the actual design, with all the same colors, shapes, and sizes of the actual final product. Using mockup software, these are often made to feel like the final app, allowing users to scroll and click buttons to see the corresponding action/screen and change take place.
High-fidelity mockups come with many advantages over low-fi ones, including
- There are more representative of the real look and feel of the app (which allows for more useful feedback)
- They don’t require a facilitator, since the user flow is mostly accounted for, so you can watch a user navigate the app on their own to see if they struggle at all
- This allows you to catch usability issues not discernible in the lo-fi mockups
- High-fi mockups are relatively difficult and time-consuming to make
- Users may not be as willing to give feedback because they see a practically finished product, not one that is a work-in-progress.
So what's the best solution? Start by rapidly making low fidelity mockups and presenting them to users, gaining plenty of early stage valuable feedback. Once you feel confident that the basic structure of your app is attractive and meets users' expectations, start creating your high fidelity mockup to start gaining feedback on your more granular aspects of the app, such as colors, typography, and user experience flow.
How do I make these?
UI/UX designers often use a tool called Figma:
- Site: https://www.figma.com/
- Free Educational License: https://www.figma.com/education/
- Good Tutorial: https://www.linkedin.com/learning/figma-for-ux-design-2
- Figma works in the browser, so there's no need to install extra software. It also allows multiple users to work on the same design at once much like Google Docs, so you can collaborate with your team in real-time.
More Fantastic Resources
Want to learn more about UI/UX design? Check out some of these great (and free) resources
Learn more about UI/UX design basics: https://www.linkedin.com/learning/ux-foundations-prototyping-2
Learn more about Figma: https://www.linkedin.com/learning/figma-for-ux-design-2?u=74653650
Improve your UX prototyping skills: https://www.linkedin.com/learning/paths/improve-your-ux-prototyping-skills
Learn more about general UI/UX principles https://livebook.manning.com/book/usability-matters/about-this-book/0