DSD-4708-A
Week 12

Questions from the assignment

  • No questions this week!

In class review

  1. Alyssa Tornese :: Design | Coding 1 | Coding 2 | Writing
  2. Kyle An :: Design | Coding 1 | Coding 2
  3. Lihua Jin :: Design | Coding 2 | Writing
  4. Hyeona Kim :: Design | Coding 1 | Coding 2 | Writing
  5. San Yoon :: Design | Coding 1 | Coding 2 | Writing
  6. Day Chae :: Design | Writing
  7. Peiyu Zhou :: Design | Coding 1 | Writing
  8. Yoli Roman nicasio :: Design | Writing

Presentations

Introduction to JSON

  • JSON (don't click on that) has become the way to configure jQuery plugins, such as bxslider
  • Let's look at bxslider's configuration options and examples
  • How can we configure autostart? Change the duration of how long each slide is visible? Make the transition quicker?
  • Let's try customizing this bxslider slideshow to make it autostart, change the transition type, and make it quicker.

Introduction to dynamic navigation using jQuery

  • Using the jQuery plugin SuperFish, let's create some interactive navigation menus!
  • Let's create our own dynamic navbar in LiveWeave using this example
  • Steps:
    1. Download the plugin
    2. Unzip the download
    3. Notice that there are two folders: src and dist
      • src is for the source code, written by a human
      • dist is for the minified version, compressed by a computer
      • dist files are smaller and are good for production environments, but are almost impossible to modify
      • src files are larger and are good for development environments because they are easier to modify
      • For our purposes, we will always use src files
      • Other plugins do the same thing but name it differently. You'll often see a file name "javascript-library-x.min.js," which is the minified version. Don't use that one
    4. Following the example here, copy src/css/superfish.css into Liveweave's CSS editor
    5. Copy src/js/hoverIntent.js and src/js/superfish.js into Liveweave's Javascript editor
    6. Initialize the plugin by copying the initialization code at the bottom of the Javascript editor. This is the three lines that start with jQuery(document).ready...
    7. In the HTML editor, create a unordered list (ul) with the class "sf-menu"
    8. That should do it! Example here.
  • Example menu here

Homepage

  • For most small organizations struggling with public visibility, perhaps the most important role of the homepage is to quickly tell visitors what the organization is about
  • As a UX (user experience) designer, part of your job is put yourself in the shoes of the user, both the initiated user and the uninitiated user
  • The uninitiated user is someone who has never been to the site before and has a very low, if any, understanding of the organization
  • For this type of user it's important to be able to describe the organization quickly. Here are some examples:
  • Larger organizations with more public visibility typically do not need to explain who they are. Instead they focus on immediately engaging the user with either content or actions

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)

In class demo: Customizing the navigation

  • How to make the navigation fit into your design
  • Incorporating this navigation into this design
  • How to change colors and make everything fit and what's with those triangles?
  • Steps:
    • Copy the CSS, Javascript, and HTML from the navigation prototype into the contact page layout
    • In the tickets page layout, replace the existing navigation with the superfish navigation
    • Before going further, make sure the superfish navigation is working
    • Adjust the superfish CSS to make it fit 100% of the container width (should be 960px)
    • You can specify the width of each superfish <li> either in terms of pixels or percentage
    • Adjust the colors of the navigation to suit your design (don't forget to include the hover states as well as the submenu items)
    • Bonus: change the color of the triangles (see this article for how triangles are generated with CSS)

Net Neutrality

Coding Assignment

Deliverable: LiveWeave URL (Remember: always have TextEdit open for questions)

  • Using your wireframes as a guide, create a prototype of your navigation using the SuperFish jQuery plugin
  • Change the default snapfish CSS to match the design of your chosen homepage

Writing Assignment: Create the Secret Sauce

Deliverable: Google Doc

  • Up until now you have been limited in your designs by what you can actually code. Forget about coding; the sky's the limit! What would be the coolest, most engaging, effective new feature you can dream up for Genspace?
  • Think of a new and engaging feature/module/page/separate website that would really WOW visitors. This could be a video, interactive equation, game, dynamically generated imagery, etc. Imagine you had a team of coding gurus to execute your ideas—what would they be?
  • Come up with 5 unique ideas that would really make the redesign a success and write a paragraph explaining each one—how it would work, what it might look like, how the user would interact with it, etc. Keep the explanations short and easy to understand.

Design Assignment

Deliverable: Publicly accessible PDF

  • Choose one "secret sauce" idea and design it. If it's a module of a webpage, show it on a sample page. If it's a video, do a storyboard. If it's a separate website, do a mockup.
  • Create an annotated PDF that explains how this new feature works
  • Taking class feedback into account, revise the chosen homepage design
  • Add this to your presentation document. The order should be
    • Title page (contains Genspace logo, your name, contact information, etc.)
    • Revised homepage design
    • Secret Sauce
    • Content Strategy
    • Wireframes
    • Thank you page

Cool Links

Submitting Your Work

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.