i3

Clear first reads at a glance

Site Genre: Pattern Group i

magnify imageFigure I3.1 What’s the first thing you see when you look at this page Through a combination of position, font, color, size, and graphic design, the image of the shoes and the headline Slip into the shoe that’s taking America by storm are the items that pop out best. The first read helps to set expectations and conveys a wealth of subtle information to your customers. This first read tells the visitor that these shoes are featured and popular with other customers.

Background

Although your Web page may contain many elements, your customers must be able to easily find the most important item on the page. This pattern covers first reads, a technique from graphic design that helps focus Web pages and gives readers a clear first impression. You can apply this pattern to the creation of a PAGE TEMPLATE (D1), and you can use it with GRID LAYOUT (I1), ABOVE THE FOLD (I2), EXPANDING SCREEN WIDTH (I4), and FIXED SCREEN WIDTH (I5) when you’re designing a page template.

Close

PROBLEM

How can a Web page be designed with a single unifying focus when so many visual elements are competing for attention?

buy the book to find out more

SOLUTION

magnify image Figure I3.3 Use color, size, font, weight, and position to create a first read that communicates the most important point on each of your Web pages.

Use a first read to give each page a unifying focus on the most important message, and to emphasize the most important element of that page. Use color, size, font, weight, and position to differentiate and highlight the first read. Design for lower-resolution displays, and test your first reads with your customers to see if they’re effective.

Other Patterns to Consider

Apply clear first reads when you create PAGE TEMPLATES (D1). You can also use clear first reads with the GRID LAYOUT (I1), ABOVE THE FOLD (I2), EXPANDING SCREEN WIDTH (I4), and FIXED SCREEN WIDTH (I5) patterns. First reads are often located in the top left corner of a Web page, affecting the layout and placement of NAVIGATION BARS (K2). If you use an image as the first read, make it a FAST-LOADING IMAGE (L2). If you’re working on an older Web site that still uses HTML tables for layout, place your first reads in SEPARATE TABLES (L3) for faster loading.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.