In today's market, brands communicate with their customers through an increasingly large range of platforms and digital spaces. To stay current they need to be adaptive, flexible, and capable of communication via various platforms and screen sizes. This ability to communicate shouldn’t be tarnished by poor branding or unrefined interface components. Interactions should be meaningful, and serve the goals of the user.
Ofcom reports the average person in the UK spends more time on the internet than they do asleep, meaning a strong digital presence has never been more crucial to brand visibility. In order to appear credible, a common and professional design language should be used across all appearances of the brand.
Unfortunately, sometimes branding is applied to a website as an afterthought. Colours are applied to templates, and logos are uploaded to the compulsory location. However these considerations should converge much earlier than they often do in practise. It’s imperative that the website serves the brand, and doesn’t impede its ability to communicate.
In this article, I explore the process of ensuring your brand represents you correctly and the potential benefits of going a step further by adopting a visual language system.
So, where to begin?
Like all good projects, it begins with research. It is important to understand your customers’ needs, expectations, and language. Form ideas using your knowledge base of the market – have conversations, gather data and build valuable quantitative and qualitative information.
“What are people’s experiences? How do they feel about your industry? Are you truly serving their needs?”
Once you understand your audience, create core statements that carry energy and will drive your brand by anchoring down a common set of beliefs. Think about the position of your brand and where you are set against competitors. Are you offering something others are missing? Be bold, be brave and go where others won’t.
Next, develop your brand voice by translating your statements and learnings into a speaking style. You should seek to create a voice that is human, personal and responds to the needs of the customer. This will set the tone for the content used on your website.
Your visual language
Begin the creative process by exploring your findings and developing an identity. Build a style guide that will help solidify the vision you intend to achieve. Digital-first branding is advisable, with logo, colour, and typography decisions all being driven by their ability to perform in a digital space. Richard Buchanan, from branding agency The Clearing, says “Look at Audi: it’s got to work as a badge on the front of a car, but also a 16x16-pixel favicon.”
Developing your identity into an experience that users will benefit from is the challenge that faces your brand. Setting goals and outcomes should drive the experience, but ensuring it is enjoyable and memorable is also vital. Consider the story behind your brand, build on the values of your business and open up ground for playful ideas. Use the personality, passion and drama of your story to create exciting visuals. Review everything, choose the things you love and refine them into tangible assets.
The styles of websites vary, with some using clear grid styles and some opting for a more relaxed experiential effect. However they all attempt to communicate an idea, a lifestyle, or an opportunity. Capture your audience's imagination, by presenting a story they can believe in. Quite often, the stories we remember are the simplest ones, which translates well into forming meaningful user experiences.
With users spending more time on their devices there is a demand for simplified web design that offers a psychologically comfortable experience. Interactions that are intuitive, non-jarring, and informative, are what the modern user is looking for. However simplicity shouldn’t be mistaken for minimalism, which is sometimes the case. Website simplification “is more about creating a straight line from point A (awareness) to point B (conversion) and less about making point A look nice.”
These characteristics highlight a simplified web experience:
- Ease of navigation. It’s intuitive and responds correctly.
- The presence of relevant information.
- Gentle nudges along the customer journey to encourage completion.
- The ability to recall the interface of the system upon revisiting.
- Attention to detail. Typographic relationships have been highly considered and images carefully selected.
These practices will instill the user’s confidence in your brand, building the credibility you need to form a meaningful relationship.
A visual language system
In recent years larger organisations such as the BBC, Google, and AirBnB have implemented visual language systems to deliver consistency and scalability to their digital products. Visual language systems are standardised collections of reusable components that are guided by a common set of guidelines, and can be applied in varying circumstances. Using these components accelerates the creation process, for both design and development teams. They also implement high-level functionality and accessibility that makes them a predictable and comfortable experience for users.
To develop a visual language system you begin by defining key principles and objectives, understanding challenges, and what it is you intend to achieve. Agreeing on these principles will create a shared common truth amongst the team, making iterations and discussions more efficient. It also helps ensure the user experience is aligned with your brand objectives, and doesn’t appear disjointed.
Some brands create visual hubs for their systems, such as IBM’s Carbon Design System. They act as a live demonstration base that shows contributors how the visual language should look and behave. This serves as the baseline for design application, meaning teams can spend time solving functional problems, rather than aesthetic uncertainties.
In summary
It is important to do your research thoroughly before starting any brand project. This ensures you get off on the right foot and avoid any misconceptions; once you have authentic insights, you can build ideas and values, discovering the brand you aspire to be. Translating your ideas into creative means of communication will develop your identity further. Test the usability of these concepts; ensure they are effective communication methods. Produce interactive components that serve the users’ goals. Test and review.
You may decide that you want to build a visual language for your brand, and begin a deeper exploration process into the standardisation of your design assets. A visual language system aims to achieve a compound structure, relying on flexibility and familiarity for it success. It aims to simplify complex elements, through consideration and repetition. It enables you to focus on functional development, presenting a reliable footing for future advancements.
It is expected that the digital marketplace will continue to grow, offering users new ways of discovering brands and shopping for their favourite goods. Users continue to make enquiries and form business relationships through the information they discover online. Projecting your brand correctly and ensuring you can offer successful interactions with your customer base has never been more meaningful. Serve yourselves as well as your customers. Be authentic, be reliable.
Some examples of websites that have achieved great web and brand symbiosis:
Illustrations modified from: www.freepik.com
