Top

Common Visual Design Misconceptions

Communication Design

Musings from the merger of medium and message

A column by Luke Wroblewski
November 3, 2008

Recently, I had the opportunity to reflect on common misconceptions about the role of visual design that are still prominent in the beliefs of executives, product leaders, engineering managers, and marketing professionals. Is there anything team members can do to illustrate certain beliefs are wrong? What could they do to demonstrate the truth about visual design to coworkers and stakeholders?

Though visual designers might face different hurdles in particular product domains and at different points in their careers, there are three common misconceptions that surface quite frequently:

  • Visual design is about making things look pretty.
  • Making things pop more can improve visual design.
  • It’s possible to evaluate visual design in pieces.

Champion Advertisement
Continue Reading…

Visual Design Is About Making Things Look Pretty

While few people literally ask a design team to make things look pretty, there is a long-standing assumption that visual design is the icing on the cake. That it’s the last step that puts a bow on the product and makes it look attractive.

Perhaps this belief stems from the general public’s introduction to design during the industrial age. Back then, products began to be styled in ways that had not been possible before, and industrial designers like Raymond Lowey got immense fanfare for their aesthetic approach to designing previously dull products.

While visual design clearly has the capacity to refine a product’s aesthetics, its potential to communicate with people goes beyond good looks. Through the visual organization of elements, designers can communicate core messages to people that answer key questions:

  • What is this?
  • How do I use it?
  • Why should I care?

Answering these questions is a crucial component of both utility and usability, especially in interactive products. Perhaps the best way to illustrate this is through an example.

Figures 1 through 3 depict the same basic set of features for a Web application, using the same fonts, colors, gradients, and images. The main difference between the three designs is the visual organization of the elements on the screen. This distinction illuminates three possible different primary uses of the application.

Figure 1—Sample Web application design
Sample Web application design

In Figure 1, the application’s presentation layer makes it clear its primary function is looking up customer contact information. Secondarily, a user can edit, delete, or supplement this information with notes. In Figure 2, the emphasis is on the communication between the customer and the company. Secondarily, a user can view, edit, and delete contact information.

Figure 2—Same Web application with a different visual organization
Different visual organization

Lastly, Figure 3 puts the focus on the ability to edit customer information. Viewing contact information and tracking ongoing conversations are de-emphasized.

Figure 3—Yet another approach to the same Web application
Another approach

These three variations of the application’s visual organization provide unique primary actions: looking up contact information, managing ongoing customer communication, and maintaining customer records. In each case, the more visceral aspects of the visual design have remained the same: colors, fonts, gradients, and images.

Clearly, the visual design is doing more than making this application look pretty. It is communicating the application’s core function—What is it?—and how to make use of that functionality—How do I use it?—while also making the application aesthetically pleasing.

Can You Make This Pop More?

As evidenced by the popularity of sites like make my logo bigger, stakeholders often ask visual designers to give more emphasis to certain elements in their layouts. While these kinds of comments can sometimes help us to determine what the most important elements in a design are, they often illustrate another common misconception about visual design: To improve a Web site’s visual design, you need to be make some things bigger, bolder, red, or in some cases all three!

However, the relative importance of any element in a layout ultimately depends on what surrounds it. Place a big red circle on a white page, and it will get a lot of attention. Place it next to ten pink circles, and it won’t. Therefore, emphasizing important elements is a process of managing a holistic design. It’s not about changing the treatment of any single element. Giving individual elements additional visual weight can throw off a layout’s balance and muddy important relationships between related elements, primary actions, and more.

If you complied with every stakeholder request for a feature to pop more, chances are you’d end up with a layout in which every element was vying for customers’ attention—and, as a result, none of them would get it. Consider the difference between the two designs for a Web browser download page shown in Figures 4 and 5. The Firefox page has a prominent call to action for downloading the browser, and the other elements on the page—for Thunderbird, the Mozilla store, and what’s new—are not interfering.

Figure 4—Firefox download page
Firefox download page

The Flock download page, shown in Figure 5, emphasizes so many different elements that the team decided to include four calls to action for downloading the browser—in the upper-right corner, at the bottom of the menu on the left, at the upper right in the horizontal panel of news, and in the footer. If there wasn’t so much emphasis on other elements on this page, Flock could probably get away with having just one download button like Firefox does.

Figure 5—Flock download page
Flock download page

It’s Possible to Evaluate Visual Design in Pieces

The factors that make it challenging to emphasize individual elements in a design without looking at things holistically also make isolated changes difficult. Yet most feedback to visual designers focuses on elements in isolation: Can you make the logo bigger? Can you change the color of this headline? Can we try a different image here?

While such comments do help designers understand what clients and stakeholders are hoping to achieve, they don’t consider the holistic approach that’s necessary for good design. Changing a color might require rethinking the entire palette, which the designer has tuned to ensure contrasting colors highlight key actions. Changing an image might mean shifting other elements around, because the focal point the original image created may no longer exist. And so on.

A product’s overall visual design results from a deliberate balancing of elements—to communicate key messages about the utility, usability, and desirability of the product. So, when a designer adjusts one element, she needs to refactor the overall composition to restore balance. Design decisions made in isolation tend not to add up to a coherent whole.

Web-based products are especially vulnerable to evaluation in isolation. Because it’s possible to test individual components independently, a product team often integrates things that performed well on their own, with the assumption that they’ll work well together. Figure 6 shows a possible consequence of isolated decision-making.

While it is probable that the header on this eBay page performed well in bucket testing, the PayPal protection logo got good marks in focus groups, and the photography promotion got decent click-through, combining these three elements on one page does not create an effective design. In fact, many of the elements on this page seem to compete with each other.

Figure 6—eBay Italy home page
eBay Italy home page

Hopefully, these examples have demonstrated truths that belie some common misconceptions about the role of visual design. But convincing coworkers and stakeholders that visual design is about more than just styling, making things pop, or making isolated decisions may ultimately require a personal experience that gives them a first-hand view into the potential of visual design.

If you’ve encountered any misconceptions about the role of visual design in your professional lives—or if you’ve had good experiences that demonstrate the truth about visual design, share them in the comments below! 

Product at Google and Speaker and Author at LukeW Ideation & Design

Silicon Valley, California, USA

Luke WroblewskiAn internationally recognized digital product design leader who has designed or contributed to software more than 700 million people use worldwide, Luke is currently Chief Design Officer for the newly launched startup Bagcheck. He is also an Entrepreneur in Residence (EIR) at Benchmark Capital and speaker and author at LukeW Ideation & Design. Before embarking on his entrepreneurial career, he was Chief Design Architect (VP) at Yahoo!, where he was responsible for product alignment and forward-looking, integrated customer experiences on the Web, mobile, and TV. Formerly Lead User Interface Designer on the platform team at eBay, Luke led the strategic design of new consumer products and internal tools and processes. He got his start at the University of Illinois, where he taught graduate interface design courses and worked as a Senior Interface Designer at the National Center for Supercomputing Applications, birthplace of NCSA Mosaic. Luke is the author of two popular design books: Web Form Design: Filling in the Blanks and Site-Seeing: A Visual Approach to Web Usability, as well many articles about digital product strategy and design. He is a top-rated speaker at conferences and companies around the world and a cofounder and former Board member of the Interaction Design Association (IxDA).  Read More

Other Columns by Luke Wroblewski

Other Articles on Visual Interface Design

New on UXmatters