Assignments

Project Overview

For this final project, you will be working in groups to redesign a website for a local 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
• Dailey Elementary School
• Feral Paws Rescue Group
• Centro de Folklor
• Fresno Grizzlies

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.

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.

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.

Mockups

When you begin the process of designing a website, a good first step is to create a set of website mockups to communicate the structure, user interface, and overall "look and feel" of the site. These mockups are simply images we create that show what the website will look like without needing to dive straight into coding. These mockups are just flat images that cannot be interacted with, but look like a screenshot of a website page. We use these mockups as a way to communicate design ideas back and forth with our clients and also as a “blueprint” to develop the website once design is approved.

Your team will create a mockup of the home page with the assumption that the interior pages will use a similar structure. Make the mockup contains all the elements that will be on the site. Your final website will be built based on this design "blueprint."

Style Guide

Style Guides are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Create an HTML style guide that presents and documents the typography, colors, imagery, buttons, and other elements that will appear throughout the site.

example style guide: Vue Design System

Example style guide

×

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: Information Architecture and Wireframe Prototype

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.

Using Adobe Xd, turn your information architecture into a wireframe prototype of the site's navigation. Make sure that all options are clickable so that you can test it in the next phase.

For help with Adobe Xd, Watch this playlist.

Phase 3: User Testing and IA Revision

Much like the card sorting exercise, you will use the cards and a script to test your wireframe prototype. You want to find out if the information architecture you designed makes the most sense to the majority of people.

Use this script and conduct your testing on five participants. Record your data in a spreadsheet. Analyze the results and make the necessary changes to your IA. Update your IA tree diagram, as well as the wireframe prototype.

Phase 4: 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. Notes from User 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.

Final Fansite Due

Save your project in a folder called fansite and upload it into your GD50 directory on the server.

Fansite: Mockups

Design a pixel-perfect mockup of your website's homepage.

Upload your mockup image here.

Fansite: Project Overview

A fansite is simply an informational website that goes into detail about anything you are a fan of. This could be a food, a social movement, an artist, etc. The site will be made up of at least three pages.

The Home Page

This page introduces the viewer to the subject and welcomes them to the website.

The Listing Page

This page presents a series of related content as sort of a bibliography about the subject. This is where the most detailed information should go. This could take the form of a historical timeline, a discography or filmography, etc.

The Gallery Page

The gallery page provides an offering of visual or auditory experiences related to the subject. It could be a gallery of photos, video, or audio recordings.

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 image-gallery. 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.

Trivia Website

For this in-class assignment, we will learn about HTML files and file paths by making a three-page website that poses a trivia question, similar to this one. Your site will have the following four files...

1. index.html This page has the question. It should have links to the following two pages.
2. correct.html This page appears when someone clicks on the correct answer.
3. incorrect.html This page appears when someone clicks on the incorrect answer.
4. styles.css This contains the styles for the previous three pages. Each HTML page should link to this stylesheet.

Name your project folder trivia and upload it into your GD50 folder on the server.

Here's a helpful article about file paths: Using paths & folders

Final Type Specimen Due

Export your project from codepen and rename the folder type-specimen. Make sure that the HTML page inside is called index.html. Upload the entire folder into your GD50 folder on the server. (See the resources page for FTP instructions).

CSS Grid: Interactive Tutorial

1. Complete the following tutorial from codecademy.com: CSS Grid Essentials
2. Take a screenshot of the completion page or badge and upload it here.

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 5MB

The Basics: Interactive Tutorials

1. Complete the first two sections of this tutorial at codecademy.com
2. Take a screenshot of the completion page of each of the two lessons and upload it here.

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).