Project 1: Content and Interface (25%)

As the visual landscape of the web becomes increasingly populated, designers are faced with the task of translating complex information into meaningful experiences for their audiences. This project is an exploration of interface design using photographic subject matter.

This project begins with capturing and organization of digital photographs of everyday objects. Each student will choose a designed object and capture multiple instances of that object. Examples of a designed object: chairs, door, handle, shoe, switch, label, watch, pen, cup, surfaces, wheels, windows, etc. Try to photograph a wide variety of the object instances to capture a unique collection of images that can be represented in multiple ways. At the same time, you may want to take note of the location, time and other contextual information of each photo to document the process. This may come in handy later.

Exploring the relationship between content, interactions, structure and visual forms, students are asked to develop a web interface to explore innovative ways of presenting and changing the display of their designed objects. Attention should be given to categorization and arrangement of the content while visually experimenting with type, image and composition.


Each student will plan, design and implement a fully functioning website to display the photo content. These files will be hosted on the digital locker course directory as shown in class. This folder must have an index.html document in the root of the file structure.


  1. Each student will take 30 photos of their chosen object and upload to Flickr.
  2. Print out your photos (b&w laser) and trim them (approx. 4"x3")
  3. Find ways of organizing visuals using card sort - (in class exercise Week 02)
  4. Develop information architecture based on card sort and your own critical choices
  5. Interface and interaction design opportunities decisions
  6. integration and visual treatment

These stages are followed to help guide the design process.

To Start

  • Each student will acquire 30 photos and post them to Flickr using the tag ysdn2005_11 and join the group YSDN Interactive Two 2011. Once you have done this, add your photos to the group pool.
  • 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.

Sorting the Images

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


Week 1

  • project intro - photo documentation, Flickr accounts
  • HTML/CSS review, layout and positioning, type
  • exercise 1 introduce/production
at home

Week 2

  • information architecture, card sort exercise,
  • photo interfaces
  • review exercise 1
  • technical - more on CSS rules
at home

Week 3

  • navigation – interaction examples
  • jQuery – examples, in class exercise
  • interface examples
  • consultation and review of project 1
at home
  • project 1interface prototype for next class

Week 4

  • class critique of project 1 prototypes
  • consultation and review of Project 1
at home
  • complete project 1

Week 5

  • project due for in class critique