Project Nº 4: “Links”

Students will collaboratively assemble, connect, and present a collection using Are.na as a CMS (Content Management System)⁠—and will then design and build an interface to explore and understand it, using its API (Application Programming Interface).

The goal of this project is to apply all the skills you’ve learned thus far in a media-based project⁠—connecting varied content, tools, and form together. You will collect and then organize items on a theme, before giving it 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⁠—highlighting the connections between its items. The design of the website should reflect this theme in its interface⁠—and allow for interaction within it. We will introduce and use JavaScript to facilitate this, understanding how it meshes with HTML and CSS to dynamically render and manipulate pages. The final website will, of course, be responsive.

Assemble a Collection

Assemble a collection around a theme of your choosing. This topic should start from your own interest, but be aimed at broader use and collaboration from others.

Gather and link your items in an Are.na channel, taking care to edit the metadata it applies for each. (We should not see default, junky filenames and such as titles.) In the channel description, explain the idea behind your blocks and why they constitute a collection. As you curate this grouping, consider what brings them together⁠—what are their links to each other?

You should have at least 30 items, to start. They should include all the Are.na content types for a varied mix of audio, images, links, documents, text, video. We expect at least one of each type of media (not just images and links), but the best collections are more evenly distributed across all of the types.

Everything in your grouping should be collected⁠—that is, things you did not create yourself⁠—and there should be a clearly identifiable, cohesive theme. We’d also like some content to come in “fresh” from the web (creating new blocks), not just linking of existing blocks already on the site.

The collection is the foundation for the other steps! Be deliberate in your curation and metadata.

Here are some channels for reference and inspiration:

Typography and Interaction, Too
Our example channel showing different media types!
Eggs in Art and Design
Laurel Schwulst
How to Think About Thinking
Glenn Mendonsa
Ocean
Bryce Wilner
What Is a Digital Garden?
Sarah Holloway

Be sure the channel is set to Closed (not Private ) so we can see it! When you are done, submit a link to your channel.

Submission Form
Send us a link to your channel!

Due Jan. 28

Swap Collections

Students will hand off their collections to a classmate, who will then use it to complete the rest of their own 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:

Chareese → Noor
Noor → Evgenii
Evgenii → Maika
Maika → Mia
Mia → Lucy
Lucy → Ali
Ali → Sophia
Sophia → Sooim
Sooim → Kimaya
Kimaya → Amanda
Amanda → Cason
Cason → Trenton
Trenton → Melody
Melody → Katie
Katie → Zarah
Zarah → Riya
Riya → Kinza
Kinza → Soko
Soko → Michael
Michael → Chareese

Students should get in touch with each other after class. The creator of the collection (on the left) should invite their classmate (on the right) as a Collaborator on the channel, making sure it is set to Closed. The creator can help explain the theme⁠—beyond what is in the channel 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 yourself⁠—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⁠—but nor are you required to heed their feedback or direction. A (sometimes large) part of being a designer is watching other folks execute your ideas, for better or for worse!

You can however add new blocks to the channel and also adjust their order, changing the breakdown of types and the sequence they are seen. Each student should now add at least 10 of their own items to their collection⁠—following, extending, expanding, or even shifting the organizing principle of the existing ones. It is yours, now.

When you are done, send us the link to your adopted channel.

Submission Form
Now your adopted channel, with your added blocks!

Due Feb. 4

Static Content Sketching

We’ll move right into design⁠—starting in code⁠—using the collection you’ve been given. To begin, contemplate your blocks. 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 with each other.

Think about your site, and its design, as this membrane between things. Your aesthetic and form should participate in and relate to the theme. (As in, you couldn’t just swap another channel contents in.) Think about the design of the site, but also about the design of the individual blocks together.

In code, begin with the furniture of your channel⁠—the title, description, an area for your blocks. In this phase, we’d like you to “hard code” at least one example ~~of each media type~~ image (or video), text, and link with the exact content from the block online. We will connect Are.na soon; for now the media/assets will live within your repo and DOM directly⁠—manually copied/downloaded from the channel. You will use these to prepare your site for dynamic content.

This local, static subset of your items will also help inform your design. This is no different from how we’ve began previous projects⁠—you should first start with semantic DOM before moving into mobile-first, responsive, nested, and variable-structured CSS. Mind the fundamentals!

Provide a link to your repo and URL, once it’s live.

Submission Form
Your repo with hard-coded examples!

Also Due Feb. 4

Are.na as an API

