For Sale

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

Full Project Description

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

Technical Requirements

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

Due Thursday, December 05 by 10:30 am 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 frames in Figma 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 Canvas).
• A brief explanation explaining why you are using this screenshot as an example.

To finish, link the frames together and submit the link to your prototype on Canvas and add it to your website.

Technical Requirements

• 5 frames at 1440px by 796px
• Uses a grid (columns)
• All the above content is included
• Frames linked together

Due Thursday, November 07 by 10:30 am 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 Canvas) 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 Thursday, October 31 by 10:30 am ET

Exercise 8: 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 Figma 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 Thursday, October 24 by 10:30am ET

Exercise 7: Landing Page

Create a landing page for a category from this year’s GRAMMY Awards 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 66th Grammy Awards
• Crypto.com Arena in Los Angeles
• Sunday, February 4, 2024
• Category name
• Winner and nominees from the category including all the information listed in the category on the site
• One button 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, type, colors, graphics) from the official GRAMMY website
• Hover states for button

Due Thursday, October 17 by 10:30am ET

Exercise 6: Form Redesign

Redesign the Craigslist “Post an Ad” form - post.craigslist.org/ (washington, DC >northern virginia >for sale > free stuff). You only have to redesign the “Free Stuff” part of the form but if you want to design and prototype the previous form pages you can. You can edit the content but all the collected information must remain the same. Questions could also be edited for clarity and/or length.

You are only designing the form, not coding it, and it should be designed in Figma 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 Thursday, October 03 by 10:30am 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 Thursday, September 26 by 10:30am ET

Exercise 4: Birthday Card

Design and build a responsive Birthday 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 birthday tangential.

Technical Requirements

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

Due Thursday, September 26 by 10:30am ET

Exercise 3: Hover and Animations

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.

Technical Requirements

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

Due Thursday, September 19 by 10:30am ET

Exercise 2: Linking in Figma

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(s) and foundry(s) 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 Thursday, September 12 by 10:30am ET

Exercise 1: A Little Background

Give a background about yourself through 4 frames in Figma. Each frame will use the Instagram Post default (1080x1080). The frames will contain the following information:

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

Technical Requirements

• 4 artboards at Instagram Post size (1080x1080)
• Each artboard contains the right information

Due Thursday, September 05 by 10:30am ET