[Collect] "Final" Crit

Wednesday, 21 April

in class

• Michael one on one crit with students who were in the workshop
• Everyone else small group crits

homework

• revise designs and prepare a PDF to project for final design crit next Wednesay!

"Toto, I've a feeling we're not in Print anymore"

5 points to consider
when designing for the web: 
1. What's outside the box? Design for what happens beyond the browser. Useful tool: web browser sizer

2. Can you supersize that? Increase point sizes. Useful tool: type size tester

3. To serif or not to serif? Pay attention to how type renders on screen. Useful tool: compare fonts

4. Who turned off the lights?
Increase color contrast. Useful tool: color contrast checker

5. Where am I? 
Incorporate navigational states for the user.
link to: REQUIRED READING

One important consideration is how your interface will provide visual user feedback through its navigational-states:

• OFF (or up in flash) is when the user is not interacting with the button. Note: navigation not only tells the user where they can go, but also where they are. Therefore, the link to the page you are on should look different than the other links.

• MOUSE HOVER (or over in flash) offers the visual cue to decipher what is and isn't navigation.

Other states:

• VISITED lets the user know where they've been and is useful in sites with many pages.

• DOWN is not necessary, but is what the link looks like when the user "clicks" the button.

see some navigation examples here

[Collect] Show & Tell : Flash Sites

In 4 groups (4, 4, 5, 5), evaluate/critique the following sites. 

At 8:45, project and present your thoughts to class. (9 min per group max).

group 1

http://msnbcmedia.msn.com/i/msnbc/components/spectra/index.html

http://www.lukelukeluke.com/

http://www.frostdesign.com.au/

group 2

http://kashiwasato.com/

http://www.razorfish.com/#/home/

http://www.johnsonbanks.co.uk/

group 3

http://www.elbow.co.uk/

http://powerofdesign.aiga.org/cultureguide/flash_content/index.html

http://www.expedition.uk.com/main.php

group 4

http://www.peepshow.org.uk/main.htm
http://www.markenpersonal.de
http://www.reisenthel.com/us/index.html

additional 4 inspiration:

http://www.walkerart.org/index.wac

http://archive.bigspaceship.com/strangerthanfiction/home.html

http://www.segd.org/#/about-us/index.html

http://www.razorfish.com/#/home/

http://www.moma.org/interactives/exhibitions/2008/elasticmind/

http://pluralplural.com/#blog

http://www.minesf.com/

http://dresscodeny.com/

http://funislearning.com/

http://good50x70.org/2009/

http://fultonstreetdesign.com/

http://cfaui.ultramoderne.net/test3/img/Deflation_Poster_email.jpg

http://www.simonhoegsberg.com/

http://www.sharesomecandy.com/

[Collect] 2e : Design : Comps

You are to design the layout and interactive elements for your curated collection.
Produce a series of clear and visually engaging "comps" that illustrate all aspects of the site's content and interactivity (macro and micro levels). Comps represent the final presentation of your design, prior to programming in Flash. They are necessary to communicate your functional and formal decisions, as well as, present a clear interactive strategy for critique.

In each, address the layout and visual "look" of elements within the screen space, the typographic legibility for screen resolution, & navigational states (more on those next class).
To start, iterate 3 visual directions for the prototypical macro/micro pages.

file set-up:

1. Design for the common screen resolution of 1024 x 768 pixels. Due to browser chrome, anything vital to the user experience should remain within 950 x 550 pixels. Background elements (such as color or patterns) should extend beyond that minimum area for larger monitors. Select a centered or flush left orientation.
2. When designing for the screen, imported images should always be at 72 DPI and colors are RGB 
3. Work in illustrator for this assignment (of course you can bring in images and hand-generated assets through photoshop). Why? Flash is a vector based program like illustrator (wysiwyg) and you can export your graphics from illustrator directly to flash.

W 4/14 day 5: work in class

F 4/16 day 6: post iterations for progress crit 


W 4/21 day 7: post all pages for final crit

[Collect] Interview with Nicholas Felton

Graphic designer Nicholas Felton documents his everyday routines into charts and graphs. Read this interview to learn about how the ritual of designing personal Annual Reports effects his life and design projects. hmmm... can data tell stories?

[Collect] 2d : Design : Object Rendering

For this online exhibit, each object must be translated from physical form to digital. As the curator, how do you want the objects to be viewed? What specific connotations will be communicated?
View some examples of rendering methods.

This phase is the right-brain (intuitive) counter to the wireframe's left-brain (analytical) component. You'll address each independently, then merge in the design comp phase.

exploration

Select several of your collection objects to explore a range of rendering strategies. Try different formats (photo, illustration, graphic icon) and iterate within various parameters (full-color vs. 1-color, full-view vs. cropped, various perspectives, etc).

Those of you with highly graphic objects, consider ways you can take authorship. Those of you with really large collections, consider ways to represent the quantity efficiently.

applied

Select the direction with the most potential (both formally extendable and visually engaging) and render the remaining objects in a cohesive and finely crafted manner.


W 4/14 day 5:
blog post object explorations for progress crit

F 4/16 day 6:
post final object renderings for evaluation 

[Collect] 2c : Design : Wireframes: Content & Functionality

Wednesday 7 April


in class
studio time/desk crit


You are to determine what content resides on each page, as well as, the hierarchy & compositional arrangement of that content on each page.

Identify all your "prototypical" pages for iterative exploration. At minimum you must represent: a macro-sorting view and a revealed infograph view, but could also represent an about view, infograph index page, etc.

Each page address the following types of content:

• Navigation to the sorted views, as well as...

• Navigation to the revealed information graphics.

• Arrangement of the collection on the page, as well as...

• Arrangement of the infographs on the page (after click).

• Plus, additional content (like a title, intro text) to help clarify and frame the collection

You are to produce several variations for each prototypical page-type*. In each iteration, address different content arrangements, hierarchy levels, text and navigational options. Note: I did NOT mention animation/transitions.**

Day 4: Friday 9 April: Print & pin-up best explorations for crit

*These pages can be delivered in the form of VERY CLEAR & SMART paper prototypes or wireframes. They represent the content and functionality of the page - which means they require a high-level of brain power and criticality. They are NOT aesthetic explorations. Use a limited font and color palette. Use a 9x5 ratio (or 950-550 pixels), sized to print on 8.5x11.

**Why not? Animation alone does not guarantee a quality interactive experience. I'm not discounting the fact that transitions can add polish to a site and heighten the user's overall experience (they do!). But flash for flash's sake can really get in the way. First, concentrate on the functionality of your site, the organization and display of your content, the clarity of information graphics and the overall-sensitivity to design elements (typography, composition, hierarchy). Only AFTER those key issues are addressed successfully, should you explore transition/animation.

[Collect] Criteria for Data Visualization

When designing information graphics keep in mind this useful criteria, based on Tufte's Goals for Data Graphics. I will be evaluating your infographs based upon these points as well.

1. Clearly state the graphic's purpose.
2. Use comparison.
3. Provide context (or the reader will).
4. Establish several levels of read (fine detail to broad overview).
5. The physical representation of numbers should be proportionate to its quantity.
6. Clear and thorough labeling eliminates distortion and ambiguity.
7. Closely integrate the verbal description with the visual representation.
8. Employ graphic devices to enhance information understanding & retention.
9. Allow the information to yield the form (not force the info into arbitrary form).
10. Viewers should think about the data displayed, not the display of the data.

[Collect] Examples

Check out some of last year's collections:

http://lberglund.kcaigraphicdesign.com/ia/collect/
http://mallen.kcaigraphicdesign.com/ia/collect/
http://gkaufman.kcaigraphicdesign.com/ia/collect/
http://swong.kcaigraphicdesign.com/ia/collect/

[Collect] 2b : Design : Information Graphics

You are to design a series of clear & cohesive information graphics that will enlighten & engage the viewer. Add as many graphs and content areas as necessary to curate a robust and interesting experience.



View examples of information graphics

Gather more research as necessary. Select and include infographs that make evident your ability to handle a full range of content-types, as well as considers all the content areas your collection requires.
• statistical comparison
• description/diagram
• mapping in location
• mapping in time

Due next class:
Digitally executed "sketches" of the information graphics you plan to include. Note: The nature of this assignment is structuring the data in a clear and workable manner. Do NOT address stylistic or aesthetic choices. Limitations: illustrator, 1 typeface, b/w laser prints.

[Collect] 2a : Design : Sort & Reveal

You are to design an interactive experience in which the user can actively engage with the objects/contents. It is an online collection, after all. The interface design should offer options to SORT objects and REVEAL informative content about those objects.

View an example of flash functionality that sorts and reveals.

sort
The macro-level consists of a view of the entire collection at once. The user must be able to sort the objects in your collection into 3-different strategies. The interface you design must provide the user with non-linear navigation so they can click to any other sorting view at any time.
reveal
The micro-level consists of the research-based content. Some of which must be visualized as information graphics. Let's start with 9, but you complete as many/few as you deem necessary.

This content will be hidden and then revealed upon user interaction ("click"). Where, in the site experience each infograph is located and how the user accesses it is up to you.

[Collect] 1b : Strategy : Classifying & Sorting

Collecting is more than the act of accumulation or physical possession. It is the “searching, ordering, playing, and assembling” of cherished objects and keeping them “organized, classified and assigned [to] a place”. Baudrillard

classification charrette

List various classification systems for the objects in your collection. They can be qualitative or quantitative, subjective or objective, abstract or concrete. View examples of modes of classification. Post to your blog the various ways to sort the objects in your collection (using Wurman's acronym for organization).

card sorting
A concept map defines what is the content, its relationship to other each other, and where it resides in the site. Organize the research-based content (index cards) in a meaningful way, and in relation to the sorting views. Find connections between the card content and the sorting strategy and/or the card content and the individual objects. If you find data does not fit, then either find new data or change the sorting strategy.

post to blogs
Digitally translate the card sorting exercise and post to your blog. This is a simple and direct documentation of the index card sorting and is intended for your future reference.