We had thrown enough light on the aspect of unity in our
previous articles. There is another aspect of prominence or importance which is
related to unity. It focuses on highlighting one specific element in the design
rather than trying to fit all things together. The purpose here is to attract
more attention from the surfers.
When you design a web page layout, often
you'll identify an item in the content, or the layout itself, that you want to
stand out. Perhaps it's a button you want users to press, or an error message
that you want them to read. One method of achieving such emphasis is by making
that element into a focal point. A focal point is anything on a page that draws
the viewer's eye, rather than just feeling like part of the page as a whole or
blending in with its surroundings. As with unity, there are a few tried and true
methods of achieving a focal point.
Placement
Although the constraints of practical web design do not often allow for it,
the direct center of a composition is the point at which users look first, and
is always the strongest location for producing emphasis.
Continuance The idea behind continuance is
that when our eyes start moving in one direction, they tend to continue along
that path until a more dominant feature comes along. Even though the bottom
splotch is bigger and tends to catch your eye first, your brain can't help but
go to the small pointer on the left sometimes! You'll soon find yourself staring
at the smaller object.
Continuance is also one of the most common methods
that web designers use to unify a layout. By default, the left edge of headings,
copy, and images placed on a web page form a vertical line down the left side of
a page before any styling is applied. A simple way to expand on this concept is
to use the rule of thirds to line up other page elements along the lines of your
grid.
Isolation In the same way that proximity
helps us create unity in a design, isolation promotes prominence. An item that
stands out from its surroundings will tend to attract attention. For e.g. you
have various flower vases on different pages of your web design. While on the
main page you have just one beautiful flower like daffodils or a lily. The
viewers automatically tend to notice this singular flower which stands out
differently in the design. That’s how isolation
works.
Contrast Contrast is defined as the
juxtaposition of dissimilar graphic elements, and is the most common method used
to create emphasis in a layout. The concept is simple: the greater the
difference between a graphic element and its surroundings, the more that element
will stand out. Contrast can be created using differences in color, size, and
shape.
Take an example of an ecommerce web site that sells just one item
per day. When you look at this layout, what's the first thing that grabs your
attention? Probably the viewers would first notice the product they're selling.
Now the product in this site changes daily. So the question is “what grabs your
eye after that?” Obviously the answer is “I want one” button. Although the same
colors are used elsewhere in the design, the oval shape isn't. When set against
an area of white space, the button has both contrast and isolation working to
highlight it. This site has a definite purpose that the viewers really click
that button.
Proportion One interesting way of
highlighting in a composition is through the use of proportion. Proportion is a
principle of design that has to do with differences in the scale of objects. If
we place an object in an environment that's of larger or smaller scale than the
object itself, that object will appear larger or smaller than it does in real
life. This difference in proportion draws viewers' attention to the object, as
it seems out of place in that context.
You can take just one lily or a
daffodil flower and can superimpose it on the house and see how it draws the
attention of the viewers! This principle works for miniaturization as well.
Sometimes even reduction in the size highlights one particular object in a
design. Consider a miniature version of a male or a female in the design. This
small image stands out distinctly because of its proportion that different than
the surrounding. A few standard HTML tags and CSS properties have been designed
to take advantage of the preceding theories to create emphasis in a web page
even without customization. For isolation of content consider the block quote
element. This element indents the left- and right-hand side of any text placed
within it, purposely breaking the continuation lines of the page content and
drawing attention to itself. For positioning, consider the position property in
CSS. By absolutely positioning an object with CSS, you take it out of the flow
of its containing block, so you can place it strategically to draw attention.
And when you think about contrast, think about the blink tag. Don't ever think
about the blink tag. Yes, it creates contrast ... over and over and over again.
Please don't use it. Don't get any ideas about using a marquee tag either.
Design is just as much about what we leave out as it is about what we put in.
Bread-and-butter Layouts
Most of what we've talked about
thus far has been design theory. Theory's good, but it can only take us so far
toward understanding why some ideas work--and others don't--in a web site's
design. Most academic graphic design programs include a curriculum that's rich
in art history and fine art. These classes provide a great foundation for an
understanding of graphic design from an art perspective, but they do little to
prepare you for the specific challenges you encounter when you take your designs
to the Web.
When you look out across the Internet, you can see that the
possibilities for layout really are endless. But, only a few of those
possibilities make good design sense. That's why we see certain configurations
of identity, navigation, and content over and over
again.
Left-column Navigation
Regardless of
whether we're talking about liquid or fixed-width layout design, the left-column
navigation format is the de facto standard. Many sites that fit into this mold
don't necessarily use the left column as the main navigation block--sometimes
you'll see the navigation along the top of the page--but they still divide the
layout below the header into a narrow (one-third or less) left column and a wide
right column. It's a status quo, like a security blanket. For those reasons, a
layout featuring left-column navigation is a safe choice for any
project.
The downside to sites that use left-column navigation is that
they can lack creativity. They've been done so many times, and in so many ways
that they tend to look the same. That's not to say you shouldn't use a
left-column navigation layout. But the question is “how to do something
different?” It can be done by picking that left column up and sticking it on the
other side of the content. Then you'd have a right-column navigation
layout.
Right-column Navigation
Although it's
difficult to find sites that place the main site navigation along the right-hand
side of the layout, it's quite easy to find sites that use a right-hand column
for sub-navigation, advertising, or sub-content. Since, in western cultures, our
eyes scan from left to right, this allows the page's main content to be the
first thing viewers see. The same might not hold good for cultures in other
regions like east!
There are very less sites today that make use for right column designs.
However viewers very naturally intend their cursors to hover on the right side
of the browser window anyway. Ultimately, this is a decision that's really about
the needs of your clients and how they want people to perceive their online
presence. Left-column navigation is familiar and more standard, but that's not
always the number one priority in designing a new site. One thing's for sure,
though: if you want your design to be different from the average web site, but
you still want users to be able to find your navigation, you should give a
right-column layout a try.
Three-column Navigation
The typical three-column layout has a wide center column flanked by two
diminutive navigational columns. Although three columns may be necessary on
pages that have a ton of navigation, short bits of content, or advertising to
display, it's important to remember that white space is essential if we are to
keep a layout from appearing cluttered. In the three columns on the main page, a
white space center column promotes eye movements of the
viewers.
Expansive Footer Navigation
If you
scroll to the bottoms of pages on many of the most recently redesigned sites,
you're likely to see an interesting new trend. Rather than using the footer for
main links and a copyright notice, many sites are expanding to include contact
information, expanded site navigation, and extra content such as blogrolls,
linkrolls, Flickr badges, and so on. Although putting a site's main navigational
element at the bottom of the page isn't a good idea, the concept of including
"bonus" navigation and content in that space is being noticed across many sites
today.
Three Columns with Content First
The
majority of fresh three-column site designs that have been produced lately have
put the content first. It means that such sites are locating the content on the
far left of the display. This concept gives a professional touch to the
site.
Although this isn't really a new idea, it's been practice by many
site designers lately in both liquid- and fixed-width site designs. The majority
of three-column layouts usually switch to a two-column structure outside the
homepage. By placing the content on the left, the transition from three columns
to two is more natural, as the content column can simply expand, rather than
having to relocate completely.
Resizing: Fixed Width vs. Liquid
Width
We had discussed about the containing block, and whether
or not it would expand to fill the page in one of our articles earlier. In fact,
the fixed-versus-liquid is still a matter of debate anyhow. Some web gurus even
opine that liquid layouts are out of use now.But most of the designers have
established their own opinions in regard to the fixed-versus-liquid debate. The
decision to use one type of layout over the other should really be determined by
the target audience and the accessibility goals of each individual web site.
But, regardless of personal preferences, it's important to put the needs of your
client first. If you're deciding on the width of a fixed-width layout, you have
to think about the audience for which you're designing, and create a layout that
meets the needs of those users.