Students will collaboratively assemble, connect, and present a collection of their creation, using Are.na as a platform/
The web is a big place. Think about how one sifts through it all. How do we save things from this vast repository? How do we organize things within its systems? How do we connect them together? How do we prioritize (or deprioritize) what we have found? How does one find meaning within this all?
The web is also inherently a community—of people, of sites. This community is built, in large part, upon tools that facilitate interaction, collaboration, and connection. These systems (and thus the community) have structures of their own, which one can work with, or against. Think of the ways you can use these tools for their utility, within their limitations.
Students will together collect items on a theme of their choice—something of personal interest. They will then give the collection shape and structure in the form of a website. The site should contain all the contents of the collection, as well as an explanation of the organizing principle. The design of the website should reflect the intersection of these items—their interface—and allow for interaction within it.
Assemble a collection
Assemble a collection around a theme of your choosing. This theme should be of personal interest to you and something that you would want to share with the class.
You should have at least 30 items in your collection. They should span multiple mediums—for a varied mix of audio, images, links, documents, text, video. Everything in your grouping should be collected—that is, things you did not create yourself—and there should be a clearly identifiable, cohesive theme. As you curate this grouping, consider what makes the items you’ve selected a collection. What are there links to each other?
Gather and link your items in an Are.na channel, taking care with the metadata for each. In the channel description, explain the idea behind your items and why they constitute a collection.
When you are done, submit a link to your channel:
Due February 1.
Students will hand off their collections to a classmate, who will then use it to complete the rest of the project. The creator will be available for questions and consultation about the original collection—but going forward, everyone will be working with an adopted collection, and the final result is in their own hands.
You will each then be a steward for someone else’s idea. Working with other people’s content is inherent to our discipline—very rarely do you have complete control. Think about how you can reflect the original intent of the collection, while also imbuing your own taste and interpretation within the theme.
We’ve randomly assigned these connections:
- Abhishek → Chi
- Amaya → Kinjal
- Andre → Tanvi
- Azra → Shivi
- Bobby → Sanjana
- Caroline → Abhishek
- Chi → Shanshan
- Dayna → Azra
- Dhruv → Lucine
- Dusha → Madhura
- Fahila → Dayna
- Giselle → Sushanto
- Hamza → Caroline
- Ina → Giselle
- Jocelyn → Andre
- Myriam → Hamza
- Kendall → Myriam
- Keren → Vasu
- Kinjal → Sandra
- Lucine → Fahila
- Madhura → Kendall
- Mariia → Dusha
- Sandra → Ina
- Sanjana → Mariia
- Sarah → Keren
- Shanshan → Sarah
- Shivi → Dhruv
- Sushanto → Bobby
- Tanvi → Vidushi
- Vasu → Jocelyn
- Vidushi → Amaya
Students should get in touch with each other after class. The creator of the collection (left) should invite their classmate (right) as a collaborator on Are.na, making sure the channel is set to Closed. The creator can help explain the theme (beyond what is in the description) and can answer any questions around it for its new keeper.
You will not be able to edit (or delete) the description, blocks, or metadata of the original collection—this is the hand you are dealt. You might be able to talk to the creator and convince them to do it for you, but they are not required to—nor are you required to heed their feedback. Part of being a designer is also watching other folks execute your ideas, for better or for worse.
You can however add new blocks to the channel and adjust their order. Each student should now add at least 10 of their own items to the collection—
We’ll look at the original channel links, next class.
Due February 8.
You will then sketch on design directions for your website, in Figma. The site should contain the title and description of the grouping, and play with ideas of sifting, grouping, filtering, and linking the collection. The design should participate in and relate to the theme.
These directions should include explorations for the overall design of the site, as well as specific examinations on the design of various items themselves. Consider their medium and relationships, and the text and metadata available to you. Think about the word interface in all of its meanings—not just as a visual UI, but the way in which things meet and intersect. Think about the site, and its design, as this membrane between things.
Your design should, as always, consider mobile first before looking at larger screen sizes.
Submit your Figma when you are done:
Due February 8.
You’re now going to move into code, first using a static (local) subset of your items. This is no different from how we’ve began previous projects—you should first start with semantic DOM before moving into responsive, variable-structured CSS.
We will connect Are.na next; for now the media/assets will live within your repo and DOM directly—manually pulled/downloaded from the Are.na channel. You will use these to prepare your site for dynamic content.
Your static implementation should include at least five items, of various types.
Due February 15.
Are.na as an API
We’ll now connect the Are.na channel to your static site—using its Application Programming Interface (API) to pull its content in. This will utilize
There should be no more local media or assets in your local repo; everything should be coming dynamically from Are.na:
Due February 22.
Interactivity and refinement
Finally, as with your previous projects—you will present your work to the group, and discuss the conceptual backing and thinking for your collection and its interface.
Your final links are due at the beginning of class before crit:
Due March 1.
We want to see effective design, typography, and interaction patterns that build off of everything we’ve discussed thus far. At this stage, we are also expecting a level of finesse/refinement to your design and execution.
Our usual technical/practical requirements:
- As before, final projects should submitted as live, public URLs
- These should work on any computer and mobile device, in Chrome
- All of your pages (or states) should be responsive for mobile and desktop
- Your presentation should demonstrate all of this behavior, and is part of the project
And some additional considerations:
- Your project must show all the blocks in your channel (all types)—but how is up to you
- How will you order/organize the collection?
- Can the user manipulate or change this?
- How will you incorporate, differentiate, and relate the different content and mediums?
- How do you embrace an existing theme within your own expression?
- Can you develop a narrative within the theme?
Students should make every effort to use the technical skills they’ve learned in the class up to that point, and of course, are encouraged to go beyond. However if code is presenting an undue barrier—whether practically or conceptually—students may discuss this with the instructors. (Not the night before.)