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