Graphic design for web & mobile

In the previous post, "Social Media Branding," I discussed branding. In this post, I'll discuss how you can use graphic design to create a consistent identity for your (personal) brand.

How do you stand out from the crowd online through tone of voice, use of color, layout and typography?

I have a background in multimedia design, and I could go on about this for hours. 😉 So I'll try to keep it as concise as possible, focusing on the main points so you can apply it to your blog, website, and/or social media channels.

What does a corporate identity consist of?

• logo

• color palette

• typography

• Font size

• photos and/or illustrations

• slogan/tagline

• layout

Logo

A logo is a visual mark consisting of your brand name in your signature font(s), colors, and/or graphic elements. Think, for example, of the Nike swoosh, the New Balance NB letters, or the Starbucks logo. If you're building a personal brand (influencer), a logo isn't necessarily important, but consistent use of colors and fonts is. After all, it's about being easily recognized in the jungle of posts so people interact with your brand.

Unfortunately, Instagram and Facebook, for example, don't allow you to use your own fonts. So, make sure you're consistent with your visuals, where you do have the freedom to use your own fonts and colors.

Color palette

Colors are incredibly important. There's such a thing as color psychology. People react to or connect with a color and the emotion it evokes. That's why, for example, traffic signs indicating a dangerous situation are always red. But red also represents excitement and, in marketing terms, a call to action. In online marketing, it's therefore crucial to choose the right colors that convey a certain feeling about your brand or product. Click the link below to read more about how color influences your target audience's actions:

https://blog.hubspot.com/the-hustle/psychology-of-color

A handy tool for determining your colors is Adobe Color. Click the link below for inspiration:

https://color.adobe.com/nl/explore

As a rule, you should never use more than three colors for your content. You can add up to two more colors for accents, but use them sparingly. The rule is 60/30/10. So, 60% main color, 30% supporting color, and 10% for accents.

Practically translated to a blog, your page consists of a main color (the body), 30% of a supporting color (your text) and 10% of accents (links, headings, calls to action).

Typography

Typography is also an important part of your brand's image. Use a maximum of two complementary fonts. As a rule, use a more expressive font for your headlines to grab attention and a more conservative font for your body text.

Also, make sure your font matches your message. A playful font isn't suitable for a business product or service. And conversely, a business-like font isn't suitable for a creative product.

I can personally spend hours trying to find the right font. A little more curvature, the spacing between the letters, the size, and so on. The slightest difference can influence my decision to choose a particular font. To help you with that, you can click the link below to find good font pairings:

https://www.fontshare.com/pairs

Online typography

Typography for the web and online is different from typography for print. Because you don't know in advance which medium (mobile, laptop, desktop, iPad) your target audience will use to view your content, you need to follow certain guidelines. This prevents your content from becoming unreadable.

Format

For web or mobile, use TTF (True Type Font) or OTF (Open Type Font). Both formats are also suitable for print if you decide to write an e-book or create other printed materials in the future. You can find many free fonts on Google Fonts, DaFont, and FontShare.

To ensure your users see your font when they visit your site or blog, you need to ensure it's embedded. You can do this with the @fontface rule in a CSS stylesheet, or you can upload the font to your service, such as Wix or WordPress.

Font size

For mobile and web, your main text should be at least 16px large. This way, it remains readable on any screen. Headings should be 1.3 times the size of your main text. This is also a matter of personal preference. They can be larger, but certainly not smaller, than 21px. Make sure that your headers don't cause unintended linebreaks on mobile. Scale the headers down in size where needed.

Subheadings can be slightly larger than your main text. As a rule of thumb, make subheadings 2px larger than your main text. This maintains a clear visual hierarchy between headings, subheadings, and main text.

Photos and/or illustrations

Not everyone has a 1GB fiber connection. And keep in mind that most of your content will be viewed on a mobile device with Wi-Fi, 5G, or perhaps even 3G. By 2025, 60 to 64% of content will be consumed on mobile devices. If your images or illustrations are too large, this will impact load times, leading users to click away if they take too long. The average attention span online is 8.25 seconds. So if your content takes longer to load, there's a good chance users will click away.

As a rule, keep your images under 1 MB in size. Photoshop allows you to optimize your photos for online use. However, there are also many free tools available online.

Slogan/tagline

A slogan or tagline briefly tells more about your brand, or as it's called, the brand promise. You know the familiar ones: Nike's "Just do it," Apple's "Think different," and McDonald's "I'm lovin' it."

A slogan or tagline helps you with recognition and tells you what you do more or differently compared to others in the same niche.

Layout

Layout is essentially how you visually present all of the above. Do you play with typography to enhance your content, or do photos dominate? Is the layout playful with unusual shapes, or is it more streamlined and professional? The layout should also reflect your personal or brand image.

You can apply these rules to create engaging, converting email campaigns using the HBA funnel builder and GetResponse. In the next article, I'll show you how to configure the HBA funnel builder so your styles are consistent across the board. Stay tuned!

Did you find this article interesting or enjoyable? Do you have any questions? Leave a like or comment below. And share this article with your friends using the social media buttons!