Design tips for new web designers...

[Graf1771]

Building a new website can be fun, frustrating, hard work. The process starts with an idea, then moves on to a design and finally the coding - whether it's by hand or using a WYSIWYG editor.

Here are some tips you might find useful when moving to the design stage of your website (I'm not trying to patronise the experienced designers here, just giving some ideas to the newer designers).

1. Look at websites you enjoy visiting / reading. Try and work out what it is about them you like. Is it the layout? the content? the ease of use?

When you're starting to design a website use the sites you like as inspiration (nothing in design is completely new).

2. If your site is going to be content heavy with a lot of text, look at other sites that deal with lots of text.

Look at newspaper websites such as http://www.nytimes.com/ in the USA or http://www.guardian.co.uk/ in the UK.

Text on screen can be difficult to read, so try not to have columns of text with more than 10 - 12 words. If you look at your daily newspaper you'll get an idea of how text is best positioned on a page - remember most people are more used to reading text off a piece of paper than off a computer screen.

3. Use white space.

I don't mean have a website with one word or image per page, but look at how white space is used on some of the best designed and popular websites http://www.apple.com/ is a great example.

The gaps between images can help promote a stylish design as much as the images themselves.

4. Don't overload your pages with flashing images / animated gifs / brightly coloured text, if you have a lot to say, then say it over several pages. Too much movement on one page distracts viewers, one image with text can attract attention far more than 5 animated gifs.

5. Stick to one colour scheme and font theme throughout your site.

If you use too many fonts your site will look disjointed, and the same with colours. Think of your favourite magazine, look at how every page follows the same pattern of layout, colours and fonts.


I'm sorry if these points are obvious to everyone here, but looking at some of the sites that are here to be reviewed I feel that a lot of new designers, who have no experience with any kind of design, might find them useful.

So, only five tips from me...does anyone have any more?

[kplatt]

Graf,
Thanks so much for this post. Being a newbie to web design I found it very informative. We were already applying some of the suggestions, however it was great to have validation of what we're currently trying on our site.

We have also found that recruiting a few people from our target audience to view pages that we're designing for feedback before we go "live" to be very helpful. Sometimes the questions they ask or comments they make are invaluable. Working so closely with products everyday, we tend to think some things are obvious when they aren't to an outsider.

[janeth]

I would like to add two things to you post
Never Make Your Customers Have To Think.
If I come to your web site it is because I need your web site to fill a need. I either need to find some information or purchase a product. Now days it seems the web designers are more interested in showing the world what they can do than to build a web site that will make money. We have flash websites set up with a TV commercial you have to watch before you can enter the site. Then we play ?try and figure out how to go to the next page.? Your site should be layed out so it is easy to find the information your customer needs.

Gone in 3 seconds!
Your home page has a couple of seconds to give a good impression.

If someone scans your home page, it should be clear what your web site is about. The navigation should also be clear and obvious. Your visitors should be able to tell quickly what pages are on your site and where they can find the products they're looking for. Your pages should load quickly

[USALUG]

I actually wrote a small article for webpronews:
http://www.webpronews.com/archives/012601.html
Keeping your website simple.

I still stand by the notion that sometimes there is just to much clutter on pages to make them attractive. Simple clean designs hold my attention much longer than blinking icons.

[SyrenSong]

Great post, Graf1771!

Adding my suggestion, which is kind of a continuation of Janeth's 5-second rule --

Watch out for the size of your graphic images. Just because they look small, it doesn't mean they are.

I've seen lots of people who think that they can resize their images by simple setting the image size to 50x50, when the original image is actually 600x600 and 90k! That's just not how it works.

Resizing your image means shrinking the actual size of the overall image. This means changing the actual dimensions (height and width) and the dpi (dots per inch) and the "weight" of download size of the image (file size in "k").

There are plenty of programs out there that can help with this. For example, GifBot is a free online tool that can help resize larger images into smaller ones.

Too many large images will drive your visitors away (and too long a download time) faster than you can possibly imagine! That's one of the first things that every beginner should be careful of when designing websites.

Just my 2-cents.
S

[SyrenSong]

Always, always, always, check your Spelling and Grammar!

Too many times, I've been totally turned off to a website because of spelling and grammatical errors. There's no need for them. You've got plenty of time to check for and correct them before going live with your website.

This is particularly important for a professional website of any kind. Nothing erodes the credibility of a website like spelling mistakes. And if you make grammatical errors, it just looks like some know-nothing kid put up the page for you. Not good in the eyes of your prospective customers and clients!

If you're not sure about the correct spelling of a word, most word processors have spell checkers. Use 'em! If you're not certain about whether you're using proper grammar, then have someone else check the page for you. You can't trust a spell-checker to catch all your mistakes and a real person can help catch some things a spell-checker can easily miss.

HTH!
S

[Graf1771]

Thanks everyone for the comments.

I'm pleased (and quite surprised) that this post generated the response that it's got...

I hope that many people found it useful!

[masterpeace]

My personal pet peeve it attractive sites, with good content that have illogical layout and obscure navigation titles that their visitors won't understand half of.

Maybe it sounds rude, but many people forget when designing a site that their potential visitors don't know what they know. It is part of our human nature. We know what the page titled "Our Natural Advantage" is about... it doesn't even occur to us that "Jo Bloggs" doesn't.

To illustrate my point: I recently re-designed a site that was originally converted from a printed publication. One page in the booklet was titled "Our Natural Advantage", and dealt with the natural wonders and "feel" of Pemberton, the place the booklet was about. The original designers had simply used the book and content "as is" and made it into a web site.

While the original title worked fine in a printed brochure where you see the relevant pictures at the same time as you read the title, on a web site navigation it became vague and meaningless. The same was true for the overall layout. Sure there was a navigation bar, but it was disordered and uninformative. This meant that the content which was otherwise sound, was harder to access.

So I guess my point is, try detach your self from what you "know" when you design & layout a site. Put yourself in the shoes of "Jo Bloggs" who knows nothing when planning and laying out your site, and build it from the ground up with the intention of making it what I call "idiot proof".

Don't be too shocked, even though I try my best, the amount of times I have had clients joke with me about recieving emails from web visitors saying "we couldn't find your address ANYWHERE on your site" when it was clearly listed on their "Contact" page is staggering!

[mikmik]

All very good points, important points, from everyone. But these comments are mostly about the page design. Graf1771 asked for tips on designing a "webSITE". Here's what I found important as well:

Have a structure planned out on paper. Start backwards! In other words, work from the lowest level pages up to the home page. It makes implementing the navigation easier AND stops the project from getting out of control with late stage additions - up to and including complete revamping (whew).

I couldn't agree more with K.I.S.S. - Keep It Simple, Silly!! Janeth is right, there are many good sites on every topic or service to choose from, so if I don't see right away how to navigate quickly to what is relevant, I'm gone before the site has finished writing their cookie! (LOL)

MAKE NAVIGATION OBVIOUS AND CONSISTENT - same or similar style and placement throughout the site.

I've made all these mistakes listed by everyone here and now look what I look like!

[vwebworld]

As a follow up on keeping it simple and starting
with the lowest pages...back.

I'd like to offer the following link about "writing
for the web". The web is quite different than
a brochure or print ad... and viewers behave some
what differently too.

total-impact.com post

Viewers don't read (at first) they scan.
And you need to make a connection between their
"wants/desires" and your (website) content..
in a very short time.

Enjoy the above post... I've found it to be a great
article about writing for the wrb.

~Roland