Home
UI and UX

UI vs. UX Design



1. Definition and Differences between UI and UX

UI (User Interface) Design

  • Focuses on the look, style, and interactivity of digital products (e.g., apps, websites).

  • Involves designing buttons, icons, color schemes, typography, and layout.

  • It is about crafting individual screens and elements users interact with directly. 

UX (User Experience) Design

  • Encompasses the overall feel, structure, and logic of the user’s journey through a product.

  • Concentrates on solving user problems, structuring content, and ensuring a seamless flow of tasks.

  • Involves user research, persona creation, wireframing, and usability testing. 

Key Differences:

AspectUX DesignUI Design
FocusUser’s overall experience, journey, and satisfactionVisual and interactive elements (buttons, etc.)
ProcessStarts with user research and journey mappingFollows UX with visual detail implementation
Concerned withStructure, flow, logic, usabilityLook, feel, responsiveness, accessibility
Product ExampleNavigation flow for an e-commerce purchaseDesign of the checkout button, colors, icons

  • UX is about how it works; UI is about how it looks. 

2. Role in Product Development

  • UX design usually comes first, defining the structure and mapping out the user flow.

  • UI design builds on the UX foundation, adding visual and interaction layers. 

3. Relevance in Design Thinking (Core Stages)

  • Design Thinking is a user-centered, iterative approach involving both UX and UI skills.

  • Five key iterative stages:

    • Empathy (understanding users)

    • Define (problem statement)

    • Ideate (brainstorming solutions)

    • Prototype (wireframes, mockups)

    • Test (usability testing)

  • UX is foundational to most stages; UI is more relevant at prototyping and testing stages but informed by earlier steps.

4. Divergent and Convergent Thinking

  • Divergent Thinking: Generating many creative ideas/solutions (e.g., brainstorming for new layouts). 

  • Convergent Thinking: Selecting and refining the best ideas based on user needs, business goals, and feasibility. 

  • Both are cyclical in design, promoting creativity and focus.

5. Brainstorming and Gamestorming

  • Brainstorming: Facilitates the divergent thinking phase; teams suggest many ideas without judgment.

  • Gamestorming: Uses playful activities and games to generate ideas and insights collaboratively, promoting creative solutions and engagement. 

6. Observational Empathy

  • Empathy is crucial—designers observe and listen deeply to users, understanding their pain points and motivations. 

  • Empathy allows the creation of meaningful, user-centric designs, not just functional ones.

  • Methods: Observing actual user interactions, conducting interviews, mapping user journeys.

Quick Summary

  • UX = holistic experience, structure, usability, and research.

  • UI = visual interface, graphic elements, interactivity.

  • Both are essential, iterative, and require understanding real user needs to create successful digital products.