Insights into the purpose and effect of physical elements, design, and layout of web pages …and why clients should let designers handle design.
The left-to-right and top-to-bottom real estate that fills the browser window on a computer monitor is a very delicate and treacherous space. While this idea rings true in a host of contexts, it is especially true for web designers and the individuals and companies that hire them.
The task of designing a web page and/or website to work properly for the client’s aims, the client’s purpose, the client’s identity, and especially for the user, is one filled with opportunities for success and grave missteps. Given the tasks that a website must accomplish, web page design is a job for no one less than an artist-psychologist.
Okay, that may sound like histrionics, but the job of designing a website is an exercise in promoting a brand or idea in an appealing manner while also eliciting specific human emotions and behaviors. The designer must know how to accomplish these aims within a host of constraints, including those presented by the medium, the physical space, the client’s specifics, the relevant social environment, and the content and purpose of the site. In some cases this job is like pulling a rabbit out of a hat. In others, it is like pulling an elephant out of a thimble. Clearly a job for David Copperfield. See what I mean about the need for an artist-psychologist?
A few words about trust
Just as there are ways that a composer can communicate sadness or anger in music, just as a painter can communicate confusion on the canvas, just as a an actor can communicate love without speaking, the web designer can communicate on the web page with layout, form, color and design. If the designer is allowed to.
That last bit is important because in order to be able to effectively represent and communicate for a client online, the designer must be allowed to do so. And this is likely the most difficult part of doing good work for a client needing promotional design work. So it is no surprise that often the most successful design work comes from projects with the highest degree of client/designer confidence. Trust is worth its weight in gold in any design project. Well, any design project involving competent designers.
Page Purpose
You never get a second chance to make a first impression
Main Page
Given the facts about first impressions, a site’s index page is clearly its most important page. Of all of the pages in the site, the index page has the biggest job to do. If the index page fails, so does the site. And when we’re talking about a retail or brochure site this can be a catastrophic failure.
It must be understood that a site’s index page has a specific purpose. What makes this sort of a tricky fact is the reality that this page’s specific purpose is not necessarily the same as the site’s purpose. In other words, if the site’s purpose is to sell merchandise, the purpose of the index page may not be directly involved with selling merchandise. Working against the better function of an index page to have it try and do the site’s overall job is usually detrimental to the site. This is a hard pill for many non-designers to swallow.
In a very general sense, the purpose of a site’s index page is to convince visitors that they should venture further into the site. In order to do that the page must engage in advisable psychology (through design and copy) while avoiding distracting and irrelevant purposes that run counter to the primary function of the page. In other words, the index page must not attempt to dump the entire site’s content into the viewer’s eyes in one fell swoop. Rather, the page must make a concise and clean first impression – an impression focused on a specific, rather than all-encompassing, purpose.
For clear examples of this sort of function we can look to how things other than websites work to engage individual or public interest. For instance, the prologue or first chapter of a novel does not tell the whole story of the book, but rather presents a compelling and concise feature of the story that invites the reader to maintain interest. Done well, this sort of introduction leaves plenty of space for questions and does not confine the story into a pre-defined box. Possibility is far more enticing than limitation.
Another good example would be the entrance area of a successful high-end retail chain store. The front area of the store is going to be dedicated to a specific theme and product offering, and is laid out so as to lead visitors by one or more specific paths into the store. However, the theme does not fully describe the store’s entire product offering and the influence directing the customer’s path into the store is brought by the advisable use of open spaces rather than cramped avenues.
It is worth nothing that the novel eventually presents a specific scope and storyline and the retail shop may have cramped avenues, just neither of them at the entrance.
Interior Pages
Once the site visitor has seen the main/index page of the site and has been interested enough to venture further into the site, content presentation becomes the main purpose of pages. After all, the visitor is coming to the site in search of something to see, read, hear, or all three of these things. The interior page design and layout should generally be a slave to that fact and be all about presenting the content without distraction.
As a consequence, the interior pages often have a design and layout that differs from the index page. Granted the look and feel should be consistent and the branding and identity message should carry though strongly to these pages, but in such a way as to emphasize the content.
Additionally, there should be a clear suggestion (or two or three) for “where to go from here” on each of these pages. This is especially true for retail and brochure sites. The designer must not assume that good navigation provides suggestion enough for site visitors to continue further into the site. This sort of call to action can be accomplished in all sorts of ways, but it’s best if it is done in a way that is contextually appropriate to the specific site (hint: this is why designers are better than off-the-shelf template packages).
In any event, the interior pages need to be just as compelling as the index page. A dead end one page into the site is not much better than a dead end on the index page.
Whitespace
If there is one kind of comment that I have grown to expect in feedback on initial website design comps, it is the comment that goes something like, “there’s a lot of wasted space on the page, isn’t there?” or “I like the colored areas, but can’t we put something in them?” I seldom have to work to convince a client to choose a design that I suggest, but often have to work to convince them not to fill up every inch of page real estate with content.
The fact is that in the context of the specific aim for a website or an individual page, there are advisable uses for whitespace (colored or white) in the page layout. As in the examples cited before, whitespace works to set off and lend gravity to those areas that are occupied with content. So, using whitespace appropriately helps us to keep the page concise, simple, comfortable and focused.
True, we could cut back on whitespace and put more content on the page, but that content would likely be far less effective and work to rob the page of its intended purpose. Besides, humans don’t generally respond well to clutter, as we can see from other examples in life.
Breathing Room and Context
Or, “Hey, why are you wasting all that valuable space!”
Back when I was a retail manager I had to constantly fight the owner’s desire to pack the checkout counter with mountains of impulse items. Crowding the register area with all of that stuff did present a host of tasty, last-chance choices for customers, but it also created a dizzying array of visual clutter. Furthermore, it made it difficult for both the seller and buyer to use the area for its intended purpose. This resulted in dismal sales of those impulse items.
By contrast, on those occasions that I was allowed to get rid of the clutter and make a display featuring one or two seasonally relevant items (and lots of open space surrounding the area) we sold out of the featured items. Every time.
What this example helps to illustrate is the effect that space and contextually appropriate presentation can have on the human psyche. In a very general sense, a contextually inconsistent environment, clutter and cramped quarters tends to encourage a lack of interest while open space and a consistent context in the environment tends to encourage interest and openness to suggestion.
Part of this sort of response has to do with how we associate open space with emotional or physical comfort and part owes allegiance to human survival instincts. A very basic way of explaining the latter factor is the fact that when we feel hemmed in or cramped (spatially), our primary concern is for finding and getting to the exit.
As for the contextually consistent environment part, that has more to do with openness to suggestion. For instance, let’s say you’re standing in front of a movie theater deciding what to do. You’re offered the following suggestions:
How about seeing the new sci-fi movie?
How about seeing the new mystery movie?
How about a game of basketball?
Notice how the last suggestion is not likely to have many takers at that particular time, given the context of the situation. Okay, it’s an obtuse example, but you get the point. When we’ve got our minds working toward a specific aim or are anticipating a certain conclusion based on our surroundings or activities, suggestions that don’t figure into the context are less likely to be successful.
Eye Flow on the Page
With any medium that people are expected to look at or read (books, movies, paintings, magazines, advertisements, web pages, etc…), artists, designers and/or directors work to ensure that it gets read or looked at the right way. This means that the path that the viewer’s eye should follow is carefully planned out. Then the design is composed and laid out such that it will work to influence viewers’ eyes to follow that path (to some degree).
So part of the web designer’s job is to design and lay out pages so that the site visitor’s eyes will go to specific areas and do so in a predetermined order. Depending on the kind of content that will occupy a web page, this task of directing viewers’ eyes can be a simple matter or a difficult one. This is part of why good design I s so powerful and poor design is so useless. In truth, whether we’re talking about a landscape painting or a web page, it is the basic fundamentals of artistry that are employed to direct a viewer’s eye.
The web/screen medium has its own set of viewing and use conventions and conscientious designers keep up with the latest data from usability testing. It is important to understand just how the general public tends to look at web pages and what they generally tend to expect from them in terms of layout and interaction. So in the hands of a competent designer all of the fundamentals for eye flow direction (artistry) are tempered by this sort of information, too.
In any event, designers and their clients should understand or appreciate the fact that the task of laying out a web page involves far more than presenting content in an appealing manner. The layout of the structure and content should address specifics of influencing the way that viewers approach and consume it.
So…
Okay, so when we’re set with the task of making the index page for a website, there are a lot of user emotion and expectation factors we have to take into consideration (we have to play psychologist). We also have to romance the brand and create an aesthetically pleasant or exciting experience (we have to play artist). Much of this can be accomplished by properly using whitespace and fundamental artistry – in the context of the site’s aims, of course.
Logos and Branding
Or “So what are you trying to say, exactly?”
Whenever someone lands on a company’s website, there should be no question in their mind as to what the site’s message is (and therefore the company’s message). Any brand that is a good brand has a lifestyle, a point of view, a culture, an attitude – or all of these things – associated with it. One of the primary jobs of the web designer is to translate that “thing” into a communicative look and feel for the company’s site. Any visitor to the site should immediately perceive the core message that embodies the brand just by seeing the web page design and layout. Here again, the fundamentals of artistry are the relevant tools for doing this.
However, it should be understood that when a company has a brand that is not well conceived or is not associated with a lifestyle, a point of view, a culture or an attitude, the web designer’s job is difficult or impossible. When the company or the brand does not say anything of consequence, it should be obvious to everyone that it will be difficult to make their website say anything of consequence.
The site is an extension of the brand. Bad brand = bad website. There is really no way around this. Now, this is not to say that a website for a poor brand will necessarily look bad or be a waste of time. But in the context of the competitive market where good brands exist, such a website can be likened to a tiara on a mule. A great website starts with a great brand. Period.
In all seriousness, a company with a poorly conceived brand or poorly designed logo should enlist the services of a talented design agency to remedy the situation. Or perhaps perish in the marketplace.
Make the logo bigger!
One of the most common requests of web page designers from clients is to make the logo bigger. And that’s almost always a mistake. There are lots of reasons for this, and I’ll get to a couple of them in a minute, but first think about this example. When Cadillac, Jaguar, BMW or Mercedes Benz (or any car maker for that matter) puts their signature hood ornament on the cars they make, they don’t make this highly important feature 3′ wide and 2′ tall. Instead, they make it very small to elegantly fit the really important thing – the car.
Part of what must be taken into account in the context of this example is the fact that no matter how amazing the car maker’s signature hood ornament is, if the car looks like crap or doesn’t work well or live up to user expectations, no one will buy it.
Plainly put, the logo is not the important feature of the website and should not garner any undo emphasis. Rather, it is the content and the site’s purpose that should be emphasized. Consequently, the logo should not dominate the page, but instead work subtly to help to lend gravity, interest, and context to the content and the site’s purpose.
More on logos
The logo can communicate important things about a company and/or a website, but that is almost putting the cart before the horse. Ideally, the job of the logo is merely to brand the site and its content. Most of the communicative value of the logo should come from a dedicated marketing effort that lends the logo and company the desired value and values (that are then succinctly communicated later by branding company elements with a logo).
So, no, don’t make the logo bigger. Instead, make the branding/marketing effort bigger and let the logo do its simple job on the web page (and elsewhere) no matter its size. A result of leaving the logo at a manageable size on the page is that it can then be made to have greater impact by the use of available whitespace that surrounds it.
In Conclusion
Client aims and desires are always relevant to a site design project, but hopefully the preceding information helps to show that individual client preferences should often take a back seat to proven design principles and site user expectations. The client’s investment of trust in the designer can pay high dividends when it comes to design and branding issues.
So rather than merely being the production of online decoration, web design is an effort at direction and communication – just the same as art (and advertising). It is not something to be engaged in lightly and is best left to those artist-psychologist types who know how to use design to achieve specific aims within all sorts of constraints.
This article was written by Andy Rutledge
