My prototyping tools for web design

Almost every prototyping tool for interactive digital design is focused on mobile apps. Sure, you can create large desktop web prototypes, but they are not ideal. You could argue that we shouldn’t create prototypes for desktop, since the biggest platform is mobile, but I’m not only talking about large desktop views: simple animations, micro interactions, hover effects and scrolling effects, are things that begs for prototyping.

I normally have two different needs when prototyping for the web:

Prototyping interactions and animations

I want to easily have a page with mouse and touch scrolling built in — just like the browser. I want to easily add taps/clicks and hover/focus states. And I want to prototype for responsive designs if possible. Basically I want a playground type web browser for prototyping interactions and animations.

I tend to end up either in Webflow or Framer. Framer is very geared towards mobile, but the Sketch import feature is really valuable. In my experience there’s many round trips to and from Sketch, when prototyping interactions and animations.

Framer is great for medium to high complexity interactions, that often need interactions mapped to gestures, or other programmed behaviors. It can create some stunning prototypes.

Side note: The only thing I don’t like about Framer is that it uses CoffeeScript — the slightly odd language that complies into JavaScript. I think Framer is doing themselves a disfavor by using CoffeeScript, and in effect, learning a lot of people new to code, a variant of JavaScript that I think the rest of the developer community is moving more and more away from. Learning plain JavaScript, especially with all the good stuff in ES2015, is no harder than learning CoffeScript. And you get the added benefit of knowing plain JavaScript. With that, you can build things with, for instance, React and target all sorts of crazy platforms.

This is also part of why I think Facebooks Origami is not the way to go for web prototyping. It uses specific mobile OS interactions and animations, and you can’t use the patches for anything else. My point: Just Learn JavaScript™.

For building prototypes that doesn’t require a lot of design from the start, I mostly use Webflow. Webflow is an underappreciated tool, in my mind. It’s really easy to get started, it feels like any other traditional desktop design tool. I like to test out small micro interactions like button effects, image hover effects and build in sequences. You can easily copy-paste elements and components, and try out several different things in the same view — which makes it fun to play around with and make decisions.

The best part of using Webflow is that you get a one-to-one experience of what the finished thing will feel like in the browser. There’s no native animation library or custom effects, it’s good ol’ CSS and JavaScript straight in the browser.

Webflow also teaches you to think more like a front end developer, because you build up components with divs, sections, anchors and other HTML elements — and you use simple CSS properties to transform the elements.

Prototyping user flows and content structure

One word: Speed. I want to quickly mockup pages, layouts, forms etc. in Sketch, and quickly get them into a prototype for adding navigation, transitions and other actions like clicks and taps. These prototypes can be much more static, they’re for getting the big things right.

There’s currently one king on the block for this type of work: Invision.

Invision are doing really great work on improving the design experience. They’ve created the Sketch plugin Craft to easily sync artboards to Invision for further work. (The plugin can do other things as well. Try it out!)

After I sync artboards from Sketch I add hotspots for navigation to prototype content and flows. I try to do this as simple and quick as possible, so I rarely use any animated transitions. To make it a little less static I do basic things like sticking a header or footer, but not much more.

One thing I really like about Invision is that i forces you to create all the screens and states you’re designing. It’s so easy to just add a meny item or a button to open a shopping cart when designing in Sketch, without giving it a second thought. But when you start to add navigation to your screens in Invision, and things are clickable, you need to make everything clickable and that the clicks end up somewhere, or else it’s confusing for your prototype testers.

Transitioning to production ready products

The biggest point of prototyping is to find the best solutions to user experience design problems. The second biggest point is to more easily show and communicate what the finished thing should feel and look like to your team developers. It’s vital that nothing is lost when transitioning to production code.

By prototyping both interactions and animations, and flows and structure — you are making it more likely that nothing gets lost, and the end product is much better, than if you didn’t.

Try out some simple prototyping, and I think you’ll be amazed of how fun and easy it is.

Like what you read? Give Fredrik Søgaard a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.