3 lessons I learned Wireframing my first app

Jun 20, 2023 . Mostafa Lotfy

I’m finally building my very first app. A simple workout tracker that focuses on starting slow and building up progress.

Even though I was itching to jump straight into Figma and to design the app, One of the very first steps to build an app is to create a wireframe for it.

When I started working on my first wireframe, I made a mess and felt stuck. Eventually, I managed to come up with a decent enough wireframe.

In this video, I share 3 main lessons I learned from the process and a 7-step (suggested) workflow that I will try to follow when working on creating wireframes in the future.

Quick Notes From The Vid

3 Lessons

1 Define The Core of the app/website

Define the most important page/functionality of the app. And start sketching and editing it first. Build the rest of the pages of the app around the core.

2 Sketch The Big Picture

Sketch all the pages of the app on one large piece of paper.

3 Don’t Make A Mess while wireframing your app

Don’t allow ideas related to the app but not to the wireframe to distract you and take over your wireframe pages.

Capture them cleanly on one separate page, to have easy access to them in the future and stay focused on the wireframe process.

Stick to one medium

Don’t scatter your wireframe across different mediums; sketchbook, pieces of paper, or GoodNotes (iPad note-taking app). Choose one medium to hold your

Limit the pages you use for your wireframe

Put a limit on the number of pages for your wireframe. I found 3 pages to be enough, one for the core, one for the big picture, and a third to capture related notes and ideas.

7-Step workflow to create a wireframe

Define Refs
Create a list of every feature that you want to add to the app/website
Filter the list and find the essential features and pages of the app.
Define the core of the app.
Sketch and edit the Core
Sketch and edit the Big Picture
Capture all related ideas in a one page