The Big Guide To Web Design Part 1 Of 4 The Structure and layout.

Author: Michael Land (me)

Date: 12 May 2005

Introduction:

I've decided to put all the information I know that is relevant into one compendium. The following parts to this guide have been designed in different stages. Each stage looks at the four crucial parts to a website. The SLIP method (Structure and Layout, Language and text, Imagery and the Producer's Intentions). By following the SLIP method, everyone should be able to produce a site that is of excellent standards, no matter how good or bad they are at certain areas.

Structure and Layout.

Basics:

The structure and layout is probably one of, if not the most important factors in web design. This is because visitors love an easy to navigate website and a clear-cut layout. Using fancy borders, extra graphics and sweathes of unneccessary effects are damaging to a website.

The structure generally refers to the actual depth of your site. Where will text be put, where is the imagery going to go and what is there going to be on that page.

Layout is NOT the same as structure in web design. Whereas structure generally branches out into the other sections (Language and text and Imagery), layout only lends itself into the image category. The layout of a site is just as important as the structure. Visitors to a site want an eye-candy layout, not to be bombarded with hundreds of different focal points*.

Remember to keep layout as slick as possible, this way you will bring back the visitors that came to your site.

Moving On...

Now that I have covered the basics, it should be easier for you to grasp the way in which a structure and layout of a site should be designed and co-ordinated.

Before any design of a website begins, you should always plan it out on paper first. Whether it be a scruffy little scribble or a highly detailed map, you should always plan it out first.

When designing the structure of your site always take into account:

- Genre of the site

- General site content

- The amount of details on the page(s)

When it comes to the actual layout of your site, it is a little more complex. Layout is probably the number one killer of websites. Designers (whether it be newbie or oldie) often make the mistake of over-doing it. An extra graphic here, a new content block there can make the whole plan fade. Generally speaking, layouts should be evenly spread across the screen, instead of being nucleated and compact. Do not try to cram everything into one page, spread it out a little.

On almost all site types, it is best just to use a five colour pallete. Four of these colours should be harmonic (similar colours that go together) and the fifth should be a contrasting colour (in which is for your text). Using obnocious colours will only deter visitors. For help with colours, check out http://forums.xisto.com/no_longer_exists/.

Grids. Lay out a grid and stick to it. This can make the difference between failure and achievement. Borrow a book on the use of grids in web design from your local library if you are not sure.

You should also make sure that the layout incorporates different blocks or sections that are recognisable. That way, the visitor can see what the different sections are.

Regards,

--mik

Thanks I will use this on my website and see if I generate more hits by using the information provided. Its great the amount of website hit maximization tuatorials that are on this forum

The planning on paper stage is sooo critical, I can't even stress how useful that is. To just go ahead and start sticking links here and there without any planned idea of where they are is just a horrible idea. I'll always sketch my page out first, and then include detailed labels of whats going to go there, the type of thingy (IFRAME, Table, Image, etc.) until I have the entire page planned out. Then I go to doing a rough outline in HTML. I'll code the page, using colors to denote certain things. For example, the last project I worked on had a central IFRAME in a table, surrounded by links across the top. I needed a certain part of the table to have a background, so those areas I filled with red. Other areas needed a different background textures, so I filled those with green. When it came time to actually produce the page, backgrounds included, I just replaced the BGCOLOR="" tags with BACKGROUND="" tags. Another bit of info to consider when laying out your page is the visitor's view. Test in different browsers, different screen sizes. I always include a splash page explaining how the page is best viewed. (800x600 in IE 6.0+) or something along those lines. Another tip is to use percentage values rather than pixel values. This will help reduce the vast differences users get when they view the page with a different screen size.Anyways, great tutorial! The SLIP method is the way to go.

Your 5 basic color systemThat wouldn't have anything to do with old english heraldy.Example:You have red black and blue as your base colors, and white and yellow are your "metallic colors"You can mix a color from group one and one from group two in order to contrast , but if you use two colors from the same group.i.e. Red and yellow look fine together, as do black and white, but don't mix red and black together, as they won't contrast well enough

Well, on the annoying colors subject... I think it's safe to say that all of us have tried that at some point in life, even if it's just testing or fooling around.Now personally, I believe that one of the best approach is to have a navigation bar through the whole website; you might have a main navbar and a sub-category one.Then there are 2 things that for me are the subjects which doom websites:* Lack of planning: Probably THE worst thing that can happen is that you have the idea for a great website but you don't think all the steps together, and maybe you find yourself doing a "Seinfeld" website (a website about nothing). Or maybe you didn't even have an idea of what to do, but felt like creating something either way, so you think... Why the hell not??? [Hey, it happens!!!]* Not Following the KISS principle: KISS (or Keep It Simple... Stupid) is probably the best way to go. If you're website is too confusing, or as someone said earlier, it's too overloaded on little gimmicks, or has unwanted music, then, most likely the visitor is going to leave faster than an African-American on a KKK convention. Well, these are my thoughts, I'd like to know if you agree...

These points are very helpful for me, I'm basically a beginner at all web designing, but have a small bit of knowledge for Photoshop. All information about designing websites really do help me and I appreciate the amazing contribution some of you guys have done to make sure people understand these concepts. Hopefully i will go away from this page to read Stage 2 of your Web Design tutorial and gather more understaing about this sort of work. Surely i can go away from this topic knowing more than what i did before i read your ideas. Thanks for the help,Burgin!

Great tutorial Mik, very helpful. Like Burgin, I'm a beginner at web designing too and your tutorial provided me with the information I need to design a great website. One thing though, the link you provided for the colour schemes (http://forums.xisto.com/no_longer_exists/) does not work anymore. A updated link would be greatly appriciated. Well done again.

Great work, very well-written.

I mostly agree with you in your tips, and overdoing is certainly one of the biggest mistakes, and when I began webdesigning (does this verb exist? If it doesn't, well...) it was an issue. The site's look ended-up by struggling with the content, and taking out people's focus over it. That used to happens because I'm very perfectionist, and this used to make me add little pieces and tweaks until it was crowded like hell. Now I'm more adept of a sleek look ;p

Hmm just a think I'd like to add here is that the link you did put isn't working (at least right now), so I couldn't test it. But an *awesome* tool for this kind of use can be found HERE (English, v2.0). It even simulates how would the colors look for people with limitations in color perception, for better accessibility. It should be taken more as a guideline, but anyway a nice tool for webdesigners use and even learning.