The short definitions
UX (user experience) design is the work of figuring out how a product should work – what the user is trying to do, how they should do it, and how each step should flow. UX is about structure, logic and decision-making.
UI (user interface) design is the visual layer – how the product looks. Colours, typography, spacing, buttons, icons, layouts. UI is what the user sees on screen.
Both matter. A beautiful UI on a confusing UX is a frustrating product. A brilliant UX in an ugly UI looks untrustworthy.
UI vs UX – the difference in practice
A concrete example. Imagine a food delivery app.
UX work:
- How does the user find a restaurant?
- What information do they need to decide?
- How do they customise the order?
- How do they pay?
- How do they track delivery?
UI work:
- What does the search bar look like?
- What font is used for restaurant names?
- What colour are the CTA buttons?
- How is the menu laid out?
- What does the order tracking screen look like?
UX is the skeleton. UI is the skin.
The UI UX design process
A typical end-to-end design project:
- Research – user interviews, analytics, competitor scans
- Information architecture – sitemaps, content models, navigation
- User flows – step-by-step paths through the product
- Wireframes – low-fi, structure-only layouts
- Visual design / UI – hi-fi mockups in brand
- Prototyping – clickable flows for testing
- User testing – watching real people try to use it
- Design system – reusable components, tokens, documentation
- Developer handoff – specs, assets, annotations
Small projects skip some steps. Enterprise projects layer on more. The order rarely changes.
What you get from a UI UX project
- Research findings document
- Sitemap and flows
- Wireframes (Figma)
- Hi-fi mockups (Figma)
- Clickable prototype
- Design system / component library
- Developer handoff package
What good UI UX looks like
A few signals:
- The user can figure out what to do without reading instructions
- Forms ask only what's needed, in the right order
- Error states tell you what went wrong and how to fix it
- Loading states reassure rather than leave you guessing
- Empty states teach, rather than just showing a blank page
- Mobile works without shrinking the desktop site
We're a Mumbai UI UX team that researches, designs, prototypes and builds. Reach us on +91 98703 08481 or work@gigmoz.com.
Further reading from primary sources
UI UX has more opinion than evidence attached to it. These are the references we actually use on projects:
- WCAG 2.2 quick reference – the accessibility standard, which is also a usability standard.
- Material Design 3 – Google's design system, useful as a reasoned reference even when you are not using it.
- Apple Human Interface Guidelines – the equivalent for iOS, and the closest thing to a rulebook for app conventions.
- Core Web Vitals – because a design that loads slowly is a design that fails.