Prototyping tools can help us solve design problems before writing even a single line of code. Prototypes bring our ideas to life, and in doing so can change the way we design. Today’s clients want to see interactive prototypes; these show the concepts in action and help them see how their ideas will take shape.
The possibility of quickly sharing different iterations of ideas with clients can accelerate the design process. This flexibility becomes even more significant when we consider the many device formats we must now factor in.
With so many prototyping tools now available, perhaps many designers are left wondering how to choose the best one, and simply fall back on familiar methods. Ultimately, the goal is to pick up a tool that will support swift iterations, so you want to be sure to select one that does this with ease and lets you focus on what you do best: design.
To help with this selection, I’ve compiled the best of the best: here are the top 10 prototyping tools you should be using in 2016!
1) ORIGAMI
www.facebook.github.io/origami
This tool does require more work to install than other prototyping options. However, once it is installed, you can begin creating design concepts that simulate scrolling, taps, swipes and page links. Origami’s documentation, tutorials and how-to videos make it easy to get started.
Sketch and Photoshop designs can be imported into Origami, and your project layers will be preserved, ready to be linked, animated and transformed as needed. Origami is not mobile designcentric either: you can design responsive websites and simulate features like text input, FaceTime camera and OS X drag and drop.
You can export your prototype components (including animations) with just one click, so engineers can copy-and-paste into the project. Origami includes a presentation tool that enables you to add a custom background to your design, view in full screen, and simulate different devices.
As a free prototyping solution, Origami has a lot to offer. However, one drawback is that it doesn’t yet let your clients or design team comment directly on the project or versioning history.
Price: Free
2) WEBFLOW
www.webflow.com
Designing prototypes is fast and seamless with Webflow, but where this tool really shines is when your prototype is all finished. You can turn your finished prototype into a production-ready site with the click of a button.
If you’re a freelance designer and have had difficulties finding a developer to turn your designs to production sites, Webflow may be for you. You can even set up user accounts or designate an admin to manage content, and your clients will be able to visually make changes.
Alternatively, it’s easy to export the prototype into code. Webflow’s clean, semantic code can save your engineers hours of code clean-up.
Webflow comes with site templates and web components that can be dragged and dropped into your prototype. These speed up the prototyping process, as they mean you don’t need to recreate commonly used design assets.
If at any time you’re stuck and need help, you can check out Webflow’s detailed documentation or watch its helpful how-to video courses. And of course, if you’re using Webflow for the first time, this support will help minimise the learning curve.
Webflow is responsive by nature, so your website layouts will be optimised for all devices: desktop, mobile and tablet. If that wasn’t enough, you can design animations that will work on mobile devices and all modern browsers. And it still doesn’t end there: Webflow has extensibility built in, which makes it easy to connect your live prototypes to Slack, MailChimp, Google Drive, and more than 400 other services.
Price: FREE STARTER PLAN, PERSONAL $16/MO, PRO $35/MO
03) PROTO.IO
www.proto.io
In my tests, the app ran a little slowly, and manipulating images was difficult at times. Also, every feature seemed to create a new window (one each for projects, building and live preview). If you like to keep the number of tabs you have open to a minimum, this can be annoying. However, these are small concerns, and do not take away from the benefit you get from having access to your projects on any browser. You can always pick up where you left off, wherever you are.
Proto.io has recently released plugins that enable you to incorporate Sketch and Photoshop designs through a simple drag-and-drop. When you import a file, Proto.io keeps your assets in place, so you don’t have to waste time realigning them. If your design has already been imported into Proto.io, you can continue to make changes to your assets in Sketch or Photoshop, and they will automatically update on your Proto.io prototypes; there’s no need to export and import again.
The ready-made templates already have a variety of interactions built-in, it’s just a matter of adding your app specific content. When your prototype is ready, you can share the project with a URL and get direct feedback on the prototype page.
Price: FREE TRIAL, FREELANCER $24/MO AGENCY $80/MO
04) FRAMER
www.framerjs.com
Framer is one of the most popular prototyping tools. It’s based on the premise that with code it is possible to prototype anything, resulting in novel and groundbreaking designs.
While this may be true, the tool’s proprietary coding language for designing and animating prototypes could be a barrier. There are those who may not see the reward at the end of the steep learning curve, especially for a language that can’t be used outside Framer.
However, for those who do want to take on the challenge, the documentation of Framer’s coding language is very well structured, with plenty of examples to demonstrate how the language works. There are how-to videos, as well as courses on Udemy and O’Reilly.
This approach is particularly useful for designers that are new to coding. It offers a first-hand view of how flexible and powerful code can be. In addition, Framer’s Mac App is well designed, and provides live previews as you write code, which is encouraging for those who are writing code for the first time.
That’s not to say it’s no good for designers with coding experience who prefer writing HTML/CSS to prototype their designs. Framer may be just the tool you’ve been looking for: you won’t be limited by the drag and drop tools of other apps. Furthermore, because Framer uses code to build prototypes, you can incorporate real-time data into your prototype, from sources like Twitter and Parse.
Like other tools, Framer supports Sketch and Photoshop projects, and will also preserve your design’s layers. Another benefit is that – unlike most other tools – you can also import After Effects files. When you’re ready to share your prototype, Framer can generate a URL that can be shared with your clients. These shareable URLs can be opened on mobile devices for live previews.
Finally, Framer has recently released an update that lets you prototype VR. 2016 will be the year of VR, and with Framer you can start prototyping now.
Price: FREE TRIAL $99
05) VECTR
www.vectr.com
Vectr prototypes can be shared with a URL and integrated into apps like Slack for powerful collaboration. As an added bonus, those you share your mockups with can annotate and edit them.
At the moment, Vectr isn’t as featurerich as many other options, but this shouldn’t deter you from getting familiar with it. A roadmap for the app has been published, detailing an impressive list of slated features. These include: fully-offline desktop apps, more platforms, built-in version control, a built-in design assets marketplace, full collaborative editing, image effects, plugins, clickable mockups, built-in feedback and annotation tools, and offline desktop apps.
Price: FREE
06) ATOMIC
www.atomic.io
If you have used After Effects to prototype animations, you will feel right at home with Atomic’s animation timeline. This gives you the flexibility and control you need to fine-tune your interaction: just click the play button to see your changes and animations in action.
When you’re happy with your design, you can share it with a URL preview on any device. It’s also possible to gather design feedback from your clients and team via inline comments.
My favourite feature of this particular tool is the history option, which allows you to rewind to see previous iterations and create new versions from any point. For those designing for iOS, Atomic has launched an iOS kit with a library of iOS design elements, to enable rapid prototyping.
Finally, you can add custom CSS directly into Atomic. It’s also possible to export CSS, so you can simply copy and paste it into your project.
Price: FREE TRIAL, STARTER $15/MO PRO $25/MO
07) EASEE
www.easee.design
When you consider that this product is a passion project of Steven Fabre, Easee is one of the most impressive prototyping tools around. In his Medium post (netm.ag/fabre-276), Fabre says that the goal of Easee was to help designers build beautiful animations for the web without needing to write code.
You can begin using Easee with a basic plan and upgrade to an unlimited plan for $10/month, which provides you with unlimited animation projects and CSS exports.
It’s clear that Easee was created by a designer to meet a simple need, and do it well. The tool keeps things straightforward with no unnecessary features, so you can concentrate on building the best interactions and animations for your design project. I encourage you to give Easee a try and support a freelance developer.
Price: BASIC FREE UNLIMITED $10/MO
08) INVISION
www.invisionapp.com
InVision is arguably the most popular prototyping tool in the world. The team are constantly adding new features to help designers prototype more efficiently. InVision’s best feature is perhaps its management of project feedback. Clients and design teams can conveniently provide comments directly on the prototype. These are collated in one convenient location, so you never lose track of feedback.
Communicating the status of the project to your client and team is critical; with InVision’s project management page, you can organise design components into a status workflow. You can set columns for To-do, In progress, Needs review, and Approved, and drag and drop your design components into the appropriate column.
InVision is always announcing new features, and it has recently released one it calls Boards, which is a home where your projects can live. It can also be used as a presentation tool, an asset manager for projects, and a place to create moodboards or galleries. You can even share these moodboards or galleries with clients and design teams, so they can provide direct feedback.
InVision’s feature list seems neverending: you can import design files from Sketch or Photoshop, animate design assets, link pages to simulate reallife websites, and preview prototypes on mobile devices. There is also version control with unlimited history, unlimited free user testing, and integrations with apps like Slack, Dropbox, Box and many more. InVision is still a game-changer in this space, and it doesn’t seem to be slowing down.
Price: FREE
09) ADOBE COMP
www.adobe.com/ca/products/comp.html
With Adobe Comp, you can create print, web and mobile layouts that seamlessly integrate with Photoshop, Illustrator and InDesign. Also, if you use linked assets, making a change in one program will cause the asset to update everywhere else it’s featured.
Comp works with Adobe Stock and Typekit, thereby providing you with images, graphics, and hundreds of fonts that can easily be incorporated as you work on your design prototype. This is my favourite feature, because it means virtually any graphic or font is available at your fingertips.
Adobe Comp offers a new way to develop and design prototypes, but due to its user-friendly design, there is virtually no learning barrier. Regardless, Adobe still provides several tutorials to help you get started, if you need them.
If you want to share your design prototypes with your team or clients, you can use Adobe’s Behance network to get feedback: a smart move by Adobe to leverage its already massive reach.
Price: FREE
10) PRINCIPLE
www.principleformac.com
Principle is only available for Mac, and if you’ve used Sketch, Principle’s interface will look very familiar. Principle uses artboards to animate elements between states, so as you work on your prototype, you can live-preview your designs on the top right-hand side window. Alternatively, you can mirror your designs on an iOS device.
While Principle does not include a collaboration tool, this drawback will likely be overshadowed by its offline capabilities. The flexibility of working offline is further highlighted by increased speeds, since you’re not relying on a potentially unreliable or slow connection.
Price: FREE TRIAL $99
CONCLUSION
We’ve looked at the top 10 prototyping tools to use in 2016. As you can see, the choices are abundant, and it will be hard to pick just one. I recommend you try out any that pique your interest, and see what works best for you, your clients, and your team. The ultimate goal is to let your concept materialise and your design take centre stage, so test different tools and check for updates that might give you just what you’re looking for. With so many great options already available, you’ll soon find the right prototyping tool to bring your ideas to life.AUTHOR
LEVIN MEJIA
Levin (@fourandthree) is a designer advocate at Shopify. He has worked for clients such as Vox Media and founded his own conference: Go Beyond PixelsSource From .Net Magazine
0 Response to "10 Best Tools for 2016 in Web Design"
Post a Comment