{"id":69920,"date":"2017-02-18T10:35:00","date_gmt":"2017-02-17T23:35:00","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=1687"},"modified":"2025-11-11T18:00:49","modified_gmt":"2025-11-11T07:00:49","slug":"branding-for-websites","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/branding-for-websites","title":{"rendered":"Branding for Websites: Tips for Designers"},"content":{"rendered":"\n

So much goes into a great brand that it\u2019s tough to put into words. Designers need to think about brands from many perspectives like visual ideas, typography, iconography, and even subjective feelings on the brand design.<\/p>\n\n\n\n

Branding on the web focuses more on visuals and recurring elements that tie everything together. This can include social networks like Facebook or local small businesses.<\/p>\n\n\n\n

\"Logos<\/figure><\/div>\n\n\n\n

In the end you\u2019ll rely mostly on the same techniques to create memorable brands that blend into a cohesive website. In this guide I\u2019ll share ideas + examples for designing a site that builds brand recognition through the entire experience. I\u2019ll cover branding tips along with layout ideas for web & UI designers.<\/p>\n\n\n\n

Notable Iconography<\/h2>\n\n\n\n

Visuals communicate faster that words and icons are a staple in modern branding. If you can find a way to attach an icon to your brand it can be used all throughout the site.<\/p>\n\n\n\n

Larger brands like Facebook and Twitter don\u2019t need to worry about this so much. Most people already recognize the lowercase \u201cf\u201d for Facebook.<\/p>\n\n\n\n

But how many people recognize the small stacked bars of Scalyr<\/a>? Considering their target market is much smaller than Facebook\u2019s, I\u2019d imagine few people(if anyone) recognizes their icon.<\/p>\n\n\n\n

\"Scalyr<\/a><\/figure><\/div>\n\n\n\n

And this is precisely why Scalyr has this icon in their logo & their favicon. Plus they use similar colors all throughout the site.<\/p>\n\n\n\n

As I mentioned earlier a brand consists of many things. Icons, colors, styles, textures, type, spacing, and even gestalt ideas<\/a> that consider the overall composition that emerges from the brand\u2019s many smaller parts.<\/p>\n\n\n\n

Scalyr adds these colors into the site to connect with this icon design. It solidifies their branding further on every page and it\u2019s one of the best techniques for a consistent layout.<\/p>\n\n\n\n

A more recognizable icon is the Docker<\/a> whale. This creature represents Docker\u2019s software using a colorful play on words with the whale stacking\/shipping containers.<\/p>\n\n\n\n

\"Docker's<\/a><\/figure><\/div>\n\n\n\n

You\u2019ll find this whale in the site\u2019s favicon and in a detailed illustration on the homepage. But a flat icon is also used in the top logo for every page.<\/p>\n\n\n\n

The overall shape of this flat icon differs greatly from the more detailed illustration. But you can still tell it\u2019s the same whale. This is the byproduct of great branding.<\/p>\n\n\n\n

Find ways to include your branding anywhere & everywhere on the site. Don\u2019t flood every page with similar graphics, but try to find ways to incorporate branded icons into the site naturally.<\/p>\n\n\n\n

Fixed Logos For Headers<\/h3>\n\n\n\n

The vast majority of websites keep their logo in the top-left corner. Most users know this so they know exactly where to look.<\/p>\n\n\n\n

One way to keep attention on this logo is with a fixed header. It scrolls along with the user offering access to all navigation links and the logo. This technique works great for responsive navs<\/a> so your logo can be fixed universally for all devices.<\/p>\n\n\n\n

\"TechCrunch's<\/a><\/figure><\/div>\n\n\n\n

TechCrunch<\/a> has the right idea with their fixed navigation. Their site logo uses \u201cTC\u201d to represent the TechCrunch branding.<\/p>\n\n\n\n

As you scroll down the nav shrinks along with this logo. It\u2019s the perfect way to keep the site branded regardless of where the user is on the page. This subtle technique offers a way to quickly identify a site at a glance.<\/p>\n\n\n\n

The same can be said for Cosmopolitan<\/a> which uses their full logo instead of an abbreviation. Luckily the site is wide enough to accommodate the logo & all the navigation links.<\/p>\n\n\n\n

\"Cosmopolitan's<\/a><\/figure><\/div>\n\n\n\n

This isn\u2019t something that\u2019ll deliver clear direct benefits right away. But over time visitors will notice that logo fixed at the top and repeat visitors will come to internalize your logo.<\/p>\n\n\n\n

Some designers loathe this technique because it can take up extra space at the top of the page. But I can\u2019t think of a better way to draw attention to your site\u2019s logo from anywhere on a page.<\/p>\n\n\n\n

And if your logo is too large you can always shrink it down when scrolling. That\u2019s what TechCrunch did and that same technique can be seen on tons of blog themes like HealthMag<\/a>.<\/p>\n\n\n\n

\"HealthMag's<\/a><\/figure><\/div>\n\n\n\n

Try to find a nice balance between natural branding and overtaking the screen. You don\u2019t want mobile users struggling to ignore your fixed navbar. But the benefits of keeping that logo in place will accrue over time in consistent brand recognition.<\/p>\n\n\n\n

Alternatively you could use a plugin like Headroom<\/a> to hide the navbar while scrolling down the page and re-show it while scrolling up.<\/p>\n\n\n\n

Branded Mascots<\/h3>\n\n\n\n

One of the best techniques for web branding is a digital mascot. This could be a person, animal, or a weird alien creature like Reddit’s Snoo<\/a>. <\/p>\n\n\n\n

\"Reddit's<\/a><\/figure><\/div>\n\n\n\n

It\u2019s best to create a mascot that fits with the overall branding. It should blend naturally rather than feel like a forced addition. Docker\u2019s shipping whale is a great example of a noticeable mascot that fits into their branding naturally.<\/p>\n\n\n\n

Note that mascots are not great for all brands. Animals are usually the most common, especially on websites, but they\u2019re not necessary. You can go pretty far with a simple icon and some recognizable colors.<\/p>\n\n\n\n

But think about those brands who are so closely tied to mascots. The name MailChimp<\/a> almost instantly conjures an image of their friendly postman monkey.<\/p>\n\n\n\n

\"MailChimp's<\/a><\/figure><\/div>\n\n\n\n

Other prominent animal mascots include the Foundation Yeti<\/a> and Mozilla\u2019s literal fire fox<\/a> (actually a red panda<\/a>, but you get the idea).<\/p>\n\n\n\n

Don\u2019t write off a branded character until you\u2019ve looked into some ideas. If you\u2019re not much of an illustrator you can even browse premium vectors<\/a> on GraphicRiver, or Envato Elements<\/a> to see what\u2019s out there. Here are just a few excellent options you have access to, as part of your Envato Elements<\/a> subscription:<\/p>\n\n\n\n

\"Mascots<\/a><\/figure>\n\n\n\n

Consistent Graphics & Icons<\/h3>\n\n\n\n

The word that best describes a successful web branding is consistency<\/strong>. You want to keep all pages consistent with the branding colors, icons, and general page orientation.<\/p>\n\n\n\n

When visitors internalize how a design works they\u2019ll become familiar with the site and all it\u2019s elements. Over time this leads to repeat users to consistently recognize the company branding and know where it\u2019s located on the website.<\/p>\n\n\n\n

When I say \u201cbranding\u201d I really mean any visuals that represent the brand. Vector mascots, icons, patterns, or logos are all fair game.<\/p>\n\n\n\n

Try adding these branded elements to any part of your site that makes sense:<\/p>\n\n\n\n