[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.

[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.

{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

[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

{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.

quote

"I believe that when people talk about solving problems with technology, what they're usually talking about is solving problems with design...which is to say, the application of psychology in a visual & functional context."

Jason Kottke

{Point of View} Design Build Out and Presentation

in class

• short discussion of design mark-up and planning for production
• demo: linking/integrating video & flash/image size
• studio time

homework

• refine and build-out your design to present all phases of interaction and presentation of content
• create an ordered PDF of your design for critique on Wednesday

{Point of View} Designin' and Refinin'

Wednesday, 24 February

in class

• start: 3 person group crits, 30 minutes. discussion points:
  1. is the interaction/navigation understandable for the viewer
  2. are the visual metaphors/design appropriate and interesting
  3. is is beautiful and useful
  4. is supplemental information used in the design, does it bring deeper understanding to the content
• place presentations on my drop box
• studio time: design refinement

homework

• design refinements: make it beautiful, useful & engaging
• read Richard Saul Wurman: Point of View 

{Point of View} Crit & Design Development

Friday, 19 February

in class

• crit design directions
• studio tyme

homework

• develop preferred design direction:
  1. revise layout based on crit
  2. build out interaction steps in photoshop
  3. put into an ordered progression and make PDF to present on Wednesday
  
• build out personal landing page and upload to subdomain

{Point of View} & [CSS Demos] 4

Wednesday, 17 February
in class

• CSS Demo 4: MAGIC!
• making PDFs from PSD JPGs, OMG
• studio time

homework

• develop your essay layout directions  
• prep for Friday group crit (project PDFs of JPGs in Univers)
• try to build your personal landing page in Dreamweaver and upload to your subdomain

{Point of View} Designing in Photoshop

Friday 12 February

in class

• CSS Demo 3
• studio time

homework

• beginning design in Photohop (see below)
• build the basic structure of your landing page in Dreamweaver

For this project we will be designing the web layouts exclusively in Photoshop. There are many reasons why, but the main one is WYSIWYG. Photoshop is a bitmap based program and we are working on the screen and for the screen. Getting used to laying out in multiple programs will also train your adaptability and flexibility. So do it. Diagrams and other vector exclusive elements should be done in a combination of Illustrator & Photoshop.

Based on your wireframes, begin designing your essay comparisons. Start with a screenshot of a browser as demonstrated in class. This will serve as a window to contextualize what you are designing. Your design will grow as you add text and elements. Be sure to group related items in Layer Groups to make organizing, moving and editing more efficient. Extend your frame as needed with Image/Canvas Size. 

Typography Choose from the following typefaces for this project:

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Read this short, excellent article on Web Typography: http://informationarchitects.jp/the-web-is-all-about-typography-period/

Begin 3 different design directions in Adobe Photoshop. Upload images of your progress to your blog.

{Point of View} & [CSS Demos] 2

in class

• CSS Demo 2
• studio time

homework

• continue development of all points in last homework assignment

{Point of View} & [CSS Demos]

Friday 5 February

in class

• CSS Demo 1

homework

• continue development of {Point of View} layouts
• design a landing page in Photoshop (see below)
• begin building your landing page in Dreamweaver with basic DIV containers, try to get the basic framework built

In photoshop, layout a page to serve as the homepage, or landing page (index.html) to your subdomain. Don't overwork this layout! If you spend more than an hour designing it, you've gone too far. Make it a simple framework we can expand upon in the next weeks. It's just a vehicle to apply your tech-learning as we demo. Define separate areas in your design that will contain the following:

• your name & profession
• 2 work examples
• one paragraph about you
• one self-portrait (you define what this means)
• an area to contain links to work examples

An example.

{Point of View) Schedule Feb 3

Wednesday 3 February

in class

• about CSS, CSS demo
• about chrome and screen size
• about wireframes

homework

• create 6-9 wireframe sketches, take the 3 most interesting and create a "tight" wireframe in Illustrator, post sketches and Illustrator PDFs to blog
• continue research and diagram sketching

On Friday class is only one hour long due to Steve Frykholm talk, 1:30-2:30 deskcrits CSS demo.

{Point of View} Wireframes

"A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in web design to suggest the layout of fundamental elements in the interface." 

Wireframing is an indispensable step in the website design process. By planning with sitemaps and wireframes the designer can speak with clients and developers using a common, simple visual language. Once agreeing upon content and structure, presenting your designs becomes much easier as you've built upon agreed organizational methods. It aids in the design process by giving you a framework and scaffold on which to begin designing. There's no set ways and many tools for wireframing, I start with pencil sketches and then make Illustrator wireframes to present.

Read the concise Wikipedia entry on wireframes and create your own wireframes to plan how you will layout your essays. Approach each wireframe from a different structural perspective. Sketch them out first, then create Adobe Illustrator versions of the 3 you think are best. Create a simple understandable legend to codify areas, for example simple boxes to represent areas of content, color or gray scale coding of outlines or areas can help you differentiate content and define hierarchy.

Include the following:

• authors
• titles
• text (do not put the actual text in, can be: white space/lines/bars/grey areas)
• diagrams
• other supplemental content (can be broken down by type, i.e. /bio/commentary/critique/points for/points against/photo/video)
• buttons (if you foresee any hiding and revealing of content)

Check out some good wireframing methods here on this aptly named blog, Wireframes:

http://wireframes.linowski.ca/2009/02/whiteboard-wireframes/

{Point of View} Supplemental Assets

Continue researching and collecting information about both of our authors: activities, history, work examples, etc. You will be integrating this related content in your designs in context with the text as diagrams, illustrations, video, quotes, etc.. It can support or contradict their positions in the essays. It can even be related content that solely supports your viewpoint on the ideas in the text.

This material will help to contextualize the writings for the audience. We approach reading (and everything else we encounter) armed only with our personal knowledge and biases.

supplemental assets can be

• biographical text
• other text about the same subject
• text about the author (publication in the editors case)
• screenshots & photographs of author work or examples of both modernism and post-modernism
• images
• sound
• video

Tumblr Class Account

OK, we're going to share an account at Tumbler for class inspiration. It'll work better than the blog post as we can add links, images and video easily and have all the material in one spot. It will be much more accesible than trolling through the comments of find and share.

Here's the URL: http://infoarch.tumblr.com/

I'll send everyone an email with our shared login and password.

Have at it!

FIND & SHARE

Post it here!

{Point of View} Research, Understanding Content, Concepting Visualization

You will be gathering content beyond the essays to use in this project. To supplement the reading experience, designer photographs, images of work representing designer and theme, charts, timelines, etc., should populate the design to add layers of content to the reading experience. Investigate timelines and facts surrounding both designers and subject matter.

For studio and homework collect images and facts around our designers and themes. Sketch possible ways to distill and visualize complex content to add to the reading experience.


Friday 29 January

in class

• talk about modernism, post-, massi, kathy 
• look at ad-hoc info arch eye candy
• group brainstorming for content development
• concept & sketch ideas for information graphics

homework

• find and share a timeline based info graph, bar chart, pie chart, and one representational diagram
• sketch out ideas for our content, timelines of designers, modernism & post modernism ....
• gather images and content related to our themes

{Point of View} Outlining & Mind Mapping Tools

Outlining with Word

Word's notebook view is great for outlining content. You can collapse content to save space and easily drag text to different hierarchy levels, also, the visual interface with the lined notebook style may look goofy, but really is effective . The rightmost icon in the lower left menu bar will activate this view.

Mindmapping with MindMeister

MindMeister is an awesome online collaborative mindmapping tool that has a free edition allowing you to have up to 6 mindmaps. http://www.mindmeister.com/

We will be exploring sitemapping and wireframing content for the web in the final project, so these tools will be useful throughout the semester, and beyond.

{Point of View} Reading & Outlining

Read the essays below. Create a simple outline and analysis of each text (can be made in any program: Word, SimpleText, InDesign, etc.) to use as a guide in your design process. Break down the text into the core ideas and arguments within. What is the author saying and how are they supporting their position or negating a different position? How do you feel or interpret what they are saying? Do you agree, disagree or are you ambivalent?

about modernism

Massimo Vignelli: Long Live Modernism!

Kathy McCoy: Rethinking Modernism, Revising Functionalism

Bring your outline to our next class, be ready to discuss.

Project One :: {Point of View}

description
Create a web page comparing two texts about design. Through your reading, analysis, and point of view, you will be able to design each text in a way that: brings relevant points to light, compares contrasting or aligning ideas, brings supplemental information in context with the text, or pits objective legibility and order against subjective interpretation.

objectives

• understand point of view and context in design
• develop visuals and diagrams based on research
• use diagrams and supplemental information to enrich content
• use design to present information in as objective a manner as possible
• explore subjectivity and objectivity within design
• explore CSS, Javascript and HTML as design tools

in class kickoff

Break up into four groups and spend 1.5 hours researching and creating a 5 minute presentation of the four following topics online:

• Modernism – Group 1
• Postmodernism – Group 2
• Massimo Vignelli – Group 3
• Katherine McCoy – Group 4

Present to class. Discuss. Go to lunch.

What is Information Architecture?

The analysis, design, and display of information to aid speed, and depth, of understanding.

general course objectives

• engage in the specified design process from ideation to execution
• employ refined image making, composition and typographic sensibilities
• professionally document process and final artifacts
• engaging in a developing dialog about information architecture (through readings, class crits and show+tell)

info arch objectives

• mapping, structuring and visualizing complex content
• present content in a manner that is useful and meaningful, accessible and engaging
• explore various navigational structures
• investigate processes for giving form to online content
• understand limits and advantages of designing for online

Read the intro to Information Architects by Richard Saul Wurman.