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