What does your uncle’s Volvo have in common with our old website? They are both reliable, functional and solid, but they are also outdated and in need of a paint-job. A few extra features would be nice.
So what did we do about it? We upgraded! With generous help from our friends over at Strawberry Soup, we refreshed our graphical profile – including our logo, typography and colour palette – and redesigned our website. In this post, I explain how we enhanced our branding using carefully crafted design, focusing on how we used colour to better structure and capture the Elevate story visually. You can use similar principles in your own science-communication products – presentations, articles and books, and online or print material – to strengthen its impact.
Rebranding and redesigning websites, however, is not quite as simple as buying a new car. We wanted to present our growing team and services with a more comprehensive and approachable website; a modern and coherent colour profile and typography; and a logo design that reflects our holistic approach and global reach. In essence, a website and logo that tell our story.
On the website, we wanted to tell a SOUND visual story that had Structure and Order, Unified the content, and was easily Navigable and Distinguishable. This is because visual stories play an important role in communicating and engaging with your target audience, be it a company story like ours or a scientific story delivered in a presentation, article or book.
Looking for colours
We can create SOUND visual stories, in part, by choosing the right colours. To determine which colours, we chose six words that described the look and feel of our visual story. These words – modern, elegant, light, open, approachable and warm – helped guide the website redesign and unify our content. When choosing your own look/feel words for your visual stories, think about: a) what suits your topic/field; b) what appeals to your audience; and c) which words reflect your personality. Revisiting these words can help you decide about text, images, figures, use of space and colours.
Guided by the look/feel words, Elevate’s new colour palette consists of various shades of orange, grey and blue. The particular shade of orange we use reflects the approachable, open and warm aspects of our look/feel. The complementary blue provides a counter point; cool and analytical but also elegant and light.
Orange and blue are opposites on the colour wheel, which creates a strong pairing for contrast and visual tension. The grey provides balance and flexibility in how we use the colour palette across different media. Even if you’re not a designer, you can still develop your own colour palette, for example by using the free tool Paletton.
Designing SOUND visual stories
Once you have your colour palette, it is time to use it effectively and consistently throughout your visual story for a coherent look. Colour helps establish a pattern that an audience will come to know and expect; deliberately deviating from that pattern creates contrast. Patterns and contrast help your audience determine the hierarchy and meaning of content, understand its structure and easily navigate the visual story. Below we briefly analyse how colour is used on the Elevate website according to SOUND principles.
Structure can be created by establishing a pattern. For example, imposing certain colours on particular items (e.g. orange buttons) across different pages creates a pattern or an expectation. Orange buttons have a certain meaning, which is to get more information or open a new page. This construction of structure helps your audience understand the visual story better and navigate more easily.
Ordering content according to its level of importance facilitates quick and efficient comprehension of content. For example, placing content left-to-right and/or top-to-bottom; changing colour, size or shape; and/or adding animation can guide and capture your audience’s attention. On this page, we use orange text and animation for our statistics, thus deviating from the established pattern (grey text) and raising up a piece of content in the hierarchy.
Colour can unify content. We chose predominantly orange or blue images to match Elevate’s colour palette (orange, blue and grey). For example, our Team page shows the Öresund Bridge bathed in an orange sunset and bio pictures featuring orange or blue clothing and/or an orange backdrop. These deliberate choices ensure a coherent and unified look within a single page and across multiple pages.
Users determine how to navigate a website via its underlying structure, made as intuitive as possible by web developers. For example, structuring the menu from the general to the specific or providing multiple entry points to content. On our Training and Workshop pages, we use four different icons that each represent a workshop. These icons provide those multiple entry points to corresponding pages and help users orient themselves within the site.
How we use colour can help us to stand out from the crowd, even if we use colours that others have used. For example, Elevate’s colour palette is similar to that of Elsevier, but our websites do not look the same. The text, icons and links on the Elsevier homepage are blue. Although we use blue too, we combine it with orange in the icons, as a background colour, or within an image.
Although colour is just one piece of telling a compelling visual story, you can have a stronger impact on your audience by applying it purposefully. Creating SOUND visual stories will help you communicate and engage your audience better in your next presentation, poster, article, book or website. Good luck designing!