For this assignment, you will be following along with a video (the first Tutorial Video in the Tutorial Videos section below) that shows you how to design a basic wireframe in Figma. You can design your wireframe however you'd like, and you are not limited to the design, graphics, or concept in the video. If you want to look ahead to the site you will be redesigning for unit 2, you can do the tutorial with that in mind if you desire.

Criteria for Success

There are seven requirements for this assignment to be complete:

  1. Your wireframe must have a minimum of 2 screens (i.e., frames)
  2. Your wireframe must include image placeholders and icons
  3. Your wireframe must have 1 header text
  4. Your wireframe must have 1 paragraph of Lorem Ipsum text
  5. Your wireframe must have 1 icon/photo attribution within a footer (you can do this in the prototype panel) (Best practice is to hyperlink the attribution, and the video instructs you on how to do this. But I will not count off if you do not hyperlink.)
  6. Your wireframe's screens must be connected to each other navigationally (you can do this in the prototype panel - the video shows you how to set up up a "click on" interaction)
  7. You must submit your wireframe as a .fig file (or as an "edit" link) in Blackboard

Tutorial Videos

Watch this first video and follow along. If you do that, you will have accomplished everything you need to accomplish for this assignment.

Tutorial - Wireframing in Figma

This second video shows you how to save your file as a .fig so that you can upload it in Blackboard. (It is also ok to submit a "Share" link in Blackboard.)

How to Save and Open Figma Files

Additional Resources

Tutorials from Figma - Getting Started with Figma [YouTube Playlist]

Flaticon - Free icons

Unsplash - Free stock photos