Playbook for Rapid Mobile App Prototyping

Playbook for Rapid Mobile App Prototyping

Prototyping is the most effective way to test and validate app concepts

Whether you’re a single-member startup or a well-funded development team, I will always recommend creating an interactive prototype to facilitate rapid customer feedback on app concepts. Here is the exact formula I use to day-to-day for my clients:

  1. Design screens using Sketch

    This design tool is relatively low-cost, easy to learn and integrates with many prototyping tools which will save you time. As a designer, I often collaborate with product owners and product managers by sharing and modifying each other’s Sketch files. Once you get the hang of the basics, you should learn how to create re-usable symbols and style libraries to speed up your workflow.

    Click here to download a trial of Sketch

  2. Build a prototype using Invision

    Once you’ve designed your first version of each screen, upload the designs to an Invision project. Use build mode to add hotspots which will turn your screens into a tappable prototype. The goal is to test your most-important user flows so you can collect feedback and iterate before sending the concept to development.

    Share the prototype with your teammates and collect feedback in comments on each screen. When you’re ready, send a link to your tester’s mobile device and ask them to complete the workflow. A huge number of usability issues can be caught early by simply testing your prototype like this with a handful of people. This practice can save you thousands of engineering dollars in the long run by catching issues early on.

    Pro-tip: Give each screen a unique name in the files you export from your design tool so that Invision can keep proper track of them. This will save you time in the long run because you’ll be able to simply replace a screen with its new design to preserve its hotspots and interactivity.

    Click here to sign up for an Invision account (with $25 credit)

  3. Install the Craft plugin for Sketch

    With the Craft plugin, it becomes incredibly easy to export the screens to Invision while preserving all of the hotspots that have already been set up. This means that you can tweak small things like copy, button text or images, and one-click export all screens in your file to keep your prototype up-to-date with the latest changes. Once you’re done making changes, click the Craft export button within Sketch to automagically update Invision.

    Click here to download the Craft plugin (free)

  4. Use Abstract for version-control

    If you’re collaborating with others on Sketch files for your application design, consider using a version-control tool like Abstract to ensure y’all are always working with the most up-to-date file. While Abstract is an investment and takes time to learn, the long-term advantage is you will never worry about accidentally saving over someone else’s work and will ensure that all previous versions of those files are preserved.

    Your engineering buddies will love this tool due to its similarities with how code files are stored with Git. Abstract will give you peace of mind knowing that nothing can be lost.

    Click here to learn about Abstract

  5. Hand-off design files with Invision

    My trick for making design-developer handoff easy as pie is utilizing the ‘Inspect’ tools already available within Invision. Since you’ve already set up your prototype and are using the Craft plugin to keep each screen up-to-date, then all you’ve got to do is ensure that the assets are downloadable.

    In Invision ‘Inspect’, a developer can “zoom in” to each element on the screen to view its style properties (things like color codes, type styles, pixel dimensions, shadows, overlays, and so much more). To make assets (icons, images, graphics) ready for export, simply click on that object in the Sketch file and check the box “make exportable”. Then sync your files with Craft, and voila! Your developer friend can now download that asset.

    If you can’t already tell, I’m a HUGE fan of prototyping for speeding up the app design and development process. I hope this post has given you some ideas on how to improve your workflow




5 Tips for More Engaging Smartphone Photos

Comment

5 Tips for More Engaging Smartphone Photos

This post is for all the boys and girls who drool over stunning pictures on Instagram. Amateur photographers who follow countless bloggers, photographers and stylists that have a magic way of turning a table scene into a work of art.

I’m excited to share my tricks for transforming so-so iPhone photos into Instagram eye-candy. Expensive camera not required.

NOTE: There are dozens of photo editing apps on the market. I love VSCO Cam and will be mentioning it in this post. However, the tools I suggest are available in most photo editing apps, including Instagram.

 

Original image.

Original image.

Apply the right filter

Filters sometimes get a bad rap. We’ve all seen images that are simply overworked. The scene doesn’t look real, the colors unnatural and the grain clearly faked. The key is to be mindful and apply a filter that enhances your image without overwhelming it. It should add polish, not cheese.

This filter enhances the warm, rich tones of the wooden table top. The sidewalk takes on a cool blue tint. The contrast adds visual interest.

This filter enhances the warm, rich tones of the wooden table top. The sidewalk takes on a cool blue tint. The contrast adds visual interest.

The best photos communicate emotion. Consider the message that you are trying to convey. A sunny picnic in the park will have a much different mood than a cobblestone street in the rain. Is the scene playful or serious? Calm or exciting? Think about this as you select the effect.

I’m impressed with the photo editing app VSCO Cam. VSCO filters add style and tone to images with grace. The filters are developed to emulate the effects of analog film. Enhanced images that have a professional look and feel are the result.

Try on all the filters. This will train your eye to see the differences between effects. Ask yourself, ‘How well does this enhance the subject matter?’

 
I wanted to scene to feel lighter, so I brightened it one shade.

I wanted to scene to feel lighter, so I brightened it one shade.

Adjust exposure

More often than not, my iPhone takes underexposed photos. This means that the image is too dark. Smartphone cameras auto-correct the lighting, and sometimes auto-correct is wrong.

Adjust exposure in your photo editing app. Play around with it. See what a difference it makes to brighten a shade. See how darkening the image affects the mood. Make adjustments until your subject is well-lit.

 

 
I cropped the image so that the glass is on the left third dividing line.

I cropped the image so that the glass is on the left third dividing line.

Straighten & crop

Crooked photos can look sloppy. Find the horizon line and make sure it’s horizontal.

Much has been written about composition and the rule of thirds. Thoughtful composition lays the foundation for excellent photographs. Consider this when you crop your image.

 

 

 

 
I applied a subtle vignette. Can you see the difference between the edges of this image compared to the previous step?

I applied a subtle vignette. Can you see the difference between the edges of this image compared to the previous step?

Vignette

Vignetting is a subtle darkening of the edges of the image. I apply a vignette effect to many of my photos because it focuses the viewer’s eye on the center of the image. This makes your subject shine.

 

 

 

 

 

 
This one is really subtle. My image was already in focus, so I sharpened it just a tad.

This one is really subtle. My image was already in focus, so I sharpened it just a tad.

Sharpen

I always sharpen my photos. Always. Sharpening minimizes blur and ensures that edges are crisp. The result is an in-focus subject.

Be cautious about overdoing it. Sharpening too much can make your image look grainy.


 

Ta-da! So-so to eye-candy.

I hope this article helps you add a little sparkle to your smartphone photos. Please share your photos with the community by including #instaeyecandy on Instagram. I can't wait to see what you've made!

I’m a Product Designer. I help teams build strong brands and delightful products. On weekends I geek out over color, photography and handicrafts. Find me on Instagram & Twitter.

Comment

Comment

Color Project Featured

My project #100DaysOfColor was featured on a design blog.

I was pleasantly surprised when designer/developer Daniel Fosco reached out about featuring my project. I shared with him my process and inspiration.

CHECK OUT THE POST

Comment

Fine Art

 

I designed a site for my fine artwork.

Vibrant abstractions inspired by natural materials and minerals. Buttery oil paint on canvas and wood. Handcrafted goods to lift the spirit. I sell at local bay area craft fairs seasonally.

CHECK OUT MY WORK