Wednesday, September 30, 2009

Project 1 :: Schedule

You should be finalizing your wireframes and have your look and feel well developed.
We will be working a lot in class and have a progress crit on Wed the 7th.

Wed 9/30 Work in class, team meetings with me in Univers.
Fri 10/2 Work in class, short reading discussion.
Wed 10/7 Class progress crit on directions. Work in class.

Monday, September 28, 2009

Sunday, September 27, 2009

Interface everywhere.

I've been dreaming about real desktop interfaces (cause I'm a geek) since I first worked on a mac. Here's a future-microsoft-minorityreport-apple world scenario that Jamie posted over summer on designalogue.


Wednesday, September 23, 2009

Project 1 :: Design Round 1

homework for friday sept 25
  • alter and update solutions and wireframes based on input from critique. add detail and begin to make connections between tools/modules.
  • read and view tufte: "iphone interface design" and blogger Chris Fahey's response (with some excellent commenting as well).
  • start pondering branding-related aspects of your project: a site name, tool/function names, basic identity elements such as typefaces, graphic elements, and color choices.

in class friday sept 25
design round 1, show some sweet design!

Friday, September 18, 2009

Project 1 :: Inspiration

Let's crowd source some more links that are Web 2.0 & real world specific, each person owes class one interesting link by next Friday. Post here in comments.

Links from Friday 9.18
Yellow Arrow: http://yellowarrow.net/v3/index.php
Nike+: http://nikerunning.nike.com/nikeos/p/nikeplus/en_US/?rs=1
Sonar iPhone ruler: http://vimeo.com/6068060
Livestrong site: http://www.nike.com/nikeos/p/livestrong/en_US/
Livestrong chalk writer: http://www.youtube.com/watch?v=5Jb-KT4r6NY&feature=player_embedded
Philips design probes: http://www.design.philips.com/probes/projects/index.page
Philips food probes: http://www.youtube.com/watch?v=Au2Bueiy6MQ&feature=player_embedded#t=224
Mapping main street: http://www.mappingmainstreet.org/

Thursday, September 17, 2009

Project 1 :: First Presentation Expectations

For Wednesday's (9.23) presentation I expect a summarization of everything we've done so far with a plan for the rest of the project. This should include:
  • Recap of activity and audience
  • A basic outline of your system supported with visuals. If it's clear to us just from your description and visuals how it the system will work in general and how needs, a sense of belonging, a common symbol system and reciprocal influence are being addressed, you've probably got a good thing going. Describe the technologies involved in context in this part. Sketches, photos and storyboards will aid this part of the presentation.
  • Beginning wireframing with verbal description. I do not expect final, fully detailed wireframes of every piece of your system, just the basics. The hierarchy of needs and solutions should give you a basic outline of how to approach the wireframes. These do not need to be Illustrator files either. Well made, hand drawn, and photographed wireframes would work as well. Give us a feel for the main areas of the online interface and the uses of handheld or other devices that are part of your system.
You have 5-10 minutes for the presentation with 5-10 post pres class critique.

Be concise, be interesting. PRACTICE BEFOREHAND.

This is a great warm-up for the final presentation of the projects in front of an bigger audience. The critiques should be an added brainstorming session for your system, crowd source us to improve your project!

Wireframing Considerations

some things to help keep your head in the right place:
  • your solutions should be directly fulfilling believable, real needs that engage and excite the audience (exerting influence, creating emotional connection, etc)
  • be sure you are connecting the physical with the virtual, augmenting or extending each
  • your sketches should be structurally/task based (click this, upload this), and consisting of a series of screens. only indicate basic page elements that are used to interact and complete a task.
  • the visualizations of solutions should tell you where you'll need system "components" and in which media they belong.
  • put the needs and solutions in a hierarchical list and translate that to visual hierarchy in your online applications
  • the components, and hierarchy will help to drive your wireframing, i.e.: bigger areas = more important elements
  • while sitemapping/wireframing, consider the structural makeup of the system. for the online interface consider creating: multiple pages, a single page with interchangeable "modules/content buckets", or a mixture of both (most likely the last).
  • for the handheld device, simplicity and linear navigation in the interface is important to keep in mind. (problematic with some of last years work, tiny type, too many choices on a screen, not enough visual cues to help the user)


Wireframes, Only Wireframes

While desk doing desk crits during our last meeting, I was quite disappointed by the lack of large pieces of paper with evidence of your fruitful brainstorming and ideation process. There was much evidence of great ideas during our talks but I still pushed all of you on Wednesday to visualize your ideas physically, together, on paper. While developing your wireframes, that method will also serve you well, starting right out in Illustrator will stifle and slow you down.

