Creating Your First Prototype with Framer. Update: More Framer tutorials can be found at Prototyping with Framer.
No longer can your product just be usable and look good. Beautiful, subtle movement enhances the user experience and makes products more engaging, dynamic, and memorable. Paul Stamatiou, designer for Twitter, recently wrote that motion design is now a required skill for designers. With so many prototyping tools popping up, I wanted to give Framer Studio a shot. Framer is a Javascript framework for prototyping interactions and animations.
To get started, I downloaded the free 14 day trial version and went over the learn section on their website, which contained basics around creating animations, properties, states, events, and more. When you first open the app, you are presented with a code editor on the left pane and an instant preview of the code on the right. I personally learn best looking at other code and then modifying it to figure out what is going on. Once imported, the following code was inserted: Designing at 1x — Design + Sketch App. Before doing anything, I make sure everyone has “font anti-aliasing” turned off (un-checked) in their Sketch preferences.
Otherwise, type looks terrible. I won’t get into why, but trust me. It does. (Updated: This is no longer an option in Sketch’s latest update.) Create 1x Canvas Sizes The end goal here is to take advantage of Sketch’s vector system, which allows the re-use of elements across multiple platforms and utilize its fantastic exporting system. Our canvas sizes are as follows: Desktop: 1440 x 900Web: 1440 x 900iOS iPhone 6: 375 x 667Android Nexus 5: 360 x 640 (mdpi) Porting and Creating Designs For us, we had a handful of designs in PSD format that we needed to port over to Sketch. Before redrawing everything, start with the PSD designs that is either most complete or has the most assets.
For the case of Android, I converted Nexus 5 xxhdpi (1080 x 1920) down 3x. Create A Sticker Sheet Our first versions of the sticker sheet was more web centric. Use Symbols and Shared Styles. Framer & Sketch: An Intentional Workflow — Facebook Design. Framer & Sketch: An Intentional Workflow Making Framer prototypes can communicate what a final product will feel like early in the design process.
I find working with Framer rewarding because it forces me to think through the logic and flow of a design in a very tangible way. Building a prototype also helps me gain empathy for some of what engineers will go through when building the product. If it’s difficult to figure out the interactions in Framer, there is probably some sort of fundamental flaw or ambiguity in the design. I make a lot of prototypes and they tend to be long flows with many different states.
Step 1: Static Design As an example we are going to make a swipe-able stack of cards that you’ve seen in apps like Moments and Tinder. The static design process should be the really familiar part. Side note: Framer now supports importing from 1x resolution. Step 2: Write It Out This is the magic step. In plain text, write out what the prototype should do. Indigo Studio - wireframing tool - Interaction Design Tool. Responsive web design tool, CMS, and hosting platform. Interactive Wireframe Software & Mockup Tool. Proto.io - Prototypes that feel real. 5 of the Best Prototyping Tools to Test Your Web and Mobile Designs. Prototyping is an integral part of the design process, as it lets you and your team review concepts and share feedback in the early stages of a project.
By creating an interactive mockup of a website or mobile app, you are able to identify any shortcomings in the flow and usability of your design before investing too much time or money into development. While every designer has a unique set of needs for their mockups, each of the tools below offers the functionality and flexibility required to create highly interactive concepts without a single line of code. Hopefully, after reading through our list, you’ll find the perfect tool to test out your web and mobile designs. 5 Prototyping Tools InVision—Create highly interactive mockupsFramer—Design elaborate UX flowsMarvel—Simplify the prototyping processOrigami—Bring your mobile and web project ideas to lifeProto.io—Design prototypes that feel real 1.
InVision’s ability to facilitate collaboration is its greatest asset. Access Partner Perks. Prototyping Tools. Justinmind is a flexible prototyping tool that supports many devices and works well for simple click-through prototypes or more complex interactions.
Prototypes can be created from existing mocks or by building screens out within Justinmind using libraries of standard assets. Update: Justinmind now supports the simultaneous execution of events. Device-specific templates and features. Quick and intuitive to add assets via drag + drop. Simulate feature generates a web preview of fully interactive prototype with a device frame. Moderate learning curve; took some time to get oriented as a first-time user.