The creative team at Selesti are always pushing our design approach with consumer behaviour in mind. It is essential that we cater for a user experience across multiple platforms. Consumer behaviour is not limited to websites alone any more, and the way a brand is represented needs to be re-addressed to reflect that.
User interaction within the digital realm always focusses on rethinking the user journey with a number of devices and screen sizes in mind. This is not only important for usability and driving sales but also for the way the consumer perceives the brand. We are seeing a shift lately, with logos and identities being rethought with scalability, interaction and functionality in mind. Gone are the days of one size and certainly not only one medium being taken into consideration before sign off.
Designing a brand to be responsive entails a break away from the traditional branding process; where print dictates a specific size and structure and a push towards flexibility. This means taking into account the nature of small screen sizes and the interactive nature of digital platforms. Brands are no longer static, but fluid and ever-adapting.
Let’s take a look at some principles:
A common method of adapting an identity for multiple platforms, is by reducing the number of elements in the logo for a range of sizes. In this example of an unofficial rebrand of Guinness, you can see that the web experience contains all the identity's internal elements: the name, the divider lines and decorative flourishes, the harp crest and the date established. Once the user starts to scale down the screen, elements are now removed, allowing the logo to adapt for a smaller space. Rather than simply resizing the logo, one element is removed at a time making it appear as if it has been created with multiple platforms and sizes in mind and removing unnecessary information. It is commonplace that a consumer is already familiar with the website and full brand, and therefore a mobile experience doesn’t require extra added information.
The WeTransfer logo is a great example of how a brand can be integrated into the functionality of the website. For a website that provides the service of file transfer and uploading, we can see that the visual indicator for progress is now integrated into the logo. By simply allowing an overlay and a fill, a traditional loading bar is now no longer necessary, cutting down the elements on the page and real estate and also enhancing the brand. Where a loading wheel would once be considered, the added value of the word ‘transfer’ written typographically, also makes the experience that much clearer.
Bureau347 is a simple example of how cleverly changing the typography can help maintain the brands message whilst catering for different experiences. This one is pretty self explanatory, but take a look at their website to see it in action by scaling your browser. The typography animates and slides into the logo as it scales down. Its simple, but effective. It’s also a unique way to change the name of the brand using wordplay, without losing the message.
Hide & Reveal
Another way to make a brand responsive is to look at the use of the space that exists and think about interactivity. The Asian Art Museum is a good example of showing the monogram first and foremost for the audience to become accustomed with, and when the user scrolls over the area, the space within the banner moves up bringing the name into focus. By allowing user interaction, it’s a more compelling way to learn what the brand stands for.
So what does this mean? We may start to see brands and designers alike, loosen their grip on traditional strict guidelines and allow more flexible solutions to be put into place. We are seeing this on our current project with Hitachi, we’re enjoying some really forward thinking conversations with their corporate team in Japan - who are showing a fantastic approach to back our proposals to adapt their mobile and responsive web brand guidelines. Creating a good brand means taking what already exists and de-constructing it. By taking it apart, we can begin to learn what are the most important elements and start considering how we can add new levels of meaning and functionality. After all, the web, unlike print, is an interactive platform and these principles should be adopted into brand strategy and identity design.