WebDesign > PageDescriptionAnnotatedWireframes
Page and site description using annotated wireframes
refer to Summers and Summers, p 7, and pp 58 ff
You won't know what's important to describe and what's not, nor what make of some features and elements, until you look at a number of and dig systematically around on the site. Think archeology: Site description is an archeological dig.
Go the site.
Look at the main page and a few representative pages. There may be different types of pages on the site. If there are, you will find it appropriate to sketch two types of pages from the site. Select representative types of pages.
Determine the kind of site and its purpose. News? Personal portfolio? Customer support? Something else? Make notes on purpose and audience to guide your work.
Sketch a wireframe of the page to illustrate the page design type. Look at a set (4 - 5 - 6) of representative pages to create a generalized sketch incorporating the variety of elements in that page type. Place all the relevant elements in your sketch:
- header, footer, content areas, nav areas ... plus variations: callouts, etc.
Sketch the page inside a browser frame to show margins, if appropriate.
Annotate the wireframe. Refer to the Handlist of Web Design for terms and elements to consider.
Label all the relevant elements of the page correctly. Include
- page layout type
- notes on page design
- notes on navigation: where placed, what kind (text links, menus, ...)
- notes on images: what they are and how they're used
- notes on the text: its aims, length...
- notes on use of color
- other notes that I might ask you to focus on for the particular exercise
Navigation and content
- use navigational nomenclature in global and sectional navigation to illustrate how the site is organized
- use generic types (headline, embedded link, image...) in content areas
Include top and side notes about the page. You can do these right on the sketch or attach them to the page.
- A brief description of the site, including
- the url and name of the site
- the kind of site
- the kind of page your sketch is from
- notes on who the primary audience is and the relationship the site is establishing with the audience
- some general design notes: things you observed about the page that don't fit the annotations
- other notes that I might ask you to include for the particular exercise
Suggestions
- Use large paper and use the entire sheet for your sketch and notes.
- One page per sheet of paper, please. Don't use the back of the page.
- Don't print out the page and annotate it: Sketch it.
- Use neutral language in your notes. Focus on description rather than evaluation.
- You can attach your observational notes written on a separate page to the wireframes.
How much detail?
- Anyone should be able to recognize the site from your sketch and annotations.
- A web designer should be able to mock up your page in Dreamweaver or Photoshop from your sketch.
- I should be able to infer that you know what you're talking about from your annotations.
- In detail and execution, your work should convince a client to hire you.