The consumer's experience of your site translates into the user's expectations and opinions of your entire company, product or service.

Because the web is a low-trust environment, your online presence should be up-front, open and transparent.

Construct a neat, concise online personality, and apply it consistently.

Web Page Personality

If your company has a certain tone-of-voice or style for print publishing, on the telephone, or in person, you should aim to translate that to your web presence.

This isn't just a case of doing the same online as you do in other forms of communication, because the web is a special kind of environment. (Remember, people are less trusting and more impatient when they're browsing the web).

(See also Stanford boffins' report featuring 10 guidelines for building credibility online).

Your whole message should be punchy and to-the-point.

Don't cajole, or try to intrigue, you don't have time.

Decide on your site's personality, and stick to it.

Web Page Tone of voice

Active voice is important: present what "you can do" or "what you can get", e.g. "Register for our newsletter" / "Log in" / "More about Service A".

Does your Web Site have a Heart?

Soul, heart, guts, whatever term you prefer, if your brand is going to cut it, you need a big dose of heart. That means reality, ownership, and self-belief.

For a brand to work, it has to have credibility. The easiest way to be credible is to believe it yourself.

For me, that means being the "Web Doctor", using "Web Doctor" in correspondence, online, in phone conversations, in press releases. Like a method actor, it means living out the brand, so that it comes through every action and connection.

Because it's so easy to create on the web, a lot of people devalue their own brands even as they create them, not realising this simple secret. I see lots of sites that fail simply don't have the courage of their own convictions. My Bytecon case study is a great worked example.

Your Brand should Focus on the best bits

When you 'own' your own brand, your consumers see what you give out, and what you give out comes directly from what you believe.

The easiest way to increase impact is by choosing the right beliefs.

This isn't about being false, but focusing on the best bits. You don't have to tell the whole truth.

Note: This isn't just great for projecting a powerful brand - it's great anyway!

Talk about positives, and avoid negatives, i.e. say what you do, or can do, what you believe in, how you work, what you have done, what your experience is...

Usability and Branding for the Web

Usability is crucial for communicating a positive brand impression. Do everything you can to ensure your visitors get what they came for, and have a smooth, positive, enjoyable experience.

There's no point having a web site that looks just like your print brochure, if it's useless.

UIE article on the importance of usability in online brand experience »

Visual Branding for the Web

Be consistent with other media output, but don't necessarily apply every brand guideline slavishly, particuarly with colour.

There is no Pantone for the web - you can't guarantee how a colour will appear on your users' monitors, and not every printable colour can be displayed on-screen.

Carrying a brand over to the web is more than following through your corporate colours and fonts. It's more important to translate your offline experience into a positive and compatible online experience.

Web Branding Examples

I've done a whole case study on translating Harvey Nichols' brand to the web.

Starbucks home page

Starbucks site is bland and dull, nothing like as rich as the experience of using their franchise outlets.

Do you love our approach to crafting simple & effective web sites that just work for people?

We'd love to hear about your web strategy. Contact one of our team today!

Search this site
Pro Tips
Learn how to make fantastic web site designs..
Buy "Save the Pixel" now!
On “Save the Pixel”
Clicss templates, great robust useful CSS templates from £40
Share this Article
Send to a friend now&hellip
Follow Ben Hunt on Twitter
Floor 3
111 Buckingham Palace Road
London
SW1W 0WQ
UK
Phone
+44 (0)207 1600 989

Articles + tutorials in Graphic Design for the Web

Web Design index
List of articles and tutorials in Web Design section
Current Style in web design
My summary of the crucial advances in web design in recent years, why today's web sites are better than they were 10 years ago.
Web2.0 Design Style Guide
A guide to the Web2.0 web look, why each feature is effective, and tips on applying the Web20 style to your web sites.
White on White Web Design Style
An overview of my current super-clean design style that really lets the content stand out.
The 10 best-designed web sites in the world
My personal list of 10 favourite sites, and why.
8 Clean web site designs for inspiration
I love collecting links to sites that inspire me to push my own design further, and I thought I'd share my favourites to help inspire you too. The first set perfectly illustrates the core principles of pixel-saving in minimal, clean layouts that focus on the content.
8 Rich web site designs for inspiration
This bunch of sites are all graphcally intense, using a lot of pixels to create a rich experience that doesn't get in the way of successful communication.
9 Functional web site designs for inspiration
A varied group of excellent home page designs that are quite different, but manage to combine brand & functionality effectively on first view.
Clarity in web page design
Making a clear web page depends on making the most important elements appear important, less important stuff less important, related stuff look related, and different stuff look different.
Colour
General guidelines on how to use colour in web pages.
Contrast
The importance of tonal contrast in graphic design for the web
Effective text
Explores the strengths of using HTML text rather than words as graphics in web design
Imagery
How to use imagery to best effect
Attention Map
A low-fi tool for planning page layout, helping you plan what your page should do before you get your hands dirty
Content
Tips on creating effective content for your web pages
Zoom Your Content
Knowing how to size your content appropriately is a fundamental and critical basic skill. All is explained in this article.
Layout for web page design
Overview of the major graphic design devices
Containment
Containment is a layout tool that says visually This thing is part of that
Alignment
Using alignment in visual design for the web to associate related elements
Grouping
Associating elements through relative positioning in space
Rhythm and repetition
A further technique for associating elements is through repeating common styling
3D Effects in graphic design for the web
Guidelines on how to use 3D effects effectively in graphic design for the web
Branding
Tips for branding on the web
Logo design
The four attributes of an effective logo: shape, presence, weight, and contrast
Some Great Web Logos for Inspiration
Sharing my personal collection of almost 50 favourite logos gathered from round the web, with notes on what works & why.
Favourite logos
An older collection of my favourite logos from around the web, with analysis of why I think they work.
Real Web2.0 Design & Branding
Web 2.0 design is not the same as star flashes and shiny table effects - it's about simple, bold, honest brand experiences.
Case study: Artorg
Tweaking the layout to ehance the user experience of a nice community site for graphic artists
Case study: Business Improvement Network
Applies a totally new look and feel to the web site of a business networking organisation
Case study: Kemik's portfolio
Simplifying and enhancing an already attractive artist's portfolio to make it more engaging.
Case study: FairSay home page
A web doctor report for non-profit organisation's home page.
Case study: Media Volunteer
Simplifying and brightening the entry point for a charity application