Branding in the modern age A brand is a distinct design, tone of voice and set of values that makes a promise to your customer. It’s a promise of a consistent message that should be visible at every touchpoint with your customer. A brand agency’s job is to create this message and fulfill this promise. […]
A brand is a distinct design, tone of voice and set of values that makes a promise to your customer. It’s a promise of a consistent message that should be visible at every touchpoint with your customer.
A brand agency’s job is to create this message and fulfill this promise. But the brand agency’s job has recently become much more complex — all thanks to the digital revolution.
As the digital world has grown and expanded, the work of a brand agency has changed as well. New touchpoints and ways to communicate have been created and, most importantly, the digital landscape is always changing, growing and adapting, making it hard to predict where and how a brand will need to be applied.
As web and software experts, we often find brands don’t always think through all these digital contexts, and the assets that are required for a web or software project. The problem is that not all brand agencies have experience developing digital brands.
This can cause problems for our designers, the client and the external branding agency. We have even had experiences of clients asking their agency to re-do the logo and brand after we have applied it to the website or app.
We’ve created this guide to help clients that are either developing their own brand or working with agencies that possess less digital experience. In either situation, following these guidelines will help you to develop a brand that is digital-ready and versatile enough to scale into the wider digital environment.
We’ve come up with 13 points to consider when developing a digital brand.
The first thing a brand should consider is where it’s mostly going to be seen. If the brand is mostly a digital brand, treat it like one. Don’t mockup the logo onto a print brochure if the main marketing priorities are website and social media profiles.
Simply put, if the brand is based on digital platforms, mock it up on digital platforms.
The Problems
The Solution
If the logo is for a website try to create a horizontal version. If it’s for social media and mobile make sure an icon fits into a square. If it’s for an app or mobile website, check that it fits into the screens. This is similar to point one. Make sure the logo is mocked up and tested in the right environments. If you’re not sure what those environments are, get in touch and we can help talk it through.
The Problem
Web fonts are expensive and the licences are complicated. As a simple rule of thumb, we try to choose a Google font for a digital brand. This makes it easier and cheaper to implement the brand. The complexity of web fonts is often overlooked by print/brand agencies as it’s much cheaper to buy a font for print work. This does however limit a branding agency’s choice of typography.
There are other implications of paid fonts such as site speed or complications to site builds. With modern web technologies, this usually isn’t an issue but your development agency may not have budgeted for this and so a paid font should be talked through with them.
Solution 1: Get it signed off
If an agency is going to choose a font that requires a licence, make sure they check the prices of the font licence, check how often you would have to renew the font license, and if required estimate how many monthly hits the website would have and therefore how costly it would be long term. This should also be discussed through with the web designer/developer to ensure they are able to estimate their time correctly. You then need to get these costs signed off by the client and the client needs to budget accordingly for web fonts.
Solution 2: Use a free font
Alternatively, build the brand around a free Google font.
Solution 3: Create a bespoke fonts
Or go even further! If you have the budget and are seeking a truly unique brand image, then you could consider creating a bespoke font with the brand/print designers which would avoid licencing fees and provide you with a distinct look.
Pro Tip: Find a free alternative
Additionally, if the client does go with a paid font, make sure to select a free system font (or google font) alternative, that can be set as a backup in case the paid font is not available.
Problem 1: Variety
When choosing a font for the print, a design agency can sometimes rely on just one or two font weights. However, this is usually impractical for the web because there are is such a wider variety of screens and elements, and they have to work at all screen sizes.
Problem 2: Anti-aliasing
Another problem here is how fonts render online. Print designers will use particular weights to create visual hierarchy but the web just can’t match it. Fonts are naturally jagged. However, smooth edges don’t exist in the pixel world. As such, design programmes like Adobe Illustrator, Photoshop and Indesign, automatically apply anti-aliasing to smooth out the edges of jagged letters.
When the font is used online, anti-aliasing is not applied and letters are left with jagged edges (jagged to fit pixels), making the letters appear a different weight. As such, you commonly have designers asking to “make the font thicker or thinner to match my design”. Some times this just isn’t possible with a font family that doesn’t have many weights. The more weights there are, the easier it is to find a font that matches the original design.
The Solution
Make sure you choose a font with at least three or four different font weights, and ideally more. There may be exceptions to this, but it’s a good thing to watch out for.
The Problem
Finding a domain is hard; most short ones are taken. Choosing a name is hard; most good ones are taken and they often have SEO and branding implications. Getting a trademark can be hard; you need to make sure it’s available and that you won’t get challenged.
The Solution
The solution is to learn the rules of domains, how to find them, how to come up with names and domain ideas, and how to select suffixes. Additionally, make sure you understand and check trademarks or come talk to us and we can connect you with IP specialists for you.
It’s surprisingly hard to come up with a name. Hopefully, you’re lucky enough to already have one or have a unique business name. Just make sure you and your branding agency understand domains, and don’t settle on a new brand name before you’ve checked that an appropriate domain exists for that name.
The Problem
This is probably the hardest one to explain. When doing print design you can keep editing the page until all the typography and spacing is perfect. However, on the web, you need to account for the fact that the design will appear on different sized screens and browsers.
Most people think this means you just need to design for desktop, tablet and mobile. However each of these screen sizes have a huge amount of variations and each browser could render the code slightly differently. As the browser and screen size changes the content moves, flows and stacks differently depending on the available space and the screen parameters, which can of course change.
The Solution
There isn’t one solution to responsive design. It takes experience and thinking through each aspect. Essentially, you have to ask yourself…would this work on mobile? Would this work on tablet? Would this work if the screen size changes?
You also need to understand that different browsers and devices will affect aesthetics and that new features or elements may be developed that couldn’t be predicted at the start of the branding process. This means that being too rigid with your design rules just isn’t practical. The web needs flexibility. And instead of seeing that as an issue, you have an opportunity to develop a brand that has flexibility built into it. It’s a new type of challenge that asks for a design system instead of pixel-perfect images. Uncertainty can be seen as an opportunity to consider a brand at its fundamental level, instead of focusing on specific visual elements.
As outlined above, the web requires flexibility. Often this means a good solution is to create a unique part of the brand that can be applied to a variety of situations. This doesn’t always need to happen, however we would usually advise creating a unique visual element which will be flexible and versatile as the brand grows. Examples of this in our own work would be the angle in Permagard or the line in Centreline or the dot in Symec. These elements are simplistic but versatile across different mediums. It makes a brand versatile and distinctive.
The Problem
When creating a logo, a lot of agencies start with the exploration of ideas and then mocking it up onto stationery, brochures or a single website page header. What is often overlooked, is whether the logo works as a favicon (an icon typically displayed in the address bar of a browser or list of bookmarks), on a mobile app icon or social media icon. This usually means, the logos we receive are overly complex and don’t have a simple version that looks recognisable at the small size of a favicon (16-32px), social media page icon or mobile app icons (64px).
We talked about this issue in points one and two, however it’s important to highlight the favicon as it’s at such a small size (16px) that this needs to be factored in if the brand is going to have a website.
The Solution
Make sure you mockup the favicon and test it at 16px. Additionally, make sure you mockup the logo in social media profiles, mobile app icons and other areas you need (see point two).
Icons
A brand could consider what its icons look like. Icons should usually be developed by the web design/development company and created during the process. However, some brand design agencies might want to have an input into the icon aesthetics. We would recommend doing this during the creation of the website or app and it should be part of a conversation with the software house as icons need to be adapted and changed to be fit for purpose.
Additionally, icons and illustrations should be tested to see if they work at all screen sizes, and if not, responsive icons should be considered. This is not often a big problem as web designers can develop new custom icons for the brand, but a brand agency may want to consider this from the start.
Cost of assets
A second point is that the company should consider the cost of the icons. If they are extremely complex and the website requires a lot of them, this will become costly. Therefore, the cost of a custom-icon/illustration led approach should be considered. The Newicon brand (being newly developed in 2019/2020) is an icon and illustration led brand and this can take a lot of time when a new web page is created, but the pay off is it makes our brand unique.
A detailed digital brand may consider the interaction and animation that are used. Some modern logos are now animated as they are mostly hosted on the web. Some brands might want to consider the loading icon and include that as part of the logo or brand design. A really unique brand may even consider web animation as part of the brand itself.
This is for more ambitious brands, but at a simple level, having an animated logo and loading symbol could be considered at the branding stage.
If the brand is for a mobile app, your brand agency might want to consider what the logo looks like on the app splash screen or in the app store. This means testing it out on a mobile splash screen and testing it out in the App Store and the Play Store. This also may mean developing the App Store/Play Store assets themselves.
We have developed a brand ourselves that originally did not factor in the splash screen and had to be changed once we reached that stage of development. If the brand is based on a mobile app, factor in the additional assets (splash screens, mobile icons and app store assets) during the brand creation and rollout.
The Web Content Accessibility Guidelines (WCAG) are the industry standard. This impacts designs, content creation, development and other areas. Not all businesses focus on accessibility (although, we think they should), but when it comes to public sector organisations, government websites and charities, it’s paramount
The Web Content Accessibility Guidelines (WCAG)
“Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally”
A brand designer should understand the basic principles of web accessibility. You can read more about it at the link above or I will put a basic checklist of things to consider
Design
Development
Content
It’s important to remember that accessibility should be more of an open conversation rather than a clear checklist of things to do. Making the site accessible is not difficult but it will take consideration from all parties and an open conversation about it. But brand designers would do well to understand the rules of accessible design and consider the implications.
As most agencies already know, the brand should be built around the values. Those values can stay fixed while the visual identity evolves to match new assets, contexts and trends. This means, as different contexts are considered by the brand agency and software house, the brand can grow and adapt. Any brand should be pragmatic, not dogmatic and this means the values should be at the core and the visual rules can grow and change as the digital landscape grows and adapts. This means you should stay flexible and evolve the style guide while assets develop, instead of creating rigid rules for situations that haven’t properly been considered yet.
For a designer, this means making sure you’re including values in a brand and explaining why visual elements have been chosen. But also it means thinking about the brand as a value system and visual system that can be applied to many elements. It means creating flexible principles, not dogmatic rules.
We hope that this guide will help you to understand the specific ways to build a great digital brand. And even more than that, we hope we’ve convinced you that in order to keep your brand promise and build a consistent message, you need to build more than a visual look and feel or book of rules — you need a design system underpinned by values. And you need a system that incorporates flexibility and digital requirements from the start.
If you’d like to know more about how we can help you or your brand agency to develop a digital-ready brand, get in touch at our website here.
Subscribe to get our best content. No spam, ever. Unsubscribe at any time.
Send us a message for more information about how we can help you