Check out some good wireframing methods here on this aptly named blog, Wireframes:
http://wireframes.linowski.ca/2009/02/whiteboard-wireframes/


Wednesday, September 16, 2009

Project 1 :: Class activities

in class wednesday 9.16
  • Work day. Desk crits on activity brainstorming. Plot out steps/processes for those activities. Begin visual translations into wireframes.

homework for friday 9.18

  • continue developing activities/processes/visual translations
  • plot your posters.

in class friday 9.18

homework for Wednesday 9.23
  • Prepare a presentation of your interaction solutions (5 minute keynote presentation summarizing research, proposing solution, showing wireframes).

Friday, September 11, 2009

Project 1 :: Conceptual Design

conceptual design: moving from research to ideas & solutions
The next few class sessions will focus on translating your knowledge of the audience into online (and offline) activities that will support and enhance their sense of community. It's important to look beyond now-generic web 2.0 functions such as photo-sharing and identify activities that connect people with people and the physical world with the virtual. Consider current AND hypothetical technologies and tools for data collecting, especially as they relate to the real world. Stay focused on activities and develop processes that allow that action to happen. The online tools you design should flow from those activities and processes. Consider ways your system could allow individuals to connect 1-to-1, 1-to-many, many-to-many. Use the skills you've learned in previous classes to map out scenarios of how users will move through your system (sketching, storyboarding, diagraming) and how that system will be arranged and presented (sitemapping/wireframing).

A good way to start could be listing requirements based on need next to possible tasks/scenarios to meet those needs, i.e.:

the swimmer

  • need: a new workout to improve butterfly stroke:
    solution: the community uploads categorized workouts, swimmer searches butterfly improvement, downloads chosen workout to (waterproof!) iPhone
  • need: check personal stats and improvement
  • solution: swim goggle attachment collects speed and positioning data over time, transmitting real-time to site where it's analyzed and presented as diagrammatic data over time, allowing comparison to other members
  • need: workout buddy
  • solution: swimmer calls up iPhone app, collected user data online is read and compared to swimmer capabilities and other interested users show up on iPhone area map.
  • need: competition
  • solution: swimmer can join the competition area and sign up for "races". goggle attachment monitors position and stop and start times, allowing swimmers in 2 different places at different times to compete.


homework, due Wednesday 9.16
  • Final poster refinements.
  • Based on the community reading and your own model, brainstorm/list what online activities might reinforce a sense of membership, allow for the reciprocal exertion of influence, fulfill their stated needs, and create a shared emotional connection. What can users do at your web space? What can users do in the real world that the online community can use to improve services or offer new services?

Wednesday, September 2, 2009

Project 1 :: Homework for Friday 9/5

in class
  • community reading discussion / review community models
  • watch an Anthropological Introduction to YouTube!
  • work time for research & brainstorming
homework
  • continue individual and community research, bring research to class, begin designing posters (sketches are adequate for friday 9.5, research is more important at this point)
  • watch Clay Shirkey video
friday 9.5
  • class starts at 9:00
  • check out some old research posters and diagrammed info
  • poster process crit (at your desks)
  • work in studio
  • lunch lecture w/garrett @ 10:40

homework for wed 9.9
  • posters designed, tiled, and up on the wall at the start of class
  • Watch another Clay Shirky video!

Project 1 :: Research Posters

Design 2 research posters outlining your chosen activity from the individual and community perspectives. Creation of the research posters will fuel ideas for the creation of your "system". Find out all you can about what it takes for an individual, and community, to be involved in your chosen activity. Utilize the principles learned in Information Architecture to organize, display, and connect relevant points. Design as a team so your posters fit together systematically. Don't forget design & hierarchy, these posters should be engaging, beautiful, and informative.


size 2' x 3' (horizontal or vertical pair)

color
yes

audience
designers, developers, business specialists (imagine presenting this to a hypothetical group that would be funding, programming and advertising this project)

primary considerations

  • how can you design this information so it will actually be read and utilized?
  • is the content both concise and highly informative/useful?

content requirements

"individual" poster
1. a persona image
2. persona text and/or images describing:
  • basic demographic info such as age, education, home, employment, income, etc
  • "membership" info (from the reading and/or your own model) such as boundaries, emotional safety, level of belonging and identification, symbols used, etc
  • needs for community interaction: what is desired and valued by this person?
  • needs for successful activity involvement

"community" poster
visually / textually describe the following:
1. basic description of the community
2. activity information such as physical boundaries/setting, what's/who's involved, equipment, etc
3. shared values of the group
4. how influence works (provide an example)
5. how shared emotional connection happens (provide examples)