4 Prototyping Tools for Web Designers

In this blog we’ll take a look at some of the prototyping tools available for web designer (in no particular order):

  1. Framer
  2. Adobe XD
  3. Adobe After Effects
  4. Principle

Prototyping is key when you’re trying to share ideas with the directors or clients and without these tools to assist you in creating a visual cue for them to see, it’s almost like playing charades and the client is aimless looking at you without a clue to what you’re describing. Believe it or not sometimes actions such as swiping or dragging are just the tip of the iceberg when trying to figure out where all the puzzles fit together. This is where true prototyping comes to life.

Without further adieu let’s take a look at some of the tools I use when prototyping my web designs.

  1.  Framer (Price: PAID / Mac only)

Framer has visual editing with the added flexibility of code, giving you a seamless workflow between device preview and handy sharing tools. It’s an app that helps new interaction patterns in order to create groundbreaking prototypes. You can pull in data from your choosen API, capture real user inputs to test the workflow and work with actual users and get actual feedback ( I said actual too many times…but you get the point)

Framer isn’t just used to design mobile apps, it can be pushed to design projects outside the app specturm by using the Framer JS library, opening up an open Javascript framework for rapid prototyping. That said, even though Framer isn’t my everyday prototyping tool, you must be aware that Framer isn’t meant to be used for creating production ready animations, only prototyping.

Some handy reading:

https://framer.com/features/handoff

https://framer.com/getstarted/guide

https://framer.com/pricing/2017

https://framer.com/getstarted/import

 

2. Adobe XD (Price: Part of the Adobe Creative Cloud Subscription / Win & Mac )

You can draw, reuse, and group vector and raster artwork to create wireframes, screen layouts and interactive prototyping with production-ready assets all from the same app (how cool is that!). Work with powerful tools like the Repeat Grid built specifically for XD, and with layers, symbols and pen tools for UX design. Add interactions using various animations to create transitions between artboards and stimulate the flow of the app (and even web design).

You can allow clients to make comments on the artwork itself when you share directly and view the project on real devices in real time. Although XD is still in Beta phase, it remains to be seen if it will stick around in the near future.

 

3. Adobe After Effects (Price: Part of the Adobe Creative Cloud Subscription / Win & Mac )

After Effects isn’t one of the first tools that will pop into your mind when you think web prototyping, but you’d be wrong. This is used to help prototype motion for you to show your clients how assets will animate on display. There are endless tutorials on YouTube which teach you this sort of thing but I personally love this when prototyping motion.

 

4. Principle (Price: $129.99 / Mac Only)

Principle makes it easy to design animated and interactive user interfaces. Whether you’re designing the flow of a multi-screen app, or a new interactions and animations, Principle lets you create designs that look and feel amazing. The app appears very much like the UI for Sketch including other familiar aspects for alignment, art-board creation and screen connections, plus real time previews. Click animation layers to dive deeper into keyframes and adjust custom easing curves just like you would in any other animation tools. Principle gives you the freedom to experiment without limiting you to pre-defined transitions, plus you can import artworks from Sketch as well.

 

In the end

No matter what tool you decide to use, choose the one that works for you and the one you feel most comfortable with. Leave a comment below if you’ve had experience with any of the tools, or other ones you’d recommend.