Visual design

Bringing brands to life through digital. Beautiful, usable and scalable.

Enhancing the user experience

Our visual design process is focused on user interface design. The role of visual design is to transfer a brand’s strengths and style to a product’s user interface and optimise the user experience.

User interface design is responsible for visually guiding the user through a product’s interface via interaction design, across all sizes and platforms while always adhering to accessibility standards.

Digital design systems (DDS) approach

We use atomic design as a guiding methodology to deliver robust and saleable digital products. We focus on the idea of design as a system to ensure consistency and efficiency across a client’s entire digital landscape.

These design systems are based on the practice of splitting the UI (user interface) into smaller, more manageable parts with clear names. Each of these parts fall in one of six distinct groups:

Styles

The first of these six group is styles. We define the project’s core design
elements. Fonts, typography, primary and secondary colours are all
meticulously specified. Afterwards these are used throughout the system.

Layout

Layout is a more abstract collection of principles. For example, spacing
rules, regions of the page and top-level layout principles. By defining them
like this, it is easy for other designers to come into a project and use the
existing styles and guidelines.

Elements

Elements are the project’s smallest reusable parts. A few well-known examples of elements are things like: buttons, links, inputs and drop-downs. Each of them is defined, along with all their states; such as hover, focus and disabled buttons.

Components

When working on designing apps and websites, most blocks on the
screen are components. A component can be anything that uses at least
a few elements. Things like cards, heroes and navigation menus are
traditional examples of components, but they don't necessarily look modular.

When designing components, we also create versions of it for each of the
project’s responsive sizes, or breakpoints. This way we never have to
backtrack to screens designed weeks ago and make them fit on a
smartphone afterwards. The responsive requirements are agreed upon in
advance with the client and each component is designed accordingly.

Patterns

A pattern is a part that has multiple components inside it. They define
how to components inside it should behave.

Templates

The last group are the actual templates of the project. Each template
consists of an arrangement of patterns and components.