By Ed Corcoran (Digital Product Designer)
What is a prototype?
By definition — A prototype is an early sample, model, or release of a product built to test a concept, process, or an example to learn from.
A prototype for a digital product can be made using various different mediums — sketches on paper, clickable static designs or even more advanced prototypes made with HTML, CSS and JS.
No matter what medium you use, a prototype is meant to be an easy way of determining the feasibility of an idea or a new design without going through all of the normal production steps — which can be time consuming and in a lot of cases, unnecessary.
Just as there are different mediums for creating prototypes there are different tools too. The two I have been using regularly of late are—
Sketch, a standard in most UI designers repertoire, it is a vector based design app created specifically for designing interfaces, websites, and icons.
Sketch should be fairly familiar to anyone who has used any sort of editing software on a Mac and easy to pick up for those who haven’t. If you need somewhere to start, check out their video tutorials and resources available on their website.
Designing in Sketch for Framer Studio
These are a few tips to consider when preparing your sketch designs to be imported into framer studio.
Naming Artboards and Layers, it’s best to avoid using spaces and even dashes because it will cause problems with syntax in your coffee script — It’s best to stick to camelCase or names_with_underscores.
Nesting your layers in groups — when framer imports a sketch file it only allows you to target groups, so make sure you have each layer you want to animate or interact with in its own group.
Dividing your designs into “Pages” or “Scenes” — if you have several screens that have common elements, for example an onboarding process, I found the easiest way to prepare your sketch file is to merge all your artboards before you import them. If you do this then you can show and hide the layers you need in framer and their default positions will already be set.
The last quick tip is to remember that Framer only allows you to target groups, it can’t change colours of text or shape layers from Sketch, so you need to keep that in mind when planning your prototypes animations and transitions.
Creating your protoypes in Framer Studio
Logical & Lateral Thinking are your friends when planning out your interactions and animations. These tips might not mean much right now but if you keep them in mind it will save you time in the future, I promise.
Use Variables — if you use any value multiple times throughout your code you should make it a variable so if it needs to be changed you only have to do it once.
Loops for repeated elements — for the same reason you would use variables creating arrays of similar elements that have the same properties applied to them saves you time and headaches when changing values further down the track.
Make functions and event listeners — If you split the different steps or stages of your prototype into functions you can trigger them multiple times, or even in reverse order.
Add your own properties to your elements to check for things, adding extra properties to layers and objects can help you add logic to your prototypes.
The last tip is always leave comments on your code, you may know exactly what your code means while you’re working on it but a few days, weeks or months down the track you may not.
Benefits for Development
Making prototypes definitely does help bridge the gap between your flat designs and the final product, you spend less time explaining how you imagine your designs coming to life in your mind, which means less interruptions to workflow, and an increase in productivity!
And although the coffeescript you write for your prototypes don’t necessarily translate to production code, there are values and timings that can be used by a developer to reduce development time.
A Final Thought
Remember whilst it’s always great to up skill and try out new tools, even learn a new coding language — you should never let that stop you from creating a simpler prototype in the meantime. Any test in any fidelity is better than no test at all.