A person will be bombarded with tens of thousands of adverts each day. Brand Identity is a powerful tool that helps clients and consumers make choices from this crowded marketplace. It helps people recognize one brand from another, reassures the customer they have made the right choice by communicating the intrinsic quality of the product and helps to develop a bond between customer and product. A brand Identity is like an added language helping to reveal meaning, culture, core values, heritage and messages that a company or individual wants to portray with images, language and associations. One of the paramount elements to implement in a web design is story and brand identity is a tool to express a narrative story. This makes translating a brand identity from physical, print design to digital, web design ideal. But how is it achieved and what are the ways to do this?
People like a good story and would rather be connected with a narrative than just a list of facts and information. People are also more likely to remember the story over facts. Therefore, a web design without story means a shortage of engagement and interactivity for the visitor. Our website designs are built mainly using HTML and CSS. HTML represents the content of the page and CSS constitutes the style. Web design in its early days has seen these two factors more separated and this creates a disparity between the content and design. You can have a beautiful design and great content, but without a third factor, an engaging narrative voice, the site lacks in engagement. Interlinking the content and style using Brand Identity is a way to achieve this connection.
There is a vast array of choices on how to do this combining of parts to make a whole encompassing story and they are changing all the time at an incredible pace. Some of these include: images, infographics, illustrations, background images, mascots, animation, sequence, interactivity, motion, time, sound, navigation, iconography, symbols, transitions, parallax scrolling, touch, video, apps, color, scale, placement, words, tone of language, personality, social media, responsiveness. Clearly, the toolbox for displaying a brand Identity online is vast. Along with a basic design sense that you would use for print work, technical know-how is also needed to navigate all this choice. Here are some websites that combine many of these tools well for branded story telling:
http://www.looseleafeditions.com/
Video (without it, I might not understand the product) / Color / Symbols
http://rule-of-three.co.uk/
Copywriting Studio
Parallax Scrolling / Color / Language
http://camp.wonderopolis.org/
http://wonderopolis.org/home
Engagement / Video / Community
http://www.soleilnoir.net/believein/
Animation / Graphics / Color
https://www.atlassian.com/time-wasting-at-work-infographic
Software development and collaboration tools
Parallax / Infographic
http://singlecard.co.uk/
Animation / Interaction / Navigation
The web is an intimate space because people are mainly engaging and interacting with it unaccompanied. This also makes it a very intimate communication with a brand Identity. The identity depend’s on the users’ experience with the company’s website. Any slip up or problem will be more noticeable. Bad storytelling would be disjointed and inconsistent with random plot changes. A way to maintain consistency is by developing a digital brand guideline. That way, these tools in the digital toolbox can become unified and a story will be constant and coherent all the way from print through to the digital presence. One very thorough example is Google’s Material Design, which provides the rules for beautiful UI across all devices. https://www.google.com/design/spec/material-design/introduction.html
In conclusion, knowing the essential elements of brand identity on paper can be transferred into the digital spectrum plus some. It is important to be using the lastest innovations of interactivity and engagement to keep the story of a brand as strong online as it is offline, otherwise brand love will suffer in such an interactive space.
From: