Education

Solutions for

K-12

Higher Education

Design and Film Schools

Students

Adobe Web Tech Curriculum

Unit 3: Planning a Web Project, Part 2

Lesson 3.4: Page Design

Page Layout Grids

Introduction to Layout Grids
Layout Factors and Guidelines

Introduction to Layout Grids

After completing the site structure listing and the architectural blueprints and after planning for both global and local navigation, you have a pretty clear idea about the different types of pages you'll need in your site. For example, you might need a home page, an overview page for each main topic, and detail pages to branch to from each main topic. In this case, you need to create three different layout grids, which will function as templates for your actual web pages.

On each page layout grid, you'll want to decide placements for main content, branding or logo, page title, global and local navigation elements, copyright or contact information, etc. For example, a page for a generic web design class might begin with a layout grid something like Figure 3.4-2:

Example layout grid for a web page

Figure 3.4-2: Sample Layout Grid

Text description of example page layout grid

Layout Factors and Guidelines

As the Web Style Guide's Page Design section (http://www.webstyleguide.com/page/index.html) states:

The spatial organization of graphics and text on the web page can engage readers with graphic impact, direct their attention, prioritize the information they see, and make their interactions with your website more enjoyable and efficient.

Here are some of the factors you need to consider when planning the layouts of your pages:

Alignment:
- Items on the page should line up with one another appropriately.
- Don't center-align everything; left alignment is often a cleaner look because it creates a stronger line.
Visual Hierarchy:
- Emphasize important elements.
- Organize content logically and predictably.
- Use layout to lead the reader's eyes through the page.
- Avoid distracting, unnecessary graphic elements.
- Don't make everything look equally important.
Balance:
- Elements on the page should give a sense of equilibrium or wholeness.
- Use an appropriate proportion of text to graphics.
- Use complementary colors.
- Create balance around your page's focal point.
Repetition/Consistency:
- Repeat certain elements throughout a site (e.g., navigation bars or logos) to provide consistency, which helps tie the site's pages together.
- Keep navigation bars in the same place from page to page.
- Keep some consistency of design from page to page (including fonts, formatting, use of headings and graphics, etc.).
Proximity:
- Items placed closely together appear to be related or connected in some way.
- Group together those items that belong together.
- Remain conscious of the white space between page items and of what that space implies.
Contrast:
- Provide variety within a web page by utilizing different colors, shapes, sizes, etc.
- Always make sure the foreground text has good contrast with the background.
- Use contrast to set off the various elements of a page (e.g., distinguish a sidebar or navigation bar from the rest of the page using a contrasting color).

Demonstration or Practice Activity

For this activity, you will visit the Adobe Education website (http://www.adobe.com/education/).

Go to the Adobe Education website.
Review the design layout of the home page.
Hand draw a layout grid that represents the home page's layout.
For extra practice, try using Illustrator's Rectangle Tool, Line Tool, and Type Tool to create the layout grid you drew in step 3 above.

It's
time!

3.4.1: Individual Assignment

You used several Illustrator tools to re-create a sample layout grid in Practice Activity 3.3-A. Now it's time to create a layout grid showing the common elements of the pages within the Gage Vintage Guitars website. The layout grid should include the following pieces of information, as shown in the screenshot of the Gage generic page layout below:

The Gage Vintage Guitars logo will appear in the top left corner of the website.
Three buttons will appear centered at the top of the page.
The page title will appear just below the centered buttons.
The page footer will appear centered at the bottom of the page.
The section of the page between the page title and the page footer is reserved for content.

Screenshot of Gage generic page layout

3.4.2: Web Team Assignment

Each web team completed Site Structure section of the design document in Web Team Assignment 3.1.11 by integrating the site structure listing, the architectural blueprints, and the global and local navigational systems information. The next step in the process is to begin creating the fifth section (Visual Design) of the design document. You will start by brainstorming layouts for the various types of pages proposed for the client website. Once your ideas are solidified, create the layout grids using Illustrator.