For Sale

Design a responsive, three 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 Figma 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 Wednesday, November 19 by 1:30pm ET

Exercise 10: Halloween Drawing

Code a Halloween themed drawing using HTML and CSS. Bonus points for making it responsive and/or using CSS animations.

Technical Requirements

• Halloween themed
• External CSS
• Coded using divs and positioning

Due Wednesday, November 05 by 1:30pm 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 Wednesday, October 29 by 1:30pm ET

Exercise 8: 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 Figma 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 Wednesday, October 22 by 1:30pm ET

Exercise 7: Reverse Wireframe

Reverse engineer two wireframes for the American Art Museum. 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 Wednesday, October 15 by 1:30pm ET

Exercise 6: Form Redesign

Design and prototype a form that would help identify a typeface. The form should be at least 5 fields Links to an external site. and include:

• Title of form
• Brief description or instructions of form
• At least one field that uses radio buttons or check boxes
• At least one field that is text based
• At least one field that uses a range selector
• Submit button

The form 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 Wednesday, October 08 by 1:30pm ET

Exercise 5: Make it Responsive

Translate your partner’s GRAMMY Awards landing page from the desktop design to a mobile design. The new page should be designed at 320px wide and follow the design as closely as possible, adapting it to the new size, not redesigning it. All content from the desktop size should be available but the way it is accessed or shown could change.

Technical Requirements

• All content from desktop designs available
• Prototype has the desktop design and your new mobile design
• Page is as tall as it needs to be

Due Wednesday, October 01 by 1:30pm ET

Exercise 4: 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 67th Grammy Awards
• Crypto.com Arena in Los Angeles
• Sunday, February 2, 202
• 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 Wednesday, September 24 by 1:30pm 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 Wednesday, September 17 by 1:30pm 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 Wednesday, September 10 by 1:30pm 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 Figma.
• 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 Wednesday, September 03 by 1:30pm ET