Assignments

Project Overview

For this final project, you will be working in groups to redesign a website for a local non-profit organization. These websites need a lot of help, not just aesthetically. You will be going through all the processes of design and development that you have learned up until this point — beginning with card sorting researching and ending with a finished product. The goal of this project is you not only practice your skills, but familiarize yourself with the web design process as a collaborative effort.

Deliverables

Phase 1: Research

Step 1: Choose a Site

Visit the websites listed below to preview their content and design.

• Historic Fresno
• Arte Americas Museum
• Feral Paws Rescue Group
• Fresno Bully Rescue
• Centro de Folklor

Now use this link to choose which site you would like to work on. You will asked for a first choice and a second choice. I will use the results to form your teams.

Design Teams — 11am class

Design Teams — 3pm class

Step 2: Inventory

As a group, thoroughly go through the site you will be redesigning. Talk about the different people who would use this site and what their needs and interests are. Create an inventory of the site by listing all of the content you find, even things that might not be in the navigation. Make a list of all the different tasks a person can do or would want to do at this site. This list will become your cards for the card sorting.

Step 3: Card Sorting and Analysis

Using the techniques you learned in class and from the Lynda playlist, set up and conduct a card sorting experiment. You may use physical cards or ux testing software such as Optimal Sort. Conduct the test on a minimum of five people. Make sure you have the final data saved in some sort of spreadsheet (if using physical cards) or online.

Deliverables

You will be responsible for providing documentation for the following...

1. Card Sorting Data (export from OptimalSort)
2. I.A. Diagram

Phase 2: Design

The web design process is not a linear process. Every project requires a different workflow and the different stages benefit from the insight of other stages and task. Although the work described below is presented in a certain order, that doesn't mean that your team's workflow has to follow that order. It's important that you discover your own iterative process.

Phase 3: Development

This is the phase where you actually build the website in HTML and CSS.

BananaCom Website Navigation

For this project, you will go through the process of building a successful website navigation system for the fictitious BananaCom company. During the process you will conduct information architecture research, test the usability, and ultimately build a wireframe prototype. You will not be doing the visual design of the websites interface. The goal of this project is to introduce you to the principles of UX design and teach the importance of building a solid navigation structure through research and testing.

Phase 1: Card Sorting Research

In class we learned how to organize a card sorting experiment. For review, watch this Lynda playlist.

In groups of three or four, conduct the experiment on at least five people outside of the classroom. I gave each group a set of cards and a moderator script in class.

Input you data into a spreadsheet as described in the video.

Phase 2: Analyze the Data

Using the spreadsheet data, begin organizing the results into likely categories and map out a hierarchy of sections and pages that will be the information architecture for the site. Use the Lynda videos as your guide. Document the hierarchy and naming system with a tree diagram.

Phase 3: Reverse Card Sorting

Use the I.A. that you built to prepare a reverse card sorting experiment. Like the first one, conduct it on five people outside of class and input the data into a spreadsheet. Analyze the data and revise the I.A. accordingly.

Phase 4: Wireframe Prototype

Using Adobe UX as a prototyping tool, create an interactive wireframe that demonstrates all aspects of the website's navigation system. Be prepared for final usability testing in class.

Final Documentation

At the end of the project, your team will submit an HTML page that documents all phases of the project. It will contain...

1. Team Members' Names
2. Overview of Project
3. Card Sorting Research
   • Raw Data (spreadsheet)
   • Notes From Testing
4. Diagram of Information Architecture — 1st Draft
5. Reverse Card Sorting Research
   • Raw Data (spreadsheet)
   • Notes From Testing
6. Diagram of Information Architecture — 2nd Draft
7. Wireframe Prototype
8. Final Notes

Click here for an example.

When the document is final, make sure that each team member has an indentical copy of the project folder. Each person should name their folder info-architecture and upload it onto their GD50 directory on the server. Make sure that your documentation page is named index.html.

UX Design: Videos + Quiz

1. Watch the following two Lynda playlists
   • User Experience duration: 28 minutes
   • Information Architecture duration: 27 minutes
2. Take this quiz.

Final Fansite

Save your project into a folder named fansite and upload it into your GD50 directory on the server. Don't forget to name your home page index.html

Fansite Mockups

Upload your fansite mockup images here.

Trivia Site

Create a three-page trivia quiz website. Don't worry, it only has to have one question with two possible answers (i.e. yes or no).

Here's an example.

You will need to create the following pages and link them.

1. index.html This page should have your trivia question plus two buttons — one for each possible answer, linking to the corresponding page.
2. correct.html This is the page that appears when the user chooses the correct answer. It should have a back button which returns to the index page.
3. incorrect.html This is the page that appears when the user chooses the wrong answer. It should have a back button which returns to the index page.
4. styles.css Use this to give all the pages a consistent design by changing the font and styling the links to look like buttons. Make sure all of your html pages are linked to this stylesheet.

