Project 4: Links

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 don’t want to see default, junky filenames and such as titles.) In the channel description, explain the idea behind your items 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 (don’t worry about ePUBs) 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 them.

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.

Here are some channels for reference/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

Due January 29.

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:

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 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. Each student should now add at least 10 of their own items to their collection—following, extending, or expanding the organizing principle of the existing items. It is yours, now.

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

Submission Form

Due February 5.

Static Content Sketching #

We’ll move right into design—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.

Think about your site, and its design, as this membrane between things. Your design 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, text, link, and PDF (or video) 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, variable-structured CSS.

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

Submission Form

Due February 5.

Are.na as an API #

We’ll now link the Are.na channel to your static site—using its Application Programming Interface (API) to pull in its content directly. This will utilize JavaScript (JS) to dynamically render the page content from the channel.

With the foundations done in the static implementation, this connecting-the-dots step will populate the site with its real, live/updating content. With real content comes real considerations, and your design should evolve.

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. And then we will move our focus to refining the design and layout of the site:

Submission Form

Due February 12.

Adding Interactivity #

Here you will introduce interactivity and dynamism to your project, via your own JavaScript.

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

Due February 19.

Refinement and Review #

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.

Make sure that we have your final links:

Submission Form

Due February 26.

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 technical/practical requirements:

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

And some additional considerations:

• You are now allowed to use images, obviously!
• Your project must show all the blocks in your channel (all types)—but the how of that is entirely up to you
• We don’t want to see 25 Are.na reskins/generic templates—these should be unique to your collection and its theme
• 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’ll be split into two groups, for time—one group will meet downstairs in Room 1006; the other will be here. We’ll post the presentation order and respective classrooms the morning of class next week.

• As with our last presentations, you will have a “hard” 6 minutes maximum to present your work. (The Timer will return.) You will each come up to the podium to present again, from your own machine, joining the Zoom for the recording and projector.

• We know you are finishing up (ideally) 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. 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!

• 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 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, and as before, we’ll then average our scores for your overall project grade.

• 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!