Interface design

Q: What is visual hierarchy in interface design?

Visual hierarchy is the organisation of the elements of an interface. It guides the user's attention. You sense it through the size of elements, their weight, their colours, their contrasts… An important element must immediately capture attention thanks to a good visual hierarchy.

Q: How do you ensure the consistency of an interface design on a complex product?

Through the design system. It lets you document each of your components (buttons, forms, modals…) with their states, usage rules, interactions… A good design system will let you keep optimal consistency and reduce your production time.

Q: Interface design and accessibility: how do you bring them together?

By integrating it from the very conception of your interface! The constraints put in place by accessibility are not a brake on creativity, they simply set a framework that makes your interface usable by as many people as possible. So you just have to take these limits into account from the start of your design.

Concept

Interface design, or UI design

Interface design (UI design) focuses on the visual and interactive layer of a digital product: layout, typography, colours, components. It's what the user sees and acts upon, distinct from the overall experience they feel. It's important to distinguish it from interaction design (how it responds) and experience design (what the user feels).

Here, we offer you an interface that is beautiful and pleasant, but above all usable! We treat every project with these three axes in mind, to offer you the very best.

What is interface design for?

designing interfaces that are consistent, legible and visually accessible
translating an information architecture and interaction flows into concrete screens
establishing and maintaining a coherent Design System

Why practise interface design?

keeping harmony in the appearance of your product and across all its variations
documenting the components of an interface in a shared design System
making your product(s) easier to read (e.g. an action button will always have this specific appearance).

Understand the context and know your users well

A beautiful but unsuitable design cannot work. It's always important to properly take into account the steps upstream of the UI.

Define the information hierarchy

it's important to do real UX work before diving into high-fidelity mock-ups. You have to seek clarity and simplicity, and avoid cognitive friction.

Ensure consistency

putting a graphic charter in place is an important step that can't be neglected. Style, colours, typography, spacing… every detail matters. You'll also need to think through each of these elements with accessibility standards in mind!

What's the difference between interface design and graphic design?

What is visual hierarchy in interface design?

How do you ensure the consistency of an interface design on a complex product?

Interface design and accessibility: how do you bring them together?

Related methods

Interaction design

Interaction design defines what a user can do and how a product responds to actions: flows, states, transitions, feedback.

Experience design

Experience design (UX design) shapes what the user encounters beyond the interface: journeys, emotions, contexts.

Wireframe

A mockup with no graphic elements, describing the zones and essential components an interface should contain.

Zoning

Zoning is the visual representation of an interface through the placement of its simple content blocks, without detail: no text, no images.

Design system

A design system is a component library and the governance that comes with it. What sets it apart from a design kit, and when it becomes necessary.

Design pattern

A design pattern is a proven solution to a recurring problem: breadcrumb, modal, accordion. These conventions exist because they work for users.

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk