Web Log Costa Blanca

Recently, I have been doing a lot of Web design and development work “behind the scenes.” There hasn’t been much that I could share with readers of this blog. But around Christmas I did create a Web site that you may like to glance at—and I have finally found the time to add it to my Web design portfolio.

Actually, I have mentioned this site before, when it was just a one-page Web site. It’s a property site, but for a single property. Liz, the owner, is keen to sell her villa fast. She has called on the services of a few estate agents, but also wants to see if she can manage a private sale.

She had dozens of photos I could use, and I took another fifty or so myself.

For colours I very quickly hit on black, to offset the photos. I also used some pastel colours to highlight and distinguish information for 2 different kinds of buyer—those looking for a villa for themselves, and those looking to rent. For the final effect, you can have a look for yourself.

Of course, if you look at my portfolio, you will see I have pinched one effect that I used before: an orange gradient that remains fixed in the viewport. (But it is is a different shade of orange!)

Lots of Web sites are based upon pre-designed templates, with placeholders which a website owner or website designer can fill in: “Company name,” “Your tag line here!” Some Web design companies on the Costa Blanca even publish portfolios of sites based on website templates—at least they look like website templates to me. Is there anything wrong with using such templates, instead of having a bespoke Web site?

Let me admit, to begin with, that many website templates are elegant and professional.

I still don’t like them. And here are 5 reasons why.

1. Elements of the template—and sometimes the entire template—may be inappropriate. The imagery may not be right for this particular Web site, or the colour scheme, or the layouts, or the navigation. In extreme cases an entire site has to be created following a formula dictated by a given navigation scheme. Or the number of top-level pages is limited by a given set of navigation buttons. Visitors may find it harder to do what they want on the site, because the template isn’t designed for specific visitor tasks.
2. Even where the look and feel of a template is OK for a particular Web site, and visitor tasks are not hampered, the website template may not express what is most important about a business or organisation—its own character, its unique selling point.
3. There is no real design input from the client—no chance for her or him to stamp their own wishes or personality on their own Web site. The best they have is a choice between templates.
4. There is no real call on the website designer’s craft. The client gets a supermarket ready meal instead of a menu of chef-prepared dishes.
5. Most important: the template Web site will not work for the client as it would if it were the result of serious preliminary analysis. Before design comes analysis: what will count as success for this particular Web site? what visitors does the client expect or want to attract? how are these specific visitors most likely to join in the campaign/sign up/part with their money (whatever)?

No template-based Web site will ever work for a client the way a bespoke Web site can.

As website designers, our first job is to work out why people will visit the Web site we are designing. The second is to work out how their experience can be made so positive, even enjoyable, that they do what the website owner wants them to do.

I recently signed up for a local business directory. Since I am using it as an example of what not to do, and since the people who run it are such nice people, I won’t name it. When I looked at my entry I saw the word Website, but no website address. Also the word Email, but no email address. I wrote to the directory to protest.

Before they wrote back (actually, they haven’t written back yet) I checked my entry again. Then I thought, ‘Maybe the bare names are links.’ And so they are. By clicking on the word Website you can go to the Web site. Click on the word Email and you can compose an email.

So I was being stupid, right? You can make up your own mind on that. The important point is that it is the job of the communicator to communicate. If a Web site doesn’t communicate, to every relevant visitor, it fails. Here, the bare words were not enough to communicate that there was hidden information. There was no underline to indicate a link, and in 2009 no colour is enough. (Check out my earlier posts about links.) As it turns out, there’s even a tool tip—but you’d have to move your mouse to the words to find that out. So this is rule 8.

8. Be 100% obvious.

And 100% means 100%. Everything a website visitor can do must be crystal clear. All information must be up front and visible. There are plenty of ways of making even an email address visible to human visitors without its being visible to spambots. And if you hide it, you must say so, in an obvious place that a human scanning the page will see at a glance.

If a website visitor has to guess or work out what to do, the Web site is not 100% obvious. If a website visitor has to do something off their own bat to find information that is on the page, the Web site is not 100% obvious. Remember, 100% is 100%: 99% won’t do.

Earlier this week I was asked to look at the design for a new Web site. Since the designer was only asking for the views of established website designers, I won’t add a link here.

The site was lovely to look at, with elegant illustrations, sophisticated typography, and plenty of white space.

Of course, even as a visual design, it had a couple of problems. The menu system wasn’t exactly proportioned, and the balance of the page wasn’t quite right. But that wasn’t its real problem.

The designer had concentrated on making visually attractive pages. He hadn’t spent time thinking about the purpose of the site, who he really wanted to visit, what those visitors would be looking for, etc., etc. There was no focus, no site concept other than to look good, and it was barely useable.

I have written before about how website design is not about creating pretty pages. In a follow-up post, I compared website design to designing teacups or bridges, but in formulating my response to this designer’s site, I was hit by a much better analogue: kitchen design.

What really counts about a good kitchen design is that everything a kitchen needs should be in the kitchen, that the person who is going to be using the kitchen can find everything easily, that everything is really easy—even a joy—to use. And what matters about the look of the kitchen is that the kitchen user, plus her/his friends, feel at home in it, enjoy being there. (The designer is not going to be cooking in that kitchen, nor drinking coffee with friends, nor having breakfast, etc.)

You can spell out the similarities for yourself. Once again it underlines how good Web design is visitor-centred Web design, not client-centred Web design, and certainly not designer-centred Web design.

As the title suggests, this is the seventh in a series of rules for website design, which began in June of last year with Rule 1. In that post, and in the second post in the series, I explain what I mean by a rule, so I won’t repeat the explanation here.

The rules are supposed to be in some sort of logical order, and focus on visual design for the Web—assuming that the all-important work of analysis has already been completed. So the last rules were about choosing and using colours, throughout a Web site. Time to look at individual website pages at the moment of creation. Here then is rule 7.

7. One Web page, one focus

In other words, decide what is the most important feature of the page you are working on—and make sure it looks the most important. Make it stand out. Make it the focus of attention.

There are lots of ways to do this. Variations in size work: make it the biggest element on the page. Or it can be the best-placed element, or the most strikingly coloured—or it can catch attention by being intriguing. Attention-grabbing contrast will often work: a reverse block of colour, an oversize font, a juxtaposition of colours…

On an ideal Web page, there is something a visitor can take in in the first second of the page loading. This should be the most important thing on the page. Similarly, if a visitor stays after the first second—they may not—she or he should be able to see what the page has to offer without reading any text (except maybe a header).

It follows from this that there shouldn’t be two or more elements competing for attention. There should be only one ‘top dog.’ This may mean taking risks: so take them. As design guru Jim Krause says, “You must be decisive.” As (designer) Robin Williams says, “Don’t be a wimp!”