Any great work of art revives and readapts time and space, and the measure of its success is the extent to which it makes you an inhabitant of that world. — Leonard Bernstein in ARTNews, September 2000.

---

QUESTION 
What does it mean to express an ever changing collection across an interactive experience? 

LEARNING OUTCOMES

• Build and showcase an online collection that responds to various desktop and mobiles states.

• Understand how to develop a comprehensive set of components that includes buttons, containers, and states.

• Understand how to develop a style guide that includes typography, color and iconography.

INTRODUCTION
Create a collection of 100 (visual) media items. These can be physical objects that you document, screenshots, found images, pieces of fashion, videos, original images, etc.

If you want to collect quotes or text, it will have to be displayed with an image-based method like so. We will add these into a repository using Figma.

For this project, we’ll be designing a website to contain and display your content. You will be adding to your collection over the course of the entire project, so whichever collection you’re working with, will grow.

This means you’re designing a system that can expand or contract to show this collection as it changes.

CONSIDERATIONS

• Does the design of the site somehow respond to new content? Rather than being a neutral vessel, how can the design that you use to organize your collection change when the collection itself changes? For example, do colors on the site change in response to the kind or amount of content posted to the site? Does the arrangement of ele- ments or the grid change?

• Does the site’s navigation change to highlight the most current content?

• WHAT do you want to do and WHY, and then HOW?

• Does the type of content imply a form for your site?

• How can you tell a story through a curated set of visuals / interactive experiences?

• How is the collection organized (or disorganized)?

• Consider how the user interacts with this collection, do they see it all at once, or do they have to work to uncover parts or all of it?

• Does the design of the site respond to new content? (e.g. marking anything that has been added in in the last 24 hours)

• Is there such a thing as a neutral vessel?

REQUIREMENTS

• A title, logotype or wordmark for your collection

• An about page or section containing a brief text about your collection + designer and collector credit

• Must include all 100+ media items

• Your site must have one or more animated element that enhances the experience and relates to your collection in a meaningful way.

• Your website should have at least two ways of viewing your collection.

• These can be filters/subgroupings, sorting methods, list vs. thumbnails toggle, randomization, etc.

• Site favicon

• Mobile first: Must be responsive / functional on a mobile screen (mobile does NOT need a custom design, however, but the site just shouldn’t break on mobile.)

INSTRUCTIONS

PART 1
Come up with three ideas for your collection with five images/media/items/examples for each. (example set of three themes: specific type of fashion, screenshots of my desktop, or video clips from the news)

• Consider what unites the media, how different or similar can they be from each other?
  

• You don’t have to know why you like something or where this is going!
  

For each, write a summary of what you’d like to investigate with the collection idea. Display all of this in this Figma.

PART 2
Using the same Figma from Part 1, further develop one of your collection ideas based on feedback from Tuesday’s class. 

Add what you have so far for your collection to a google drive folder. Gather until you have 50 items and add them to the folder. Browse your assigned collection.

Begin thinking about website ideas, jot down a few notes and begin sketching three different wireframe directions. Consider ways that you might organize the 100 items.

Come up with multiple ideas for a set of 3 sub-categories. These might be filtering or sorting mechanisms. Find similarities, draw connections, and develop a concept or narrative for the collection you were given.

PART 5
Collect 50 more items until you have at least 100 items in your collection. Create an information architecture of all of your screens/states of your site that shows what information will be displayed, and how the user would navigate from one screen to another. You shouldn’t be thinking of visual design at this point, just how your site is organized and the way the user will move through it. 

• What are the specific kinds of information that the site will contain/display?

• Which information should be more prominent? Less prominent?

• How can you give order/structure to the information?

Based off of your infromation architecture, create a set of wireframes that show the structure of your site, and layouts that show how each screen will look. Show a full range of examples of the kind of content your site will contain, interactive effects like hover states, and how the site will change in response to different content. How can you take advantage of differences in screen sizes? Remember mobile first.

PART 6
Present sketches of 3 vastly different ways of viewing/designing your assigned collection using Figma.

• Can you look at one item at a time, or is the overall-ness important?

• How does the user move between the items in your collection?

• How do the filters/sorting mechanisms function?

• What does your UI look like? How do your buttons function?

• What is your type system? 

PART 7
Choose a design direction and create 5 (or more) pages. Like in our last project, each draft should have 1–2 changes (e.g. margins, type size/s, typeface, color palette, etc). The drafts should be sequential, or rather, each draft should build on the last, and test out a variety of design questions.

• How do we refine your UI system? 
• How do we refine your type system? 
• How does your color system come into play?
• What pages are important to share?

PART 8
Create 3 or more design drafts with slight variations between them, each building on the last. (UNLESS you have not yet nailed down the design direction yet. That is the highest priority). 

Using your layouts as your guide, build a prototype, test it, adjust the design and the prototype, and continue tweaking.

You’ll undoubtedly encounter problems with the design that you didn’t initially anticipate, which is why multiple iterations are crucial. Use the qualities and opportunities inherent in the web to your advantage: interactive cues, links to external sites, video and audio, and soliciting user input all can be used to create a powerful experience. Be sure to check your design decisions against your content and your intentions/goals to avoid going overboard. Carefully consider the site’s form as it relates to the content.

DELIVERABLES

• Figma presentation sharing your process and final set of prototypes.
  

SUGGESTED READINGS

• Walker Art Center, Sharing as Surviving: Mindy Seu on The Cyberfeminism Index, 2020.

• Jill Lepore, The Cobweb, 2015.

• Tim McKeogh, How to Keep Your Collections From Looking Like Clutter, 2020.

• Meg Miller, Lubalin’s Radical ’60s Magazines Are Giving Us A Lesson in Archiving on the Web, 2018.

ADDITIONAL LINKS AND RESOURCES

• https://library.juddfoundation.org/

• https://staffansundstrom.com/

• https://www.roselosangelescbd.com/

• https://kjphotos.com/

• https://whitney.org/exhibitions/dawn-of-a-new-age

• https://www.laurenbamford.com/

• https://www.acnestudios.com/us/en/home

• https://www.maisonmargiela.com/en-us/

• https://collage-builder.glitch.me/

• https://philippinecassettearchive.com/
  

• https://allipossess.com/

• https://seed.com/

• http://exhibitions.guggenheim.org/storylines/

• https://johncaserta.com/introletter.html

• https://cyberfeminismindex.com/

• http://avantgarde.110west40th.com/

• https://interferencearchive.org/category/exhibitions/

• collage-builder.glitch.me• claue312.github.io/s20-core

• interaction/collect_me/index.html• trash

• collection.glitch.me/• freeze

• shi.github.io/2020lab/project3,

• body-and-environment.glitch.me/

• Gifts from CyberSpace

• The Bureau of Suspended Objects

• Lyndsay Lohan

• Used Lipstick

• An Index of Patriotic Consumption