“You don’t design something like Facebook Home using Photoshop”

Prototyping

How can we talk about physics-based UIs and panels and bubbles that can be flung across the screen if we’re sitting around looking at static mocks? (Hint: we can’t.) It’s no secret that many of us on the Facebook Design team are avid users of QuartzComposer, a visual prototyping tool that lets you create hi-fidelity demos that look and feel like exactly what you want the end product to be. We’ve given a few talks on QC in the past, and its presence at Facebook (introduced by Mike Matas a few years back) has changed the way we design. Not only does QC make working with engineers much easier, it’s also incredibly effective at telling the story of a design. When you see a live, polished, interactable demo, you can instantly understand how something is meant to work and feel, in a way that words or long descriptions or wireframes will never be able to achieve. And that leads to better feedback, and better iterations, and ultimately a better end product. When you are working on something for which the interactions matter so greatly—in this case, a gesture-rich, heavily physics-based ui—anything less simply will not do.

The Best Framework for UX Prototyping in HTML | capcloud | Martin Polley

Prototyping

“But if I was starting from scratch and trying to decide which one to use today, I’d probably discount Skeleton because Bootstrap and Foundation both provide so many useful extras. Using the provided components is much faster than reinventing the wheel and doing it yourself.

What it really comes down to is this: Can you live with Bootstrap’s style-heavy approach? And will the same framework be used in production? (This may not be your decision to make…) If so, then it’s more work (not for you, but still) to override Bootstrap’s styles to make it look the way you want.”

Exploring the Problem Space Through Prototyping

Prototyping

“Let’s start using the terms ‘prototype’ and ‘mockup’ to mean different things. In my opinion, they talk about different ends of the problem.

A mockup shows us a possible solution. It asks the question, “What do you think of this direction for our design?” Whether the mockup is a sketch or a fully-rendered interactive experience, it’s looking at whether the ideas contained would be a good solution.

Prototypes are different from mockups. They don’t focus on the solution, but on understanding the problem. They ask the question, “What happens when we try this?” Maybe we learn it’s the right idea, but more likely we learn something about the problem we didn’t know before.”

Read more on uie.com