Basic Web Layout Principles

Learning good design that works for the Web

Before designing a layout with branding, textures, images, etc, it will be a good idea to understand the basics of good layout.

One of my professors repeatedly told me "If you render the heck out of a crappy drawing, it's still going to be a crappy drawing". What he meant by this was that if you don't have a good structure or foundation, adding more details or pizzazz will not help the situation at all. The same principle is true in just about every area of life. It is especially apparent in Web design when we set websites with the latest HTML5 animations or transitions or 3d graphics, but have terrible execution or design. Good designers can make a layout look incredible just with a couple colors, no imagery, and one typeface; whereas, bad designers can use animations, photos, 5 fonts, and a whole array of color and come up with something that looks terrible.

With that in mind, in this lesson, we will go through some articles that explain good layout principles and why they are so affective.

Additionally, coming up with your layouts in the early sketching stages will save you hours of time over the alternative of messing around with your layout immediately in Photoshop from the get go.  I always make it a habit to sketch up at least 10 simple, fast, thumbnail sketches on paper before I even touch Photoshop. That way, I have a much better idea of what will work in a matter of minutes, rather than hours.


Please read through this article and answer the questions at the bottom of the article in the Discussion Board in Blackboard. Don't worry about reading any of the linked articles.

[Read the article here]

Next, read the article Concept and Inspiration: Design Theory for Web Designers. Don't worry about reading any of the linked articles.

Thumbnail Sketches

Finally, for your homework, come up with 10 thumbnail sketches for the Home page of a Website based on one of the following topics:
- A fan page for one of your favorite bands
- A page for a non-profit organization
- A personal portfolio site.

The sketches should include the following:
- A main logo
- A navigation menu
- A main graphic element
- A small block of text (don't worry about writing / typing out all the words. You can just have horizontal lines representing lines of text.)
- A footer

You can either take a picture of your sketches, scan them, or draw them in the computer.
The 10 sketches should be 10 variations on the same page. This is to help you exercise brainstorming conceptually, rather than relying on texture, fonts, color, images, etc. to make the layouts look good.


As always, please email me if you have any questions!