Web Design Layout Guidlines 6

[Gatorajc]

Can anyone point me to a Web design tutorial? Actually I should say layout tutorial. Every tutorial I see is for using html. I know the programming side already.

When I was in yearbook in High School there were layout rules. For example people in pictures should always face inside the book not outside or avoid white space on the inside. Stuff like that. Anyone seen a web design tutorial like that?

AJ


If at first you do not succeed, cheat!

 

[petey]

http://www.mundidesign.com/presentation/index2.html

http://www.webreference.com/dlab/

These were some results from Google searching for "graphic design tutorial". They look like good enough tutorials. I'd just keep in mind graphic design and web design are fields that haven't reconciled yet, since web design is still young, so it's hard to find tutorials that blend graphic and web design in a way that doesn't neglect one in favor of the other, if that makes any sense. Plus lots of different opinions are floating around, like liquid vs. fixed-width design. You have to choose yourself on those.

Hope it helps!
petey

http://www.drpeterjones.com/

News and views of some obscure guy

 

[Kjonnnn]

I would suggest not confusing printly layout and web layout.

The bibles for html 4 and dreamweaver... have great section on a web design.

 

[petey]

http://www.lazycat.org/postcards/

http://www.csszengarden.com/

Some more links: These are both excellent sites that have helpful ideas and approaches to design, without neglecting web standards or accessibility.

Cheers,
Petey

http://www.drpeterjones.com/

News and views of some obscure guy

 

[harrymossman]

If you want your pages to be useful, with lots of repeat visitors, read the ideas of Jakob Nielsen:

http://www.useit.com/alertbox/

 

[blueark]

I remember reading a book by Robin Williams (the graphic designer, not the actor), and she had four golden rules to get you off to a good start. It wasn't directed at any media in particular, but I think it holds up well for web design. All you have to do is think of C.R.A.P.!

C is for Contrast.
Not just in tone (black against white, or whatever), but in a general way, such as headings looking significantly different to body text.

R is for Repetition.
So, if you have a special way of rendering lists, make sure all lists are rendered that way. Navigation always looks consistent so users don't get lost. Things like that. Consistancy would be another word, but CCAP probably isn't as memorable!

A is for Alignment.
Easy enough. Just make sure there's some alignment between elements to add some strength to your layout. It's difficult to be as precise as printed grids, but even fluid layouts can have a certain degree of alignment. Another consideration might be consistant line-heights where possible.

P is for Proximity.
This refers to keeping related information together, and unrelated information separate. For example, your copyright notice shouldn't look like a continuation of your body text, and your navigation should be given it's own space.

And of course, rules are made to be broken, so experiment!

 

[Gatorajc]

Just the stuff I was looking for.

AJ


If at first you do not succeed, cheat!

 

[clarkin]

from petey's first link:

http://www.mundidesign.com/webct/webct.html

useful flash to look at how colors look for site design. Uses web safe palette and includes the RGB & hexadecimal values

Great links everyone!

Posting code? Wrap it with code tags: [ignore]

[/ignore][code]CodeHere

[ignore][/code][/ignore].

 

[danielh68]

I have to agree with blueark. I've read several design books, but Robin Williams CRAP methodology has always worked for me. Besides, you'll never forget it.

 

[ChrisHunt]

Like that CRAP thing, but it reminds me... it's also useful to know what NOT to do-

http://www.webpagesthatsuck.com

Funny too!

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[imstillatwork]

http://www.webpagesthatsuck.com

thats always good for a laugh. its amazing sometimes that peoples web sites still look like a 5 year old made it in 1990.