Design tips for new web designers...

Graf1771 · #1 (**permalink**) 09-09-2003, 08:22 AM

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 · #2 (**permalink**) 09-09-2003, 11:41 AM

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 · #3 (**permalink**) 09-09-2003, 12:36 PM

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 · #4 (**permalink**) 09-09-2003, 12:43 PM

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 · #5 (**permalink**) 09-09-2003, 05:00 PM

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 · #6 (**permalink**) 09-09-2003, 05:07 PM

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 · #7 (**permalink**) 09-11-2003, 12:07 PM

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 · #8 (**permalink**) 09-16-2003, 01:05 AM

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 · #9 (**permalink**) 09-21-2003, 09:05 PM

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 · #10 (**permalink**) 10-13-2003, 11:32 PM

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

SyrenSong · #11 (**permalink**) 10-29-2003, 12:33 PM

It's a good idea to include a set of text-only navigation links at the bottom of your website pages.

It helps visitors find their way around on your site and encourages them to continue moving through the rest of your site after they've reached the bottom of the page.

It's also very important at the bottom of longer pages. After reading large blocks of text, sometimes visitors forget where they are or where they want/need to go next.

Leisa · #12 (**permalink**) 11-18-2003, 08:12 PM

I'm no master, but I'd like to share something I did when I first started developing my site. This goes along with what mik said and is especially helpful if you have a very large site with a whole lot of information to organize.

When I began the development of my website, I started with a notebook and a pencil...and later an industrial strength pencil sharpener to keep up with me. As I had been planning the site in my head for weeks, there was a lot of information floating around up there.

The first thing I did was write down everything that came to mind about the site I wanted to build. I didn't concern myself with spelling, logic, grammar, etc. I just let it flow. Several pages later I had a whole lot of ideas, goals and information to sort out.

Next, I went through and cleaned it up a bit. I completed the sentences that initially came out as a scribbled thought, I rewrote the things that I could barely read, and so on.

Then, I drew out a "spider chart". I remember doing these in school. It's where you start with a circle in the middle of the page, in which you write the central thought/idea to be worked out. In this case, it was "Website/Directory of Wholesale Suppliers". Next I drew lines from this central idea to some empty circles. I then wrote in each of those circles what major things I wanted to do/convey through the site. From each of those circles I drew more lines to even more circles. In those I wrote things that went with the thought it stemmed from. I continued until the page was full of lines and circles and, lo and behold, the beginning stages of a structure for all that information.

Because I had done the "brainstorming" exercise first I was able to more clearly realize what it was I wanted to attain. When it came time to make the spider chart I had everything I needed to fill in all those circles.

After that, I just took each group of items and further developed them. Each of the initial circles became major pages in the site and the sub-circles became branches off those pages. Sure, I reworked my diagram several times but this gave me the start I needed to organize all those ideas I had in my head.

I hope this helps someone! Best of luck to you!

bin79 · #13 (**permalink**) 11-26-2003, 03:43 PM

"7 Mistakes to Avoid on Your Website"

The article is targeted to the web developers from Nepal. However, I believe it is useful for anyone. Take a look at

http://www.nepalnet.net/article/1001...rticle1020.htm

tkeneipp · #14 (**permalink**) 12-12-2003, 10:46 PM

First off remember that I am not perfect, nor do I claim to be the best at anything, but here are some thoughts on this subject.

My number one rulle it to be consistant! Be consistant with your navigation and be consistant with your design "scheme."

Most visitors are not to bright, so if you make it hard for them to find the navigation then they will simply leave. It should always be in the same place on every page and look the same. People are creatures of habit and if they have to relearn on every page then they will simply run away.

Don't change the design on every page! This again confusses people and they will feel lost and likely leave.

Further pet peeves! I mean suggestions...

Stop using backgrounds under text! They have to be able to read it! Beginners should stay as far away from most backgrounds, including solid colors, as possible. White is your firends and unless you are addicted to light neon and pale pink will be much more forgiving! Until your sure of what you are doing, it is really best to work on white, without backgrounds. Sadly FrontPage makes it to easy to do this.

I could be a grumpy old guy on this subject for days and days. Now seems like a good time to just shut up!

SyrenSong · #15 (**permalink**) 12-13-2003, 11:39 AM

Please don't "shut up", tkeneipp! LOL!

Those were some excellent points you contributed to the discussion. I'm sure lots of folks will benefit from those pointers. :)

tkeneipp · #16 (**permalink**) 12-13-2003, 09:06 PM

I am going to add something here again...

I would encourage you to take some time and study traditional design principles. They for the most part (99%) still apply even when designing on line. Go to you local book store or library and read or peruse all the books on graphic design. Subscribe to publications like, Communications Art, How and Print to see real pros in action and do not fear to emulate them.

