So, what constitutes good web design these days? Good question, but before I address that…let’s backtrack.
I started using the Internet and the Web back in the early 90′s, pretty much since the Web’s inception in fact, and I built my first website about nine years ago. Despite the advance of the technology and the genre, the basic principles of good web design have changed very little. So, what are they?
- Clean and elegant design.
- Ease of navigation.
- Compliancy and Accessibility.
When I first learned how to design for the web, I did it the old fashioned way, I learnt how to write HTML by hand, not using a WYSIWYG or Web Design application, but in notepad (encouraged by my husband Luke, who had build his first website entirely in notepad in the mid 90′s). Of course, later down the line I learned how to use Dreamweaver, but would still do a lot of code by hand . I also did some accredited courses, followed the guidelines of the W3C, bought a ton of books on HTML, XHTML, Javascript, CSS, and I studied hard. I like web design, I like web sites…no, strike that, I LOVE web sites. I really enjoy looking at good websites, and I have hundreds bookmarked into categories of good design, bad design, functionality, content etc. I spend ages cruising the web looking at sites, their design, layout, function, and whilst I am no expert, I have a good eye for good design and bad design gained through having notched up quite a few years of experience as a designer and user.
So, what constitutes bad design? Well, not necessarily what you may think and not always a site with dull graphics, poor choice of colour combinations, or uninteresting content.
Sadly, what we tend to see of late is ‘style over content’. Sites that look amazing, but are heaving with features, apps, gadgets, links, boxes, bells, whistles…the lot, that it becomes a case of ‘being unable to see the wood for the trees’. I think part of the problem is that web design and web development have been separated, and many web designers (read that as ‘graphic designers’) are so focused on making their design look unique, stylish, cutting edge that they have lost site of who their readers and users are, and also how people view and process information. So, your graphic designer mocks up an amazing looking interface and hands it over to the developer (coder) who makes it work. The site will be overloaded with graphics (slow loading), features, apps, links, boxes,yet more links, more navgation, a veritable rainbow of colours, and teeny weeny text. No thought to compliancy, accessibiltty, cleaness and functionality of design.
So, lets examine those basic principles of design.
- Clean and elegant design:
A website exists to communicate data and information and should be content driven. Therefore, the design should facilitate this. Colour palettes should be kept to a minumum, no more than three basic colours (though gradients of those are acceptable). The palette should be based on the use of ‘complimentary colours’. Layout: keep it SIMPLE please, evenly balance with skilful use of ‘white space’. The first lesson of web design is ‘less is more‘. Keep the blocks of information simple and well placed. A head banner, main content, side bars (one or two). Sounds boring to you, old fashioned? Not if you are clever and judicious in how you make use of your layout. If the site is too busy, people become frustrated tyring to find the information they want amongst the myriad of boxes, tabs, links, navigation bars and simply click away. You see, when people look at a website, they ‘scan’ they don’t read. So content needs to be composed in such a way to focus a users attention, and catch their eye.
- Ease of navigation:
Navigation links should be kept to a minimum and should be placed in a section of the page where people can find them easily. Because, people have come to your site to find information, and they don’t want to spend ages doing that, and having to search and ‘drill down’. Studies of how people use the web have shown that users will not click more than 7 to ten links on a page. If you need more, then use drop down menus. But, keep links on a page to a minimum if you can. If you have extra data, then make use of footer widgets. If you include ‘categories’ on the page, as the design here does, try and ensure that the page overall is simple and clean it it’s design (again, clever use of white space), and therefore break it up into manageable blocks. But not too many.
- Compliancy and Accessibility:
Something that too many web designers, and web design companies pay little heed to, but is crucially important. What looks good to you the designer, may not look good or even be readable to someone else. Text that is too small, or placed over a background that makes it indistinct and difficult to read is poor design. I should not have to adjust my view settings to be able to read the text on a page. Images should use alt and title tags wheneever possible. For instance, this theme does not include a function to add alt tags to all the images, which is an issue for me. Alt and title tags are very important for people using image recognition software and who have problems with their eye site. It should be mentioned that IE wont render title tags, and Firefox wont render alt tags, so try and include both if you can.Websites need to be clear and concise in content, and how they render, and translate. Grammar needs to be accurate and precise for those whose are non native speakers of English. A page should render and translate gracefully, using code that is well written and employs fully ‘cross browser compatibilty’. I could go on and on about all these issues and it would cover pages, but for those of you reading who are not familiar with the W3C Guidelines on Accessibility, then go and READ up on them. W3C Accessibilty Guidelines. Too many webs designers are focused on their own needs, their own tastes, and do not fully enage with what the user needs or wants. It’s time to be less self indulgent and focus on ‘good design’.
- SEO: Search Engine Optimisation:
- Site title: Amazingly some people put little effort into this and are content for their site title to say little more than ‘Home’ or Index’. Your site title needs to be meaningful, concise, not overlong, and also be reflected somewhere on the page.
- Meta data: Make sure your meta description actually reflects what is on your page and includes your web site title.
- Search words: NO more than ten, believe me, and terms that are included in your content. Some websites have about 30 or more, but that will actually get your site marked down.
- Page content: Ensure that your search times are included in your content as above, and your site title also.
- Image tags and dimensions: Believe it or not, omitting ‘alt’ and ‘title’ tags and image dimensions will also affect your score.
- Linking: the more sites that link to yours the better, and the more important they are the better. Directory sites wont cut it. Submitting your site to Demoz will make a difference. Few people use it anymore, but it does help your ranking.
Though not a facet of good web design from a users point of view, in what is now an over crowded arena, SEO has become very important. I have spent a LOT of time studying SEO trends and techniques, and how to make it work for me. I work hard on all my websites to get a good SEO score, and have to tell you, I have a higher SEO score on all of my websites than manyother web sites who should be doing better than me, and aren’t. Also, sites built by people who should know better. I use tools and apps to score my site and I work hard to get it right. Google scores websites using algorithms that measure meta data, search words, site title, page content, how it all combines, and who and what links in to your site.
SEO Tips:
So people, to recap, try and ensure your site is content driven, uses clean and elegant design, has balance, clean graphics, good use of white space, a tasteful livery and colour palette, is acessible, and remember…. ‘less is more‘.
That’s it, thanks for listening!
No Responses to “The Principles of Good Web Design”