From Sketching to Prototype

Sketching is a great way to start your app designs because it allows you to imagine the flow between screens, without focusing too much on the design of each one individually.

Nathan, Flinto’s founder/designer, loves doing UI design sketches on a dot grid notebook. His absolute favorite is the Dot Grid Journal from Creative’s Outfitter. It looks great, has a nice rubbery feel, stays open flat, has a delightfully subtle dot grid, and the pages tear out. He loves it so much that he bought five.

Open your your notebook, grab your Uni Kuru Toga Roulette pencil and Pilot Fineliner and get ready to sketch.

Goals

When you sketch, resist the urge to get caught up in details! Just try to answer these questions with your sketches:

  • What screens need to exist
  • What elements will go on each of those screens
  • How will the screens connect together?
Get messy, make mistakes.

Remember to allow yourself to cross things out and make things ugly. You can continually redraw screens as you figure things out. Once things are shaping up, draw them once more, a little cleaner before moving into the digital realm!

Digitizing

Here’s the fastest way to get sketches on your computer that we’ve found: Take a pictures with your iPhone, then they will sync to your computer through Photo Stream. From there, you can simply open Photos, and drag the sketch photos into Flinto Lite or Flinto for Mac to create a first draft interactive prototype.

Update as you go

Once you move into the visual design of your app, you can update your sketchy prototype with the high fidelity screens. In Flinto Lite, you can just drag new images on top of the sketches to replace them. In Flinto for Mac, you can drag individual assets on top of the sketch and then delete it when you are ready.


Learn more about Flinto for Mac and Flinto Lite on our website.