Taste comes in many forms . What may seem poor website design to one, may be good website design to another. Website design is an expensive and extensive part of any website build Going two and Going to and fro between the client and the designer is a costly business, but it doesn’t need to be. Commonly most clients are currently looking for clean web design.
The search engine experts will tell you that the best web sites provide the content to the search engines of the top of the page followed by links and other content . This normally means that the best position for a menu is on the right hand side. However by using CSS (cascading style sheets) it is possible to block the content so that you can position the content blocks for search engines at the beginning of the code for the page and show it in the middle or to the right as you wish. So with this in mind we will look at the most suitable choice of design for your website
The majority of web sites come in three different formats. They are one column, two column or three column web sites. The choice of each should be dictated by the amount of information which needs to be shown .
Then there’s the size of the displayable web page. We have to take into account monitor size. Four years ago 35% of monitors were 15″ monitors allowing of viewable width of 800pixels which everyone designed for. Actually 760px so that a horizontal scroll bar were not appear underneath. Times change and now we have to consider widescreen monitors and legacy monitors. Again the decision needs to be made dependent on what information is to be displayed. If there’s not much information to show then a single column fixed width 760pixel page would suffice . if a lot of information is on the page a three columns system which fits to the size of the screen would be ideal.
When we have decided which type of layout to use we can then elaborate on the style of the header. The header should not be to large in height as this pushes the relevant information down the page . There is an expression called “above the fold” and this is what you can actually see on the screen when you open up a web page. You want your user to see your relevant content so be in mind of the height of your header. The heading is where the initial focus of the site is found, so combining good imagery with a strong company logo you should be on to and a winner.
Now comes the detail. We have initially decided on a clean layout, so very large block like images are out. The images should be relevant to the website content and should guide the user to read or in the case of shopping carts guide the user to click on a product. Borders on the images are often nice And simple single line borders can keep images looking uniform unless of course a white background brings out the best in that image.
With detail in mind menu buttons which are mostly text but have a nice design to stand out increase the affordance that they are menu buttons. Content separators can be a stylish a way to separate text. Text headings can be made a little more elaborate to focus on what the content is about. Small touches like read more buttons, go back buttons and search buttons, really do add to the clean effect of the web site if they complement the overall colour scheme, not too dramatically but sensibly.
In summary any clean design can be an affordable design, but the layout should reflect the intended content. Do not forget those small styling touches as they really can add to the overall affect of any websites design.
About the Author
Neil MacLeod runs http://www.Web-Studio.co.uk, providing web site and web marketing services in Buckinghamshire. Neil has been building websites since 1999 and is a founding member of http://www.itwebnetwork.co.uk -
There are billions of different Web pages floating around the Internet, and unless you have the ability to trawl Google and memorise the URL of every page of every site, there’s no way you’d survive out there without a little help.
Thankfully, we don’t have to wander round the Web feeling our way like a zombie in a maze. Navigation forms the basis of any Web site, and always has done. Despite the fact that it is a necessity of Web design, it has become something of an afterthought for many designers, as they concentrate on trying to get clever with content.
Navigation remains the single most essential aspect of site construction, and the wonders of modern technology mean you can guide your visitors around your site in a range of innovative ways to make their online experiences all the richer and more rewarding.
What?s the point of navigation?
For the benefit of anyone arriving on the planet in the last few minutes, the base principle of site navigation is to help your visitors find their way around your Web site, providing links to all its pages. Common sense reasons that it is imperative that your site is easy to navigate or your guests will soon leave the party for pastures new.
The home page of a web site is where visitors form their impressions about the entire design, and its importance far outweighs that of the other pages that make up the site. The same theory applies to the site’s navigation mechanism, ie if you manage to convince new visitors to make the step from your home page to one of your sub pages, the chances of them wanting to peruse the other delights on your site increase no end.
Proper site navigation should give the visitor a sense of ‘place’ within the site. it should help you maintain consistency throughout the site, even establishing something of a brand. It’s important that anyone delving through your site knows how to get back to where they started, otherwise they’re likely to flee in frustration.
Your navigation system should also encourage the user to explore other areas of the site by suggesting pages of related interest, and challenge their minds by pointing them towards more obscure links elsewhere online that will interest them. Ultimately, your top priority when designing site navigation is to ensure that the user doesn’t have to work hard to find everything you’re offering.
Traditional navigation
Back in the old days, navigating the Web was a completely different experience from the one you’ll see today. We all know that developments in Web design software have made it easy to create prettier pages with flashy graphics and stylish content, but site navigation has also evolved considerably.
In the late Nineties, when the Web was just beginning to take shape, the core device for site navigation was the trusty textual link, and a blue underlined piece of text was your ticket to a world of information. once clicked, the text link would turn purple (or sometimes red) to indicate that this was one corner of the Web that you’d already explored, and this became something that even newcomers to the Net could get their head around right from the off. Of course, these conventions still apply today, albeit in a slightly more ‘glam’ format.
A few years ago, the closest you’d have got to a graphical interface on a site would be a series of boxed text links across the top of the page of running down the side. Occasionally these would be accompanied by hideous animated GIFs or clipart that vaguely represented the part of the site a link pointed to (’home’ would be a house, ‘contact us’ a phone, ‘buy’ would be a stack of coins, etc).
Just because these navigation systems seem a little primitive from this side of the Millennium, it doesn’t mean they weren’t effective, and they are still used in some form these days. The Site Map, for instance, was one of the first devices to appear, and still represents probably the quickest way to find your way around large Web sites. On the whole though, exploring a collection of pages in 2003 is a much richer experience than it was seven years ago. The emergence of modern WYSIWYG design applications and advancements in graphic manipulation technology have meant that Web developers can get more imaginative with their navigation bars in order to truly achieve usability.
Navigation musts
If you mosey along to any Web site worth its salt and look carefully at how it was put together, you’ll notice that all the big sites follow the same navigation methods: a tidy nav bar for effect with a bandwidth friendly set of textual links somewhere on the page. However creative you think you are, or however much you want to hurl saliva in the face of convention, there?s no use trying to fight against these methods. They work and they always will work, and users are unlikely to stick around if they don’t get what they’re expecting.
Textual links, or embedded links, are the most basic form of navigation and represent a clear, instant method of accessing pages within a site. These are generally arranged in the form of a series of underlined words across the top of a page or a list running down the side.
Another key device in the quest for an easy ride online is ‘breadcrumb’ navigation. By using trails of HTML links, you can show the route from the home page to the current page, helping the visitor to move up and down the menu tree more effectively, especially on large, page heavy sites.
In order to give the user the richest, most diverse surfing experience, it’s wise to slap in as many related links, within reason, as you can unearth. The key here is to avoid simply using the obvious links, and to add pointers to more obscure, off the wall sites that are likely to titillate your readers, adding greater value to your site in the process.
It’s also important that you position your navigation links in a place where the user will expect them to be, and where they won’t intrude into the content of your site. Many Web designers favour the placement of links along the top of a Web page, plus down the left or right hand side, and at the bottom of each page for good measure. Basically, you need to make sure that your visitors are never more than a scroll wheel rotation away from the next page. Make sure you stick to colour conventions too: blue is generally recognised as the norm for a text link, with purple or red used to indicate a page that’s already been accessed by the browser.
New methods
While these traditional navigation principles should still be foremost in your mind when designing pages, there are a number of other devices kicking around town that are also worth thinking about.
Let?s first consider image maps, a navigational tool that has the potential to be something quite special, but which invariably turns into a confusing mess. The key to achieving a workable image map is to choose your picture carefully. Make sure it’s something that lends itself to being logically sliced up and split into parts, rather than a generic piece of art with no determinable boundaries within it. if you can afford to do so, buy the image in from a picture agency before slicing it up in Image Ready (or a cheaper alternative such as Paint Shop Pro) and exporting it to your Web editor to apply the rollovers.
If pictures aren’t your bag, or if you’re keen to avoid bandwidth heavy navigation, you may want to think about exploring the DHTML route or even applying JavaScript pop up menus. While these have been around a few years now, they’re still called upon by pro designers as a means of adding dynamic navigation. Adding DHTML menus is far easier today than it ever was, and there’s plenty of software around that will do the job for you without you having to lift a brain cell.
However, when it comes down to designing sites ‘in the Twenty first Century’, you won’t find many better tools for the job than Flash. Macromedia’s cherished vector graphics application houses all the functionality you need to produce slick, easy to follow, fast loading navigation. The program allows you to create virtually any type of dynamic navigation system you can think of, from stylish icons and Flash buttons to pop up and pull down menus. Flash is also great for generating actions and animation within a navigation bar in order to engage the user and promote interactivity.
Ironically, relying too heavily on these swanky new navigation methods can lead to your site becoming overwhelming to a visitor, and a jamboree of weird and wonderful menus is no use to anyone. If you are intending to use devices such as Flash or JavaScript menus, always make sure this isn’t your sole form of navigation, and that there are text links for those without the right plug in. As accessibility is what we should all be striving for these days, you should always be sure to include ALT tags on any images you include in your navigation to cater for anyone using a screen reader and make sure you create a text only version as well.
If you really want to know if your site is truly useable, the best idea is to unleash it on a group of friends and get them to try and navigate it. Come up with a list of things that a user might want to do on the site, then observe your guinea pigs as they try and access the information. You’ll soon learn that it pays to keep things simple and not to try anything too elaborate when designing navigation. That’s not to say you can’t be original, and with advancements in creative applications such as Flash, navigating Web pages can only get more enjoyable.
