Wireframing

Wireframing is a cost and time efficient way to showcase your product or features and what it will look like to users, development, and designers so they can get a feel for what to expect.  It is a good idea to start by using the tried and true pen and paper.  This helps to avoid getting stuck on the details when you’re first starting out, i.e. not freaking out about aligning the text, all the boxes are the same width, whether it is responsive on mobile devices, etc.  It also helps to flush out creative ideas for the product. 

When you’re starting create a list of information you want to get across to your users.  What kind of screens will be involved and what type of information will be on those screens that you want the user to know about or act upon.  You’ll want to do this for every single page on your app, i.e. home page, account creation/login page, dashboard page, etc.

Doing this will lead you to an information architecture.  This will help you think about how your end user is going to navigate through your product.  To that end folding a piece of paper twice so that when unfolded you have four boxes you can then draw out quickly four different versions of each screen you may have for your product.  Don’t worry about being perfect with these because the team and designers are likely going to change and or throw out a lot of what you came up with anyways in order to increase aesthetics and speed.  When doing these though aim to create something where you don’t have to make your users think.  Less = More. 

Wireframing tools that you can use would be balsamic or azure.  Interactive prototypes would be like envision app.  After you’ve completed your wireframing and uploaded it into an interactive prototype program or application the next step would be to then sit down with a user to see if your wireframe turned prototype is actually user friendly.  So get to it and see what your users think!