architecture WEB PAGE

Document Sample
architecture WEB PAGE Powered By Docstoc
					WEB PAGE ARCHITECTURE

■  One thing on a
page creates a focal
point.
■ It attracts our
attention.
■ It creates a landing
spot for our eyes.
WEB PAGE ARCHITECTURE

■  Two things on a
page create
competition.
■ Two things on a
page create
movement.
■ Two things divide
our attention.
■ Two things create
an axis.
WEB PAGE ARCHITECTURE

■  Two things on a
page create
competition.
■ Two things on a
page create
movement.
■ Two things divide
our attention.
■ Two things create
an axis.
WEB PAGE ARCHITECTURE




AXIS
■ An axis is a line established
by two points in space. It is
the simplest way to organize
space.
■ For any publication, a
natural axis is formed by the
edge of the page.
■ Other horizontal and
vertical axes divide the page
into logical and useful spaces.
WEB PAGE ARCHITECTURE

■   The designer will establish
horizontal and vertical axes to
divide the space.
■ Axes are made apparent by
the columns of type, gutters and
alleys.
■ The axes are “implied”
rather than drawn on the page.
WEB PAGE ARCHITECTURE

■   Alleys are horizontal bands
of empty space that separate
page elements vertically.
■ Gutters are vertically bands
of empty space between
columns.
■ We refer to alleys and
gutters together as internal
margins.
WEB PAGE ARCHITECTURE




                        ■  Newspapers layouts have
                        been governed by a horizontal
                        axis formed by the banner
                        headline meeting with a
                        vertical axis in a “T
                        formation.”
                        ■ The vertical axis was the
                        gutter next to the dominant
                        element on the page.




THE GRID                                            7
WEB PAGE ARCHITECTURE




■   This simple
arrangement still is
effective in contemporary
design and is common in
Web-page design.
WEB PAGE ARCHITECTURE




■   This simple
arrangement still is
effective in contemporary
design and is common in
Web-page design.
WEB PAGE ARCHITECTURE




                        ■   The eye naturally seeks out patterns
                        of organization on a page, mentally
                        connecting the dots to form axes. The
                        page itself suggests an axis according to
                        its length. A photograph used correctly,
                        with its shape fitting its content, takes
                        advantage of this natural axis.
WEB PAGE ARCHITECTURE

■   We can
use the natural
lines in art to
direct the eye.
■ In this way
we help
establish a
visual
hierarchy.
WEB PAGE ARCHITECTURE

■   Start with
the Center of
Visual Interest.
■ Find an
arrangement
that leads to a
starting point.
                        CVU
■ This will
establish a
visual
hierarchy.
WEB PAGE ARCHITECTURE

                        ■  Axes are
                        crucial to good
                        Web page design.
                        ■ The sheer
                        number of images
                        and text elements
                        on a Web page
                        demand order.
WEB PAGE ARCHITECTURE


Architecture deals with
the division of form and
space. Elements must be
organizes in ways that are:
■ Coherent: The page
and the whole document
must hang together and
make sense as a whole.
■ Meaningful: The pages
should reveal a hierarchy
or a logical progression.
■ Functional: The page
design should aid
readability and navigation.
WEB PAGE ARCHITECTURE

■  Success depends on the
underlying structure of the
page.
■ This structure is
expressed as a grid.
■ A grid is simply a set of
intersecting lines uniformly
spaced, like graph paper.
WEB PAGE ARCHITECTURE

■  A grid in Web
design usage also
means a division of
the browser window
that is common to all
pages on the site.
■ The grid becomes
the basic foundation
for placing elements
on the page, becomes
part of the character
of the page.
■ It affects the look
and the personality of
the document.
WEB PAGE ARCHITECTURE

■  A grid in Web
design usage also
means a division of
the browser window
that is common to all
pages on the site.
■ The grid becomes
the basic foundation
for placing elements
on the page, becomes
part of the character
of the page.
■ It affects the look
and the personality of
the document.
WEB PAGE ARCHITECTURE

■   Symmetry is
the balanced
distribution of
equivalent forms
— photos, type
blocks, white
space, rules —
positioned on
either side of an
axis down the
middle of the page.
■ The left side is
a mirror image of
the right in shape
and form.
WEB PAGE ARCHITECTURE

■  Symmetrical
pages are said to
have formal
balance.
■ As the name
implies, formal
balance can led a
dignified or
conservative look
to a page.
WEB PAGE ARCHITECTURE

