Basics of Understanding Mockups

February 18, 2016| destructive
Understanding Mockups

There are 3 parts in the design phase for mobile apps. First, you create Wireframes and this is where you lay out the skeleton of the app you are trying to build. Basics such as buttons, menus and image placeholders are drawn in black & white shapes to provide the basic structure of the app’s interface. You could think of it as an Architect’s pencil drawing of a building.

Next you need a color version of the wireframe to have a color representation of the app. This is what we call Mockups. Your app becomes more visual and detailed in terms of color choices, font, style and icons. Think of it as a design that you want your app to look like at the end.

More than that, mockups is a way to provide stakeholders and investors a chance to see how you represent your app. You would want superior visuals that bring powerful meaning and long-lasting impact that will draw them to believe in your idea. This is why the UI Designer you choose for your app project must know how to convey a modern and cohesive design that brings to life the app’s specialty.

The best way to start on a mockup is to look at another app’s design. Find references that you want in your app. It could be a location screen that you like, or a login screen that has a moving background video. I have worked for clients and they get the most out of their app when I help to design something unique for them.


To convey your idea for a UI Designer, you can start of by writing a brief:

  1. What is the feel you want in your app? – Stylish, Modern, Fun..
  2. What are the color schemes you prefer? – Yellow & Black or Pastel / Soft colors. antabuse online canada.
  3. What are you inspired by? – Squarespace, Material Design, Airbnb..
  4. What makes your app special? – Special local pizza discounts?
  5. Things you will provide. – Logo, NDA, or any additional cost for Icons.

After your mockup is done, you can test it out with prototyping tools such as Invision and see if the design works and provides the interaction and feel you desire. Write down some notes on what needs to be adjusted or changed. Once these final tweaks are accomplished, you can start sending the mockups to the developer.

Having an app idea and putting it from wireframes to mockups is a powerful step ahead in materializing your dream. Deploy Apps currently design in both Photoshop & Sketch 3, take a look at our page for more information on how you can start your ideas with us!


Icons courtesy of Freepik.com

Categories: Mockups, UI Design

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe and Get 25% OFF!

Join our mailing list for cool freebies and updates. Promise, no spam :)

%d bloggers like this: