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

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
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.

Text description of thumbnail graphic

Figure 3.4-3: Sample Thumbnail Sketch

Demonstration or Practice Activity

For this activity, continue to use the Adobe Education website (http://www.adobe.com/education/).

Go to the Adobe Education website.
Use Illustrator's Rectangle Tool, Line Tool, and Type Tool to create a thumbnail sketch of the site's home page.

It's
time!

3.4.3: Individual Assignment

The next requirement of the Visual Design section of the design document is thumbnail or design sketches. We have provided you with four thumbnail sketches below. All the thumbnail sketches adhere to the generic page layout grid discussed in Individual Assignment 3.4.1. Three of the four pages have already been planned out for you — the Guitars page, the Concerts page, and the Lessons page. The fourth page, the Gage Home page, is left up to you to plan and lay out. Although you won't be adding the content right now, you will want to plan for the integration of the following content in your layout of the Gage home page:

Gage Vintage Guitars has an extensive stock of vintage guitars, both acoustic and electric. If you've been wanting a classic Martin, Gibson, or Fender for a reasonable price, or if you have one you'd like to sell or trade, then you've found the place! We also do guitar repairs, teach guitar lessons, and host the occasional concert.
We've been right here in downtown Lakeview, California since we opened our doors in 1987. Come see us at 125 Lakefront Road.
Hours: Monday through Friday, 11 a.m. to 7 p.m.; Saturday, 11 a.m. to 5 p.m. Closed on Sundays.
Phone: (213) 555-5555.
Repair Hot Line: (213) 555-5556.
Footer content — Gage Vintage Guitars * 125 Lakefront Road * Lakeview, California 99999 * (213) 555-5555. webmaster: John Calhernia

For this assignment, you will be creating each of the thumbnail sketches using the tools you have previously used in Illustrator. Think of ways you might be able to save time when creating the thumbnail sketches, e.g., make note of any repeating elements. As an example, remember each of the pages will have the same generic page layout elements (as shown in the Gage Home Page example). Elements that repeat themselves can be copied and pasted to quicken the thumbnail creation process.

Gage Generic Thumbnail

Gage Home Page

Gage Guitars Thumbnail

Gage Guitars page

Gage Concerts Thumbnail

Gage Concerts Page

Gage Lessons Thumbnail

Gage Lessons page

3.4.4: Web Team Assignment

Based on the layout grid created in Web Team Assignment 3.4.2, each web team should be ready to brainstorm and create the thumbnail sketches for their client's website. To help with the workload, each web team member should use Illustrator to produce one to two of the thumbnail sketches agreed upon by the team. It is a good idea to review and consider all the information previously gathered from your client as you plan the thumbnail sketches.

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

Text description of rough sketch graphic

Demonstration or Practice Activity

For this activity, continue to use the Adobe Education website (http://www.adobe.com/education/).

Go to the Adobe Education website.
Use Illustrator's Rectangle Tool, Line Tool, and Type Tool to create a rough sketch of the site's home page.

It's
time!

3.4.5: Individual Assignment

Now that you have created the thumbnail sketches for the Gage site, it's time to work on the rough sketches. Choose one of the thumbnail sketches created in Individual Assignment 3.4.3 and create a rough sketch of it, showing more detail. You will continue to work in black and white until Unit 5, where you learn more about using color in Illustrator.

3.4.6: Web Team Assignment

Using the thumbnail sketches he or she created in Web Team Assignment 3.4.4, each web team member should create the corresponding rough sketches.