|
 |
Menus with Beauty and Brains As a Book: Text and Design (Chapter 13)
|
|
In This Chapter
|
|
Does it seem as if I am hung up on text? I probably am. If it were
not for my love of direct communication, which is where text differs
from any other art tool, I would probably be a painter or a sculptor.
If you are a Web designer, you should also have a huge soft spot for
text and for finding the ways that bring text to your visitors in an
exciting and useable form.
The fun and skill in design work comes from identifying the elements
that are required and presenting them in a useful and exciting way.
Text will make up a considerable portion of any effective Web site.
In this chapter, I offer many new ideas for presenting text as part
of a menu system, and will even side track a little into using text
to attract attention to an area of the page. Remember, while menus are
critical to the success of your site, they are just one part of the
whole on any Web page.
|
| |
|
|
| |
|
Where Does Text Fit into Design?
Text delivers the message. You can evoke mood with graphics, or provide
graphic icons to help people get to a different spot on your site, but
the full responsibility for getting the message into the minds of your
visitor falls to text. If this was the only reason to focus heavily
on text, this chapter would be important. But beyond the obvious, however,
that is not the extent of what text does for a Web site. Text plays
two additional roles: it can also provide site consistency and design
benefits.
|
| |
|
|
|
Figure 13-1
Two pages from my Web site. Although
the graphics help identify the pages as pages from the same site, the
text layout and consistency also contribute to the connection between
pages.
|
|
Providing Consistency with Text
Text should play a vitally important role in providing consistency
for your site. Text is the one element that will be on every single
page of every single site on the Web. Within one site, you can have
pages that are meant to build the mood and others that are meant to
be down-and-dirty business pages. But each has text. What better place
to apply one of the most important elements that can convert a "bunch
of pages" into an effective site—consistency.
When you add unique characteristics to text, whether that characteristic
is color, justification, or a graphic presentation of text, you can
present that element on every page of your site. This consistency provides
your visitors with instant, visual clues that they are on the same site,
building a comfort level that is critical to keeping visitors.
If you look at the structure of this book, you will see that each page
has the same elements, all created by text elements. Imagine that you
turn the page, and the page headers disappear, page numbers are moved
to another location on the page, and the main font changes. Your instinct
might be to look at the cover of the book again, to see if somehow,
with out realizing it, you have picked up the wrong book. Moving from
page to page in a Web site is no different, yet you can probably think
of many times that you have seen just this effect.
A Web page is similar. I have included two pages from my Web site in
Figure 13-1. The graphics do help to provide consistency, but also note
the page titles and the text layout. Even if the graphics on the left
were not visible, these two pages form a set. The page title is in the
same location, with the same font. The body text is all the same, and
the smaller right column with extra information is consistent in font,
font color, and column width on both pages. As visitors click through
the site, there are no surprises, the menu is always in the same location,
and the text clues provide instant recognition for content and utility
areas.
|
| |
|
|
|
Figure 13-2
Simple text formatting changes a page from dull and difficult to use,
to visually interesting and breaks the page into manageable pieces for
the visitor.
NOTE: Click on the images above for a larger
sample.
|
|
Adding Visual Interest and Direction
So far I identified the responsibility of text for communication. Next,
I held text up as an important part of the glue that binds individual
pages into a cohesive site. But there is more. Text can also be used
to break up the visual appearance of the page. In fact, as I became
more experienced as a Web designer, I started to depend heavily on text
as a design element, both in graphic and HTML text form. Today, I look
for any opportunity to add text lists, or even tiny menus within the
structure of the page. The break in content provides a place for visitors
to focus. Graphics can do the same job, but with text, you can put the
visual clues to work with a real job.
In Figure 13-2, the first sample shows a page with plain text only.
Compare that look to the second sample, which has had nothing added
but text formatting. Adding headlines, creating a list, breaking some
text out into an indented area, and slight adjustments to the menu area,
change the entire look of the page. Observe what your eyes do as they
look at each page. In the unformatted text example, they will wander
lazily across the page, not finding anywhere to stop. The text formatting
I did for the second sample provides a stop point for your eyes, and
breaks the page into manageable pieces.
Pay special attention to the menu area. The unformatted example was
noticeable, and would do the job. Breaking it into smaller chunks, and
using indenting for sub-categories, not only makes the menu easier to
use, but also makes it visually more interesting.
|
| |
|
|
|
|
|
Images and text for this article © Hungry Minds, Inc.
|
|
Next page
Menus with Beauty and Brains as a Book: Tutorial Index
Ta!Da!
Table of Contents
Chapter 13
Chapter 13 (con't)
Chapter 13 Exercise
  
|
|
|
|
