Mockups – get the ball rolling

Mockups are a great way to quickly demonstrate a new product feature or design and discuss it with your team. They help to focus conversations and serve as a launching point for further iterations.

I tend to use several different types of mockups, depending on how far along the idea is and the team-members involved:

Keynotopia wireframes

Keynote is an amazingly flexible app, and with a bit of help, can be an effective mockup tool. Keynotopia offers a collection of UI elements that can be positioned and manipulated in Keynote. Drag in the design elements you need, connect them with links and you’ll have a rough idea of what your finished feature could look like.

keynotopia-library

What’s to like

  • Great for desktop and web apps
  • Nothing new to learn – it’s Keynote
  • Supports high-fidelity mockups or basic sketches
  • Lots of UI elements for different types of apps

POP iOS mockups

POP is a simple app that is great for getting a feel for a UI mockup on your iPhone. Just add screenshots, connect them with tap targets and start tapping around in your app.

Sometimes an idea that’s great on paper can seem unwieldy when you try it on your iPhone – POP is a great way to see if an interaction flow feels natural, before you spend the time building it.

pop-demo

What’s to like

  • Works with scribbled napkin mockups
  • Also works well with designs you’ve whipped up in Keynotopia
  • Allows you to try iPhone mockups natively

Finding the right balance

Be careful not to spend too much time on your mockup: it’s easy to get carried away adding detail or trying to add realism – that’s not the objective. You need to convey an idea, but it’s ok to leave room for that idea to be fleshed out.