Focus on a good design first, then worry about coding and SEO. You will gain much more by doing that than you will by slapping something on the web and loosing potential customers because it does not work. Remember that is easier to get a new visitor that to get one back that had a bad first impression.

sajdlz · #17 (**permalink**) 03-16-2004, 06:12 PM

Just adding my two cents here.. lots of invaluable advice but something that was mentioned but not in great detail is color.. we as humans are visual people. Most of us could care less what the page says if it's psychadelic pinks and purples that make our eyes hurt.. or too bright. It will be closed before we even read the title. Make sure that not only your text and layout convey your message but your color schemes..

And not just matching.. I don't want to go to a site where everything is PINK.. even if it is called "Pretty in PInk"

Contrasts help bring the focus on parts that you want your viewers to see first, colors that help them feel. If there is too much.. then they focus nowhere. Use your images in ways that match your message.. not just ones that look "cool".

Think about how you feel when you see reds, greens, yellows etc. and try and match moods:)

Something that has helped me more times than I can count is to watch nature.. Nature has such a wonderful way of matching colors and making you feel awesome.

Another good way is to watch around town at signs, flags, billboards, you name it. Watch the ones that stand out to you. Think back to commercials on tv that you remember most or that appealed to you and think about why they did.

A website is not just something to be read.. it is to be felt by the audience just like a good movie, poem, book or more except you have much less time to capture your audience:)

aimz · #18 (**permalink**) 04-21-2004, 10:02 PM

I'd just like to mention something here thats really important to my design but hasn't been included that much so far..

getting all your concepts on paper like the spider idea is great but you cant stop there!!

take your concepts from graphics and do all your work on a pad of paper!! this is everything from your brainstorming, to your concept sketches to your final design. invest in some colour pencils to find out what colour scheme looks best. once you've got it on paper then build it.. dont fluff around for hours tittling between different tables and colours. have it all set out already.

the best advice i can give is paper.. having your entire site in front of you with all your tables marked out and exact dimensions will save you an amazing amount of time and wasted effort.

plus ive found it stops me from beating my comp to death some nights! lol its much easier to critique your work on paper (ut it on the floor and look from a distance) than what you've been struggling on screen to achieve.

well thats my 2pence!!

oh and another thing.. keep your code clean. comment tags are your friend!! especially when you muck up and have to go in there and fix it later!

masterpeace · #19 (**permalink**) 04-25-2004, 08:16 AM

Hi all,

Just a note to let you all know I have split the commments & thanks posted in this thread to a separate thread so we can keep all the "hints" & ideas posted together (and as brief as possible).

The comments thread can be found here... http://www.webproworld.com/viewtopic.php?t=19401

johnmcm · #20 (**permalink**) 05-05-2004, 01:49 PM

It's all changed since the old http://www.2advanced.com WOW days and it seems to be settling firmly in favor of "Ergonomic" design.(Even though it still wows me now,). Wow is not what it's all about.

Don't get me wrong. You still need a well designed site.

So what's ergonomic?

Ergonomic simply means fitting into the environment and there is definately an internet invironment that has manifested itself during our short history.

This site you're on is what is called ergonomic. Simple, easy to navigate with lots of depth. But most importantly "SEARCH ENGINE FRIENDLY".

I know! you have a son, daughter or friend that knows how to put a site together. Or even worse you did it yourself. Not that there's anything wrong with that if you know the rules of ergonomic design.

Here are a few to get you started.

1. look at other great ergonomicly designed sites.

2. Get a good designer or at least a good page editing program. There are a lot out there. GoLive is Abobe's solution that is easy to learn and works well with other Adobe programs.

3. Take another look at some ergonomic designs.

4. Copy. Yes copy. That way you can't let your own ideas spoil a good design. Your content is what's going to make the difference.

5. Use type instead of graphics were posible. Most search engines only recognize the first three alt text tags on a page. It will hurt your search ratings.

6. Use a great hosting service that allows you to create depth. You will need a database and all the user toys: Forums, Blogger, Affiliate programs, Chat, etc etc. I recommend one through my site. It's only $95 for the year with 800Mb space, db, 5 subdomains, etc. etc. plus the toys. I have 8 sites of my own here and you even get $50 in clicks from Overture.

7. Use css syles. Css styles are cascading style sheets. They are really easy to learn and your site's text will look consistent on everyones screen. This site uses css styles. (try making the type size larger, View> Text size> Largest). Golive handles them really well.

8. Use rich text and relevant Meta keywords, site description etc. It will pay dividends. DON'T TRY TO FOOL THE SEARCH ENGINES. It will hurt you.

I hope this helped someone but if not, email me and I'll fill in any gaps you may have or better still post your question here.

<Mod edit - post merged into "tips" thread - Masterpeace>