DMA 161: Network Media - Winter 2020

Tuesday & Thursday 9-11:50AM
UCLA Broad Art Center 4240


PROJECTS

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 built 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 takeaway?

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.

  • conceptually creativity
  • aesthetic quality
  • technical skill

PART 1: CONTENT AND REFERENCES (DUE 1/14)

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 an HTML web page that includes the following:

  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 1/16)

Please add the following two pieces to your design documents. Upload as an HTML web page and add the link to our Slack #projects channel.

  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. Personas & Stories - Add 2 or 3 personas (archetypes of the type of viewer that may visit your site along with some descriptions of who they are). For each persona, add 2 or 3 'stories' about expections they may have when visiting your site and actions they might be performing to meet those expectations.
  3. Sitemap – A diagram of the pages of your site and the links between them.

PART 3: WIREFRAMES AND MOCKUPS (DUE 1/21)

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, imagery, color.

PART 4: FINAL PORTFOLIO/WEBSITE (DUE 1/28)

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.


PROJECT 2: DIGITAL TRACKS & TRACES

“For the past 25 years, corporate entities have been shaping the development of the web to align with their own interests…These actions rely on the aggregation of content and users… largely with the goal of selling advertising.” From location history to biometrics to journal entries to private communications with loved ones, personal data is being collected and stored on a mass scale by private companies in exchange for services that make our lives more convenient.

Can you imagine digital tools that can foster wider criticism and awareness of how data is collected and stored across our networked lives? For this project, either a) tell a provocative story about the impacts of our digital tracks and traces or b) imagine alternatives to how that data is being collected.

The final piece should have a clear concept that is communicated through a fully resolved and implemented design. You are not expected to make use of real data (you can base your prototype on mock data) but you will be graded on how feasible it would be to build your product if it relies on some data source(s). Again, your projects should have a clear sense of who the audience might be and how to meet their needs, as well as be as accessible to them as possible (designing for mobile, differently-abled viewers, etc.) We will be grading more heavily on concept and aesthetics than technical skill here.

Timeline

  • Concept & References Due - 2/6
  • Wireframes & Mockups Due - 2/11
  • Peer Review - 2/13
  • Project Due - 2/18

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 a weighted average of these three scores.

  • Conceptual creativity (40%)
  • Aesthetic quality (35%)
  • Technical skill (25%)

Recommended Tools:

Some Inspirations:


PROJECT 3: ONLINE COMMUNITIES

Create a website for a community. It can be for a community that you're involved with, one that you admire, or a fictional community. For instance, a site for a colony of robots that lives on the moon, a nonprofit organization of your choice, or a site for a UCLA student group that you're a member of. You can choose to build an entire site for a small community with simple needs or part of a site for a larger community.

The final piece should have a clear concept that is communicated through a fully resolved and implemented design. You are not expected to have a completely working prototype with live data, but you will be graded on how feasible it would be to build your product and how well you've researched the community that you want to build for. Again, your projects should have a clear sense of who the audience might be and how to meet their needs, as well as be as accessible to them as possible (designing for mobile, differently-abled viewers, etc.)

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.

DMA / All Classes ©2020 UCLA Design Media Arts