We’ll now link the Are.na channel to your static site⁠—using its API to pull in its content directly. This will utilize JavaScript to dynamically render the page content from the channel, following our example repo.

With the foundations laid in the static implementation, this connecting-the-dots step will populate the site with its real, live/updating content. Changes on Are.na are changes on your site. With real content comes real considerations, and your design should evolve from this.

As you respond to this content, ask yourself: how will you order/organize the collection? 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?

There should be no remaining local media or assets in your repo; everything should be coming dynamically from Are.na. You are welcome to continue to add blocks to your channel and refine it in the CMS there. We will then move our focus to refining the design and layout of the site, based on your actual content.

links
Our demo repo to reference.

Submission Form
Your repo, now connected with JS!

Due Feb. 11

Adding Interactivity

Here you will introduce interactivity and dynamism to your project, via your own JavaScript⁠—beyond just the Are.na API.

Think about someone using your site⁠—how can they manipulate the collection? How can they change it? How can they explore it? We’d like you to consider sifting, grouping, filtering, sorting, linking, altering, unpacking, enlarging. This isn’t prescriptive; work back from your collection and its theme. JavaScript (and the functionality it brings) is no different from your content and styles⁠—it should be in service to your concept.

You’ll also continue to refine your design and build, based on feedback from us and your peers.

Submission Form
With JS use beyond the basic API connection!

Due Feb. 18

In the final week, we’d like to see a focus on refinement and polish⁠—from our feedback and from your evolving design considerations. With the core of your content, design, and functionality in place, here we want to see it taken further.

Last, as with your other projects, you will present your work to the group⁠—discussing its concept, iteration, and implementation.

Submission Form
Make sure that we have your final, tested links!

Due Feb. 25

Our Expectations

We want to see your effective design, typography⁠—and now 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 executions, build on solid technical fundamentals.

Our ongoing requirements

Again add a README.md to your repo, with some care.
As before, projects will be submitted as live, public URL⁠s.
We won’t go chasing down links; submitting the form is “turning it in.”
These should work, as intended, on any device (not just the student’s).
The page should be fluidly responsive across breakpoints.
Your presentation should demonstrate all of your project’s behavior, and is part of the project.

And some additional considerations

You are required to use images, obviously! (Inline SVG use is up to you, as needed.)
Your project must show all the blocks in your channel (and all types)⁠—but the how of that is entirely up to you.
We don’t want to see 20 Are.na reskins/generic templates⁠—these should be unmistakeably unique to your collection and its theme.
We want a renewed focus on a systematic implementation⁠—using CSS variables, nesting, and succinct, structured styles.
We want some considered interactivity, but not just for the sake of it.
Try to make these feel alive⁠—both in content, and in form⁠—within and extending from your concept.

Notes on Format

We will split into two groups again, for time and space: half will be here; half will be over in Room 602, across the street(s). We’ll post the presentation order and respective classrooms the morning of class next week.
Each of you will have 6–7 minutes to present your projects. (We’ll give you notice at the five-minute mark.) You’ll do this from one of your machines, signed into Zoom for recording and the projector. The final page should be shown from the live URL you have submitted. All as before!
We know you are (ideally) finishing up the refinement phase of your project⁠—but we want you to think of your presentation as a discrete “deliverable” here. Practice for the time. Run it by one of your classmates. Many of you had presentation-related feedback in the Fall⁠—factor that into this. (Obviously this is all harder if you are committing code the night before!)
Introduce us to your channel, its concept, and your execution. Give us your thought process and tell us the story. Make sure we see it on mobile and across all the breakpoints, fluidly. Thoroughly demonstrate the interactivity. Again, your presentation is part of the project⁠—remember that if you aren’t into it, it’s hard for anyone else to be!
As usual you are welcome to make/use a deck, but it is not required nor expected⁠—and everyone has the same amount of time, either way. What is the best use of it? You should have much more to show us now. We’re your “boss” here⁠—we know what you’ve been working on, but tell (sell) us a complete, cohesive story in the best way you can.
Each presentation will be followed by several minutes of feedback and critique from the instructor that you dice-roll into having.
The other one of us will review your work asynchronously, against our expectations and previous feedback. And as before, we’ll then average our scores for your overall project grade and share that with you on Slack.
It’s been a bit, so we want to reiterate our community agreement here. Laptops will be closed, phones will remain hidden, and folks shouldn’t come-and-go during other presentations. If it’d be annoying to you, don’t do it to your classmate!