Learn UI in 100 Days - Day 3 - Wireframe Basics

By: Jeff Hu
Posted: February 26, 2021

Today is the third day, and I learned about the basics of wireframing and the component system as well as some best practices using Figma to create wireframes.

I read an article on what is wireframing in designing, and a YouTube video of wireframing in Figma.

Here is the note:

What Exactly Is Wireframing? A Comprehensive Guide

a wireframe is a two-dimensional skeletal outline of a webpage or app. Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors.

Wireframing happens early in the life cycle of a product, it is useful to have a good picture of the scope and features of the product, its advantages includes:

There are indeed gaps between wireframe and actual product, and that is the later things designer should work on.

Also, wireframe can be classified as

What to include in a wireframe?

Wireframing with Figma

After today's learning, I realized what I really need is to get hands dirty as quickly as possible, and try to solve the problems and answer questions during it.

I think I've learned the basics of Figma, and it is time to make something.

So I'll be wireframing my blog tomorrow!