Developing the Invisible

Communication Design

Musings from the merger of medium and message

A column by Luke Wroblewski
May 8, 2006

During my years as an interface designer, I’ve worked with lots of different development teams. From big companies to small startups, the interactions between me—the product designer—and developers have been pretty consistent. We work through what interactions and features are possible given our timeframe and resources. We discuss edge cases and clarify how specific interactions should work. We debate product strategy, information architecture, target audience, front-end technologies, and more. We also frequently encounter the same issue: the need to consider what’s not there.

The way we get there is always the same. I work with the product team to balance user goals, business requirements, and technical considerations to create a product design. That design gets vetted, iterated, and ultimately documented.

Because I mostly work with fast-paced Web companies, I frequently have to create my design documentation under aggressive timelines. This means there is not a lot of time for creating detailed design specifications. Nor is there an opportunity for me to provide templates in HTML and CSS for every part of an application. So I turn over mockups and workflows—in the form of stories or task diagrams—to the development team. What I frequently get back is half of the design.

Champion Advertisement
Continue Reading…

By half of the design I mean that all of the features, content, and functions are there, and they are working as designed. So what’s missing? Isn’t that the complete product design?

What’s missing is what’s invisible: alignment and whitespace.



Figures 1 and 2 show examples of problems with alignment and padding in the implementations of designs. The original design appears on the left; the implementation, on the right.

Figure 1—Do you see the differences between these examples?
Differences between examples?
Figure 2—Another example showing differences in padding and alignment
Padding and alignment




Now before you decide I am a whiny designer just getting on the case of user interface engineers for not building exactly what I designed, let me say that I know what the engineering team does in bridging the gap between a product design and an actual product is invaluable.

But just like designers should know what is possible with HTML and CSS—or whatever happens to be their medium—and how to make their designs bulletproof, development teams should recognize that the space between and around user interface elements and the alignment of those elements may be just as important as the elements themselves.

I’d love to see more developers bring the skills and craft they apply to the construction of the visible to the construction of the invisible: padding and alignment. Once they learn to look for these things in a design specification or mockup, they’ll have a better sense of the designer’s intent. A shared understanding of what’s being built—whether visible or invisible—goes a long way toward making products that our users can understand. 

Product Director at Google

Speaker and Author at LukeW Ideation & Design

Silicon Valley, California, USA


Other Columns by Luke Wroblewski

Other Articles on Visual Interface Design

New on UXmatters