Tools We Like v2

A quick look at our favorite tools for building and prototyping

Published
March 21, 2014
Reading Time
5 minutes

When you’re crunching against a tight deadline to design a new-to-the-world digital experience, you do a lot of learning on the fly. One of the cornerstones of our design process at IDEO is that we build to learn. I’ve found I work more quickly and effectively prototyping in the browser itself.

The global community of web developers has made designing in the browser a decidedly efficient workflow by creating open source tools and frameworks that, after using for countless projects, I can’t imagine creating without. Here are a few of my favorites.

Responsive Front-End Frameworks

HTML + CSS toolkits that assist in the rapid creation of device-agnostic, standards-compliant websites, and prototypes

HOW I USE THEM

There are countless devices, screen resolutions and aspect ratios to consider when designing for the modern web. Responsive design is an approach to creating content that elegantly adapts, rearranging and resizing as needed for an ideal viewing experience on any device. Responsive front-end web frameworks — a collection of HTML and CSS files that provide a scaffolding upon which to design and build your content — have become popular solutions for their assistance in the rapid creation of device agnostic websites and prototypes.

Knowing your way around one of these frameworks can help you create an interactive, device-agnostic prototype in a fraction of the time that was once required. This axiom holds true whether you prefer a bare-bones framework such as Daniel Eden’s Toast, a module-based approach like Yahoo’s Pure, or a hugely comprehensive framework such as Mark Otto and Jacob Thornton’s Bootstrap or Zurb’s Foundation.

http://foundation.zurb.com/learn/features.html


Zurb’s Foundation 5 is a hugely popular and full featured responsive front end framework

WHY I LIKE THEM

Responsive front-end frameworks and their reusable components speed up design and development while ridding the process of many CSS cross-browser layout issues. This allows designers to focus more time and effort on content, styling, and interaction.

Responsive Patterns, developed & curated by Brad Frost

A collection of patterns and modules for responsive designs

HOW I USE IT

While I typically rely on tools like the above mentioned frameworks to quickly lay out a page, I love turning to Brad’s responsive patterns — a collection of common navigation, user interface and media components — both for reference (when designing user interfaces) and implementation (for less-used modules such as grid blocks and responsive media or tables).

Brad Frost’s library of common patterns and modules for responsive web design

Brad Frost’s library of common patterns and modules for responsive web design

WHY I LIKE IT

Brad includes a thoughtful write-up for each pattern and calls out its pros and cons. Often, he also highlights additional resources and instances of the pattern being used elsewhere on the web. Brad’s write-ups inform debate among designers during a project’s build phase, and his many, easy-to-incorporate patterns help developers quickly implement different approaches to user interface or interaction paradigms for user testing.

Demo: http://bradfrost.github.io/this-is-responsive/patterns.html

Source: https://github.com/bradfrost/this-is-responsive/

Intro.js, developed by usabili.ca

A step-by-step, guided tour for your webpage

HOW I USE IT

Intro.js guides users through a web page by visually highlighting active elements on a page when they require interaction. When I need to call out specific, interactive elements in an otherwise static prototype or instruct a desired sequence of actions in a user flow, intro.js is an ideal solution that can be added to a web page in no time at all.

IntroJS is a simple and effective way to add an interactive, guided tour to your page

Intro.js is a simple and effective way to add an interactive, guided tour to your page

WHY I LIKE IT

When we’re testing a particular user experience within a larger digital prototype, intro.js can be a more appropriate solution than accompanying documentation. The user requires only their smartphone, tablet, or laptop to interact with the prototype as instruction is served as needed to guide their way through the experience.

Demo: http://usablica.github.io/intro.js/

Source: https://github.com/usablica/intro.js

Utility Libraries

The following are several utility libraries I find hugely helpful in designing for tablet and mobile devices.

Quo.js, developed by Javi Jiménez

A JavaScript library, Quo lets developers quickly add gestural interaction and touch event handling to a web app.

Overview: http://quojs.tapquo.com/

Source: https://github.com/soyjavi/quojs

QuoJS

Quo.js adds gestural interaction to your web app

FastClick.js, developed by FT Labs

While the 300ms tap delay on mobile web apps is on its way out for Android devices, it’s still alive and well on iOS. FastClick.js does away with the delay on any element that does not require a double-click action, making your web app feel quicker and more reactive to user interaction.

Source: https://github.com/ftlabs/fastclick

Offline.js, developed by Hubspot

Every app will, at some point, go offline. Offline.js displays a visual indication to the user any time an app loses connectivity.

Overview: http://github.hubspot.com/offline/docs/welcome/

Source: https://github.com/hubspot/offline

 

I hope these tools give you a solid starting point for prototyping on the web. If there are any you think I’ve missed, or just want to talk shop, feel free to comment below.


Burton Rast is an interaction and software designer based out of IDEO’s Chicago office. He is currently outfitting drones with the RGBDToolkit and writing ‘Restored Stories,’ a daily storytelling project using photographs from the public domain. You can follow him on Twitter @misterburton and read his stories @restoredstories.