Enter your email address below to receive our monthly newsletter straight to your inbox.

July 2014

We know that many people use Foundation, or CSS framework, to quickly scaffold sites and apps while figuring out how to build their products. Prototyping is incredibly important to design. Rough builds help us work out problems before building. That’s one reason we’re adopting Flexbox as the layout grid in Foundation for Apps — it’s better suited to quick mockups with, well, app-like layouts. illustration of a wireframing transforming into a final product This month we look closer at prototyping: Practical case studies, tools and techniques, and best practice ideas behind this vital process. We also look at a few unique tools to help you plan responsive sites: ads, grids and moving beyond Photoshop.

Prototyping teaser

  • 1

    Why You Should Rapid Prototype Web Designs

    Quite the opposite of conventional wisdom, which suggests visuals in Photoshop last, Ballistiq CEO Leonard Teo offers advice on starting with Photoshop — then moving on in a hurry.

  • 2

    The FIFA World Cup Tracker

    The FIFA World Cup was more sophisticated than most people realize. At least, its mobile-optimized website was. This BBC article explains how the site used Flexbox and live statistics to keep fans informed any place, any time — any time zone.

  • 3

    How to Sell a Responsive, Adaptive Atomic Design Process

    You can use prototypes to persuade clients along a certain path by thinking in discrete units.

  • 4

    How to Get Started With Next-Generation Website Prototyping

    Treat product design as a “space” in which elements change rather than a series of distinct pages. That’s the advice offered in this WebdesignerDepot post. It’s no longer about page layout, but creating a flexible, interactive environment in which users maneuver.

  • 5

    Designing in the Browser: An Efficient Route to Responsive Design

    Processes become established for a reason, namely, they make us faster and more reliable. But when we go through motions out of habit, it’s time to ask if we’re building interactive prototypes themselves as best we can.

  • 6

    The Value of Iterative User Research and Rapid Prototyping

    User-testing prototypes are no brainers, according to this Effective UI article. And the better our prototypes are, the more accurate — and useful — feedback will be. But at what point do we spend too much time building prototypes at the expense of the final product?

  • 7

    How to Use Keynote to Rapidly Prototype and Visualize Applications

    Not every tool is best used for its intended purpose. Keynote’s transitions and ease of use make it ideal for quick-n-dirty prototypes that look neither quick nor dirty.

  • 8

    Google’s New Web Starter Kit is a Boilerplate for Multi-Screen Web Development

    Google’s had no qualms offering advice to designers on how to code and optimize their sites. Their page speed checker and analytics are great Now they’ve gone a step further by providing a HTML/CSS framework for getting started … the Google way.

  • 9

    The Problem With Ads on the Web

    Websites are not superbowls: Very few people enjoy visit a site for its ads. It doesn’t help when the ads are poorly suited for a given viewport. Even in mobile-optimized websites, most regularly-sized banner ads look hopelessly out of place. And that was true, until recently.

  • 10

    Get Your Hands into Responsive Web Design

    Our first 10-week Responsive Web Design course starts in September. Join us and actively learn the ins and outs of responsive design in this series. You’ll get hands-on experience and direct feedback from the product designers at ZURB who design responsively daily.

Stay on top of what's happening in responsive design with Responsive Reading.

Curious? Read Last Month's Edition »

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in