Assignments

Website Redesign

For this final project you will be redesigning an existing website. You will be analyzing it from both a functional and athsetic point of view.

Step 1: Choose Your Site

Your first task is to choose the website that you would like to work on. Your choices are below. These are websites with many problems, not just asthetic ones. They are very poorly organized. It is up to you to clean them up with some navigational reorganization and a fresh new look.

• Historic Fresno
• Dailey Elementary School
• Feral Paws Rescue Group
• Centro de Folklor
• Fresno Grizzlies

Once you have made your decision, submit it here.

Step 2: Card Sorting; Get Your Navigation Down

After having watched the videos about information architecture and card sorting, you will now conduct that to gain knowledge about how to organize your redesign. However, instead of conducting this research in person with physical cards (because we can't right now), we will be using an online tool from optimalsort.

Watch this video where I walk you through the process of card sorting to find the best structure for your navigation. You will create a set of cards and then send them out to at least five people to participate in your research. Once you have that data, you can get a sense of how people think about the categories of information that your site presents to them. Remember, you are not the user. What makes sense to you will not always be the best choice. You need to do the research and learn from it.

Think about the goal of the user. For example, the Centro de Folklor page scrolls on and on. That might be appropriate for some websites, but theirs is a site where people are going to have immediate questions, like, when are the classes scheduled? How much do they cost?

Once you have your data in optimalsort, export it and email it to me, then use it to inform the decisions you make about your navigation. Remember, the information you get from the research doesn't tell you what you have to do in terms of organizing the navigation. It is merely meant to be an insight into how people categorize information. The ultimate decision of what you call what is up to you.

Step 3: Build the Site

For this project, you are not required to recreate the entire website. You are only required to redesign the home page and two interior pages. Those interior pages should be two of the most important pages for the purpose of the website. Your navigation will naturally have dead links, but the structure should still be there. You are welcome to reuse any of the existing content on the websites, as well as search out new photos, redesign logos, whatever you want. Imagine that you have a client that allows you to do whatever you want to do with this project (not too realistic, but that's what we're doing). Your main focus should be on establishing a solid navigation guided by your research, then filling in the pages with meaningful, design-driven content. You can do this!

I am here as your backup. If you need a dropdown menu and don't know how to do it, I'm there for you. Reach out with any problem and I'll get back to you ASAP. That is not a cheat. In the real world you wouldn't be doing this alone like you are now. You would be working with a team. This assignment is normally a group project, but we can't do that now. That's why I have skipped the third project of the semester and devoted all of the time to this one, and I'm confident that you'll create great things. Please use your time wisely. Get through the card sorting process promptly so that you can focus on the design.

Name your project folder redesign and save it in your GD50 folder on the server.

UX Design: Videos + Quiz

1. Watch the following two Lynda playlists
   • User Experience
   • Information Architecture
2. Take this quiz.

Fansite: Mockups

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

Upload your mockup images 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.

For Thursday, do the following...

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

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

Videos: Don't Fear the Internet

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

Video 1: Not a Series of Tubes
Video 2: HTML: Hamburger Text Markup Language

Codepen Accounts

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