It usually doesn’t go this way.
Our designers are responsible for writing the HTML and CSS behind their designs, a practice that keeps Photoshop artists honest. Or at least practical. But with only 24 hours from start to launch, today’s sprint to design the 25th Anniversary microsite calls for a less traditional approach.
Our design process calls for iterations of low-fi before leading into high-fi comps, both of which happen before anyone touches code or Photoshop. Today the lines between low and high weren’t as clear. There was a lot of overlap, made possible because everyone used a common framework, each other, and the ticking clock.
The designers broke into two teams: front-end coders and visual designers. With ideation sketches in hand, the code-writing team took a breakout room downstairs while the visual team took desks among the pods upstairs. Then ZURB Designer Ghaida noticed the visual team inventing interfaces that didn’t quite jive with what the her fellow coders thought was coming.
Ah … no.
Ten minutes later both teams were bumping elbows in the open space upstairs, comparing notes to make sure that everyone was facing the same goal. And they kept at it all afternoon.
The designers created coded, responsive wireframes — mockups of exactly each screen would show, and when, and how. Foundation, our CSS framework gave everyone a common visual layout on which to base their work. The visual designers began developing pixel-precise comps that matched the brand.
It all lead to a strange process. One team gave the other wireframes. The other team gave visuals back. It may seem redundant, but this back-and-forth teamwork allowed both groups to stay in sync and, more importantly, aligned to goals that fit the project.
