BLUEPRINTING

The most important yet most overlooked step in App Development.

WHAT IS A BLUEPRINT?

A blueprint, or the technical term “wireframe”, is the step before you design the app. You lay everything out for each screen: buttons and content on each screen, where they go, how it functions, and the general layout of every screen that is going to be used.

Because building an app is like building a house; you can’t just say you want a house with 5 bedrooms, 3 baths, a living room, and expect everything to turn out the way you like it. Which is why blueprinting is so important, because this is where you layout your plans for your project, how it’ll flow, how it’ll work.

How an app flows and work is call the User Experience, or UX in short. The more intuitive it is for users to go through your app, the better. And it is in this wireframing process that you are designing the user experience of your app.

Click here for a full example of what a complete wireframe looks like.

  • changes

    CHANGES ARE EASIER

    Don't make the mistake of making changes in the design phase, or even worst, the development phase. Plan out your app exactly how you want it in the blueprinting phase so whatever changes you make to the funtionality wouldn’t feel like an add on to a home: awkward and slightly out of place.

  • changes

    RELATIVELY INEXPENSIVE

    It’s easier and faster to layout the user experience of an app without having to worry about the design of it at the same time. And because of this, it’ll also be less expensive to create a wireframe that can show potiental users or investors how your app would look before spending the money on design.

  • changes

    DEMO FOR INVESTORS

    Creating a wireframe is a greate way to create a live demo and show to potiental investors. Not only do you have an idea, you can now show exactly how it’ll work by creating a click through demo with Invision.

OKAY SO HOW DO I GET STARTED?

STEP 1:

DOWNLOAD OUR WIREFRAME TEMPLATE

Use this wireframe template with screens that are commonly used to help get your blueprints started.

arrow

STEP 2:

CREATE BLUEPRINT WITH TEMPLATE
IN ILLUSTRATOR

There are other wireframe tools to plan out your wireframes, but if you want to utilize our template and try out Adobe Illustrator, you can download their 30 day free trial to use.

arrow

STEP 3:

EXPORT PNG FILES TO INVISION TO
CREATE A CLICK THROUGH DEMO

Create a click through demo of your app using Invision to test out your user experience and get validation. It’s free for your first project!

GOOD LUCK!

WAIT, WHAT IF I GET STUCK?

If you need any help with your blueprints, feel free to contact us.