Fundamentals of UI/UX
UI (User Interface) is the visual and interactive elements of a digital product through which users interact with the system. Digital products can be mobile apps, web apps, websites, ATMs, TV remotes and so on.
Examples of UI elements
- Buttons
- Icons
- Menus
- Text fields
- Images
- Colors
- Typography
UI Design
Section titled “UI Design”User Interface (UI) Design is the process of designing the visual elements of a digital product — such as buttons, colors, typography, icons and layouts — through which users interact with the system.
UI Design focuses on:
- Colors
- Typography
- Buttons
- Icons
- Layout
- Visual consistency
Example
Section titled “Example”In a food delivery application, the order button, navigation menu and food images are part of the user interface.
UX (User Experience) refers to the overall experience, feelings and satisfaction a user has while interacting with a product.
UX focuses on:
- Ease of use
- Efficiency
- Satisfaction
- Solving user problems
Example
Section titled “Example”In a food delivery app:
| Good UX | Easy login · Fast food search · Simple checkout · Quick payment |
| Bad UX | Difficult navigation · Too many steps · Confusing screens |
UX Design
Section titled “UX Design”UX (User Experience) Design is the process of improving a user’s overall experience while interacting with a product.
Key features
- User research
- Usability
- Accessibility
- User satisfaction
- Problem solving
Exam technique
Section titled “Exam technique”Structure your answer as: Definition → Major keywords → Example → Conclusion.
Then use GOALS to compare UI and UX:
| GOALS | UI (User Interface) | UX (User Experience) |
|---|---|---|
| G — Goal | Make the product attractive and interactive. | Make the product easy, useful and satisfying. |
| O — Output | Screens, buttons, icons, layouts. | User flows, journey maps, improved experiences. |
| A — Area of focus | Visual appearance and presentation. | Usability and user satisfaction. |
| L — Led by | UI Designer. | UX Designer. |
| S — Skills | Typography, color theory, layout design. | User research, usability testing, problem solving. |
UI Designer
Section titled “UI Designer”A UI Designer is a professional who designs the visual appearance of a digital product. They focus on creating attractive and interactive interfaces that users can see and use.
Definition
Section titled “Definition”A UI Designer is responsible for designing the visual elements of a product such as buttons, colors, icons, typography and layouts.
Responsibilities
Section titled “Responsibilities”- Design screens and interfaces
- Choose colors and typography
- Create buttons and icons
- Maintain visual consistency
- Develop design systems and components
- Ensure the interface is visually appealing
Skills required
Section titled “Skills required”- Color theory
- Typography
- Layout design
- Visual hierarchy
- Prototyping
- Attention to detail
Tools used
Section titled “Tools used”- Figma
- Adobe XD
- Sketch
Example
Section titled “Example”In a food delivery app, a UI Designer decides:
- The color of the “Order Now” button
- The placement of icons
- The font style and size
- The appearance of the home screen
UX Designer
Section titled “UX Designer”A UX Designer is a professional who focuses on improving the overall experience of users while interacting with a product. They ensure that the product is easy, useful and satisfying to use.
Definition
Section titled “Definition”A UX Designer is responsible for researching user needs and designing experiences that help users achieve their goals efficiently.
Responsibilities
Section titled “Responsibilities”- Conduct user research
- Understand user needs and problems
- Create user flows and journey maps
- Develop wireframes and prototypes
- Perform usability testing
- Improve user satisfaction
Skills required
Section titled “Skills required”- User research
- Problem solving
- Critical thinking
- Information architecture
- Usability testing
- Communication skills
Tools used
Section titled “Tools used”- Figma
- FigJam
- Miro
Example
Section titled “Example”In a food delivery app, a UX Designer decides:
- How many steps are needed to place an order
- Whether users can easily find restaurants
- How to simplify the checkout process
- How to reduce user frustration