Week 2 Class 1 - In Class Exercise 03

Prioritize Web Design elements with a Battleship Grid

1. Take a screenshot of an e-commerce web site (save this a jpeg, named "battleshipgrid_A.jpg")

2. Using Photoshop, draw vertical lines up and down the screen. Create 10 vertical rows of equal size.

3. Draw horizontal lines across the page to create a total of 10 horizontal rows. The first horizontal line should be right underneath the top navigation, and each subsequent row should be equal in size.

4. Create a new layer where you can overlay the grid with different colors at 30% opacity. Next, begin to assign color values to the different areas of the grid. The values assigned to each of the shaded regions aren’t absolute; they’re relative values, and should be considered rough guidelines. (save this as a jpeg name battleshipgrid_B.jpg)

5. Begin to examine and analyze the web (design elements) real estate.
- Which elements take up the most space on the page?
- Which elements take up less room? Why is that so?
- Based on eyetracking studies are the elements in each valued region placed and sized effectively for the user experience.
- Are there any elements on the page that the customers won’t actually care about? Gray these element areas out.

6. Create a new layer in Photoshop and insert text that indicates a certain viewing hierarchy for each of the colored sections. Why would a web user be drawn to this area of the web page first? Why elements are irrelevant to most users, and will probably be ignored?

(example of "battleshipgrid_a.jpg")

(example of "battleshipgrid_b.jpg")

(example of "battleshipgrid_c.jpg")