Skip to main content

HW 9 - Redesign Your Favorite Website

Introduction​

Every good website starts with an idea that eventually gets put to paper (Figma). Designers often think about what gets put on this paper and how users will interact with their designs. In this assignment, you will think like the designer of your favorite website by recreating it in Figma.

Goals​

  • Get familiar with Figma
  • Understand basic website layout
  • Understand UI components

Setup​

This homework will be done primarily in Figma. If you don’t have Figma downloaded, follow the instructions here. Once Figma is downloaded, copy this file. It will be what you’ll be designing in. For a basic intro to how to use Figma, check out this video, however, Figma is quite intuitive and I recommend you explore the software before googling answers.

Instructions​

In this assignment, you will choose a website to recreate, recreate a page in Figma, make a copy and box the UI elements you notice on the page, then finally write a short procedure as to how you approached making the website.

Choose a website​

First, you must choose a site to recreate. Remember, you will not be required to recreate any interactions, simply a static screenshot. Pick your favorite page and once you have done so, note your interaction with the site in question 1 in the guided text box in “Refleciton” page in your Figma. If you do not have access to the guided text box, the questions are in the “Reflect on your process” section. Please do this BEFORE moving on to the next step. Take a screenshot of the page in full-screen mode (similar to the examples in the page). Import it into Figma for easy viewing and comparison. Here are the requirements for what the screenshot of your chosen site must include at the minimum:

  • 4 different UI elements
  • 3 different shapes
  • 3 different font weights

If you are unsure if your site meets these requirements, make a post in Ed or contact Isabel (izheng@berkeley.edu).

Here are some sites I recommend recreating:

Github Marketplace

Uber

Robinhood

Apple Accessories page

Recreate the screenshot in Figma​

Now that you’ve chosen what section of what website you want to recreate, it’s time to do the actual recreating. You must use these items in your recreation (if it is impossible to include these items in your recreation, consider taking a different screenshot):

  • 1 frame
  • 1 component used twice

These are the minimum requirements needed but remember, you will be graded on the accuracy of your designs as well. Solely including these items will not award you full points. The nature of a website will require you to use things such as text, rectangles, circles, etc; that is why they are not included.

tip

Don’t know where to start? Need help recreating a particular feature/element? The bottom of this page will include some FAQs as well as step by steps that may help!

Identify UI elements​

Once your recreation is complete, make a copy and box as many UI elements as you can in multi-colored boxes (with 0-low transparency and a visible stroke). If you followed the instructions in the “Choose a website” section, you will have a minimum of 4 UI elements.

Reflect on your process​

Wow, you recreated (part of) a website! Congrats! Now let’s reflect on how you got to where you are. What were the steps you took? Answer the guided questions in the text box on the Figma file (in the “Reflection” page). If you do not have access to these questions, they will be listed below:

  1. Walkthrough how you interacted with this page. For example, what did you look at first? Where were you directed to after looking/interacting with a particular feature? Was there a button you wanted to press?
  2. Why did you choose this particular website?
  3. What were the steps you took to recreating this site (starting right after the importing of the screenshot and going as detailed as possible)?
  4. What tools (text, shape, frame, etc) did you use?
  5. What are the UI elements you spot in your recreated website?
  6. Do you think this page of the original website has good UX? Why?
  7. Name one thing you think this page can improve on.

Need help?​

I have my site but I have no idea where to start on Figma.
The general process of website design starts from simple to complex. Instead of perfecting a feature at a time, we suggest you create general low fidelity designs 
first then work your way up to high fidelity. As you design, think about your interaction with the site. Here’s a general step by step that may help:

1. Make a frame the same size as your screenshot. This creates a foundation for your site
2. Make empty boxes for your UI elements and place them in your frame to mimic the screenshot. This lays the general layout of your site out.
3. Note the repeated UI elements that are variants of each other. Create a component out of them.
4. Start filling in the details of your UI elements and utilizing the component you created. 
    - Use the eyedropper tool on Figma to find the exact shade.
    - Use fonts as close as possible to the actual font of the website. Want to go the extra mile? Download the chrome extension WhatFont and use it on the site!
My screenshot has an image how do I recreate that?
No need to recreate! Simply download the image (or screenshot it) and use it in your Figma design
General Component Help
As said in the Figma Component Guide, “components are elements you can reuse across your designs”. Websites have many patterns and reused elements. Components can help create consistency and also manage your site. If you’d like to learn more about components, check out the Figma guide. Though components are essential to designing in Figma, these are not a focus in this assignment so don’t worry too much if you’re having too much trouble.
I want to do more!
Want to elevate your design? This is not mandatory but consider exploring these features: Prototyping, component variants, design systems.

Contributors