Cisco Networking Academy - Fundamentals of Web Design















5.2
Web
Design Principles



5.2.7
Structure




Structure applies to several aspects of
a website. It is how the whole website is designed with a clear
beginning, middle, and end. It is how the designer creates visual
hierarchies both on the site as a whole and on each page. It is how
the designer groups related items. And it is how the designer uses
nesting to illustrate categories and subcategories. These four
elements can be referred to as storytelling, prominence, grouping, and
nesting.
Just like a well-told story, your website still needs to be
structured with a beginning, a middle, and an end. The beginning,
usually the home page, should excite or engage the user. The middle
should provide information that the user is seeking. And the end
should then result in the opportunity to purchase a product or
interact in another way. This is storytelling.
Another aspect of structuring that you need to incorporate in your
design is prominence. Prominence is one of the best ways to make a
page easy to understand quickly. The more important something is, the
more prominent it should be. The most important headings on a web page
should be larger, bolder, and set near the top of the page. On an
electronics website, for example, each page should clearly identify
what type of product the user will find on that page (e.g,
"Digital Cameras" in large, bold type). The subheadings for
that page could be the different brands of digital cameras that are
available (e.g., "Sony," "HP," and
"Kodak" would all be in medium, bold type). Below each brand
would be the list of available models rendered in smaller, regular
font.
Designers also visually group items that are related logically. To
show that items are related, you can put them under a heading
describing their similarity or display them in a similar style (e.g.
color, font, etc.). Grouping items allow users to quickly find an item
based on its relationship to other items. For instance, a person who
is looking at one of the digital camera pages should easily be able to
find the listing for 35mm camera since it is logical to group all
cameras together.
Nesting is the final technique used by web designers to structure a
website as well as individual web pages. Nesting is embedding one
object in another object. On the electronics site, "Digital
Cameras" is nested within "Electronics,"
"Sony" is nested within "Digital Cameras," and
"Model 2768" is nested within "Sony." All of these
are nested within the above category.