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 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 agency 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.

UI vs UX design

If user interface design is how a user interacts with design, user experience (UX) encompasses the feelings and reactions the user has during their experience on the website or app. UX can be positive, as when you easily find the information you’re looking for in the dropdown menu. Or it can be negative, as when a page takes too long to load or a link is broken.

Relevant Terms

Interaction Design

Interaction design is the design of interactions between a user and a digital product or website. It plays a critical role in the overall user experience design.

System UI

Any display elements that can be customized and that are independent of apps on the device, are referred to as System UI.

Responsive Web Design

Responsive web design is a method that uses coding strategies to optimize a website’s layout for viewing on various devices (desktop, tablet, and mobile).

Let’s start writing your success story.

Book a Call