The Year’s Best Prototyping Insights and Resources
Prototyping is not only a service we provide to our clients, it’s the key to success for our projects. This year, we created over 45 beautiful, detailed prototypes to bring clients’ ideas to life, inform stakeholders about direction, and help teams make decisions about the path forward.
Creating prototypes also helps our team think through problems and communicate ideas to fellow designers and developers. “Being able to swipe or tap through an idea I have is one of the best parts of what I do,” says Lead Designer Ronnie Johnson. “Not only does it help me better understand the challenges I’m working on at any given time, but it also helps me springboard to other ideas I might not have realized in a static comp.”
We rounded up some favorite prototyping insights and resources that have caught our attention over the past year. Whether you’re new to prototyping or you’re a seasoned pro, there’s something here for everyone.
Insights
Choosing the Right Prototyping Tool
With so many great prototyping tools available, most suited for particular types of projects, it can be challenging to determine which one best fits your needs. UX Designer Javier Cuello discusses various aspects, from learning curves to levels of fidelity, to take into consideration before deciding.
Prototyping With Principle vs Atomic
The team at Mossio has also made the hunt for the right prototyping tool a bit easier with a detailed comparison of Principle and Atomic.
Messenger Bots and Partial Payment Concept
Speaking of bots, Product Designer Isil Uzum shares her concept for Facebook Messenger integration of airline booking as an example for how to bots can be more helpful in completing specific tasks.
Chatbots: Your Ultimate Prototyping Tool
David Boardman and Sera Koo of IDEO discuss how their teams have used chatbots as prototyping tools for three health-related projects. By using chatbots, they are able to test and adapt ideas quickly based on feedback from users interacting with the chatbots. For more information, take a look at what the teams have to say about the technical implementation of the chatbot prototypes.
See the Secret Prototypes We Found in Valve’s VR Lab
Valve Software’s VR lab is where a lot of the work for the HTC Vive has taken place. Make: magazine has a behind-the-scenes look, photos of early Vive prototypes, and a video featuring some of the highlights.
Prototyping Tools of Tomorrow
Product Designer Mohammed Bilal discusses the current status of popular prototyping tools and how they must change to be successful in the future.
Our design sprints help businesses refine their focus and create great products. Black Pixel Design Director Tom Carmony delves into how these engagements work, including the integral role that prototyping plays.
Resources
The Beginner’s Guide to UX Prototyping
For those who are new to prototyping, Ezequiel Bruni of WebdesignerDepot created a comprehensive guide that covers the basic principles of prototyping, links to other guides with more information, and popular tools for various prototyping needs.
New to Framer? Just 3 Things to Get You Started
If you follow our Design Huddle, you’ve probably noticed by now that we are big fans of Framer. There’s a learning curve with this design tool, but don’t let that dissuade you from using it. The folks at Framer are here to help you get started.
The Big List: Design and Prototyping Resources for Mobile, Photoshop, and Sketch
The InVision team put together a list of icons, design kits, apps, and resources they recommend for bringing prototypes to life.
Prototyping With Xcode
In the sea of prototyping tools, Xcode is often overlooked. With his three part series, Black Pixel Staff Designer John Marstall covers the benefits of using Xcode for iOS prototyping and a step-by-step guide to help you get started.
Prototyping With Xcode: View Transitions in Mac App Windows
Figuring out how to use storyboards for Mac projects and the Swift language together can be frustrating. John Marstall shares his approach.
There are modules available to extend Framer’s core functionality, but what if you can’t find a module that you need? This is an excellent guide on building your own Framer modules. It includes a walk-through for creating a demo module with the option to download the code for further exploration.
How to Incorporate Cinema 4D Into Your Framer.Js Prototyping Workflow for VR/AR Applications and Experiential Prototypes
Designer Adam Mazurick shares his experience with incorporating Cinema 4D content into Framer prototypes for AR and VR apps. While he faces a variety of challenges, his conclusions are encouraging.
Bonus Framer Bits
As was mentioned, Framer is a favorite design and prototyping tool among our team. These particular tools, resources, and modules for Framer have proven helpful this year.
Framer Flows
This feature set for Framer makes it easier to create user flows from start to finish (think “onboarding to checkout”). It even includes standard iOS transitions. For more information, take a look at the full documentation.
Desktop Features for Framer
Framer now better supports large viewport and desktop prototyping, including built-in options for MacBook, iMac, Dell XPS, and Sony TVs.
Framer for iOS
Framer’s iOS app provides real-time, instant previews of your prototypes, the ability to download prototypes for offline views, and more.
Framer Snippets Library
Facebook Product Designer Charlie Deets compiled a library of common Framer snippets to help speed up your prototyping workflows.
For those of you who are creating Apple TV apps, our design team released a custom Apple TV remote module for Framer. The RemoteLayer module allows you to instantly generate an interactive Apple TV remote for your tvOS app prototypes.
Path Module for Framer
This module for Framer allows you to create custom SVG shapes and animate each individual point.
Hook Module for Framer
Hook is a cool module for Framer that lets you connect one property to another via spring or gravity.
Default Animation Settings and Viewer Module for Framer
This Framer module helps you to more easily calibrate animations within your prototypes.
Plug and Play with MIDI for Framer
Use a MIDI controller to manipulate settings for your Framer prototypes.
Did we leave out your favorite prototyping resources or insights? Share them with us in the comments below or on Twitter.
For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.
Black Pixel is a creative digital products agency. Learn more at blackpixel.com.
