Minimize the Language Barrier between Designers and Developers

Photo by Rob Lambert

In contrast to the developer’s language of code and software frameworks is the designer’s language of typography and information visualization. One session at the Windy City Rails 2010 conference that piqued my interest was by Ryan Singer, Product Manager and Lead UI Designer at 37signals. He talked about “Weaving Design and Development”. Sharing this post is colleague Graphic and Web Designer Robert Walsh who will also give his thoughts on Singer’s presentation.

What were the memorable takeaways?

Nate: Singer was gracious to spend some time afterwards. Connecting to one of the points in his presentation about designer and developers starting early, at the same, I told him that seeing working software at the get-go (or should I say “git-go”) is a sensation. Making ideas for an interface, no matter the fidelity, is great. But grounding the sketches, the wireframes, and translating them into a live iterative interface that’s interactive in a browser, on a mobile device, is huge. Designers having direct access to developers, and vice versa, helps a lot. It promotes proactive feedback, even continuous feedback—As Singer put it, “Realizing that something sucks and make it better.” This way, designers and developers escape flatland, from sketch to screen, together.

Robert: An underlying theme of his presentation, that I don’t think became explicit until the question and answer session, was that Singer had entered the ongoing debate about the necessary capabilities of web designers. To him, a designer should be able to work in the view templates throughout the life of the application. Therefore, the designer should be writing the HAML or ERB, CSS or SASS, and be in Terminal constantly pulling and pushing to GIT. I also noticed that it surprised the programmers in the room when he added that a designer should be comfortable working in Rails enough to write small snippets of Ruby in a view or create a helper when necessary.

I spoke with him after the session and I get the impression that he is of the population that thinks in the next 5–10 years or so there will be a generation of designers who grew up designing for the web and these will be the strengths that they have picked up over time by just being active creative citizens of the web.

What about the presentation’s style?

Robert: I thought that his opening story—while obedient to the practice of opening with an emotionally gripping story—was long-winded. The ‘aha’ moment comes at the end of the story and I think the fact that he took so long to get there kept the energy low initially.

More so, regarding style, his content and delivery were textbook “37 Signals iconoclasm.” As a designer, he had no reservations at bluntly saying HAML was unnecessary (to which a wash of gasps covered the room) or other things that seemed to go against popular opinion. Namely, the role of the designer in the process of creating a web application.


Photo by Nate Burgos

Nate: It was refreshing to see live digital sketching (above) to illustrate Singer’s lecture. With the black backdrop serving white and red strokes, I thought they were using their iPad app Draft but turned out to be a large canvas, perhaps Photoshop. The overhead projector has become more extinct. And starting a presentation with a relevant story is always a good method to gel all the key talking points, as long as the story is relevant, and even better when it has humor as Singer did in his telling.

In closure, when it comes to language, designers and developers work their native way of making something. Their respective languages can collide but they converge toward accomplishing a shared goal: a good product to help bring a good experience to people.

• • •

A version of this piece was published at the blog of custom software developer Pathfinder Development.

Designer’s Quest(ionnaire): OCD | The Original Champions of Design

Jennifer Kinon and Bobby C. Martin Jr. are the Founders of OCD, The Original Champions of Design. Their rebranding of the Girl Scouts of the USA caught my attention. The straightforward and bold qualities of this project is also evident in other examples of their work, such as New York City’s Bid for the 2012 Olympic Games. The same qualities are also apparent in their answers to the Designer’s Quest(ionnaire). Read their super-pithy take on design and designing.

• • •

The Designer’s Quest(ionnaire) is a Design Feast initiative that describes and captures a designer’s perspective in a succinct format. Read the previous Designer’s Quest(ionnaire) with Web and Print Designer Rebecca Wilson.

Thick Marker, Bold Sketching

Sketching user interfaces is a powerful exercise: it both reduces cost and nudges people to think more clearly. It’s fine to sketch on screen in order to design for the screen—but stepping away from digital devices can also be productive, and a welcome change.

My regular tool is a ballpoint pen. But I recently began using a marker—a Sharpie to be exact—in sketching user interfaces, as recommended by UI-Patterns.com’s Anders Toxboe and 37signals’ Jason Fried. At first I didn’t think that the thickness of each drawn stroke would matter, but it does.

Using a marker, which has a more substantial feel in your hand compared to a slim pen, helps make more decisive marks on paper, whether those marks constitute a wireframe, a page layout, a floor plan, a letterform, etc. And the weighty line can emphasize clarity of thought or expose the gaps in visualizing a concept.



An opportunity for vetting the marker’s merits came up recently, while discussing a user interface design with a co-worker. We used a marker to quickly render notions for a different screen layout. The contrast of the sketches helped guide discussion. Within a few minutes, we rendered another possible screen layout. The third and last sketch proved to be the most viable solution, which was then refined digitally.

The conclusion is not that markers keep to the big picture and fine-point pens hone in on the details. As a collaborator of mine said at the Getting Mobile App Real blog, “Don’t sweat about the tools.” Rather, it’s the importance of using what is comfortable to you. When it comes to sketching user interfaces, using a marker was an effective discovery. Of course, thinking is what always makes each bold mark count.

• • •

A version of this piece was also published at the blog of custom software developer Pathfinder Development.

Designer’s Quest(ionnaire): Web and Print Designer Rebecca Wilson

Rebecca Wilson runs her own studio called fivefourandahalf, design for web and print. As she put it, her business is “virtually a one person band.” I discovered her and her work through Artist Nigel Peake’s online portfolio which Wilson designed. The “individual and intuitive design” demonstrated here is also reflected in a variety of websites that fivefourandahalf realizes. Read her insightful take on design and designing.

• • •

The Designer’s Quest(ionnaire) is a Design Feast initiative that describes and captures a designer’s perspective in a succinct format. Read the previous Designer’s Quest(ionnaire) with Designer and Illustrator Wendy Marchbanks.