Beginning Home Page Layout

Before we begin this course, let’s see what you already know about design layout. Make a home page web layout about something that’s important to you.


The topic can be yourself, your family, your hobby, an event, a cause, a company, or whatever! It should be something you’re passionate about.


You can create a home page layout in any of the following methods:

  • Hand-drawn on paper
    Very neat and tidy, please! Scan it in (I can help) so you can upload the image file.
  • Photoshop
  • Illustrator
  • Fireworks

For digitally-created files, the best file format to upload in is PDF [Smallest File Size setting], since it retains all images and fonts just as you created them.


  • Include anything that might be appropriate on a home page.
  • Include both text and images.
  • Your goal: get other people excited about your topic.

Design Tools

A quick overview of the tools of design.

  • Sketchbooks
  • Old-school Tools
    • Paper, illustration board
    • Pencils, markers, paint, etc.
    • Measuring tools
    • Templates
    • Scissors
    • Letraset
  • Digital Tools
    • Photoshop
    • Illustrator
    • InDesign
    • Dreamweaver

What Is Layout?

Layout is…

The organization and arrangement of visual and textual elements on a page.

Layout creates…

Company Branding
  • Web Sites
  • Banner Ads
  • HTML Email
  • Jump Pages
  • Social Media Profiles
  • Newsletters
  • Magazines
  • Books
  • Newspapers
  • Comic Books
  • Programs
  • Calendars
  • CD Packaging
  • DVD Packaging
  • DVD Menus
  • Title Sequences (Credits)
  • Television Graphics
Informational / Promotional
  • Posters
  • Signs
  • Banners
  • Maps
  • Shopping Bags
  • T-shirts
  • Postcards
  • Greeting Cards
  • Invitations
  • Currency
  • Stamps

In this course, we will focus on good layout techniques as they apply to website design.

3 Features of Good Layout

A good page layout is about more than just applying the principles of graphic design or creating cutting-edge design. A good page layout:

  • Works
  • Organizes
  • Attracts Viewers

A Good Layout Works

It does what you set out to do.

You have to know the purpose of a piece before you begin to design and lay it out. Getting the answers to a few simple questions up front will give you clear guidelines for creating a good, functional piece.

  • What is the purpose of the piece (the message the reader should get)?
  • Who is the audience?
  • Where will it be seen (or how will it be distributed)?

Tips to help your layout work:

Tip Example / Rationale
Determine your piece’s main message and plan your layout around it. Choose a photo that supports that message.
Size the piece to fit its use. If it is a brochure, make it a size that can be easily held and filed.
Keep in mind where the piece will be seen. A magazine’s title should be easily seen when it is in a rack.
Keep your target audience in mind when sizing photos and choosing type sizes. Make everything larger and easier to see if the audience is older.
Check with the post office to make sure it can be mailed. There are regulations affecting size, weight, location of information, and type of fold.
Choose a paper stock that will work in a laser printer if that’s how the piece will be printed. Some letterheads, newsletters, and flyers are typically printed this way.
Choose a light-colored paper and dark ink if the piece will have to be copied on a photocopier. Photocopiers do not reproduce all shades of gray.
Make sure that a logo is clear and readable at all the sizes it will be used.

A Good Layout Organizes

It maps out a visual path for readers to follow – it shows what comes first, second, third, etc.

If readers have to work at reading your message, they won’t bother. Arrange and emphasize information to make your message as clear as possible.

Tips to organize your layout (you need not follow all these guidelines for every piece):

Tip Example / Rationale
Use different sizes of type. Headlines are bigger than subheads.
Put colors behind and important areas of information.
Use rules (thin lines) to separate information into groups.
Change the weight of the type. Semibold stands out, but bold really stands out.
Leave white space around blocks of information.
Pick the best location. The upper left corner is usually read first.
Align similar kinds of copy.
Put pictures next to important copy. Pictures attract the eye and reinforce the message.
Put type in a box or give it an interesting shape.
Call out items by putting bullets in front of them. Look at the bulleted summary at the top of this Web page – it helps prepare you for the details that follow.
Change the style of type to indicate different types of information.
Use different colored or reversed type (white on black) to separate and emphasize.

A Good Layout Attracts

It grabs your reader’s attention and pulls them into your piece.

A piece cannot communicate unless it gets noticed. To get noticed, it has to stand out from the crowd by being different from everything around it.

Depending on the piece, that can mean being startling, pretty, surprising, entertaining, unusual, or simple and direct. How do you know which one to choose?

The approach you use depends on the audience (who you want to see it) and environment (where it will be seen.) For example, a person wearing bold colors would not stand out at a beach party but would definitely turn heads at a black-tie formal affair.

Tips to create an attractive layout:

Tip Example / Rationale
Enlarge a photo of something small. Have a photo of a bee cover an entire page spread.
Tilt an image or a block of copy at an angle.
Surround a very small picture or bits of type with a lot of white space.
Choose bright colors when the piece will be viewed in a gray environment. Colors in a text-heavy magazine will stand out.
Use a solid black area or a large white area for a newspaper ad.
Crop an image in an unusual way. Show an eye, not a whole face.
Use very large type for a thought-provoking or humorous headline.
Make the piece a different size and shape from other similar pieces. Use a square envelope when everyone else is using the typical #10 used for business letters.
Choose a paper with an interesting, noticeable texture or color.
Set important information in an atypical (“not typical”) way. Set a headline on a curve or try a script font.


Fundamentals of Web Design Layout

The purpose of a layout is organization, more specifically layout uses organization to:

  • Convey relative importance of content
  • Group similar content and separate unrelated
  • Optimize visual flow
  • Establish a basic visual hierarchy