Breaking Development: Prototyping Style

by Luke Wroblewski July 22, 2013

In his presentation at Breaking Development in San Diego CA Ben Callahan shared how static drawing tools and browser prototyping can work together in a responsive design process for the Web. Here's my notes from his talk on Prototyping Style.

  • Linear workflows force you to make decisions before you have all the data you need. Hand-offs between disciples require people to tidy up their deliverables and get approvals on discrete parts of a project in isolation. This doesn't lead to a good overall experience.
  • A one deliverable workflow is focused on the final state: the one deliverable we all have. Instead of thinking in a linear fashion, think in terms of a spiral of iteration.
  • A 1 deliverable workflow is centered around iteration. That requires collaboration -you can't work in isolation.
  • Wait for the last responsible moment to make a decisions. Make choices when you have the right information.
  • Iterative, spiraling processes can sometimes conflict with organizational structures.
  • Everyone on the team needs to let go of their egos and focus on making the right experience.

Implementing Designs

  • There's two parts to implementing a design: establish the aesthetic and refining the solution.
  • Establish the aesthetic: how are we handling colors, images, typography for the client's brand.
  • Refine the solution: we rarely stop designing and always want to make things better. A long tail of refinement can make a project drag on too long.
  • Style comparisons allow you to work through high-level preferences for an online brand. Let people pick between light vs. dark, illustrations vs. photos, flat vs. textured, etc.
  • Style tiles are another way to quickly explore an aesthetic. Colors, fonts, and images can help set the right direction early on in a product lifecycle.
  • Style prototypes bring style tiles into the Web browser so people can see the way Web fonts will render and how colors will actually look on a display.
  • Establish expectations early so the team is on the same page early on.
  • Ask clients to view these style prototypes in the browser of their choice. This opens up conversations about how they will experience parts of the site right away.
  • We're trying to determine how to design for this medium. What kinds of traditional drawing, new responsive, and coding tools should we be using?
  • Individual components need to work well together. You have to look at the big picture design as well as atomic elements.
  • You best solve problems using tools you are already fluent with. In order to get better at something, we often have to tear down what we already know.
  • We go through four different stages of learning something new: unconscious incompetence, conscious incompetence, conscious competence, and finally unconscious competence. This if the path toward fluency.
  • When refining your solution, do not use static design tools. Instead switch to the final medium as soon as you can so your refinements are happening where they will end up.
  • Design pairing allows you to team designers with developers as they build out and refine an interface.
  • You can design your workspace to encourage pairing: leave open seats at tables for others to come and collaborate.
  • Be really explicit about when you make the switch from static designs to dynamic prototypes in the browser.
  • Group improvisation requires individuals on a team to be humble. You have to be able to receive feedback in order collaborate.
  • Have empathy for what your peers are going through on a project.
  • Create guidelines instead of rigid processes. Who knows how our industry will change. Invest in people instead of processes.
  • Don't worry about how to get things done. Invest instead in the people who are getting things done.