Save your pages in a folder called trivia and upload it to your GD50 folder on the server.

Fansite: Gather Content

For the next project, you will be creating a 3-page fansite.

A fansite is a website created and maintained by a fan or devotee about a celebrity, thing, or particular cultural phenomenon. Fansites may offer specialized information on the subject (e.g., episode listings, biographies, storyline plots), pictures taken from various sources, the latest news related to their subject, media downloads, links to other, similar fansites and the chance to talk to other fans via discussion boards.
— Wikipedia

Your fansite can be about anything you choose. Here are some possible categories:

• musician or musical genre
• sports team or athlete
• author or specific book
• design/artist/performing artist
• film or television series
• video game
• social or artistic movement
• specific objects
• specific type of plant or animal
• meteorlogical phenomenon
• historical event
• etc...

Your final website will include the following three pages. (You are welcome to add more sections.)

1. home page
   should have some sort of introduction/description

2. listing page
   presents a series of pieces of information, such as a discography/filmography (musician/actor), timeline (social movement or someone's life), varieties (plants...), characters or storyline (book or video game), etc...
3. photo gallery

For Thursday you should have chosen your topic and gathered all the content for the first two pages.

Using Images on the Web

Now that you know how to organize files and link them in your html with specific file path names, you are able to include more media assets into your pages, such as images.

1. Watch these two videos about web graphics file formats and how to resize and compress them in Photoshop.
2. Watch my screencast, where I go through the process of creating the page you will be creating.
3. Create a webpage that displays three photos that have have been sized equally and appropriately. See the screen shot below for an example. Name your html file index.html, save it into a folder named hw6-1. Place your images inside a folder named imgs. You can name your image files however you like, as long as the file path names are correct in the html. Upload the folder into your GD50 directory on the server.

Final Type Specimen

due at the beginning of class

CSS Grid Practice

1. Complete the CSS Grid Garden game and the Codecademy tutorial.
2. Starting with the codepen below, add grid properties to recreate these screenshots: [1], [2], [3], [4].
3. Save each one separately and place it in your GD 50 collection in codepen.

See the Pen grid exercise — start by Rusty Robison (@rustyrobison) on CodePen.

Type Specimen Project: Mockup

In typography, type specimen refers to a presentation of a certain typeface to showcase its design and/or use.

—TypeGuru.com

For this extended project, you will be creating a web version of a typeface specimen. You may use the typeface of your choice, as long as you can provide information about its history and/or designer, so be sure to do your research and select carefully.

The first part of the project is to design a mockup of the specimen, using the design tool of your choice (PS, AI...). Your design needs to contain the following elements:

• name of typeface
• examples of the characters
• examples of all fonts in the family
• at least one paragraph of body copy
• information about the typeface's history and/or designer

Your overall layout and design should evoke the spirit of the typeface and be an example of the type of design it is best suited for.

Reference

Google image search
Historical examples

Upload a jpg of your mockup here. no larger than 10MB

First Stylesheet: Videos + Coding

Lynda Playlist

CSS Basics, duration: 37 minutes

After you've watched that, take this short quiz.

Terms and Conditions Styles

Fork the pen below and apply your own styles to the HTML.

See the Pen Terms & Conditions by Rusty Robison (@rustyrobison) on CodePen.

Be sure to...

1. typeset the body copy with your own font and spacing
2. add color using hexadecimal values
3. make the "I Agree" element look like a button
4. add a border to contain all the elements

Do not change the HTML.

Save it to your GD 50 collection in codepen.

HTML Basics: Videos + Coding Exercises

Complete This Interactive Tutorial from Codecademy

Coding Exercises

Do these in codepen and save each one in your GD 50 collection in your account.

1. The List

   Create a list of your choosing (i.e. grocery, to do, pet peeves, favorite baked potato toppings...). All the items should be numbered (hint: the numbering with be created automatically if you use that right tag). Give your list a heading.

   

2. The Letter

   Compose a letter, using HTML tags as your typesetting tools. The letter should have at least two paragraphs in the body, and five of the words or phrases should be italicized. Make it fun by using some creative dummy copy.

   

3. The Special Cat

   Using the HTML codes for special characters, produce the "word" you see below.

   

HTML tags from class:

• <h1> through <h6>
• <p>
• <em>
• <strong>
• <blockquote>
• <ol>
• <ul>
• <li>
• plus, special character codes

Videos: Don't Fear the Internet

Watch videos #1 and #2 from dontfeartheinternet.com.

Codepen Accounts

Be sure to create an account at codepen.io and follow me (search for the user rustyrobison).