Wireframes (Digital)

in progress

What you have so far:

- A name
- A short explanation of your app
- A list of the problems your users are trying to solve
- Your reason for doing this
- A list of users that we will target
- A persona (based on user needs) for our first set of users
- A user journey map for our first users
- A list of assumptions and ways to de-risk those assumptions
- A short description of your MRP
- Feature Sets (v1, v2, icebox)
- A list of your competitors
- A list of keywords and searches your customers might use
- A chart showing which problems your competitors solve and how well they solve them
- A list of table stakes jobs
- Your USP 
- A list of User Groups
- A list of User Stories  (v1, v2, icebox)
- A list and screenshots of inspiration sites, screens and features (with notes)
- A list of all the pages/screens for your app
- A list of all the functionality that is required on each screen with importance values

Objectives

• Prepare digital wireframes that can be used for prototype testing

Tasks

1. Move to Sketch.

Tasks (with instructions)

1. Move to Sketch

Use Sketch(a mac-only app) or Figma(windows/Mac)
I like to use Sketch(personal preference). There are specific apps for wireframes, but I don’t think they’re necessary. While sketch and figma are harder to use initially, and not exactly made for wireframing, if we set up our files correctly it will be easy to update the entire app once we’re ready. We can actually use the work we do early on to make high-fidelity prototypes later (a high-fidelity prototype looks like our finished app). This will cut our costs down immensely.

Since we started with paper, we have a decent idea of what our screens will look like.

In Sketch, it’s pretty easy to turn these into mockups.

If you’re making an iOS app, you can download the ios sketch library from apple developer resources. This includes some of the base iOS controls and views which make it much easier to create your mockup.

If you need help, it’s also possible to hire a designer at this point — you can probably get this done for $100 or $150.

When using sketch, you want to be sure to turn as much as possible into ‘symbols’ — recurring blocks that are used throughout your app, with different content. This will cut down on the complexity of your app and decrease your costs.

Every time you create a text field, make sure that you are creating a new text style or applying an old one.

Every time you create a new artboard, be sure to give it a name. This will come in handy for our next step, creating a clickable prototype.

Outputs

• digital wireframes