Web Design

Lecture 4 Design Principles

Layout

Good design is for ever?

Of course there are fashions in the
design of web sites often all too
brief
Sometimes we must follow fashion
to look up to date and follow the
herd but be prepared to cringe
later on

Good design is for ever?

Good design however can be

contemporary and yet timeless
easier to maintain in the long run

What makes a good design?

A balance between the different
elements
Timeless
Intentional
A harmony between usability and
aesthetics
Look at Dixons on the Internet Wayback Machine

Elements of the design

Within a web
design there
are certain
standard
elements

Elements of the design

Container the bounds of the
window displaying the content
Logo specific graphics, fonts and
colours
Navigation preferably above the
fold
Content what we here for.

Elements of the design

Footer indicates end of the page
and contains contact information
etc.
Whitespace helps the design to
breathe, creates links and balances
the design

Grid Theory
Some people have a natural talent
for design and instinctively know
whats right
The rest of us however can get the
same effect by understanding
some simple principles
One of these is the use of grids

Grid Theory
It has been
recognised for
hundreds of
years that
organising the
elements on a
page within a
grid leads to a
better balance

Grid Theory
Grids that have been found to be
effective include the Golden Ratio
(1.62:1) and thirds
Using thirds we can take a rectangle ,
divide it into thirds both horizontally
and vertically and then split each
rectangle to get 6 along each axis

Using the grid we

can try out
different layouts
using a grid will
help keep a
balance between
the elements

960px Grid Design

In web design it is natural to think of
grids in terms of pixels.
1024px is almost the default
960px fits within that
960 is divisible by 3, 4, 5, 6, 8, 10, 12,
15, and 16
This gives lots of possible grid designs
(12 is popular again for sub-divisions)

960px Grid Design

A grid design
does not have
to constrain the
design to
looking blocky

Design Elements
The use of grids can help achieve
one design element balance:
Balance
Unity
Proximity
Repetition
Emphasis

Balance
People respond instinctively to
balance in a design and it comes in
various forms of symmetry:
Symmetrical
Asymmetrical
Hybrid

Symmetrical balance
This example
shows that
the symmetry
can be subtle
and vary on
the page

Asymmetrical and Hybrid

More about
balancing the
visual weight of
the elements
women are
generally more
adept at this than
men

Unity
Page elements
combine to give a
unity of form our
brain tries to do this
all the time we
always attempt to
make sense of the
assembly

Proximity
Objects close together are perceived as a single
object or to be linked in some way

Repetition
We can link items
by the repeated
use of an element
such as a bullet
point or repeated
graphic

Emphasis
We can draw attention to something
by using a number of techniques:
Placement - top left is important
Flow follow the lines or shapes
Isolation
Contrast colour etc.
Proportion

Navigation
Web pages are of course usually
interactive and so unlike most
previous forms of communication
we now need navigation
Various forms of navigation have
evolved and are still being
developed

Left Column Navigation

The default method of course and still the most common

Right Column Navigation

Good for deeper levels where content is the focus

Both Column Navigation

Popular where a lot of choice has to be handled

Emerging methods of navigation

A number of new forms of
navigation are emerging:
Magazine style
Expansive footer
Minimalist

Magazine style
This style in effect
has no navigation
elements and is
meant to recall the
style of interaction
with a traditional
magazine

Expansive Footers
A quite
fashionable
method of
expanding the
footer to contain
much more than
just copyright
material

Minimalist Navigation
The navigation
elements are very
subtle a
reaction to RIA in
Web2.0?

Web page formatting

Designing on paper means that we
know what the output media will
be in terms of its size this is not
the case of course with web pages
Fixed width
Fluid width
Hybrid and responsive width

Fixed width
We design to a fixed grid such as
960px
Sometimes there will be empty
space
Sometimes there will be a scroll
bar
Good control and predictable

Fluid width
Elements on the grid are designed
as % of the full width
Output will resize to the display
Less control over appearance
May get vertical scroll cross fold
Function of elements lost (small
font)

With the increasing use of mobile devices this choice is

becoming a real issue for the designer fortunately
CSS3 can help create a responsive page layout

Responsive page layout

The page content
flows differently
according to the
screen size
This can even
extend to
alternative elements
being used on very
small screens such
as mobile phones