Branding for websites: successful yet subtle tips for designers - envato.com coupon

So much goes into a great brand that it’s 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.

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.

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

Notable Iconography

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.

Larger brands like Facebook and Twitter don’t need to worry about this so much. Most people already recognize the lowercase “f” for Facebook.

But how many people recognize the small stacked bars of Scalyr? Considering their target market is much smaller than Facebook’s, I’d imagine few people(if anyone) recognizes their icon.

And this is precisely why Scalyr has this icon in their logo & their favicon. Plus they use similar colors all throughout the site.

As I mentioned earlier a brand consists of many things. Icons, colors, styles, textures, type, spacing, and even gestalt ideas that consider the overall composition that emerges from the brand’s many smaller parts.

Scalyr adds these colors into the site to connect with this icon design. It solidifies their branding further on every page and it’s one of the best techniques for a consistent layout.

A more recognizable icon is the Docker whale. This creature represents Docker’s software using a colorful play on words with the whale stacking/shipping containers.

You’ll find this whale in the site’s favicon and in a detailed illustration on the homepage. But a flat icon is also used in the top logo for every page.

The overall shape of this flat icon differs greatly from the more detailed illustration. But you can still tell it’s the same whale. This is the byproduct of great branding.

Find ways to include your branding anywhere & everywhere on the site. Don’t flood every page with similar graphics, but try to find ways to incorporate branded icons into the site naturally.

Fixed Logos For Headers

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

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 so your logo can be fixed universally for all devices.

TechCrunch has the right idea with their fixed navigation. Their site logo uses “TC” to represent the TechCrunch branding.

As you scroll down the nav shrinks along with this logo. It’s 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.

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

This isn’t something that’ll 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.

Some designers loathe this technique because it can take up extra space at the top of the page. But I can’t think of a better way to draw attention to your site’s logo from anywhere on a page.

And if your logo is too large you can always shrink it down when scrolling. That’s what TechCrunch did and that same technique can be seen on tons of blog themes like HealthMag.

Try to find a nice balance between natural branding and overtaking the screen. You don’t 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.

Alternatively you could use a plugin like Headroom to hide the navbar while scrolling down the page and re-show it while scrolling up.

Branded Mascots

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.

It’s best to create a mascot that fits with the overall branding. It should blend naturally rather than feel like a forced addition. Docker’s shipping whale is a great example of a noticeable mascot that fits into their branding naturally.

Note that mascots are not great for all brands. Animals are usually the most common, especially on websites, but they’re not necessary. You can go pretty far with a simple icon and some recognizable colors.

But think about those brands who are so closely tied to mascots. The name MailChimp almost instantly conjures an image of their friendly postman monkey.

Other prominent animal mascots include the Foundation Yeti and Mozilla’s literal fire fox (actually a red panda, but you get the idea).

Don’t write off a branded character until you’ve looked into some ideas. If you’re not much of an illustrator you can even browse premium vectors on GraphicRiver to see what’s out there.

Consistent Graphics & Icons

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

When visitors internalize how a design works they’ll become familiar with the site and all it’s elements. Over time this leads to repeat users to consistently recognize the company branding and know where it’s located on the website.

When I say “branding” I really mean any visuals that represent the brand. Vector mascots, icons, patterns, or logos are all fair game.

Try adding these branded elements to any part of your site that makes sense:

• Header
• Footer
• Favicon
• Buttons
• Newsletter(s)
• UL/OL list icons

One of the simplest brands in the design space is Codrops. It’s one of the most popular frontend dev blogs online and their branding is easy to remember.

Visually it makes sense to have water droplets represent the site. This waterdrop icon appears in the top logo & the site favicon. Not to mention the site itself uses many of these colors for links, buttons, and related page elements.

Consistency breeds awareness and a layout with so many branded areas makes the site feel truly connected.

The homepage for Sketch is another fine example. It uses the orange gem icon everywhere from the header to the footer and in the favicon. Plus important page elements also use the gem’s orange/yellow color to draw attention.

There are no specific rules about consistency or brand appearance. You can add icons, colors, logos, mascots, or anything you like to any place on your site.

Just make sure you never sacrifice usability for the sake of branding. A website should be usable no matter what. Consistent branded elements are only there to help sell the website and the company.

Putting It All Together

A well-branded website should be easy to recognize even far away from the screen. And these brand concepts go beyond just a logo. You should create a noticeable branded “aura” across the entire site using similar typography, color, spacing, and related design fundamentals.

Pay attention to any new sites you visit. Look for their branded page elements and see if you can copy any of their branding techniques in your own work.

The post Branding for websites: successful yet subtle tips for designers appeared first on Envato.

envato.com coupon from Envato http://ift.tt/2kXfmqC
envato.com coupon