eSites Network Website Design

WHAT'S NEW?
Loading...

Brand Building With Web Design

First of all, what is a brand? A brand is a symbol. Symbols are designs which represent something else, and a brand is meant to package all of the associations, experiences and characteristics into an abstract construct. This construct can be evoked using consistent imagery, sounds, phrases and logos with which people come into contact.

Brands are very important as they help you win customers and they also help you to keep them. They do this by awakening the associations and experiences you previously had with the brand, or have seen through advertising, when you come into contact with the brand at key stages. For example, when deciding what product to purchase out of a selection of similar items.

Brands set expectations, and when faced with uncertainty people tend to pick the safer option. People know what to expect from a brand they know.

Branding is a complex process that is performed across all types of media, from product packaging, TV commercials and magazine ads to interior store decoration and logotype design. Of course branding also applies to web design.

It doesn’t matter if you’re building a website for a multi-million dollar brand or a personal blog, branding still matters for the reasons outlined above. In the case of a personal blog, branding will help set you apart and make your site memorable. Here are some tips help you to build a brand with web design.

1. Color

The choice of a good color palette is very important in branding. Color isn’t just aesthetics — it stimulates various emotions and carries with it subconscious associations to various things and characteristics.

For example, the color red may actually increase blood pressure, pulse and respiration. It’s a color that symbolizes passion, energy, power and excitement. Because of this, it’s usually a good color choice for brands in the entertainment industry.

Other colors carry different associations and effects. Green symbolizes nature, environment, profit, money and health. It’s also a calming color, which is why hospitals usually paint their walls pale green.

When picking a color for your brand, research its effects and associations to see if it is an appropriate fit for the type of things your brand represents. Also note that different cultures may associate the same colors with different things, so it’s a good idea to check that your colors mean what you think they do in the markets you operate in.

Logitech use teal as the brand’s main color. Various shades of teal are used around their website, from background colors to headings and links:

2. Character

Does your brand have character? Infusing your brand with a little personality can help you define what it stands for.

Is the brand all about stability and safety so that your customers can be sure to rely on you? Is the brand fun and down to earth?

Many people in commercialized societies use products and brands to define themselves, so shape your brand’s character towards something which your audience will like to associate themselves with.

Anthropomorphism is the attribution of human qualities and characteristics to other things, like animals or objects. Infusing your brand with anthropomorphic elements is a good way to give it character.

Think about the icon for the "Finder" application on Mac OS X. It’s a blue square with a distinctive smiling face drawn with a few black lines.

The program it represents is a file browser, but by giving it human characteristics the designers give it a soul.

Twitter’s little blue bird mascot has proven very effective; all of the custom media and websites that Twitter fans create usually feature their own variation of it. They may all look a little different, but are still instantly recognizable.

3. Emotion

Emotion is another factor to consider when building your brand. What feelings and emotions do you want people to experience when they visit your site? What sort of things do you want them to associate with your brand?

Crafting the aesthetics of your site shouldn’t be about following the latest design trends, it should be about deciding on the emotions and ideas that you want your brand to project, and then working on a design that will do just that.

The Organic Express website makes excellent use of colorful images and earthy colors to create a rich and earthy brand, which is very important for a organic food company.

4. Consistency

To build a successful brand you need to make it memorable. What do you do to make people remember things? You repeat them.

Consistency throughout your web design will build on the choices you’ve made earlier regarding selecting the right personality for the brand and evoking the appropriate emotions. Keep consistent colors, visuals and typography throughout to ensure your website projects a uniform image.

Skype consistently integrate several branding elements throughout all of their marketing media, which include the color palette with a dominant blue, white 2D clouds with illustrations sitting on top of them and multicolored rainbows:

5. Reusing code and visuals

Consistent visuals and layout allows you to reuse more of your content, be it stylesheets or images. This means that your site will load faster as the user’s browser doesn’t need to download as many things — old images and CSS are already stored in its cache.

Apple.com integrates their logo with the navigation bar, infusing their brand into the page design:

6. Size and position of the logo

The accepted norm when positioning your site’s logo is to put it in the upper left area of the page.

That’s the area where most people will look at to see what site they’re on. Additionally, it’s best practice to link the logo image to the site’s home page. But position is only one element — size is also important. Ensure your logo is big enough to be the second or third thing that people will notice when they arrive on your site.

UX Booth has a nice, large logo in the top left area of the page, which is one of the first things that you notice when you arrive at the site:

7. Value proposition

When a visitor arrives on your site for the first time they take the first few seconds to orient themselves. Is this the right site? Does this look interesting? What is this all about? To answer these questions you should provide a clear and concise value proposition to your visitor.