■   Most designers
today seek an
asymmetrical
page. The vertical
axis is placed
off-center.
■ Asymmetrical
pages are said to
have informal
balance.
WEB PAGE ARCHITECTURE

■   Asymmetrical
pages often have a
feeling of
movement.
■ When done
correctly, the
asymmetrical page
will still feel unified
and at rest with
itself; it will feel
balanced.
WEB PAGE ARCHITECTURE

Symmetry, or formal balance is useful when the design needs a
formal or conservative look, or when equality between two things
needs to be emphasized. But it doesn’t have to be dull.
WEB PAGE ARCHITECTURE

                        ■  Asymmetrical pages rely
                        on the axis or axes to bring
                        order and balance to the
                        page.
WEB PAGE ARCHITECTURE

■   Hierarchy deals with the
importance or significance of
a form or space by its size,
shape or placement.
■ Before any elements are
positioned, the designer must
study the content and decide
on a hierarchy.
■ The design then serves the
hierarchy.
WEB PAGE ARCHITECTURE

■   Research has shown that
the eye is attracted first to the   2
largest image on the page,
                                        1
then to the largest type as the
reader seeks more
                                    3
information.
■ Thus, a large image always
will dominate the hierarchy of
a page.
■ It must be relevant to the
remaining content.
WEB PAGE ARCHITECTURE

■   The repetitive elements of
any publication create a rhythm, a
feeling of regularity.
■ With asymmetrical balance and a
planned variation in placement,
rhythm feels syncopated.
WEB PAGE ARCHITECTURE

■    Rhythm begins with the body
text: line height, paragraph indents,
uniform internal margins.
■ Careful placement of
typographical devices — large
initials, headlines, blurbs and pull
quotes will break up text.
■ Pictures and graphics, arranged
with careful attention to internal
margins, add sizzle.
WEB PAGE ARCHITECTURE

■   A page with rhythm
has a natural feel,
especially in sequences
of items.
■ Uniform design for
repetitive elements ties
the page together even
as it deviates from exact
alignment.
WEB PAGE ARCHITECTURE




■  Web pages really
need a carefully
thought-out rhythm.
WEB PAGE ARCHITECTURE

■   Your page size is
determined by monitor size
and resolution.                                    1024 px
■ The standard display
sold today is 1,024 pixels                         800 px

wide by 768 pixels tall.
■ After subtracting for          768 px   600 px

overhead, space needed for
menu bars etc., the
browser-safe area is about
800px by 600 px.
■ The browser-safe area
is the first thing the visitor
sees without scrolling.
WEB PAGE ARCHITECTURE
WEB PAGE ARCHITECTURE
WEB PAGE ARCHITECTURE




HEADER

NAVIGATION



MAIN
CONTENT


SCAN
COLUMN




FOOTER
WEB PAGE ARCHITECTURE


       RULE 1
■ Consider
carefully what
appears above the
fold. This would be
the portion of the
page that is visible in
the first browser
window without
scrolling.
■ Design your
opening page to fit
the Graphic Safe
Area.
WEB PAGE ARCHITECTURE

■    Graphics Safe
Area is determined
by two factors:
■ the minimum
screen size in
common use.             600
■ the width of
paper used to print
Web pages.
■ A good measure
for the screen
Graphics Safe Area is
about 800 pixels              800

wide x by 600 pixels
tall.
WEB PAGE ARCHITECTURE

■  Graphics Safe
Area for printing
depends on the
width of the printed
page, usually 8½
inches.
■   A width of 500-
600 pixels is
recommended for
pages designed to be
printed.
■ Scrolling is OK for
pages meant to be       520

printed.


                        800
WEB PAGE ARCHITECTURE


       RULE 2
■ If you decide to
use a dominant
image, it should be
about twice as big
in area as any other
image on the page.
■ Contrast is
apparent to the
reader ONLY if it is
somewhat obvious.
WEB PAGE ARCHITECTURE


      RULE 3
■ Put related
elements close
together and
separate unrelated
elements.
■  Lines drawn
between elements
provide the most
emphatic separation, so
never put lines
between related
elements.
■ White space is the
best separator.
WEB PAGE ARCHITECTURE


     RULE 4
■ Use consistent
internal margins.
■   The internal
margins between
related elements will
be smaller than the
internal margins
between unrelated
elements.
WEB PAGE ARCHITECTURE


                               RULE 5
        ■ Use space consistently from page to page,
        especially for site logos and for navigation.
        ■ Your division of space becomes part of your
        Web site’s identity.