is1824: introduction to internet multimedia lecture 7: style 1 (layout and colour) rob gleasure...

IS1824: Introduction to Internet MultimediaLecture 7: Style 1 (Layout and Colour)

Rob Gleasure

R.Gleasure@ucc.iehttp://girtab.ucc.ie/rgleasure/index.html

IS1824

Today’s class Repetition Alignment Proximity Contrast Discussion of colour Discussion of example Websites

C.R.A.P. Design Principles introduced by a designer called Robin Williams in a book

called The Non-Designer's Design Book Principle of Contrast states that if things are different, they

should look different Principle of Repetition states that some aspect of the design is

repeated throughout each page Principle of Alignment states that every item should have a

visual connection with something else on the page Principle of Proximity states that related items should be

grouped together

Doesn’t cover everything by a long shot but provides a good starting point for our discussion

Repetition Some elements have to remain constant across each page, e.g. a

logo, areas of white space, colours, typeface Unifies pages and adds consistency Allow the user to discern visual units Helps to control where users’ eyes settle Organises information Important for cueing navigation for users

Repetition

Good example of repetition

Alignment Nothing should be placed arbitrarily! Divide the page up into an invisible grid and ensure every single

element is aligned to something else Decide from the start whether the left edge of items of the right will

align, don’t try and combine left and right alignment The edges of images and logos should also be aligned with the

edge of text

Alignment

Example of poor alignment

http://www.ibm.com/us/en/

Alignment A note on margins and padding

Margins provide important visual relief in any document, but careful design of margins and other "white space" is particularly important in Web page design.

When used consistently, margins provide unity throughout a site by creating a consistent structure and look to the site pages.

They also add visual interest by contrasting the positive space of the screen (text, graphics) from the negative (white) space.

Web content must coexist on the screen with Interface elements of the browser itself and with Other windows, menus, and icons of the user interface.

Proximity Proximity

Items related to each other should be placed together (and items not related should not)

Items grouped together become a single visual unit, so people may decide to ignore a list of items if the first and second seem irrelevant to their needs

A user’s eye should move from one group of elements to another in an obvious order

White space ensures that proximity is clearly distinguishable

Proximity Good example of proximity

http://store.apple.com/us

Contrast Contrast

‘if things are different, they should look different’. Contrast can be added with white space, shape, texture,

typeface, rules, spacing, size, or colours It should be used to organise information Each page should have one focal point Sometimes means considering what is not worth highlighting,

e.g. making less important content smaller

We often refer to the squint test to evaluate contrast

Contrast

Example taken from http://www.userfocus.co.uk/articles/A_CRAP_way_to_improve_usability.html

No contrast (users must read text)

Contrast makes it obvious the two options are fundamentally different

Contrast Example of good contrast

http://www.sonymobile.com/global-en/

Contrast and Colour You can arguably think of colours in three categories

1. Primary colours: The main colour(s) of the page. It will occupy most of the area and set the tone for the design as a whole.

2. Secondary colours: Usually there to "back up" the primary colour

3. Highlight colour: This is a colour that is used to emphasize certain parts of the page. It is usually a colour which contrasts more with the primary and secondary colours, and as such, it should be used with moderation.

This rule gets broken far more than obeyed though...

Contrast and Colour Good examples of balanced colour contrast

http://www.xerox.com/

Contrast and Colour The Colour Wheel

The colour wheel is useful for showing how colours relate to each other

Contrast and Colour Analogous Colours

The analogue colours are those

on either side of any given colour.

Often these are colour schemes

found in nature. A site that makes

use of analogous colours usually

feels harmonious.

Analogous colours are often utilised as secondary

Contrast and Colour Example of analogous colours

http://www.stemiltcreekwinery.com/

Contrast and Colour Complementary Colours

The analogue colours are those

directly opposite each other.

Complementary colours are

contrasting and stand out against

each other

Complementary colours tend to be utilised as a highlight

Contrast and Colour Complementary Colours

http://www.indubitablee.com/

Contrast and Colour

… although almost any colour can be used to highlight if no analogous colours are nearby

http://www.indubitablee.com/

Colours and Tone Blues and navies are often used to instil a sense of calm

professionalism

http://alexswanson.net/

Colours and Tone Reds and violets are often used to invoke a sense of importance

and passion

http://www.thewhiskyexchange.com/C-320.aspx http://www.warchild.org.uk/

Colours and Tone Yellows and greens often emphasise warmth and youthfulness

http://www.poprostupawel.pl/prace/termobravo/

Colour Combinations

Working against the natural values of the colours can often have bad effects. For instance, yellow is naturally a lighter colour than its complement, blue. A combination in which yellow is darker than blue would feel strange.

Be careful when ‘tweaking’ a colour scheme for this reason…

Colour Combinations Certain colour combinations can be complicated by association

http://www.creativespark.co.uk/

Contrast and Colour Mono-Chromatic Schemes

Where one hue and itsvariations are used for the vast majority of colours

May be monotonous and dull, but canwork well if applied carefully and complemented with images/subtle colour breaks

Sites to discuss An example of a monochromatic scheme

http://www.bankofireland.com/

Sites to discuss

http://www.instabox.com/boxes/

Sites to discuss

http://www.blackestate.co.nz/

Sites to discuss

http://www.bidsketch.com/

Sites to discuss

undergrad.biola.edu

Want to read more?

Links and references Williams, R. 2008. The Non-Designer's Design Book (3rd ed), Peachpit Press http://webstyleguide.com/type/align.html http://www.colorsontheweb.com http://www.newentrepreneur.com/Resources/Articles/12_Com_Mis/

12_com_mis.html http://www.colorado.edu/AmStudies/lewis/Design/graprin.htm#summary http://certainwebdesign.com/choosing_web_site_colors.htm#winery http://certainwebdesign.com/color_schemes.htm http://www.myinkblog.com/4-principles-of-good-design-for-websites/