Figma

Objective: Jargon and how to begin prototyping + wire-framing.

What is a Wireframe?

  • A.k.a: screen blueprint
  • Used as a visual guide to represent the skeletal framework of a website
  • A layout of a web page that demonstrates what elements will exist

What is Low-Fidelity?

  • Sketches
  • Created with no scale nor grid
  • Pens, pencils, paper
  • Don’t consider colors or fonts

For Iterating: This should be for team use! What are some pros and cons of low-fidelity wireframes? Why do we suggest against showing lo-fi wireframes to clients?

What is Mid-Fidelity?

  • Follows a grid, usually created using online platforms (Figma, Balsamiq, Sketch)
  • Much more detail, distinguishing between different features

For Clients: This should be what you show to clients for content and placement feedback! Why not just jump to high-fidelity?

What is High-Fidelity?

  • Pixel specific designs, includes text and images
  • This is where we can implement interactivity
  • Should look 95% like the final design
  • Implement the design guide

For Clients (Optional): This would be what you show to your clients right before you are ready to user test/implement.When might it make sense to show clients hi-fidelity wireframes?

Explaining to Clients

  • make sure to explain to clients why it is important to create wireframes

From Onboarding and our previous slides, what are some reasons we can tell clients to explain why we are prototyping and not directly implementing?

Website Structure

  • All stakeholders should agree on where information will be placed before building
  • Understand the user flow centered around the primary goalWork through interactions
  • Don’t get distracted thinking about the “design” (colors, images, etc.)
  • Fold: the bottom of the visible page when it first loads; to see the content beneath it, users must scroll
  • Grid: the organization of your website, following a grid allows for websites to appear consistent, page-to-page

What are some pages you would expect to see on a personal website? E-commerce?What content would these pages include?

Questions for Your Client

  • What pages does the client want?
  • Layout of page?
  • How you want the user to interact with your site?
  • Follow a grid format to make sure the content is neat
  • Making sure design is consistent across pages

Practice

Create wireframe for the “about page” for your portfolio/personal website.

Using Figma, create a lo-fi wireframe that:

  • Includes an “image”
  • Lorem Ipsum text
  • A Call-To-Action
  • The CTA should lead to a new page

‍