Interactive
Signposting
These are notional examples of how we can create interactive signposting elements and buttons for use in digital applications.
Signposting
These elements support our icon language. They aid navigation, provide clarity to our layouts, and highlight key details and functional information.
There are six different categories of elements, each with their own attributes and role.
Signposting elements
Overview and Construction
Derived from our symbol, we use a distinctive Redcare arrow in our communications, always helpfully signifying the way forward.
We also use a hexagon numbering system to clearly break down information.
Signposting elements
Overview and Construction
When creating capsules use the following guidance. The stroke thickness flexes per layout dependent on scale – optically adjust so it’s not too thin or thick and feels
balanced in relation to the icon line weight. If used with other signposting details always keep the strokes consistent.
Signposting Elements
Overview and Construction
Numeric tabs are used to highlight key numbers (e.g. age, dosage or quantity). Use them alongside icons to tell stories, or in functional settings such as labeling products.
Signposting Elements
Overview and Construction
Add an extra level of clarity by using labels to categorise content. These are small scale, adding a level of helpful detail.
Signposting Elements
Overview and Construction
These detail elements are used to break down functional information in a clear way. They are always used small, in support of our icons.
Signposting Elements
Overview and Construction
In occasional circumstances (e.g. packaging), when we need to convey a lot of information in a small space, we use this special tab device to pull out key information in a
linear way. Note: Pull out the most important information to highlight. Don’t try to cram everything in.
Signposting elements
Usage
In layouts, our navigation arrow is a key signifier of our brand, and we can use it in the following ways.
Signposting elements
Usage
In layouts, our navigation arrow is a key signifier of our brand, and we can use it in the following ways.
Signposting elements
Usage
In layouts, we use our navigation numbers to list information in a clear, easy to digest way. The active number is always Red.
Signposting elements
Usage
In layouts, capsules are used to signpost the categories shown below. They can be aligned at the top or bottom of layouts, positioned vertically or horizontally.
They can be used over photography with a filled background to ensure they stand out.
Signposting elements
Usage
In layouts, we use our numeric tags in the following ways, always supporting our icons and telling different stories.
Signposting elements
Usage
In layouts, we use our labels in the following ways. They highlight the specific category of the content.
Signposting elements
Usage
In layouts, we use our details in the following ways. They support our icons by adding extra levels of detail.
Signposting elements
Usage
In layouts, we use our special tabs in the following ways. They are never heroed or large scale, but give structure to detailed information.
Signposting misuse
Things to avoid
01.
Don’t use more than one arrow in a sequence or as patterns.
02.
Don’t twist or skew elements. Always use horizontally or vertically.
03.
Don’t design clusters out of only signposting elements. Instead, combine them with icons
04.
Don’t design journeys with only signposting elements. Instead, combine them with icons
05.
Don’t use keylines that are too thick or too thin. Always keep your keylines consistent.
06.
Don’t use elements over photography if they aren’t legible enough
07.
Don’t scale too large. They are smaller delicate details that support our icons.
08.
Don’t crop elements
Interactive
Interactive signposting elements
Buttons
These are notional examples of how buttons might be designed. To make them uniquely Redcare, we can integrate our arrow, Red and container shapes.
On mobile, we could use forward swiping interactions to give you a sense of moving forward to the next step.
Interactive signposting elements
Buttons
These are notional examples of how buttons might be designed. To make them uniquely Redcare, we can integrate our arrow, Red and container shapes.
On mobile, we could use forward swiping interactions to give you a sense of moving forward to the next step.
Interactive signposting elements
In use
Signposting
In motion
In motion, we emphasise the sense of moving forward, clearly navigating through content and guiding you to the next step.