This value proposition should be a short statement in a prominent location on your page. It should preferably be located next to the site’s logo so that when a new visitor reads the title of the site or business they’ll follow on to the value proposition.

In a few words explain exactly what benefit your site provides to the visitor, so that they’ll know not only what your site is about, but why they should keep using it.

The ReportBox website features a clear value proposition underneath the logo and navigation. The large font size ensures that it’s one of the first things that you’ll read:

8. Tone of voice

The language you use on your website needs to reinforce your brand’s character and personality. If your brand is a friendly and down to earth, and your audience are young, tech savvy people, then informal and fun tone of voice may work well for you.

On the other hand, if you’re making a website for an investment bank, the tone of voice should reflect that by being much more formal.

It’s not just about what you say — it’s about how you say it. You can say the same thing in different voices and get the same meaning across, but the personality that this voice emanates will be different; so choose a tone of voice that suits your brand’s character and audience.

Matt, a simple web app that helps you use multiple Twitter accounts, features hand drawn illustrations and a friendly tone of voice, ideal for the young, tech savvy audience:

9. Uniqueness

Getting all of the above elements will only get you so far though, because there is another very important thing to consider when building your brand: uniqueness.

If your website looks just like the competition, then is it really memorable? How would potential customers differentiate between the two? By putting in that extra effort to create a unique image you’ll not only stand out from your competitors, you’ll be more memorable, and that means a better chance that your visitors will come back for more.

Carbonica’s website features many recycled paper textures, hand drawn fonts and cut-out style illustrations. This earthy imagery helps promote the sustainable image that Carbonica strives for and is different enough to be memorable:

Conclusion

Building a strong brand is important not only for big corporations, but also for small companies and even personal websites and blogs. Branding helps people differentiate between competition and quickly judge quality.

The web is an excellent platform to build your brand, so it’s important not to ignore branding when working on your website. Make sure to utilize all the various techniques to make it powerful and effective.

5 Principles of Good Web Design

It’s difficult to map out what works for web design and what doesn’t after all, there are so many different and effective approaches you can take. For one website, a crisp, clean home page looks great, and for another website, a messy, colorful home page draws you in. However, there are a few principles of good web design, that are universal. Here we will explore five principles of good web design.

GOOD NAVIGABILITY

Before we can even begin to take the aesthetics of a site into consideration, we need to make sure that the website’s audience can easily navigate the website. While it’s not usually practical to include all of your primary content on the home page, you do need to include tabs that lead to the most relevant content the website’s audience is visiting the site for. For instance, along the top of the Fender website here, we see common-sense tabs along the top that link to common reasons a visitor would be coming to the site, including Products, Vendors, News, Store and Community. Along the bottom of the site, where they don’t distract from a visitor’s first impression of the site, are more detailed navigation options. Although the slideshow images on the site are big and flashy, visitors still know exactly where to go to get the information they’re after.

USE OF CONSISTENT BRANDING THROUGHOUT

Implementing the site’s brand throughout the various web pages is essential to maintaining a sense of continuity in a website. The Coca-Cola website does this well by incorporating its tell-tale red, white and black advertising color scheme throughout its pages. While a website’s brand doesn’t always equate to a particular color scheme, the brand should be implemented on every single page within a site so that the site pages flow together as one unit.

GOOD USE OF IMAGES

We’ve all seen websites that make use of a large central image to capture the eye when someone visits a page. While this can be done very successfully, you don’t always have to wow a website’s visitors with one large image. You can vary up your image sizes and incorporate them in different ways to bring color and life to a website. The Organic Express website makes excellent use of colorful images to make a visitor feel right at home.

USE AUDIO/VIDEO WISELY

People like to access multimedia on websites, but they don’t usually like to be overwhelmed with it. Better to let your visitors click on the audio/video themselves than to add in a flashy video or audio that launches as soon as the visitor accesses the site (there are exceptions to that rule though, especially for sites where "shock and awe" is the best approach). A good example of good use of video is found on the University of Notre Dame website, which features excellent navigation while prominently featuring a slideshow of a number of videos that interested visitors can scroll through and view at will.

STRONG TYPOGRAPHY

All the images and videos in the world can’t rescue a site with typography that’s difficult to read or not used in an effective way. Typography is a tool that tells the visitor what he/she needs to know and guides their eyes across the site. Finding the right typography to fit your audience and varying the size and prominence of certain words on the site is essential to getting the site’s message across. This Activate site uses typography well. They have contrast in the typography and uses fonts to draw emotions.

In conclusion, as you explore today’s web design trends and the newest techniques, remember to go over these guidelines. What are some rules do apply in your design?