In this section, I’ll cover PART 1 of starting a UI/UX project:

• Preliminary Research
• Information Architecture/App Planning
• Low-fidelity Prototype/Sketch – Wireframing

TLDR: How to wireframe (low-mid fidelity prototype) on Figma for mobile & web UI/UX design.

What is a wireframe?

A wireframe is a rough schematic (sketch/layout) created in the early stages of digital product design to help visualize and communicate the structure of a product or website.

This would be the first step of ideating and developing your app/website design after the research and planning phase.

What does a wireframe look like?

Wireframes show what your app/website would look like at a barebones level, for a low-fidelity wireframe you may have placeholders for words, such as the example on the left. A medium-fidelity wireframe makes it slightly more polished, moving from a sketch to actual text, shapes, and light coloring.

How do I wireframe?

You can either sketch or digitally mock-up a wireframe. In the video tutorial below, I will be going over an example wireframe and how-to for an community-app idea.

You can digitally create a wireframe on Figma, or other wireframing websites/tools.

Example of the process and flow of early stage UI/UX design:

In the example below, I am planning a community mobile app design.

• In part 1, I am laying out the context and research for the app.
• In part 2, I am listing out the different pages and features I want to include in my app
• In part 3, I am creating a wireframe/low-fidelity prototype of my app using Figma, using a hand-drawn script to mimic a sketch and simple shapes to begin designing the layout and interactions.

Example wireframes following planning above: