Network Media / DESMA 161 / UCLA Design Media Arts


Project 3

In this project, you will reflect on and the nature of producing art for the internet in 2018.

Part 1: Draft a manifesto (Due 5/31)

Working from this introduction to, write a manifesto that addresses similar themes from the production of art and design work for or on the internet in 2018. Here are some themes you might choose to address or focus on:

  • Security and privacy
  • Social media platforms
  • Identity
  • Video streaming
  • Mobile devices
  • Augmented reality
  • Protocols
  • Surveillance
  • Big data
  • Gaming
  • Open source

The manifesto should be short and sweet; aim for one to two pages of text. Bring a draft of your manifesto to class in a format that is easy to share (either linked from your course website or printed out; a Google doc is fine). Your peers will read and review it in class.

Part 2: Publish or create (Due 6/12)

For this project, you can choose one of two forms:

  1. Publish your manifesto online in a form that puts it in dialog with its contents. It might be a custom website, an Instagram feed, a series of Snap stories, a series of emails created with Tiny Letter, or something else that you come up with. Design the visual and interactive form of the manifesto carefully. Link to the manifesto (or appropriate documentation of it) from your class website.
  2. Make an internet-based artwork that exemplifies the ideas presented in your manifesto. You don’t have to integrate the text of the manifesto directly as a part of this work, but it should be clear how it relates to what you’ve written. Link to your manifesto document from part 1 and your project on your class website.

Bring wireframe sketches to class on 6/5 to be reviewed by your peers.

Project 2

This project is about data, networks, and visualization. Working with a partner, you will collect or find some data to creatively display or visualize. There are two ways to approach this project:

  1. Obtain data from a source online, using an API or another source, like
  2. Collect data by crowdsourcing responses to a survey, media contributions, or some other micro-task

Choose one of these approaches and a topic. You will then work together to create a compelling visual representation of your data. The visual and interactive form is up to you—you can use traditional data visualization techniques or construct a unique narrative form. Either way, consider what editorial choices you make about how the data is filtered or presented, and how that conveys a point of view.

Part 1: Topic and Concept (Due 5/10)

Determine a topic or issue that your team would like to focus on for this project. It could be something in the news, a personal curiosity, an issue you feel needs more awareness, or anything else.

Once you have selected a topic or issue, create a pecha kucha presentation to share in class on 5/10. Your pecha kucha will have 10 slides for 20 seconds each, for a total of 200 seconds (about 3.5 mins). Please use this template which has auto-timed slides set up for you. See the instructions below for how to use it. In your presentation, you should introduce the topic, tell us about the data you intend to use or collect, and give us a preview of your concept. Both of you will present the pecha kucha together, so divide up who talks about which slide.

  1. Go to File > Make a Copy
  2. Fill in the slide contents (you can delete the numbers).
  3. When it’s done, go to File > Publish to the web, and select “every 2 seconds” for Auto-advance slides and check the box to “Start slideshow as soon as the player loads”, then click Publish: Google Slides 'Publish to the web' menu with settings as described for auto-advancing and auto-starting the slideshow
  4. Copy the link and test it in your browser. In the URL, add an extra 0 to the part that says 2000, so it reads “delayms=20000”. This will make the slides advance every 20s.
  5. Add this updated URL to one of your class index pages for easy access during class.

Part 2: Data (Due 5/15)

Come to class with a data source or collection method already designed. If you’re collecting responses or materials, consider how you’ll post the call for materials—is it a survey you post online? Where will you post it, social media or elsewhere? How many results do you need to get an interseting project?

Aim to deploy your survey or parse your found data in some format by the end of class; come to class prepared with any questions or concerns that we can address to make sure this happens!

Part 3: Code (Due 5/24)

Create a compelling display of your data or crowdsourcing results online. Consider the data or results as your source material, you are welcome to add content, editorialize, or augment this material in any way you like. The form is completely up to you: you may choose to make a visualization, build physical objects and photograph them for your website, or construct a narrative experience.

On the technical side, you can choose to load or work with your data in any way that makes sense to you. Your project can be an application hosted online with p5.js or a website made with Javascript, HTML, and CSS or something in between.

Come to class on Thursday 5/17 with some hand-drawn wireframes for your web experience, and some initial code for your project. Link to the site from your course webpage and be prepared to present your final results in class on Tuesday, 5/24.

Project 1

In this project you will be designing and developing an online portfolio or website that represents you. You will research and determine a site concept, create a design based on this, and finally build it with HTML and CSS. How do you want others to see you and your work? What do you want them to notice first? What do you want them to take away?

You may already have a portfolio site hosted externally; you don’t have to replace it. Instead, take this as an opportunity to find a different way to represent your work.

Each of these three categories will be graded on a A(4) - F (0) scale. Outstanding or exceptional work will receive As, good work will receive Bs, sufficient work that does nothing more than meet requirements will receive Cs. The final grade will be an average of these three scores.

  • conceptual creativity
  • aesthetic quality
  • technical skill

Part 1: Content and References (Due 4/10)

Before you begin building anything, it is a good idea to first prepare a design document that outlines the goals of the site, the user experience, and the overall design. This document will guide you through the development process. We will begin by thinking about the content you want to include in your website, and examples of other websites you find inspiring. Please create a document that includes the following. This can be a digital file, or you can print it out.

  1. References — Find at least four examples of artist or designer websites or portfolios that inspire you (you are looking for inspiring websites, not just websites of inspiring artists/designers). Include a screenshot, a sentence that tries to sum up their “design concept”, and a sentence about what you like about the site and why.
  2. Content — Choose at least four works that you would like to include in your website/portfolio. More is fine, but focus on quality over quantity. Include an image of each and note what kind of documentation you have (image, video, text, sound recording, etc).

Part 2: Design Concept and Sitemap (Due 4/12)

Please add the following two pieces to your design document. This can be a digital file, or you can print it out.

  1. Concept (1-2 paragraphs) — Who is your target audience? What do you hope to convey about yourself and your work with this site? What will be the key elements and concepts behind the experience of your site? How will you leverage the medium of the web?
  2. Sitemap — A diagram of the pages of your site and the links between them.

Part 3: Wireframes and Mockups (Due 4/17)

For Tuesday, we will be completing the design document with the final two parts – wireframes and mockups. Please bring hard copies to class, be prepared to discuss.

  1. Wireframes — Make diagrams showing the structure and functionality of the pages of your website. Include your homepage and one of each other page type.
  2. Mockups – Come up with two different, distinct design directions. Use Illustrator or a similar program to create a mockup for each, including at minimum, the homepage and one additional page. Consider typography, iconography, color.

Part 4: Final Portfolio / Website (Due 4/26)

The final part is to build the site you’ve design with HTML and CSS. I would suggest doing this in steps, something like this:

  1. Create an HTML file for each page, and add the basic HTML structure.
  2. Finalize the navigation and make sure the pages link correctly between themselves.
  3. Add a stylesheet and define the basic layout of your pages.
  4. Populate the HTML with content.
  5. Further implement the design with CSS, tweaking HTML as necessary.
  6. Test with users, iterate as necessary.

The final version should have multiple pages and include at least four works. The navigation should be clear and the design should be engaging and coherent. Your site should communicate who you are and what you do to the audience that you outlined in the design document. At minimum, it should look correct at standard laptop and desktop scales. You will have three minutes to present your site to the class, followed by a few minutes of feedback and critique. In your presentation you will want to make clear the concept, functionality, and structure of the site, as well as where you could see taking it further in the future.