DSD-4708-A
Week 13

Questions from the assignment

  • How do I make the navigation change colors in hover? and my list isn't working :(

Art & Democracy

  • If you're looking for a humanities class for next semester, consider HPD-2514-R: Art & Democracy
  • A new studio-based humanities course that explores our current political landscape and how to navigate it
  • Tell your friends!

In class review

  1. Kyle An :: Design | Coding | Writing
  2. Lihua Jin :: Design | Coding | Writing
  3. Alyssa Tornese :: Writing
  4. Hyeona Kim :: Design | Coding | Writing
  5. Ifah Pantitanonta :: Design | Coding | Writing
  6. Grace Oh :: Design | Coding | Writing
  7. Yunfei Xie :: Design | Coding | Writing
  8. Yuran Won :: Design | Coding | Writing

Course evaluations

  • Did everyone do this yet?

Secret Sauce presentations

  • 3 minutes to describe your secret sauce idea

Introduction to Google Maps

  • Super easy. Go to Google Maps and type in an address
  • Find the settings gear icon on the bottom of the page > Share and Embed > copy the iframe code and paste into your code
  • Adjust the height and width as necessary
  • You can also create your own Google Maps here

Interactive Prototyping

The PDF format has clear limitations when it comes to expressing interaction design. If you truly want the client to understand interaction design, you have to show how the interaction actually works.

There are many online tools to develop interactive prototypes these days, such as Invision, Proto.io, Marvel, Balsamiq, and Axure, just to name a few. We're going to use Invision because it's free

  • Step 1: Create an Invision account
  • Step 2: Create "screens" that show the interactive elements at the key stages of user interaction
  • Step 3: Upload screens and assign hotspots to create animations
  • Let's try with these screens

Footers

  • We haven't spent much time talking about a site's footer
  • The footer can be thought of in a few different ways: a catch-all for the site's content, a resting place for the user, and (perhaps most importantly) as a place for the user to take additional action to engage with the organization
  • Footers will often contain social media links, contact information, and mailing list signups
  • Some examples: Wired, Boston Globe (notice the call to subscribe), UPS.com (the kitchen sink)

Presentations

In class discussion: The Internet!

Design Assignment: Homepage

Deliverable: Publicly accessible PDF

  • Implement design changes to the homepage based on class feedback
  • Free free to include a Google map of their address (132 32nd Street, Suite 108, Brooklyn, NY 11232) on the homepage or the About the Lab page

Design Assignment: Secret Sauce

Deliverable: Invision URL

  • Implement design changes to your idea based on class feedback
  • Fully annotate and flesh our your secret sauce idea
  • Make sure this idea is easily understandable to someone who did not read your text
  • You will likely have to create several different "screens" to help the client understand what you're proposing
  • Integrate these screens into an Invision prototype
  • Note: your interactive prototype should show your "Secret Sauce" idea in context, meaning, in the webpage (960px wide by however tall), like was demonstrated in the example above

Coding Assignment

Deliverable: Liveweave URL

  • Code your homepage design
  • If your homepage includes a slideshow, make sure it works!
  • Homepage should also include functioning dynamic navigation and a footer
  • Add the dynamic navigation to your About page as well

Writing Assignment

Deliverable: Publicly accessible PDF

  • This is what the last few weeks have been leading up to: the creation of a well designed, persuasive, and engaging client presentation for Genspace to convince them to adopt your new ideas
  • This PDF will be passed along to Genspace for their review and you will present it to them, in class, on December 18th
  • Remember to start with an introductory page that has (a version of) their logo, what this document is about (Genspace Redesign), your name and your contact info
  • This document should consist of the following sections (in this order):
    • Introduction
    • If you've reworked their identity, put that first
    • New homepage design
    • Homepage annotations
    • Liveweave link to fully functioning homepage
    • About the Lab page design
    • About the Lab annotations
    • Liveweave link to fully functioning About the Lab page
    • "Secret Sauce"—round 2
    • E-blast campaigns
    • Sitemap
    • Wireframes
    • Content strategy
    • Thank you page
  • It's likely that your earlier thoughts and designs will need updating based on the feedback and new information you have received since
  • Do not submit without checking spelling!
  • Do not worry about making this perfect yet, submit what you have so I can give you feedback
  • If you are a non-native English speaker you will need to make an appointment at the Writing Resource Center to correct your English
  • The final assignment next week will be to perfect this document

Submitting Your Work

Due Monday, 12/10 @ 10AM

Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.

Cool Links