Assignment 1 - Figma Wireframe

First, read the Project Overview if you haven't already.

In workshop 1, we covered the basics of UI/UX, accessibility, and responsiveness. In assignment 1, you will create a wireframe of your social connection web app using Figma.

Core requirements

Your wireframe should include the following:

  • At least 3 different pages
    • Examples: home page, about page, create profile page, edit profile page, etc
  • A navigation bar on every page
  • A footer on every page
  • A display of many profiles on the same page
    • Examples: list view, grid view, and other alternatives are all acceptable
  • Explanations of what buttons do and what other interactions users can have with your app
    • For ease, you can leave comments with these explanations
  • At least 4 colors (yes, black and white do count). The color palette should be accessible.
    • Make sure to catalog these colors in your design system and to add them as variables (that way, you can easily apply these colors to anything in your design)
  • At least 2 images
  • At least 3 components
    • These should be repeated/reusable parts of your design (e.g. nav bar, footer, cards, etc)
    • Remember: you want to store the master components into a mini “component library”, and then use instances of those master components in your designs.

Additional requirements

If you find yourself really enjoying UI/UX & Figma and you want to go further, try implementing these to take your design to the next level:

  • Spend more time adding details to make it look very polished and professional
  • Simulate functionality of the site using Figma prototype settings
  • Apply autolayout to make your design responsive
  • Make a mobile and/or tablet version of your design
  • Wireframe more than 3 pages
  • Build out a mini design system that corresponds with your design, including:
    • Cataloging all the colors you use and adding them to your local variable library
    • Cataloging all the fonts and font sizes you use and adding them as local text styles
    • Cataloging all the images you use in your design system’s “image library”
    • Making any repeated features (nav bar, footer, cards, etc) into components, and having all master components live in your design system’s “component library”
    • ***Note: you can use the workshop’s Figma file as a template for your design system.
    • ***Note: In an ideal world, any time you use a color or text box, you would label it as a local variable color or local text style. That way, if you change the hex code of that labeled color or the font size of that labeled text style in just one place (AKA in your design system), all the instances of that color or text style are updated throughout your designs.

Tips

  • Look at some existing social networking / social media apps for inspiration.
  • The better quality your Figma wireframe, the easier it will be to actually code the interface later.
  • Keep the interface as simple as possible. Don't overcomplicate the UI and make it harder for your future self to implement the site.
  • Keep in mind the feature requirements of the project.

Resources

Submission

For this assignment, you will submit a link to your figma file.

To get this link:

  1. Make a new figma design file
  2. Open the file
  3. Click on Share in top right
  4. Change "Who Has Access" to Anyone (you can leave it with viewing permissions)
  5. Hit Save
  6. Click Copy link in top right of modal

For feedback from DISC exec

Follow these instructions if you are submitting to get feedback from DISC exec. The deadline for your submission is 1 week after the associated workshop.

  1. fill out this Google form.

For the Discover Program Application

If you are not submitting for DISC exec feedback, but for your Discover Program Application, follow the submission instructions in the application form.