What does good UI design look like? Principles and examples to delight and inspire you
UI design (or user interface design) refers to the look, feel and functionality of a digital product. It covers the design and curation of buttons, graphics, typography, colour palettes, spacing, animations and more. It’s basically everything you see and interact with when you visit a website or use an app on your phone. When UI design is done well, it has the power to delight the user, guide them through the completion of specific tasks and to convey brand values and personality.
Understanding GUIs and UI Design
A Graphical User Interface (GUI) is a visual interface that allows people to interact with electronic devices such as computers, smartphones, and tablets. Unlike older text-based interfaces, which require users to type specific commands, GUIs utilize design elements to facilitate interaction. Within the context of GUIs, User Interface (UI) design focuses on creating user-friendly layouts that are both aesthetically pleasing and functional.
A well-designed GUI enhances user experience by leveraging design elements to provide clear navigation, intuitive controls, and visual feedback that guides users seamlessly through tasks. Some of the UI elements that are well-known to users include:
- Windows: Separate workspaces for specific tasks
- Icons: Visual representations of tools or functions, activated by clicking
- Buttons: Switch-like elements that trigger actions
- Menus: Organized lists of options related to the current task or application
Logic-Driven UI Design Tips
User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. However, much of what makes up an intuitive, accessible, and beautiful interface design can be learned through a system of logical guidelines. Here are some essential tips to improve any interface design:
1. Use space to group related elements
Breaking up information into smaller groups of related elements helps to structure and organise an interface. More closely related elements should generally be closer together to show that they’re related. One effective method is using an 8 point grid, where all interface elements align to a series of vertical and horizontal guidelines separated by 8 points.
2. Ensure sufficient contrast ratios
Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. To ensure accessibility and readability, you should follow these standards:
| Element Type | Required Contrast Ratio |
|---|---|
| Interface elements (icons, components) | 3:1 contrast ratio |
| Body text and headings | 4.5:1 contrast ratio |
3. Maintain Consistency
Consistency in UI design means that similar elements look and work in a similar way. This predictable functionality improves usability and reduces errors, as people don’t need to keep learning how things work. For example, if you outline all icons with a 2pt stroke weight and rounded corners, it improves consistency and gives each icon a similar visual weight.
4. Additional Design Guidelines
- Create a clear visual hierarchy: Highlight the most important elements on the page.
- Use colour purposefully: Don’t rely on colour alone as an indicator.
- Typography: Use a single sans serif typeface and limit the use of uppercase.
- Avoid pure black text: Use dark grays for a softer feel.
- Line height: Use at least 1.5 line height for body text to improve readability.
Examples of Exceptional UI Design
The following UI examples are living proof that rules don’t exactly limit the things that UI designers can do in order to push the boundaries and create unique experiences for users.
Butter
Butter is an online platform designed to make virtual collaboration “as smooth as butter”. Popping colours, cute graphics, bold typography, and even the odd GIF or two perfectly convey the brand: down to earth, straightforward, and fun to use. Despite the bright colour choices, their UI design is clean and clear with plenty of white space and contrast.
Omio
Omio is a travel website for comparing and booking tickets. It utilizes a calm colour palette, beautiful custom illustrations and seamlessly responsive design. You’ll also notice excellent use of visual hierarchy to highlight the most important elements on the page, effortlessly guiding the user to accomplish their goals.
Protagonist
Protagonist is an app for readers that achieves a “Wow” effect through Parallax scrolling. This is a web design technique where the background moves slower than the foreground, creating a 3D effect as you scroll down the website. It creates the illusion of depth, giving you the feeling you’re moving immersively through the website.
Corporate and E-commerce Design
Professional corporate UI examples are often elegant and professional, utilizing stunning hero images that grab attention. In e-commerce, user-friendly search bars and filters make finding the perfect item a breeze, creating a smooth and enjoyable shopping experience. Whether it is a travel booking interface or a restaurant landing page, the design should always be fully responsive, ensuring it looks fantastic on both mobile and desktop.