Web Design

Project 2: For Sale

Design a responsive, four page site for a fictional retail company focusing on usability.

Full Project Description

Project 1: Tell a Story

Design and build a single page, responsive website that tells the history, process, or story of a selected topic.

Full Project Description

Exercise 11: Design a Hat

Submit a Google Slides presentation documenting your process from interview to final prototype. There should be at least 6 slides containing the content below. Also include any additional notes/text to help explain anything shown.

• Interview Notes – Can be typed up or an image of written notes as long as they are readable
• Problem Statement – Initial statement and refined statement (if edited)
• Sketches – At least 5 different ideas
• Initial Prototype – As many images as necessary to document
• Feedback – Can by typed up or an image of written notes
• Final Prototype – As many images as necessary to document

The full exercise and more in depth instructions are available through the slides link on Blackboard.

Technical Requirements

• Google Slides presentation containing the above
• At least 6 slides

Due Monday, May 02 by 4:30 pm ET

Exercise 10: 5 Usability Heuristics

Part 1: Find examples with your group

Find examples of 5 of the 10 Usability Heuristics using the Exercise 10 Generator. The generator will randomly assign 5 of the 10 heuristics and you and your group will find web based examples for each one you were assigned. For each heuristic, find an example from a website and take a screenshot of it. The screenshots can be cropped in but they need to include any supporting elements to help visually show the heuristic.

Part 2: Individually design your presentation

Once you have an example for each of your heuristics, create five artboards in XD that are 1440px by 768px with each containing the following:

• A screenshot showing the example of one of your heuristics.
• Include a link to the website where the screenshot is from.
• The title and definition of the heuristic from the slides (find a link to the slides on Blackboard).
• A brief explanation explaining why you are using this screenshot as an example.

Technical Requirements

• 5 artboards at 1440px by 796px
• Uses a grid (columns)
• All the above content is included

Due Monday, April 11 by 4:30 pm ET

Exercise 9: Not So Usable

Using our simpler definition of usability — How easy is it for someone to use something? — find something in your daily life that you would consider not so usable. There are examples at the end of the slides (linked on Blackboard) we talked about in class (which you can’t use) but can give you an idea of what this exercise is looking for.

Create a single artboard in XD that is 1440px by 768px and contains the following:

• An image showing your not so usable thing
• The above definition filled out for your not so usable thing (for example, How easy is it for a person to use a door?)
• Some amount of text describing the not so usable thing and why it is not so usable.

Technical Requirements

• 1440px by 796px
• Uses a grid (columns)
• All the above content is included

Due Monday, April 04 by 4:30 pm ET

Exercise 8: Landing Page

Create a landing page for a category from this year’s Oscar nominations List Here. The page will be 1440px by 796px which means it will not scroll. The page should use a grid and any animation or interaction you want to include should be prototyped. There are multiple levels of typographic information here so focus on the hierarchy.

The contents of the page will be:

• The 94th Academy Awards
• Dolby Theatre at the Hollywood & Highland Center
• Sunday, March 27, 2022
• Category name
• Nominees from the category including all the information listed in the category (typically film and specific people but sometimes varies)
• Two buttons - One that says something like “vote now” and one that says something like “other categories”

Technical Requirements

• 1440px by 796px
• Uses a grid (columns)
• All content in above list included
• Does not use any branding elements (logos, colors, graphics) from the official Oscars website
• Hover states for buttons

Due Monday, March 21 by 4:30pm ET

Exercise 7: Reverse Wireframe

Reverse engineer two wireframes for the National Gallery of Art. The first wireframe should be at a desktop width. If your screen is wide enough try at 1440px but if it is smaller just get it as wide as it can be. The second wireframe should be at a mobile width. Use your phone to view the page in a portrait format. One of the wireframes will be done digitally and one will be done by hand. It is up to you which is which. The hand done wireframe needs to be done nicely and brought back in to your XD file. The digital wireframe should use a grid that is close to the same grid used on the site.

Both wireframes should be in black and white (grey is acceptable but typically not necessary) and contain no text or images. They both will also be the full height of the website and diagram out all the information on the page. This should be done entirely using shapes and lines. Come up with representations for various levels of type and how you will represent images, graphics, videos, etc.

What’s my browser size?

Technical Requirements

• One desktop wireframe (1440px or so)
• One mobile wireframe (portrait mobile size)
• No text or images in wireframe
• Done in black and white
• One digital wireframe and one hand done wireframe

Due Monday, March 21 by 4:30pm ET

Exercise 6: Form Redesign

Redesign the Mason COVID Health Check form. You can edit the content but all the collected information must remain the same. This means you could break questions into multiple parts or add additional questions but you cannot delete questions. Questions could also be edited for clarity and/or length.

The redesign does not need to include the landing page or the submission page, just the form itself.

You are only designing the form, not coding it, and it should be designed in XD at 1440px wide. It can be on a single page or split up across multiple pages. Interactive features should be designed and prototyped.

Technical Requirements

• 1440px wide by however tall
• All the same information is collected
• States for form elements are designed and some are prototyped

Due Monday, February 28 by 4:30pm ET

Exercise 5: Linking Links

This exercise will test your ability to right paths to various parts of a site. Download one of the linked folders below, level 2 is more advanced than level 1. Start at the main index.html page and move through the site following the instructions. The level 1 folder will have you add CSS, images, and anchor paths along with some class and id additions. The level 2 folder will have those parts along with additional CSS edits.

• Level 1 exercise
• Level 2 exercise

Technical Requirements

• Complete site with working links
• CSS displaying correctly
• Nothing broken on site

Due Monday, February 21 by 4:30pm ET

Exercise 4: Valentine’s Day Card

Design and build a responsive Valentine’s Day card. The “front” of the card will be on a screen size below 768px and the “inside” of the card will be on a screen size above 768px. This means you will need one media query. The content of the card should be Valentine’s Day tangential.

Technical Requirements

• Front of card displays below 768px
• Inside of card displays above 768px
• Content is Valentine’s Day tangential
• External CSS.

Due Monday, February 21 by 4:30pm ET

Exercise 3: Hover and Animations in XD

Add hover effects to your links from Exercise 2. Each link on each artboard should have a hover effect for it. If you want to work in some kind of animation you can do that too. This is another opportunity to update the design if you need to either to improve it or to adjust the navigation elements.

• Add a hover effect for each link/navigation element in your design
• Link to a new working prototype on your class website

Due Monday, February 14 by 4:30pm ET

Exercise 2: Linking in XD

Link the artboards of your e1 file together by adding some kind of navigation. How you link them together is up to you but the minimum is 1 should go to 2, 2 should go to 3, 3 should go to 4, 4 should go to the new 5th page and 5 should go back to 1. This is also a chance to update the design if you need to either to improve it or to adjust for the navigation elements.

Technical Requirements

• Add an additional artboard as number 5 that tells the typeface and foundry that designed it
• Each artboard from e1 linked to the next, with the last going back to the first
• Link to a new working prototype on your class website

Due Monday, February 07 by 4:30pm ET

Exercise 1: A Little Background

Give a background about yourself through 4 artboards in XD. Each artboard will use the Instagram Story default (1080x1920). The artboards will contain the following information:

• Artboard 1 – What you want to be called
• Artboard 2 – Your experience with HTML, CSS, Javascript, and XD.
• Artboard 3 – Whether your main goal is to get better at web design, coding, or both.
• Artboard 4 – Something you like

Technical Requirements

• 4 artboards at Instagram Story size (1080x1920)
• Each artboard contains the right information
• Uses trial fonts from a type foundry. Link to List

Due Monday, January 31 by 4:30pm ET