Design Adaptations

The primary objective of design is communication. Your site may serve many functions but above all it must say something. To ensure your site delivers the intended message, it makes sense to ask “what do visitors want and how can I make it easy to find?” While some answers are predetermined by a site’s niche (i.e. product sales vs service selling, tutorial writing vs photo blogging), this article offers suggestions on how you can use design flourishes to create a natural draw to what is most important – both to you as a provider and to your consumers.

Use Whitespace to your advantage

Space and proximity are very important in any form of visual communication. Without them, you just have clutter. All the care you put into creating a color scheme, typographic treatments and custom graphics won’t get more than a glance unless it can be processed. Elements with room to breathe are easier to identify, read and often give weight to their importance. Andrew Bradshaw, who has done some amazing work for Christian organizations, employs this tactic on his portfolio site. Liberal use of space and carefully balanced elements give the site a very clean appeal.

More examples with good use of whitespace and proximity:

• Oaktree Creative | Pixel Umbrella | Tunnel7

Emphasize with typography

Elements that appear larger than their surrounding counterparts stand out. Take a look at Envato’s AppStorm. They use big bold titles (supported by a subtle horizontal rule and much smaller meta data) to separate and call attention to individual articles. A brief but sizable main navigation is also prominently displayed and by keeping that simple, they’ve guided the choice visitors can initially make – but without removing any options they know people will be looking for.

More examples of this technique:

• Pixelcraft | Chama Inc. | Big Spaceship

Don’t be afraid of color

Bold or bright colors can signal importance and/or effectively set things apart, as demonstrated by Wufoo. Yes, the whole site is a feast of color but selective use of it to encase the finer points of their product indeed draws the eye and there’s no question about what you can do there. Such heavy use of color can be risky, but in many cases it’s the perfect compliment to the material being featured. Particularly in this instance, people definitely remember Wufoo by its vibrant colors.

More examples of attention-getting color in design:

• Chris Spooner | Cork’d | Silverback

Add texture or light (or both!)

Texture and light are two timeless ways to create interest in a design. Texture can signify drama, whimsy, tranquility, age… the possibilities are limitless. Light (or shadow) can add depth, create a specific mood or bring meaning to an element, as seen on Pixelight Creative. The lighting (combined with a pixelated background texture) not only illuminates the logo, but actually symbolize it.

More cool examples of light and texture

• Matt Dempsey | Junaid Hanif | Mike Precious
  

Use Geometry

Geometric shapes, lines or patterns (especially those with dramatic tones) can also give elements a distinction. Blogger and Woo Themes co-founder Adii exemplifies this on his personal site. He used dark, contrasting lines to spotlight his brand, the self-proclaimed rockstar persona. The position and directional flow of the lines also effectively lead the users’ eye on down toward the content.

More examples of geometry for emphasis or movement:

• 31Three | Mozilla.com | Line25

Iconography does wonders

Icons are to web design what garnishes are to tropical drinks. Imagine this design without them. Such a dark style would be rather lifeless without some kind of imagery. But with the right selection and placement of icons against the dark background, GoodBarry was able to highlight the features of their product while enhancing the design.

More examples of clever iconography:

• Vimeo | Coda | EventBox

Examine the overall composition

Sometimes a site can be quite engaging just because of the way information is organized and presented. One of the most attractive and unique examples I’ve seen recently that can illustrate my point is Squared Eye. The design utilizes almost every aspect covered in this article (barring icons). It’s colorful and fun, well spaced and balanced, has a terrific sense of typography and even incorporates very subtle patterns and lines for separation/emphasis. As designers we sometimes focus so intently on the details that we forget to look at the bigger picture we’re painting. Stepping back to examine your layout and whether elements are appropriately relating to one another can ensure your design gets the attention it deserves.

In Conclusion

A design must strive to accomplish two things: 1) funnel visitors toward what they want and 2) promote the site’s goals (hopefully without impeding the former). Every color, image and body of text should have a purpose and work together to form a cohesive unit… a basic concept. Remember, people come to you for a reason. Consideration of what your objective is vs. what their expectations are will help guide your design decisions, and any of the techniques above can be used to effectively communicate what you have to offer.