In the web world, UX and UI are mistakenly used as interchangeable terms, and are often squished together as in “UX/UI” when referring to some ambiguous aspect of web design. A quick look into the backronyms (yep new word of the day) might give us a little more insight into how these two processes differ:
UX refers to User Experience Design.
UI stands for User Interface Design.
Okay so what does that mean?
Let’s imagine a standard bicycle. The handle bars, the brakes and seat are part of the UI, which make up the interface that you interact with. The feeling you get when riding the bike is the UX, which tells you how smooth it rides, how safe it is and how fast it goes. If, for example, the company wanted to produce a fast bicycle, the UX designer would research about the elements that constitute speed and add them to the basic design or blueprint of the bike, this might include the gears, material of the frame, type of handle bar, etc. The UI designer would then make sure that all of the elements look and feel consistent with the bike as a whole, which could be done through colour, shape, and the tactile elements that add certain character to the way it’s felt.
From our bicycle analogy we can see that the role of a UX designer is to create a blueprint, containing the most important features of the product that fulfill a specific user experience or need, such as high speed riding. We can also see that the role of the UI designer is to take this blueprint and create a model of how the product should look and feel, by providing a specific aesthetic and outlining the details of each and every element of the bike.
Thus, both UX and UI design work together to provide an experience that is both functional and pleasurable. Where UX is about making products and interfaces useful, UI is about making them beautiful and engaging.
So why is this important to anyone who is not a designer?
The reason this is important, especially to people looking to buy services from designers and/or design agencies, is because understanding the differences between UX and UI can help in the budgeting and time distribution of a project, as well as knowing how to communicate with the production team and what to expect of them.
Let’s move on from analogy to practicality regarding UX and UI in web.
What is User Experience Design in web development?
The main role of a UX designer is to take the needs of the user and client and create a cohesive map to ensure functionality, user satisfaction and meet the purpose of the product. Normally, UX developers work with marketing teams and product developers in creating deliverables such as: user flow charts, specification guides, and wireframes.
An example of a UX designer’s work is the famous user flow chart, which narrates the user’s journey from point A to point B.
Figure 1. Flow Chart
This is a simple user flow that shows the main pages of a site, as well as the starting and ending points of the general user journey, from home page to purchase of the book. Normally you can expect to see a flow chart like that in very early stages of the product development, which soon evolves into a more detailed chart outlining the different assets contained in each of the pages and the decisions the user might take throughout the site - literally mapping a user experience.
Figure 2. Flow Chart Detailed
During the early stages of the design process it is possible to expect at least one detailed flowchart mapping the user journey through your site. The next step would be, in most cases, a set of wireframes that set the layout of each page, establishing a hierarchy of information based on user and client needs. In order to create this hierarchy of information, the UX designer would normally conduct an in depth research of the product, including a competitive analysis with the aim to define a minimum viable product (MVP).
Wireframes can be anything from black and white documents with content boxes and Lorem Ipsum text. Is a way to show the client the way information would be structured to maximize visibility of certain actions and assets. Together, the flowchart and wireframes, are created in order to create a visual consensus between client and designer about the specific needs of the client and how the user will experience them. These documents are crucial in helping clients know from an early stage that the production team knows exactly what it is that they want.
Figure 3. Wireframes
For the purposes of this article, this is as far as we will talk about the role of UX in web development; however, the job of the UX designer does not end here. There is rigorous testing of user experience required even after the site has been launched, at which point the UX designer must continue to ensure that users are having their needs met while constantly improving and evolving the site.
What about User Interface Design in web development?
Okay, so by now we know that UX design is responsible for the blueprint or foundation of the product. We could say then that UI is the “bling bling”, is the “pimp my ride” of a website. It takes the structure and the blueprint and creates a prototype that brings feelings and looks into play.
UI designers work closely with UX designers, but also with marketing teams and clients, in order to create a look and feel that aligns with the values of the company, and also with the intention of the site. UI designers are in charged of determining the degree of playfulness, seriousness, elegance, and other characteristics that awake particular emotions on users.
Figure 4. Mockup
Aspects of UI design in web range from typography, color, photo treatment, graphic elements, illustrations and spacing between elements. Thus, what is commonly referred to graphic design is the work of UI designers, which is improved by and built on the work of UX designers. Another type of UI design is animation design on the web. How buttons behave when hovered on, the way transition animations look like when loading between pages, or the famous parallax effects that occur when scrolling through the site, these are all aspects of UI design that are carefully crafted to elicit certain emotions when users navigate the site.
If you’re thinking that UI design is the most important player in the experience of the user, think again. UI is one important dimension of the experience and is primarily focused on aesthetics, which is better performed when it enhances the functionality of the site; however, it is UX that lays down the foundational experience of the user, which is to successfully take users from point A to point B.
Good, we’ve done it! We’ve uncovered the mystery of UX and UI design, at least at its most basic level.
In the web world, UX and UI are mistakenly used as interchangeable terms, and are often squished together as in “UX/UI” when referring to some ambiguous aspect of web design. A quick look into the backronyms (yep new word of the day) might give us a little more insight into how these two processes differ:
UX refers to User Experience Design.
UI stands for User Interface Design.
Okay so what does that mean?
Let’s imagine a standard bicycle. The handle bars, the brakes and seat are part of the UI, which make up the interface that you interact with. The feeling you get when riding the bike is the UX, which tells you how smooth it rides, how safe it is and how fast it goes. If, for example, the company wanted to produce a fast bicycle, the UX designer would research about the elements that constitute speed and add them to the basic design or blueprint of the bike, this might include the gears, material of the frame, type of handle bar, etc. The UI designer would then make sure that all of the elements look and feel consistent with the bike as a whole, which could be done through colour, shape, and the tactile elements that add certain character to the way it’s felt.
From our bicycle analogy we can see that the role of a UX designer is to create a blueprint, containing the most important features of the product that fulfill a specific user experience or need, such as high speed riding. We can also see that the role of the UI designer is to take this blueprint and create a model of how the product should look and feel, by providing a specific aesthetic and outlining the details of each and every element of the bike.
Thus, both UX and UI design work together to provide an experience that is both functional and pleasurable. Where UX is about making products and interfaces useful, UI is about making them beautiful and engaging.
So why is this important to anyone who is not a designer?
The reason this is important, especially to people looking to buy services from designers and/or design agencies, is because understanding the differences between UX and UI can help in the budgeting and time distribution of a project, as well as knowing how to communicate with the production team and what to expect of them.
Let’s move on from analogy to practicality regarding UX and UI in web.
What is User Experience Design in web development?
The main role of a UX designer is to take the needs of the user and client and create a cohesive map to ensure functionality, user satisfaction and meet the purpose of the product. Normally, UX developers work with marketing teams and product developers in creating deliverables such as: user flow charts, specification guides, and wireframes.
An example of a UX designer’s work is the famous user flow chart, which narrates the user’s journey from point A to point B.
Figure 1. Flow Chart
This is a simple user flow that shows the main pages of a site, as well as the starting and ending points of the general user journey, from home page to purchase of the book. Normally you can expect to see a flow chart like that in very early stages of the product development, which soon evolves into a more detailed chart outlining the different assets contained in each of the pages and the decisions the user might take throughout the site - literally mapping a user experience.
Figure 2. Flow Chart Detailed
During the early stages of the design process it is possible to expect at least one detailed flowchart mapping the user journey through your site. The next step would be, in most cases, a set of wireframes that set the layout of each page, establishing a hierarchy of information based on user and client needs. In order to create this hierarchy of information, the UX designer would normally conduct an in depth research of the product, including a competitive analysis with the aim to define a minimum viable product (MVP).
Wireframes can be anything from black and white documents with content boxes and Lorem Ipsum text. Is a way to show the client the way information would be structured to maximize visibility of certain actions and assets. Together, the flowchart and wireframes, are created in order to create a visual consensus between client and designer about the specific needs of the client and how the user will experience them. These documents are crucial in helping clients know from an early stage that the production team knows exactly what it is that they want.
Figure 3. Wireframes
For the purposes of this article, this is as far as we will talk about the role of UX in web development; however, the job of the UX designer does not end here. There is rigorous testing of user experience required even after the site has been launched, at which point the UX designer must continue to ensure that users are having their needs met while constantly improving and evolving the site.
What about User Interface Design in web development?
Okay, so by now we know that UX design is responsible for the blueprint or foundation of the product. We could say then that UI is the “bling bling”, is the “pimp my ride” of a website. It takes the structure and the blueprint and creates a prototype that brings feelings and looks into play.
UI designers work closely with UX designers, but also with marketing teams and clients, in order to create a look and feel that aligns with the values of the company, and also with the intention of the site. UI designers are in charged of determining the degree of playfulness, seriousness, elegance, and other characteristics that awake particular emotions on users.
Figure 4. Mockup
Aspects of UI design in web range from typography, color, photo treatment, graphic elements, illustrations and spacing between elements. Thus, what is commonly referred to graphic design is the work of UI designers, which is improved by and built on the work of UX designers. Another type of UI design is animation design on the web. How buttons behave when hovered on, the way transition animations look like when loading between pages, or the famous parallax effects that occur when scrolling through the site, these are all aspects of UI design that are carefully crafted to elicit certain emotions when users navigate the site.
If you’re thinking that UI design is the most important player in the experience of the user, think again. UI is one important dimension of the experience and is primarily focused on aesthetics, which is better performed when it enhances the functionality of the site; however, it is UX that lays down the foundational experience of the user, which is to successfully take users from point A to point B.
Good, we’ve done it! We’ve uncovered the mystery of UX and UI design, at least at its most basic level.
Nixa
/static/nixa/images/logo-nixa.png
159
57
/static/nixa/images/new_hero_nixa.jpg
2300
839
