User Interface (UI) Design

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. 

Low credibility 

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.

Visually unappealing 

 If your product UI design looks amateur compared to your competitors, you’ll be hard-pressed to attract and retain customers. 

Incohesive branding 

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

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

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.

Imagery

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

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.

Iconography

Icons are easily scannable visual elements that help explain concepts with little to no copy.

Typography

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.

Style guides

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.