When you have an idea for an app, you’ll need a way to create some concepts on what the app will look like. This will help you visualize and conduct a “mental walk thru” of what the app will do and how it’ll behave. While a “paper napkin” can be used, there are more contemporary tools available. But first you need to decide whether a wireframe or mockup meets your needs.
A wireframe tool is basically a super quick way to put concepts together that look like hand sketches. They are “low fidelity” meaning the shapes and symbols of items such as buttons, email icons, etc are identifiable but “soft around the edges”. Color schemes might be limited to shades of gray (or just black) and placeholders are used for images. The ability to interact with a wireframe to demonstrate app behavior will be minimal.
With a mockup tool, you can create “high fidelity” concepts which show much greater detail of what your app design will look like, including colors, text fonts, standardized buttons and symbols, etc. A mockup tool will make your app look almost like a finished product. Compared to wireframe tools, mockup tools can provide some fairly sophisticated logic capabilities allowing you to click buttons, symbols, links etc and an action will occur.
There are a lot of different wireframe and mockup tools out there, most have a free trial period which convert to a subscription. While I’ve used Balsamiq and Justinmind, I’ve found that if you’re not creating a lot of different apps, find one that’ll meet your budget needs. Sometimes a free trial will get you far enough you don’t need to spend money on a subscription.
If you’re looking to engage with your customers early in the concept / brainstorming phase (a good thing – verify you’re solving their problem), I’ve found a mockup tool is great for going deep into details; not only the look and feel but what functionality your app will have. The more customer feedback you get before coding starts, the better.
As there are a lot of different wireframe and mockup tools available, I wanted to provide this brief high level overview. For more information, feel free to contact me.
11 thoughts on “Wireframe or Mockup?”