One of the most important but often overlooked ingredients to a successful brand strategy is its website design.
We say overlooked because almost all businesses will have hired an ad agency or designer to design their site and will have been charged a ‘design’ fee. But rarely do they meet the challenges of the online world. This is not being critical of the design community, but rather a statement of fact. So much of the web today is misunderstood and good and functional web design is high on the list.
Some of the concepts that follow will conflict with the purist’s idea of ‘good’ design. But a website is not a blank A4 sheet of paper. It is a complex, ever changing set of controls that communicate to the visitor and guide her through a three dimensional environment, to a meaningful conclusion, and hopefully a transaction. A carefully orchestrated chain of events.
The team at Cracker have worked together for some years, pioneering design solutions, some more successful than others. But we were prepared to learn from our experiences, and our desire to understand the secrets of successful design led us to develop processes that did not exist.
We call this process and it's outcomes Brandware. And when applied to any web design objective, it works every time. The result is a website that meets (and in most cases exceeds) it’s business objectives, and provides a useful and compelling experience to the visitor.
So how does it work? Here are some key elements to designing an effective site.
Bandwidth. Most web users worldwide are still accessing the Internet via a telephone wire. Make sure your webpage loads quickly or you will lose them. We have moved on, countless times, when a web page was agonisingly slow to load. This is perhaps the most critical aspect to your home page. The first contact anyone has with your business, so make it snappy. Our rule is not to design a page which is greater than 70kb in total. We've seen pages that display a single image greater than our total page size! Images need to be reduced. GIFs should be optimised for web and never be kept at 256 colours. You can often get a good result on an image by cutting back to only 16 or 32 colours! JPEG’s need to be compressed as much as possible. If you’re not sure, then do a test. Save a typical image into 3 or 4 different quality levels and look at them together in a web browser. (See section on Colour)
Have a clearly defined objective. Your objectives need to be very clear in order for you to have an appropriate design solution. If you are hiring a designer, you need to be able to use these objectives as your brief. If you’re the designer, then use the objectives as your guidelines.
Your design objectives should never be to win awards. You’ll end up with something quite beautiful but meaningless. Work your objectives around your web strategy. If you don’t have a strategy then don’t design a thing until you do. Too many badly designed sites have been conceived at the design stage. Note where design fits into our project hierarchy.
Remember, the most effective sites clearly communicate their value proposition at the first page – a little like buying a magazine that starts at the content page. As designers, we all want the beautiful glossy cover. Get past this notion and get real about what you’re providing. Constantly keep referring to the objective and ask yourself, “Is this webpage direct about it’s purpose, is the navigation easy to use, will the page load quickly, and finally is it compelling enough to make me look confident and inviting?" Reward visitors with a great experience. If you can do all this, then the rewards will come. Your websites will provide a return on their investment and you will be among the top 1% of true internet strategists in the world today.
Back to the top >
Navigation. This is so often handled badly. Big clunky buttons with marbled textured are out. So is blue underlined Times Roman. So is Flash! (More on that later) Most web users today are savvy enough to move their mouse over the page to find links. But make the links reasonably obvious. Caution: DO NOT HIDE YOUR LINKS. It’s self indulgent, and an annoying waste of time.
Live text with hover states, or mouseover states work best. This is where the text will change colour or become bold on mouseover. Like this line for example >
Try to avoid using images of type as your buttons. Search engines index pages by following links. Image buttons will hinder the effectiveness of your ranking. If you must use graphic buttons, then make sure your image <Alt> tags repeat the description of the link. Alt tags were devised as text descriptions of images for those early web boffins who insisted on browsing the net with their images turned off. (There are actually still about a dozen or so people doing this. They also belong to the Flat earth Society) You can use this to your advantage as a way of enhancing your search engine relevance. Here’s how they work in HTML.
Example: <img src="search_engine.gif" width="60" height="25" alt="Get ranked high on search engines">
The <img src>tag is the image source of our graphic button. <alt> tag is our description.
Get right to the point with your links. How many websites have you seen that list the contents of their site as follows:
· Welcome
· Products
· Team
· About us
· Contact us
Not only is this boring and uninteresting, but it gives me absolutely zero reason to want to look further.
Invite people to click on something by arousing their curiosity. They’ve most likely come to your home page for good reason, reward them great information. A Relocation and Removals company navigation bar could look like this:
· Save up to 30% off your next move >
· Pre-pack made easy – 20 painsaving tips >
· Migrate your pets with less trauma >
· Insurance – its inexpensive and could save you thousands >
· Save time – quote online >
· Book your relocation now >
· Testimonials – read about the realities of move day >
Each of these links has a direct benefit or “what’s in it for me”. Each of them will link a customer to getting great information and assistance, and moreover, making that crucial buying decision.
One more thing. Don’t make your visitor click through 3 or 4 pages to get the information they want. Try and keep your navigation structure ‘flat’, that is to say more like a plateau than a pyramid.
Colours Most RGB monitors in the world today operate on a visual display comprised of 256 colours. The Internet, however, only supports 216 colours. What happens then, when you present a 256 colour image online is that the browser will interpret the image to match it’s own web safe palette. This usually results in poorer image quality. There is a 2nd and very important aspect to online colour management. Bandwidth. For every image displayed on your web page, 256 bits of information need to be sent downline and interpreted by your browser. That’s a lot of additional information to add to your webpage. To over come this, CompuServe invented the GIF, or Graphic Interchange Format. The beauty of GIF is that you can index the colour palette. In simple terms, this means you can reduce your colour palette from a hefty 256, to 128, 64, 32, 16, 8 or even less. Exact can be 2 colors in a small logo. This makes an enormous difference to image file size.
JPEG is also a supported image format for the web. Jpeg works differently to GIF in that it presents all the original colours of the image but compresses file size using algorithmic compression. In other words it does away with redundant ‘gaps’ in the colour calculations of the image. Jpeg comes into it’s own on larger pixel dimension images, whereas GIF is more effective onpain saving smaller pixel dicoloursmension images.
It's a web page, not a brochure!
We always think about a webpage, as a contents page of a magazine rather than the front cover. What’s the biggest difference between a brochure and a website? You don’t have to reprint a website to change your phone number. Actually, the key difference is that your web site is ‘interactive’ and its information dynamic. It’s a 2-way, one-to-one communication. And if set up properly can build enormous brand loyalty and a never-ending stream of revenue.
Back to the top >