Being responsive to device and context
When designing a website, we start with the goal that all public-facing aspects of the site will be responsive, which means working well from across large desktop screens all the way to the smallest phone screens, and everything in between. Whenever necessary and possible, we design novel interactions for each device type and usage context so the contextualized experience for the screen size, operating system, and device feels familiar for everyday users.
Considering interaction models and accessibility
During the design phase, we consider how each element will be interacted with using mouse, touch, keyboard, and accessibility devices such as screen readers. We follow WCAG 2.X AA guidelines and best practices to make the website accessible and enjoyable to use for all visitors. This includes font sizing, spacing, and colour contrast considerations, along with other methods of facilitating understanding, legibility, and content engagement.
From concept to build
Throughout the design process, designers work with the developers to ensure that all interactions and accessibility needs that have been considered are designed in a way that is manageable to implement. Further, we support developers through use cases, prototyping, assets, and product reviews to facilitate a more seamless process for meeting product goals and experiential objectives.
Our design process is iterative and collaborative. We strive to present design iterations early and often for feedback and review. This allows for consistent progress and quick revisions toward shared objectives.
Reducing uncertainty through design systems
As we work through the design of individual pages, we begin to create a design system for the website. This system consists of standardized colours, fonts, spacing, components, and layouts. The design system is useful for development of the website, as well as future revisions and additions, as it acts as a guide to how items should look, feel, and interact across the site.
An atomic design system for consistent user interfaces
Our approach to interface design is to create several pages from the website in order to establish a visual language and general structure. Once we have stakeholder agreement, we begin to break down the pages into their component parts, identifying which aspects of a page are unique and which are reusable across the website.
Using the Atomic Design approach, we break each aspect of the site down to its smallest parts (the “atoms”; for example, a button), which are then combined into a variety of interfaces that be used to create the website UI and user experience.
Types of UI elements
Layouts
Layouts are the structure that contains the content and components of each webpage. They are used to determine how content will be presented within the overall page structure, and how they respond to various screen sizes from desktop to smartphone. For example, a two-column layout may adjust to a single-column layout when on a smartphone.
Templates
A page template is the wrapper around the page content and includes elements that repeat across the entire site, such as the website header, primary menu, and footer.
Components
A page design is made up of a layout that contains components. Components are all the pieces that make up the structure of the webpage. This includes base-level components, such as a button, which can’t be broken down into a smaller unit, to larger component systems, that take multiple base components and mix them together to create larger component structures.
Tokens
Design tokens include values for the colour, typography, icons, and spacing used throughout the website.
The value of outlining a design system and using UI best practices
Strong understanding and documentation of how all of these elements work together is key to an effective UI that can be replicated by developers in an organized way.
It’s these kinds of structured UX best practices that ensure digital products meet the needs of their users, for a variety of potential use cases and workflows, while optimizing the process to deliver this UI.
Ready to bring stronger UX/UI practices to your team?
Get in touch