Case+Study+(May+17th)

**Deadline:** May 17th – beginning of class, hard copy, stapled with your name and student number
 * Case Study (10% of final mark)**

Extending out of the discussions and wireframe exercise we worked on in class, prepare a brief text (max 500 words) that outlines your reaction to the organization of the front page (see reference image) and a story page (of your choosing) of the //Toronto Star// [|website]. This is not a design exercise, but analytical – so do not submit a wireframe proposing an //alternate// design for the landing page of thestar.ca, analyze what is there with your diagrams and describe your findings/opinions through writing.

Elements to consider in your written analysis:
 * general organization
 * legibility
 * hierarchy (what is near the top of the page? the bottom?)
 * visual design (effective integration of text & image)
 * interactivity

Potential wireframe strategies:
 * colour coding content types (i.e. note the use of colour [|here] and [|here] )
 * identifying major sections of the page (so not only individual blocks but larger 'clusters')
 * distinguishing navigation elements from content blocks

Also, be mindful of what navigation/information elements appear on both the landing page and your individual story page.

Your wireframes should be labeled and identify major site sections (i.e. primary navigation, search, etc.) and you may also choose to do more detailed annotations. Tracing over the page in a program like illustrator may seem like the obvious way to go about this, others may gravitate to ink and paper. There are also dozens of software tools (some web-based) that allow you to produce wireframes quite quickly.

If you need additional guidance refer to chapters 1 & 3 of the IA text. Remember to focus only on the pages you've chosen, not the navigation throughout the site.

As evidenced by the examples we looked at in class, there is no 'right' way to prepare wireframes, you might use illustrator and you might use pen and paper. Trust your instincts and in annotating your wireframes don't worry too much about your language (we'll get the terminology down by the end of the semester) – just be thorough. All students are required to hand in hard copies of their wireframes with their brief text. E-submissions will not be accepted.

**Reference image:** [|Toronto Star Frontpage 09/14/10] to prepare your wireframe.

Reference: [|Wireframes] [|I ♥ wireframes] (spend some time going through the wealth of examples on these sites, while none of these strategies for thinking about wireframes should be considered doctrine there are a lot of ideas to consume and some of them might appeal to you)

If you have any questions, start a discussion.

Most importantly – HAVE FUN! :)