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.
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).
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.
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.
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.
The following are several utility libraries I find hugely helpful in designing for tablet and mobile devices.
Quo.js, developed by Javi JimÃ©nez
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.
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.
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.