Why prototypes?
In web and app development, the early stages of design usually focus on visuals, rather than functional context. This process is a result of our industry’s traditional, media-design roots. Yet, we’ve found that separating the design process from what you actually experience is not only inefficient, it’s expensive and, to be frank, frustrating.
Industrial designers have been using prototypes for decades, and craftspeople for centuries before that. Now, in the digital design industry, we’re also seeing prototypes playing a key role. Their use results in easier, more productive collaboration as lines between disciplines blur. Good ideas get through quicker, and not-so-good ones get snuffed out. In short, better solutions earlier.
How we use prototypes
Prototypes range in capability, usually based on their specific goals. One might focus more on design, while another might focus on experience, information flow, functionality, etc. Every prototype, however, is created to elevate work and validate solutions.
Because prototypes allow the team and client to understand how the end product will behave and feel, we’ve found that they streamline our review process. The higher the fidelity of a prototype, the more united everyone is on a solution, ending hypothetical or anecdotal debates and meetings that have a tendency to drag on.
Prototyping Tools
These tools allow rapid iteration of functional design but aren’t able to create or aid in the creation of production ready code.
- Sketch: Mostly a design tool with limited prototyping capabilities
- InVision: Design-centric presentation and light prototyping tool
- Principle: Mobile prototyping tool focused on animation
- Framer: JavaScript-based rapid prototyping for mainly mobile
- Axure: Long-time extremely robust prototyping tool but it’s showing its age
- Balsamiq: Cloud-based modern mobile rapid prototyping tool
- Atomic.io: Cloud-based modern mobile rapid prototyping tool
Creation Tools
These are not just prototyping tools, although they could be used for that purpose. All the below are able to create or aid in the creation of production ready code.
Storybook
Opensource (MIT), Javascript package
Use case: Develop an atomic pattern library with individual component creation and testing.
Components are in concurrence with “storybook” files. These are isolated renders that can show each component with a variety of props and states. Can be used with React, React Native, Vue & Angular.
Webflow
Paid software, Online platform
Use case: Develop quick web layouts with an intuitive drag & drop interface. Provides another layer of javascript interactivity that is all create-able within the interface.
Webflow is an all-in-one web builder. It provides basic web markup as well as a few more complex patterns that they’ve developed themselves. It has a timeline GUI for creating animations wired to a few common triggers: mouse-click, mouse-over, page-load, and scrolling. An asset manager is included as well as a basic CMS for structuring collection pages and singular entry pages.
Webflow provides an easy custom domain integration and also the ability to export code. Exported code is very clean! It is also easy to develop custom JS on top of Webflow and not affect the layouts and code that it generates.
Alva
Opensource (MIT), Electron App
Use case: Develop layouts with using a React component pattern library with a drag & drop GUI.
Alva is in its very early stages, but the core of Alva is to create a reusable pattern library and use the editor to quickly create layouts. Alva gives you a layer-tree view of your pages, a searchable index of pattern components, provides user inputs for each prop of a component, and gives you a true-to-code preview of your page.
What it’s missing (Jan 16, 2018):
- State management of any kind
- Event wiring (
onClick, lifecycles, page linking, etc) - Code exporting or any hand-off type feature
- Particular GUI features:
- Element highlighting in preview pane
- Layer labels
- Pattern creation within the app
Anima
Paid, Sketch Plugin
Use case: Create responsive & interactive layouts within Sketch.
Anima is a set of Sketch plugins that allows Sketch to become a more robust webpage design tool. To get the most out of Anima, it is better to start the project using their layout tools, but it is possible to take existing Sketch mockups and export out a simple page flow. You will lose the benefit of percentage widths.
Tools include:
- Launchpad
- Deploys a web preview to a domain
- Allows Artboards to be linked as separate linkable pages
- Allows Artboards to be grouped as breakpoints
- Insertable widgets, (custom code, or from services)
- Autolayout
- Create “Stackable Groups” which allow you to create groups of layers that are arranged in a manner similar to Flexbox (deployed code utilizes flexbox)
- Allow groups and items to be percentage width
- Allow groups and items to be “pinned” on the Artboard (similar to absolute/fixed positioning)
- Timeline
- Not a current feature, will allow simple animations using Sketch’s SVG code
Haiku
Free & Paid Plans, Desktop Application
Use case: Creating Lottie/Bodymovin animations with a simpler graphical interface than After Effects.
Haiku is tightly integrated with Sketch, Haiku works off of Sketch files to create slices that can be layered and animated. Outputs Lottie code. Built on React.
There is also interactive functionality including mouse interaction and state-based animation.