Tips and Tools for Designers

The task of prototyping a website is an extensive process of creating a basic wireframe with interactive features. While a wireframe may be static images or sketches, a prototype is often interactive with functionality for all the major pages.

Graphic editing programs have always been the most popular choice for prototyping. But in recent years more developers are switching to in-browser prototyping. It’s much faster, cleaner, and simpler when constructing a brand new project. But how do you get started?

In this post I’d like to cover the basics of prototyping in the browser and give you some tools to help you along the way.


Basics of In-Browser Prototyping

Websites can be described as digital interfaces built to run in a web browser. Many designers like to create these interfaces in graphics editors before moving on to coding.

But it makes more sense to prototype websites in a browser to see how each feature works, and to gauge initial concepts like layout structure and page animations.

There is no single best way to prototype although most designers have their own routines for getting started on a new project. Many designers still prefer to start in Photoshop, but starting in the browser has many advantages.

  • Easier to test & change grid systems
  • Breakpoints can be added on a whim
  • Dynamic effects like dropdown menus can be tested live
  • You start with a small codebase and slowly add more as you go

Photoshop doesn’t allow you to dynamically interact with a mockup. This is also true for responsive breakpoints where you’d need to create individual documents or layer groups for breakpoints.

Ultimately browser prototypes are a more accurate representation of the final interface. Mockups and sketches are flat and static. These are still valuable assets, but eventually you’ll need an interactive layout. This is why browser prototyping saves a lot of time.