is1824: introduction to internet multimedia lecture 7: style 1 (layout and colour) rob gleasure...
TRANSCRIPT
IS1824: Introduction to Internet MultimediaLecture 7: Style 1 (Layout and Colour)
Rob Gleasure
[email protected]://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/