The Mobile App Mockup – Why and How

The Mobile App Mockup – Why and How tutorial that you need to know about graphic user interface in mobile gui web design gui and web app gui. First things first. What is a mockup? A mockup is a model of the user interface of an application. It shows the UI layout and design, and serves as an excellent early-stage tool to communicate the app functionality with end-users, software vendors, and maybe even investors.



Why spend time creating a mockup? Well, there is an unwritten software law which says that the later in the development cycle you introduce major changes, the more expensive they are. Mockups try to leverage on that law to save you some time, effort, and money. How? By offering you the chance to literary see at very early stage how your mobile application looks and feels, to collect early feedback from target app users, and to rethink and improve you app before it gets too expensive.



To build the right app you need to start communicating with your target users as soon as possible, and mockups could help you out with this endeavour. They are also a good tool to help you stay focused on the needs of the end-user from the very beginning to ensure you create a killer mobile app.



Now, on the How part: There are many tools that you can use to create a mobile mockup. Find a few ideas below:
1: OmniGraffle
A good one if you are a Mac user ready to spend $99.95 after the 14-days trial is OmniGraffle. It’s actually a diagramming program, but you can easily import iPhone stencils and Android stencils, which makes it a great tool for creating your mobile app mockup. Start dragging-and-dropping items around the screen you have your app layout sketched in a few hours.



Here’s an example:

2: MobiOne Studio
Another good product for creating iPhone mockups is MobiOne Studio, currently available for a free download. With MobiOne you can create your mockup using the basic iPhone elements and you can even link the mockup screens you’ve created to test the usability of the application before you actually start creating it.
3: Adobe Fireworks
If you are ready to spend more dollars, one of the best products for making an exceptional app design is Adobe Fireworks. There are many real size vector graphic templates of mobile phone elements available on the net, which you can easily modify and skin to create a custom app design.
4: Pen and paper
If you are not a big fan of UI design tools, you could always revert to good old pen and paper, and once satisfied with your ideas develop the mock-up in actual code. Advantage: The mockup is as real as it gets, and you could reuse the code. Disadvantage: Takes some more time upfront.
source : http://www.bianor.com/blog/mobile-app-mockup/