Orchestrating Communication In Design
The web is a dualistic space that combines rhizomatic user navigation on the macro level with imposed hierarchy both in the markup and in the visual design. Unlike print design, in web design, all information, all content, is inherently weighted by it’s tag, making all h1′s, all h2′s, all paragraphs, etc. visually equal to others of its type. Thus, it is up to the designer to communicate order and hierarchy. Effective communication design for web must account for the user, who is only one click away from being somewhere else.
The user can travel throughout many sites, and many pages within one site, quickly and in innumerable ways. This infinite possibility on the part of user interaction is the very core of what makes web design different. There is no one path, and we cannot assume that every user has the same end objective. One must accommodate the meandering tourist as well as the user who has a purpose. Designing a website is about creating a visually meaningful way for the user to navigate to the desired content, browse, meander. And thus our approach to communication design must accommodate a user who has no inherent reason to stick around.
A web designer is not here to decorate the page, but rather to orchestrate the user’s actions. He or she is the architect that designs this structure and the content it holds with the purpose of making it not only accessible for many types of foot traffic, but comprehensible to the end user.
The Aesthetics of Good Communication Design
It is the job of the designer to visually communicate many things to the viewer all at once in a way that is easy to take in. A good design balances the branding of the site with navigability, and structured content that allows for surface level skimming and browsing, which in turn can lead to deeper reading or more pointed exploration. Visual hierarchy, legibility, and predictable navigation are key to allowing the user to have not only an aesthetically pleasing experience, but one which is gratifying.
The first impression of the site is one which will either result in an immediate bounce or further exploration. If a person cannot wrap their head around your site and why it’s there, they’re likely to just ditch out without giving your site a second chance. That is why immediacy is of the essence here.
Upon landing on your site, you want the user to immediately have a solid grasp on three fundimental things:
1. I am “Here” (insert company name, or branded entity).
2. Here is “This” kind of site (replace “this” with web application, e-Com site, corporate brochure, blog, online magazine, whatever….)
3. On “This” site, I will find X Content
Start With The Structure:
Form follows Function: the old modernist credo continues to resonate – start with identifying the function, build the form to frame in that function, and then build the rest of the site design on top of that architectural framing. It’s a simple thing, but one which is frequently forgotten by novice designers eager to jump straight into the graphics and impress. Taking the time to create a wireframe and identifying the best way to lay out content can mean the difference between a logical, easy to navigate design and one which is muddled and confusing to the user.
While every designer seeks to create a design which is memorable for the viewer, it is important to remember that there are best practices that are in place for a reason. A logical layout with it’s core components – header, footer, columns – should not be abandoned in favor of “breaking the box.” Many have tried to break the box model, few have come up successful.
Jeffrey Zeldman articulates my point here nicely in his article, Understanding Web Design (A List Apart):
The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging.
Not only does this simple 2 sentence statement sum up and reinforce my point here, but says it better.
The beauty of keeping a logical, familiar layout is that you don’t have to reinvent the wheel. If I replace the wheels on my car with square blocks, the damn thing wouldn’t go. For the same reason you shouldn’t ditch your tires just yet, a “box model” layout with a header, footer and columns in between works better than some breach in the normal, functional structure.
Branding: Informing with Aesthetics:
If a sound structure is key to providing a logical ordering for the site’s content, the branding of a site is at the heart of creating a memorable experience for the user. Consistency in the look and feel, repetition of symbolic elements, use of color and type not only remind the viewer where they are, but set the stage for a meaningful experience. Aesthetics frame not only the site itself, but the content both on a micro and macro level, and is key to repeat users.
While sticking the logo at the top left of the site and carrying through the branded color pallet is a good place to start, it is not enough to truly create a memorable well-branded experience. Finding the subtle opportunities to reinforce the brand is essential. Custom icons are an excellent way to remind the user of where they are throughout their experience on your site (for more on this check out my previous article, Icons: Balancing Legibility with Branding Initiatives). Graphic illustrations, photo treatments, type, and type embellishments (like custom graphics for bullets on lists) are also excellent places to reinforce the brand. The more you can subtly create branding reminders, the more your site will be etched in the user’s subconscious.
And Now, the Finishing Touches…
Once you’ve got the strong structural foundation and the main treatments hammered out, finer attention to detail can be employed sparingly. The tiniest treatments make all the difference between a good design and a great design. Embellishments, be they ornate or something as simple as a black 1 pixel underline, can put the finishing touches on the content design. These are not mindless decorations, but rather seek to further emphasize areas of the page, direct the eye, move the user around the content in an ordered and subconsciously informed manner.
It is important to remember however, that a little goes a long way, especially when adding embellishments and details to enhance the design. An overdone design can distract from content, and thus throw a wrench in the communication aspect. That is not to say that minimalism is key to clarity in all situations, but too often a design that is overwhelming can actually work against the purpose of framing content, or can frame it all too equally.
Knowing how to create visual hierarchy by balancing areas of intensity and emphasis with simplicity and descending levels of importance is essential to effective communication in design.
In a world where users are only one click away from going away, a logical and enticing design that frames the content in a cohesive manner can give them reason to stick around a little longer. That’s your roll as the designer. After that, it’s up to the content to not suck….
