Education

Skip side navigation

Adobe Web Tech Curriculum

Course Home

Unit 3: Planning a Web Project, Part 2

Lesson 3.4: Page Design

!	Lesson Goal: Use Illustrator to create page layout grids and design sketches or thumbnails for use in your design document.

Page design is the phase that most people want to jump to first; however, it is actually the final phase of web design. Only after the background information about the clients and audience has been collected, the basic content agreed upon, and the overall site structure established, is it time to plan the actual web pages.

Major Tasks of the Page Design Phase

During the page design phase, the final phase of the website design process, you plan the visual layout of the site's pages. The major tasks of this phase (as summarized in Figure 3.4-1) include the following:

Create a layout grid for each of the different types of pages on the site. Create some not-so-detailed design sketches or thumbnail sketches of the pages in the site. Create some much-more-detailed page mock-ups or rough sketches of the pages in the site. Create a web-based prototype of the various page types.

Figure 3.4-1: Three Phases of website Design: Page Design Phase Highlighted

Page Layout Grids

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:

Figure 3.4-2: Sample 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.
  • organise 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).

Sketches and Mock-ups

The sketches associated with the page design phase include those with not much detail (e.g., thumbnail sketches or design sketches) and those with much more detail (e.g., rough sketches or page mock-ups).

Thumbnail Sketches

Thumbnail sketches or design sketches are small representations of individual web pages. They do not provide any degree of detail and use "greeking" (straight or wavy lines) to represent text. Figure 3.4-3 is a sample thumbnail sketch for a course website.

Figure 3.4-3: Sample Thumbnail Sketch

Page Mock-ups

Rough sketches or page mock-ups, on the other hand, provide more detail. They involve more defined representations of the page design; however, greeking can still be used. Basic design principles should be identified and utilized at this stage of sketching. Rough sketches may be in color or in black-and-white. Figure 3.4-4 shows a sample of a rough sketch or page mock-up based on the above thumbnail:

Figure 3.4-4: Sample Rough Sketch

Web-Based Prototypes

At this point in the planning of a web project, a GoLive stationery file or template file could be used to create a web-based prototype for each type of page for which you created a layout grid. While there are some differences between them, both stationery and template files are used to place on the page standard items identified within the planning stage (e.g., company logos, navigation, etc.):

• In the example used previously, you would create a stationery or template file for a home page, a main topic overview page, and a detail page.
• In our example of this course website, at this point we'd create a stationery file or template file for the course home page, one for the main topic or unit pages, and one for the individual lesson pages.

Since we haven't begun the specifics of page layout in GoLive yet, creating these web-based prototypes is beyond our scope right now. However, once you've mastered GoLive, this prototyping step will fit here in the page design phase.

Finishing the Design Document

The page design phase of the web design process is not complete until you add the fifth and final section (Visual Design) to the design document:

5. Visual Design
   1. Layout Grids
   2. Design Sketches
   3. Page Mock-ups
   4. Web-Based Prototype

Revisit the Design Document section of Lesson 2.4 — Information Design to see the Visual Design section in context.

1. As you can see, the first item to include in the Visual Design section of the design document is a copy of each of your layout grids. [See the example of a layout grid in the Layout Grids section.]
2. Next, you'll need to attach copies of your thumbnail or design sketches. [See the example of a thumbnail sketch in the Sketches and Mock-ups section.]
3. Third, you'll attach copies of your rough sketches or page mock-ups. [See the example of a rough sketch in the Sketches and Mock-ups section.]
4. Eventually, you'll also attach a copy of your template or stationery file for each type of page you will have in the site.

Go to page: | Lesson Home | 01 | 02 | 03 | 04 | 05 | Printable Version of Lesson |

Course Home

Copyright © 2000-2005 ID 4 the web. All rights reserved.