User Interface (UI) Design
What is user interface (UI) design?
User interface (UI) design is essentially what a user sees and what they click on. It encompasses the visual aspects of a website or app as well as how the user interacts with them. Great UI makes for a visually stunning website, but it also ensures a website is accessible and easy to use. UI elements are the building blocks of interfaces and software, they can include buttons, dropdown menus, sliders, toggles, and more.
UI vs UX?
- UI (user interface) refers to any digital element the end-user interacts with. This includes everything from sounds to dropdown lists to fillable forms, to buttons.
- UX (user experience) refers to how UI’s digital elements positively or negatively influence the user’s experience or interaction with the product. UX designers research, test, and refine product navigation and user journeys to improve accessibility, ease of use, or overall aesthetic.
The importance of UI
Your product might be fully functional, but if you don’t nail the visual components, your customers may still have a poor experience.
Improper visual hierarchy
Without clean and digestible UI design, users can struggle to find the information they need. Simply put, it’s not effective.
People equate good-looking products with high-quality products. The opposite is also true. Poor UI design is often interpreted as a poor quality product.
If your product UI design looks amateur compared to your competitors, you’ll be hard-pressed to attract and retain customers.
UI design influences how your brand is perceived, and if it’s not cohesive with your brand, it can quickly cause confusion.
UI design elements
There are a variety of UI design elements that, when strategically executed, combine to form an aesthetically pleasing and functional website or app.
Mood boarding helps to establish a visual direction for the design. This is often a collaborative effort between the UI designer and the stakeholder. A mood board can include colours, typography, images, and general website or app inspiration to be considered for the UI design.
Mockups are essentially wireframes (static blueprint of website or app) with visual elements. A mockup is a static design (you can’t navigate through pages), but it provides the stakeholder with a preview of exactly how the design will look on the website. The mockup is used to inform the development process.
Relevant imagery, when combined with great copy, helps tell the brand story. Images can also help reduce the amount of text on a page and also add human elements to a website.
Illustrations are custom design elements that help bring the brand story to life. Illustration styles range from organic and playful to sharp and professional. They help convey brand character on the website.
Icons are easily scannable visual elements that help explain concepts with little to no copy.
Font choice is based on existing or newly created brand guidelines. All text should be easy to read, with distinct headlines that are easy to scan. Font, size, and weight are all important considerations for legible typography.
A style guide is a set of rules and instructions for how a brand’s visual elements should be developed. The guide includes direction for colours, fonts, assets, button styles, and hover effects.