Project 4: Links

Due March 1

Students will collaboratively assemble, connect, and present a collection of their creation, using Are.na as a platform/Content Management System (CMS)—then will design and build an interface to browse it.

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.

The goal of this project is to apply all the skills you’ve learned thus far in a digitally-native project, connecting tools, content, and form together. We will introduce and use JavaScript to facilitate this, understanding how it meshes with HTML and CSS to dynamically manipulate and render pages. The website should be responsive, and should allow for and facilitate interaction with the collection.

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:

Assignment submission

Due February 1.

Swap collections

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:

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—following, extending, or expanding the organizing principle of the existing items. It is yours, now.

We’ll look at the original channel links, next class.

Due February 8.

Sketches

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:

Assignment submission

Due February 8.

Static implementation

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.

Assignment submission

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 <template> elements prepared in your DOM filled with dynamic content from Are.na, using a template repo we’ve prepared. With the work done in the static implementation, this connecting-the-dots step will be done mostly in JavaScript.

There should be no more local media or assets in your local repo; everything should be coming dynamically from Are.na:

Assignment submission

Due February 22.

Interactivity and refinement

You will have an additional week here to introduce further interactivity/dynamism, via JavaScript, and further refine your project. We’d like to see a specific focus on addressing feedback from us and from your peers—for a deliberate polishing of your website.

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:

Assignment submission

Due March 1.

Our expectations

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:

And some additional considerations:

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