Project 1 Process

These stages are followed to help guide the design process.

To Start With...

Each student will acquire 30 photos and post them to Flickr using the tag ysdn2005_10.

Include any annotation (time, location, contextual info) with photo. If you are really adventurous, try geo-tagging.

Use other tags as needed to help you organize and define your own folksonomy.

See at bottom of page for Flickr posting in wiki

The Sort...

After gathering the visual content, it is now time to think about the ways of organizing the photos into findable/sortable groups and categories.

Start by investigating the various organization schemes of image based web services; for example Getty, Corbus, Flickr, Google, seen.by, CCCA. What are their intended purposes and how do they differ or reflect similarities? How are these collections similar/different in their naming, interactions, interface and processes? Look for some other examples and do some thoughtful analysis of the user experience.

The next step involves organizing your own photos using a card sort method. In groups of three/four have others sort your printed photos into categories based on their own criteria. How do they want to see the photos grouped? By subject, process, material, chronology, name, location or information type. These categories may includes subsets of larger sets and ambiguous groupings. Look at how many groups exist and do they have a name? How different is your grouping from other’s? A discussion with and take into account these ideas when designing your own information architecture.

As an alternative, try using the organizing interface in Flickr (look under Organize tab).

Information Architecture

Once you have filtered through the possible organizational schemes, its now time to design the interface for interaction in order to navigate, browse and view your photo set. Plan out your information architecture on paper to include all groupings and labeling. You may also connect the various categories to indicate their hierarchical relationship and navigational flow.

Interface and Interaction Design

This phase involves designing the screen arrangement of your photos at various states of use. For instance, if someone is browsing, how are the photos displayed and how do they respond when selected (ie. small to big, move position). This part of the process can be very complex and challenging as we design the interactions and interface display needed for a desirable user experience.

Integration and Visual Treatment

The integration of the above into a cohesive and interesting visual composition that functions as a thematic display of photos. This visual design of the surface will be determined by the underlying structure and will require layout and typographic styling to completion.


Note: To post a flickr slideshow of your photo set to your Project 1 page, follow these steps.

1. Go to your flickr "Set".
2. Click the SLIDESHOW button near the top right, beside SHARE THIS button.
3. When the slideshow opens, click the SHARE button at the top right corner.
4. Click copy-to-clipboard under the "Embed HTML" code.
5. Open your Project 1 page on wiki, click the EMBED WIDGET button (looks like a little TV set)
6. Click the last item in the left bar "Other HTML" and paste the code into the box.

It shows up as a piece of code in preview, and a "other widget" box in Editor, but it will show up on your page.