Info@spikeweb.com.ng +2348021411495
May 18, 2022 - BY Admin

what is ui/ux?

What’s UI design?

User interface (UI) design is about building interfaces with a focus on styling and interactivity. The UI designer’s goal is to create an interface the user finds easy to use and aesthetically pleasing.

The word “interface” refers to the access point where a user interacts with a software application (e.g., Figma, Sketch), a browser-based website, or a hardware device (e.g., a smartphone touchscreen). A UI designer explores all the interactions and behaviors a user takes with a product to create an interface that best adapts to the user’s needs.

When we talk about UI design, we talk about the stylistic choices a designer makes when creating a product, e.g., an image, button, menu bar, or footer. All of these elements will affect the user’s interaction, and so, must be planned accordingly.




What’s UX design?

User experience (UX) design is the process designers use to create products that deliver relevant and valuable experiences to users. According to Don Norman, the co-founder of Nielsen Norman Group and the one who coined the phrase “user experience,” the term includes “all aspects of the end-users interaction with the company, its services, and its products.”

UX designers create meaningful experiences by integrating elements of branding, marketing, engineering, design, and usability into a product. Their job requires extensive user research to understand their user’s mindset, feelings, and goals and to connect this information to the product.

Check out our article on the 21 main UX laws for creating winning designs.





UX vs. UI: What’s the difference?

When we talk about UX and UI, we refer to two separate concepts that meet different objectives. Although they are related and soon you will see how you need to understand their differences to use them properly.


According to Maze CEO, Jonathan Widawski, UI design “is the process of transforming wireframes into a polished graphical user interface.” In contrast, UX design requires “understanding the overall journey of your users and turning it into a product.”


In other words, if you were designing a house, “UX would be the foundation, while UI would be the paint and furniture.”


Another way to think about the differences between UX and UI design is to look at the outputs of both processes:


UX starts with a problem and ends with a wireframe or prototype. The role of a UX designer is to understand the customer journey. That means understanding the target audience, interviewing customers, defining user flows, and conducting user testing.


UI design is about using typography, images, and other visual design elements to turn a basic interface into something digestible and usable. A UI designer focuses on how the colors, typography, and images of a design connect to the brand of a product. 


Jonathan Widawski, Maze CEO & Co-founder

Although there are key differences between UX and UI, these two processes work hand in hand for a product designer. As Jonathan explains, “We shouldn’t talk about UX vs. UI. Instead, it should be UX and UI because they overlap and complement each other.”





10 UI design guidelines

Creating a successful user interface requires applying a set of design guidelines and principles. There are various well-known principles to keep in mind, like the eight golden rules of UI design from Ben Shneiderman.


In this section, we’ll look at the 10 user interface design guidelines from Nielsen and Molich, which are an updated version of Shneiderman’s principles and are the gold standard when it comes to ensuring your designs fulfills all requirements.

  1. Visibility of system status: Systems should offer appropriate feedback within reasonable time. For example: when a user clicks on a button, it changes its background color as well as its font.
  2. Match between system and the real world: Use familiar language your target audience can understand. Design your UI using symbols and objects that relate to the real world. For example: add a magnifying glass icon to a search bar.
  3. User control and freedom: Give users space to go back and undo or redo previous actions.
  4. Consistency and standards: Standardize every UI element to guarantee consistency throughout your system.
  5. Error prevention: Reduce any potential errors in your system, and flag them when they happen so the user can fix the issue right away.
  6. Recognition rather than recall: Minimize the amount of information a user needs to remember by offering help within the specific context in which a user is. Avoid giving them long tutorials upfront.
  7. Flexibility and efficiency of use: Let users customize or tailor their interface to suit their needs so that frequent actions can be achieved through shortcuts and touch gestures.
  8. Aesthetic and minimalist design: Keep both your content and visual design simple. The user shouldn't get distracted or confused by unnecessary elements that get in their way.
  9. Help users recognize, diagnose and recover from errors: Highlight your error messages and use plain language that give specific solutions to your user's problems.
  10. Help and documentation: Ensure your documentation is easy to find and understand. Present the documentation in context right at the moment that the user requires it and make it actionable.

A step-by-step look at the UI design process

The user interface design process happens during the later stages of the product development process after a team of designers, developers, and product manager carries out extensive user research. In this sense, the UI design process builds upon what the UX design process has defined, adding the right styles and interactions to create an ideal user experience.


Although we will present the following steps linearly, you should be aware that the following process isn’t necessarily so; some of these steps may change as the design changes after rounds of testing and requires iterating between each step.




Understand the problem you are trying to solve

The UI design process starts by defining the problem your team needs to achieve. For that, design teams use design briefs, which provide a general understanding of what the design project is all about.


The design brief helps UI designers understand the context of their work as their job comes after the user experience has been defined and developed. It also facilitates the definition of responsibilities and deadlines, and the discussion of the project as a whole.


Inside the brief, you will see what the project is all about, including:

  • Background: What's the cause behind the project? What is it about? What does it entail?
  • Goals: What are you trying to get from this project? How does it benefit the user? How does it benefit the company?
  • Success criteria: What metrics, KPIs, and OKRs are you using to define the project's success?
  • Target audience: Who is this project targeting?
  • Team structure: Who's involved in this project? What are the responsibilities for each member? Who are the stakeholders involved?
  • Scope: What is the team required to do to complete the project?
  • Deadline: When will this project be delivered?




Understand the problem you are trying to solve

The UI design process starts by defining the problem your team needs to achieve. For that, design teams use design briefs, which provide a general understanding of what the design project is all about.


The design brief helps UI designers understand the context of their work as their job comes after the user experience has been defined and developed. It also facilitates the definition of responsibilities and deadlines, and the discussion of the project as a whole.


Inside the brief, you will see what the project is all about, including:

  • Background: What's the cause behind the project? What is it about? What does it entail?
  • Goals: What are you trying to get from this project? How does it benefit the user? How does it benefit the company?
  • Success criteria: What metrics, KPIs, and OKRs are you using to define the project's success?
  • Target audience: Who is this project targeting?
  • Team structure: Who's involved in this project? What are the responsibilities for each member? Who are the stakeholders involved?
  • Scope: What is the team required to do to complete the project?
  • Deadline: When will this project be delivered?




Define screens and user behaviors

The design brief should indicate the screens your team will design your UI for; if it's not clear, discuss it with the UX designers. Your goal is to visualize everything your team needs to work on and how the screens that make up the user journey should interact according to the users' behaviors.


Note that we are talking about screens and not pages. It’s best to think about them this way because pages are associated with a web browser, whereas a screen applies to mobile devices, apps, and browsers. It also emphasizes the changes in resolutions and layouts each screen will have once they adapt to different devices.


Then, you will need to design a user flow, which shows the process a user takes to complete a given task. A user flow will help your team analyze the interactions between each screen and how the user progresses along in their journey.


While this is the focus of UX design, which is separate to the process described in this guide, as a UI designer you need to understand the user flow.


Alternatively, you can work together with the UX team to clearly define it before moving forward with the next steps. Doing so will allow you to be aware of all states in the journey and design the necessary screens.

0 ITEMS
₦ 0