What Is the Difference Between UI and UX? - An Explanation for Newbies

Style Guides & Mood Boards

Digital designs must give thoughtful consideration into how a brand should be reflected through visuals, be it the product’s user interfaces, much like how writers follow guidelines to maintain consistency while writing, a style guide helps to keep all visual aspects of a product consistent throughout its whole design process and beyond. This documentation consists of standards for typography, color palettes, imagery, logos, icons, and other visual elements.

About mood boards, these are a collection of images or design samples that inspires designs to establish the tone or aesthetic they would like to achieve in the upcoming product. The mood boards are often decided partially based on the user insights as well.

Visual Design

This is the time when the UI team gets to actual work - to craft the visual look and feel through layout, color schemes, typography, icons, buttons, and other graphical assets. With eyes on the brand and user research insights, designers must balance creativity and practicality to roll out a visually appealing interface that promises a positive user experience.

Wireframing & Prototyping

This phase involves both UX and UI design processes, and it aims differently. In user interface design, wireframing is about creating a layout of the product with visual components included, but they are more detailed than in UX wireframes.

Prototyping goes afterward to bring interactivity to visual designs. Designs utilize different tools, such as Adobe XD, Figma, Sketch, etc., to produce an interactive and clickable presentation of the final product’s interface design. UI prototyping interactivity is not as sophisticated as UX prototyping, but the latter is more advanced and closer to the finished product. Prototyping in UI design is useful to validate the visual design’s usability and make sure it aligns with the UX design.

Interactive & Responsive Design

After establishing the foundation with wireframes and prototypes, interaction designers are involved in refining interactive elements and features (E.g., buttons, menus, animations, hover effects, micro-interactions, feedback mechanisms, and touch/gesture design). In other words, interaction design is about defining how a user interacts with these elements. For instance, when a button is clicked, what will happen?

The UI building also covers responsive design. This process tends to the final product’s responsiveness across different device screen sizes. Implementation of responsive design ensures the delivery of consistent, optimized user experiences on all devices, be it desktop, tablet, or mobile screens.

User Testing & Feedback

In the same vein as UX design, testing the UI design in a real-world scenario and having genuine users interact with the product’s interface are required. The output will be recommendations for design enhancements and actionable insights for the UI development team.

The Role & Responsibilities of a UI Designer

A dedicated UI designer is primarily responsible for creating attractive and user-friendly product facades showcased to users. The UI developer works together with UX designers, the development team, and stakeholders to make sure the final polished UI meets the functional requirements and provides an engaging and intuitive experience as detailed in the UX design.

Tasks

• Create a design system and graphical assets.
• Decide the appropriate typography, colors, iconography, buttons, and menus in alignment with brand standards and user research insights.
• Produce visual designs.
• Build wireframes and prototypes from low-fidelity to high-fidelity that incorporate visual elements into the UI design.
• Build a responsive layout that adapts well across devices.
• Collaborate with developers to ensure the technical implementability of designs.
• Carry out usability tests to validate design decisions and detect improvement areas.

Design Skills

• Graphic design expertise.
• Visual communication - Skills in visual storytelling and presenting design ideas clearly.
• Knowledge of wireframing and prototyping.
• A basic understanding of front-end development languages, including HTML/CSS/SASS/LESS, JavaScript (to a certain extent), etc.
• Familiarity with developing tools like Bootstrap, Material Design, or Semantic UI.
• Proficiency in design and prototyping tools (For example, Adobe XD, Sketch, or Figma).
• Usability testing skills.

The Role & Responsibilities of a UX Designer

UX designers focus on cultivating an end-to-end user journey. They must rely on the testament of research findings to assess, understand, and predict how users actually feel when using a digital product from beginning to end.

With insights derived from the UX research and design process, designers communicate with their UI counterparts to come up with interface designs that are adaptive, usable, and visually compelling.

Tasks

• Conduct user research through online or offline methods, including interviews, usability testing, surveys, and analytics analysis.
• Develop user personas to map out different groups of users.
• Develop wireframes, flowcharts, sitemaps, and storyboards that reflect a user’s perspective before, during, and after usage.
• Produce low-fidelity wireframes for testing concepts with actual users.
• Analyze user behavior data to provide data-driven design recommendations.
• Work with UI developers to define visual standards for the product.

Design Skills

• Good presentation and communication skills.
• Basic knowledge of coding.
• Knowledge of wireframing and prototyping.
• A thorough understanding of human-computer interaction principles.
• Empathy towards users’ needs and feelings when using a digital product.
• UX writing (Optional in case the project already has a dedicated UX writer on board).