Link tags: prototype

19

sparkline

Notes on prototyping – Ben Frain

Good tips on prototyping using the very materials that the final product will be built in—HTML, CSS, and JavaScript.

The only thing I would add is that, in my experience, it’s vital that the prototype does not morph into the final product …no matter how tempting it sometimes seems.

Prototypes are made to be discarded (having validated or invalidated an idea). Making a prototype and making something for production require very different mindsets: with prototyping it’s all about speed of creation; with production work, it’s all about quality of execution.

Steve Jobs on Prototypes - Snook.ca

I’ve thought often of how our design and prototyping tools for the web are often not of the web. Tools like Photoshop and Sketch and Invision create approximations but need to walk the line between being a tool to build native apps and to build web apps. They do well in their ability to quickly validate designs but do little to validate technical approach.

Saving Your Web Workflows with Prototyping · Matthias Ott – User Experience Designer

A well-written (and beautifully designed) article on the nature of the web, and what that means for those of us who build upon it. Matthias builds on the idea of material honestly and concludes that designing through prototypes—rather than making pictures of websites—results in a truer product.

A prototyping mindset means cultivating transparency and showing your work early to your team, to users – and to clients as well, which can spark excited conversations. A prototyping mindset also means valuing learning over fast results. And it means involving everyone from the beginning and closely working together as a team to dissolve the separation of linear workflows.

The work I like. — Ethan Marcotte

Ethan’s been thinking about the trends he’s noticed in the work he’s doing:

  • prototypes over mockups,
  • preserving patterns at scale, and
  • thinking about a design’s layers.

On that last point…

The web’s evolution has never been charted along a straight line: it’s simultaneously getting slower and faster, with devices new and old coming online every day.

That’s why I’ve realized just how much I like designing in layers. I love looking at the design of a page, a pattern, whatever, and thinking about how it’ll change if, say, fonts aren’t available, or JavaScript doesn’t work, or if someone doesn’t see the design as you and I might, and is having the page read aloud to them.

What design sprints are good for — Cennydd Bowles

Cennydd enumerates what design sprints are good for:

  • generating momentum,
  • highlighting the scope of the design process,
  • developing the team, or
  • provoking core product issues.

And also what they’re not so good for:

  • reliable product design,
  • proposing sophisticated user research,
  • answering deep product-market fit questions, or
  • getting the green light.

Designing for new digital rights

A series of quick’n’dirty prototypes to illustrate some of the design challenges involved in handling personal data:

If we don’t start exploring what the General Data Protection Regulation means for people, the same thing that happened with the cookie law will happen again.

These new rights have the potential to improve how our digital products and services work.

How to prototype in the browser | GDS design notes

This is a clever quick’n’dirty way of prototyping iterations on an existing site using dev tools and screenshots.

thoughtbot/design-sprint: Product Design Sprint Material

If you’re intrigued by the kind of design sprints I wrote about recently, here’s a handy collection of resources to get you going.

Responsive IA: IA in the touchscreen era - Martin Belam at EuroIA

A really terrific piece about wireframing for responsive designs. Again, it’s all about the prototypes.

Prontotype :: Data-driven interactive prototyping framework

Mark has put together this rather excellent prototyping tool. It’s basically the V from an MVC system. You can easily move stuff around, change data …all the good stuff you want to do quickly and easily when you’re prototyping in the browser.

Long Now image - Photos: The 10,000 Year Clock - CNET News

Pictures of some prototypes of the clock of the Long Now.

The Paper Version of the Web at Deeplinking

A nice collection of sketches and paper prototypes.

AJAX Libraries API - Google Code

Google is now hosting all the major JavaScript libraries. The caching benefits should be good news for your users.

The Plumen Project

A new twist on the lightbulb.

A List Apart: Articles: Paper Prototyping

A great hands-on article on the benefits of playing with paper.

rikrikrik: Wasted Javascript

How much page weight is being wasted on JavaScript. It's time to shed those pounds.

Infovore : <%= javascript_include_tag :defaults %> considered harmful?

A cautionary note to Rails coders from Tom. The default JavaScript includes can really add to your page weight. Only include them if you really need all of them.

The JavaScript Library World Cup [JavaScript & DHTML Tutorials]

Dan Webb does an excellent job of comparing the big four JavaScript libraries that were discussed at @media.