The phrase UI/UX design has been thrown around a lot lately. You might have a friend who just got a job as a UI/UX designer. Or your development team recommends that you go through a UI/UX design phase with them. As software technology intersects with every facet of our daily lives, it becomes more and more important for us to understand these terminologies. In this article, we are going to explain what exactly is UI/UX design, give a breakdown of each, and why both matter to the end user.
"UI" stands for user interface. It is mainly what users see as they browse through a website or an app. UI design has a few primary focuses. Let's take Instagram's UI as an example. A UI designer at Instagram would put a lot of focus on the app's topography — the study of how texts are laid out within a website or mobile app. They would be interested in the app's white space or negative space, which is what gives an app structure between different design elements.
The UI designer would also focus on the colors within the app. Colors are chosen very specifically to optimize readability and user retention. A UI designer would ensure there is enough contrast of colors within the app to make the viewing experience amazing for the user. Furthermore, they are also interested in icon design. So the icons, dots, and arrows you tap within the app all came from their work. Finally, a UI designer is there to ensure that the screens they design look good on all devices. In the case with Instagram, it would be all web browsers (both desktop and mobile), all iPhone models, and all Android phones.
"UX" stands for user experience. UX design is more of a process rather than a practice. As you can see in the diagram below, prototyping (UI design) is only one step in the entire UX process. A UX designer can have many different focuses such as research, brainstorming, and reporting. Starting with research, a UX designer needs to conduct user interviews and create user personas or user roles. They are normally also charged with creating user stories and journey maps. These highlight the journey and behavior of the user as they go through the application.
A UX designer that's focused on brainstorming will most likely be in charge of mapping out user flow diagrams and drawing up wireframes. User flow diagrams outline the steps that a user will take as they go from screen to screen within the app. Wireframes are rough skeleton representations of the UI. It normally covers the general layout of the buttons and components without adding the colors. Finally, a UX designer is responsible for reporting. This includes things such as customer feedback interviews and analytics reporting.
Why Both Matter / Final Thoughts
To summarize, UX design embodies UI design. However, not all UX designers are UI designers. And vice versa, not all UI designers are UX designers. They are normally completely different roles with different focuses. UI designers primarily focus on the look and feel of the application, while UX designers focus more on user journeys, user feedback, and user analytics.
If you are curious to learn more UI/UX design concepts, you can check out our blog on why you need a design system here. If you have any questions regarding software development in general, feel free to reach us at firstname.lastname@example.org!