Aspects of Web Design Graphic Design for the Web

1
Aspects of Web DesignGraphic Design for the Web
2
useful sites for examples

• http//www.csszengarden.com/
• http//www.webpagesthatsuck.com/
• http//www.webpractices.com/samplesites.htm

3
web page appearance is constrained

• Constraints of web page functionality require
  certain elements to be present on (almost) every
  site
• branding information, top-level navigation, etc
• Other constraints are present due to the
  limitations of the browser and client machine
• screen real-estate, browser capabilities, etc
• Assumptions cannot be made about the ability of
  users, necessitating additional requirements of
  the site
• principles of usability provide us with
  guidelines so that web sites accommodate most
  people
• some of these require that further constraints
  are adhered to, such as persistent navigation

4
four basic principles of graphic design

• Proximity
• items that are related should be grouped closely
  together, eg paragraphs beneath a sub-heading
• Alignment
• every element on the page should have some
  spatial link to the others vertical, horizontal
  or both, eg images aligned to each other, and/or
  text
• Repetition
• visual elements should be repeated throughout the
  whole work, eg fonts used for headings
• Contrast
• if elements have nothing in common, then make
  them very different, eg headings large and bold
  compared to text

5
proximity

• Items that are related in some way should be
  grouped closely together
• essential for navigation elements
• same principle should be used for other elements
  on the page
• position text close to the relevant sub-heading
• put labels for images close to the image
• put paragraphs close to each other
• As a rule, choose to increase rather than
  decrease white-space
• too little white space leads to noise on the
  page, making it look messy and cluttered
• noise makes the page difficult to understand - as
  Krug says it forces the user to think
• users may alter the settings on their browsers,
  such as increased font size. Leaving some space
  helps mitigate the effect of badly behaved browser

6
alignment

• Every element on the page should be visually
  connected to something else
• unlike proximity, alignment ties together
  elements from the whole page
• aligning elements at the top, middle and bottom,
  as well as across the page, helps to tie the page
  into a coherent whole
• if the design of the page means that it must be
  scrolled, then aligning elements down the page
  helps provide continuous visual references
• Alignment does not need to relate elements based
  on semantic relationships
• elements that are semantically related should
  nearly always be aligned somehow
• however, other elements can be aligned for purely
  aesthetic reasons
• As a rule, avoid centre alignment and fully
  justified text
• both render badly with variations of browser

7
repetition

• ensure that elements of the design are repeated
  throughout
• certain elements of the design will be part of
  the brand, and so should be repeated to ensure
  that branding is consistent
• this is a fundamental aspect of web usability
• another aspects of design is the appearance of
  page elements, such as headings and sub-headings
• limit the range of differences in elements to
  avoid a cluttered appearance
• eg if possible, make images the same size and
  aspect ratio (but dont reduce quality or cause
  distortion - it will just look contrived)
• consider creating repetition by adding decorative
  elements
• use bullets in unordered lists, a different font
  for ordered lists, underlines to divide sections,
  coloured borders, etc

8
contrast

• if elements are not the same, make them very
  different in some way
• make headings and sub-headings noticeably
  different from each other, and very different
  from the paragraph text
• use different size fonts, bold, italic, but never
  underlined!
• use serif and sans-serif fonts, eg serif headings
  and sans-serif paragraphs
• if you are using lines to divide the page, use
  contrasting borders around images
• if you need more than one weight of line, make
  very different 1pt and 4pt for example
• consider the page as a whole, including below the
  fold, as well as the elements on it
• when using columns, have the headings span two or
  more of them
• give part of the page a different background
  colour, eg the top 25 avobe the fold dark with
  reversed out text, the rest pale with dark text

9
using typefaces on web pages

• Most people find it difficult to read on a
  monitor
• very few people ever bother to set up their
  monitors correctly native resolution, font
  sizes, brightness and contrast are left at
  default settings
• reading on-screen is unfamiliar, controlling the
  app requires thought
• very often the PC is badly positioned the whole
  room will be arranged around the TV, but the PC
  is on an old coffee table in the corner
• Aim for clarity on navigation pages
• use as few words as possible
• make the important text stand out with clear,
  bold lettering
• use contrast to signify text that is lower in the
  hierarchy
• Content pages are different
• once users have found what they want, you can
  concentrate more on appearance, so content pages
  can be treated differently
• but dont forget usability users need to get
  back to the navigation pages when theyve
  finished reading!

10
(No Transcript)
11
conflict, concordance, compromise

• The four principles often work together but often
  conflict
• you want contrast, but you also want repetition
• you want proximity, but you also want contrast
• do you go for different type faces or the same?
  how much space do you leave between columns? when
  does too much contrast become clutter?
• Varying the same thing provides concordance
• if you use the same typeface for everything but
  vary the size, the same line but vary the
  thickness, your pages will appear calm and recede
  from the user
• Changes creates conflict, but conflict brings
  contrast and interest.
• However, too much conflict brings clutter and
  noise
• Find a compromise
• start simple, add changes gradually try a
  different typestyle for headings, add a line
  between paragraphs, alter the white-space, etc
• trial and error is frequently the only way to get
  there

12
choosing colour schemes

• You need to take into account those with specific
  visual requirements
• at least 5 colour blind, at least 10 contrast
  vision impaired
• The subject area of colour is enormous
• complementary and contrasting colours, degrees of
  separation, two, three and four colour schemes,
  colours for mood and affect, etc
• The colour wheel
• essential tool for choosing colour schemes
• first created in the 1800s by Goethe - result of
  years of painstaking research with different
  subjects
• modern systems follow Goethes arrangement
• Use a colour picker to help (many available on
  the web)
• http//wellstyled.com/tools/colorscheme2/index-en.
  html

13
random examples

• http//www.interflora.co.uk/
• http//www.britishbouquets.co.uk/
• http//www.teleflorist.co.uk/
• http//www.bloomindelightful.co.uk/
• http//news.bbc.co.uk/
• http//www.guardian.co.uk/
• http//www.newscientist.com/news.ns
• http//www.sciam.com/
• http//www.google.com
• http//www.google.co.uk/
• http//www.yahoo.com/
• http//uk.yahoo.com/
• http//www.dogpile.com/
• http//www.amazon.com/
• http//www.amazon.co.uk/