Read between the Lines

Why is it that the design does not look like you expected? You gave a picture of what you wanted. What you got back was exactly the things you asked for but … it just does not look the same.

What don’t they see? Why can’t the developer get the UI just right?

Luke W believes it is all in the whitespace:

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

Often, user interface elements are not aligned. What’s centered in the design doesn’t appear that way in what’s implemented. What was vertically or horizontally aligned in the design appears ragged.

Padding, or whitespace, often fares worse. In some places, padding is gone; in others, there is too much. Padding is set to different values, leading to columns and rows of varying widths. Changes in padding and alignment can negatively impact readability and obscure visual relationships that clarify how to use an interface.

Why is this the case? It’s not that the developers deliberately modified the design. It’s not that they necessarily consider alignment and whitespace to be unimportant. It’s just that these elements in the user interface are often invisible to them.

Development teams are responsible for putting interactive features and content into a product. Empty space is neither feature nor content. Therefore, it is not a requirement. For a designer, however, whitespace is often just as important as the content.

As a designer, I spend a lot of time adjusting whitespace to enable effective scanning of content. I also spend a lot of time refining alignment and padding to establish the right prioritization between user interface elements. I utilize both of these design elements to guide users through the interactions on a page. I use them to communicate what’s most important, what’s related, and what needs attention. For designers, these are key requirements of effective communication. And yes, there’s a lot of evidence that shows what’s invisible does make a difference. “

Here is the article:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s