Four ways to mock up your next mobile app

We interact with mobile apps almost every single day, whether it’s checking social networks, finding things to do, or to share data and experiences. The best designed apps fit almost unnoticed into our lives - they’re easy to navigate, the UX is pleasant and intuitive and help us achieve goals quicker and easier. However, users are instantly put off an app which is clunky, confusing and hard to use - there’s nothing as infuriating as a badly designed user interface (see here for 2014’s best and worst apps).

 

Even the best ideas can fail if designers and developers turn them into awful apps. However, whether you’re a developer without design expertise, a designer without development know-how or simply an interested enthusiast, getting to grips with the basics of building a mock up can help work wonders when it comes to helping build the best apps you can. Not everyone studied graphic design at school, nonetheless there are a number of tools out there which can help anyone with a spark of creativity turn their ideas into reality.

 

Make up with a mock up

 

At Infragistics, we believe great apps happen by design, and this is a bottom up process - from the first idea fleshed out on paper to the final touches on the UI. Developing an idea is all about letting your creativity flow while combining this with rigorous planning. Mock ups are an essential step in this process - they help us develop the basics of our ideas. From here we can begin to turn our ideas into form and then direct our energies into turning the most basic ideas into the most incredible apps.

 

Mock ups are comparable to an architect’s blueprints. Without them our thoughts would never begin to take form, and once decided upon they can provide the basics from which we construct our builds. It’s fine wanting an app in one color or another, with flashing parts and interesting imagery, but the black and white mock ups which inform these later stages are the real foundations of our work.

 

Besides guiding later development, mock ups also help convey ideas to stakeholders, letting them visualize what the app they’ve commissioned is going to look like in advance. We’ve all worked with clients for whom the term ‘control freak’ would be an understatement, but even the most reasonable stakeholder wants an idea of where you’re work is progressing. They’ll often be investing considerable resources into the app development project, so reassuring them that your tool will do what it’s expected to is only fair.

 

Get tooled up

 

Every different designer has their own methods of mocking up, but some of our favourites include:

 

• Indigo Studio. A state of the art prototyping tool, Indigo Studio lets you experience an app and find the right design without writing a single line of code. Offering a wide range of capabilities, the studio fundamentally provides users with an environment where they can quickly mock up a working model of an app in a matter of moments. Shipping with templates of different mobile devices, it’s instantly possible to demonstrate how your app would look and feel on smartphones and tablets.

 

Taking this further it also allows you to demonstrate prototypes on a wide range of ready designed storyboard scenes so you can picture how the app would be used in the real world.

 

• Wireframes. There are numerous tools out there such as Balsamiq, Omnigraffle or even good old PhotoShop which can help you throw app designs together in a jiffy. Cutting out the noise, Wireframes focus purely on how users will interact with your design, how they’ll work through the pages and put the distraction of applying colors, content and typeface choices until later on.

 

• Pen and paper. Get back to basics with the classic approach to mocking up design. If you want to let your imagination run wild, sketching ideas out on paper remains an extremely simple yet effective means of conveying ideas and UI.

 

• Mobile Controls. Mocking up a UI for one operating system is one thing, designing them for different systems adds a whole new layer of complexity. Mobile Controls let you skip this step by providing a whole range of purpose built, industry standard graphics, visuals and interactive charts. The leap from your first idea to final, coded app can be made a lot shorter.

 

From idea to app

 

No app design project is the same - end goals and the means to reach them vary greatly between app build; the design methods which works in one context simply won’t be appropriate in another. Whatever route you choose, whatever tools work best for your style and project goals, ensuring you keep the needs of end users in mind is fundamental to any app’s success, and this shouldn’t get lost behind the technology.

Looking for a comprehensive and rapid prototyping tool, which allows you to see exactly how your build will look and work before even writing a single code of line? Look no further. Download our Indigo Studio free trial now and see what it can do for you!