Tuesday, March 30, 2010

[Collect] 1a: Strategy : Gathering research

(diagram: example of research range)
You are to research information as it relates to your collection. This will be your content.
Cull info from general to specific that is both educational & interesting. Content will be visualized as a series of clear and accessible information graphics (plus, include any text-only or text-image based content as necessary).

Gather a wide range of in-depth research, keeping in mind that the following types of data will be required when producing the infographs: 





  1. mapping (both in location and time)
  2. statistical comparisons (e.g. charts)
  3. descriptive information (e.g. processes, diagrammatic)


Due start of next class:
  • Document research on individual index cards. One bite-size idea per card. Min. 15 cards.
  • Each object from your collection must have its own card.

[Collect] Schedule

Due to the complexity of many design problems it is critical to establish and meet interim project deadlines. In addition to the always-necessary component of creative exploration and refinement, interactive projects must engage a high level of planning early in a project and allow adequate time for execution/testing at the end of a project.

The following is a suggested framework to help you manage your time according to the full project scope and approaching final deadline. Come to each interim project crit with the quantity and quality of work expected so that you are able to receive adequate feedback from myself and your peers, achieve satisfying outcomes and transition smoothly into subsequent phases.




planning

W 3/31 day 1: introduction
F 4/02 day 2: research cards (sorting exercise in-class)

design

W 4/07 day 3: infograph sketches due

F 4/09 day 4: wireframe iterations due

W 4/14 day 5: object explorations & design comp progress

F 4/16 day 6: object renderings due & design comps progress
W 4/21 day 7: design comps final crit (4/3)
F 4/23 day 8: refinements (tutorial in-class)


execution
W 4/28 day 9: refinements, progress skeleton
F 4/30 day 10: complete skeleton
W 5/05 day 11: progress skinned
F 5/07 day 12: project final crit

[Collect] Overview

“What is collected is culture” and “acts also as a commentary upon culture”. Pearce
You are to curate an online exhibit that introduces the user to a collection in an engaging and informative way.

objectives
  • Research & develop strategies for content comparison and data visualization
  • Educate viewers about the subject matter
  • Work collaboratively on specified assignments
  • Plan & develop an interactive method of presenting your collection
  • Author & display the collection in a clear, engaging & cohesive manner

subject
A collection of your choice. Can be yours, or borrowed, recently acquired, or handed down, broad, or eccentrically specific.

audience
Is unfamiliar with this (type of) collection, but are interested in learning more about it.

deliverables
  1. Organize and display the objects in your collection via 3 different sorting methods.
  2. Gather interesting and informative research about the collection and objects in the collection. Create a series of information graphics that visualize this research. The graphics you produce must include a range of approaches including
    (1) maps, (2) timelines, (3) statistical comparisons and (4) diagrams. Include additional content as you deem necessary.
  3. Design an interface that engages the user in the process of SORTING the objects of your collection, as well as REVEALING the detailed content about the collection (via information graphics).
  4. Design a clear and cohesive strategy for all the above data visualization, as well as an appropriate and creative method in which the individual objects are visually rendered and displayed.

Friday, March 26, 2010

{Point of View} Final Deliverables

Friday, 26 March

in class
work day, come to me in univers for help (make sure those who didn't see me Wednesday come first)

homework
Make sure your final build is uploaded to your server space and a process PDF is in my CAS drop box on Wednesday morning. You will project and present your solution to the class.

The PDF should contain the following:
  • Outline of content
  • Wireframes
  • The 3 design directions with interactivity steps
  • Markup of final design

Wednesday, March 10, 2010

[Collect]

To prepare for our next project, over spring break you are to organize and bring back a collection of your choice. This can be yours or borrowed, recently acquired or handed down, broad or eccentrically specific.

{Point of View} Production

Wednesday, 10 March & Friday 12 March

in class

  • production
  • demos as needed


homework

  • production

Wednesday, March 3, 2010

{Point of View} :: Mark-Up

Wednesday, 3 March

in class
critique design
mark-up demo

homework
refine design
mark-up layouts for production



After finalizing your design, you will have to measure and markup that design. Marking up layout for web development is common practice (though not always the designer's task, sometimes development does it) and the more specific and exacting you are, the better, and closer to the original, the results will be. Print out your layout and its various stages of interactivity, and draw directly onto the printouts.

Things you will need to measure and consider:

  • Structure: Where will my containers be to best build my design (draw boxes around them and give them x,y coordinates)
  • Semantic markup: name the containers, text, and image elements logically by content, which are "classes" that you create and name or by existing HTML tag names like paragraphs "p" and headings "h" (h1-h6).
  • Relationships: how should the CSS cascade affect your design elements, how do they sit within each other to facilitate your layout.
  • Functionality: what functionality exists on my layouts (where links and pop-ups happen, how they are activated, either rollovers, mouse-clicks, anchor tags)
  • Links: how do I differentiate link types (are interior links link anchor tags different from exterior links that take me to a new place)
  • Color: hat are the hex codes for all of my text and solid colors, and where do they appear
  • Images: what are my backgrounds made of, are they repeating images, or large static images. Which images need transparency, if any.