Layout & grids – Redcare

Layout Principles

We can combine our elements in different ways to create rich and engaging content. However, in order to keep the Redcare feel, it’s important to follow our guidelines.

Grids, spacing and sizing

Use the following as guidance when setting up grids and placing elements. These rules may need to be adapted for extreme formats.

Grids and Margins

When setting up a layout, begin by setting the margins — these should be 0.8 of the shortest side. Then divide the layout into 16 for alignment of elements.

Grids and Margins

When setting up a layout, begin by setting the margins — these should be 0.8 of the shortest side. Then divide the layout into 16 for alignment of elements.

Margins Grids

Corners and spacing of elements

We use rounded corners on our image and text boxes. Use the following as guidance to keep consistency – adjust opticially when scaling.

Note: Keep consistency of corners across a layout by using the radius of the smallest element.

Corners and spacing of elements

We use rounded corners on our image and text boxes. Use the following as guidance to keep consistency – adjust opticially when scaling.

Note: Keep consistency of corners across a layout by using the radius of the smallest element.

Corners Spacing

Creating layouts

We have two core layout styles; journey and cluster. Scroll down to see when and how to use them.

Layout Styles

We have two main ways of laying out information, depending on whether we want to tell a story, or give more of an immediate overview.

Journey Layouts
Telling stories step by step

Our sequences of icons can show routines, showcasing how we make taking care of your health easy. Keep the spacing consistent, and follow icon line weight rules.

Construction

Journey Layouts
Telling stories step by step

Our sequences of icons can show routines, showcasing how we make taking care of your health easy. Keep the spacing consistent, and follow icon line weight rules.

Construction

Journey Layouts

We can combine images and icons in our journey layouts to tell more personal stories. We use the image as another element in the story — keeping spacing consistent.

Construction

Journey Layouts

We can hero products as part of a journey, a great way to show off its benefits or how it’s used.

Use simple product cut-outs here to keep it clean and uncluttered.

Construction

Journey Layouts

We can use art direction as part of a journey, to tell more personal stories. It’s a great way to show off its benefits or how it’s used with copy.

Construction

Journey Layouts

We can take people on a journey with short snappy copy that breaks down into modules. Our navigational arrow guides us through the text.

Icons Icons + Photography Product Photography Type

Journey Layouts
Don’ts

Things to avoid when creating journey layouts

Click to view example uses

01 Don’t use too many elements

02 Don’t use elements that don’t make sense in the journey

03 Don’t over complicate the journey

Cluster Layouts
Telling a story in a nutshell

When heroing a cluster of icons, we let one icon take the lead. This layout style is great for more emotive moments when we can be more expressive.

Construction

Cluster Layouts
Telling a story in a nutshell

When heroing a cluster of icons, we let one icon take the lead. This layout style is great for more emotive moments when we can be more expressive.

Construction

Construction

Construction

Construction

Icons Icons + Photography Product Photography Type

Cluster layouts
Dont’s

Things to avoid when creating cluster layouts

Click to view example uses

01 Don’t use too many elements (maximum 3)

02 Don’t use random elements

03 Don’t use everything at a similar size

Combining journeys and clusters

Sometimes we might want to use clusters and journeys side-by-side. We only do this by pairing a typographic journey with one of our other clusters.

Never pair an icon cluster and icon journey.

Multiple Page Layouts

We make the most of multiple page formats and animation to take people on a journey. Keep each frame simple and spread the content over multiple frames.

Within our product and website, we use the concepts of journeys and clusters to break down information and create hierarchy.

Use the following examples as notional guidance.

Layouts in motion

Our layouts are where many of our elements can come to life with motion. Try to break down any big transitions one by one so the animation feels clean and easy to navigate.

See more examples in the motion section