1. IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure R.Gleasure@ucc.ie http://girtab.ucc.ie/rgleasure/index.html

2. IS1824 Today’s class  Repetition  Alignment  Proximity  Contrast  Discussion of colour  Discussion of example Websites

3. 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

4. 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

5. Repetition Good example of repetition

6. 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

7. Alignment Example of poor alignment http://www.ibm.com/us/en/

8. 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.

9. 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

10. Proximity Good example of proximity http://store.apple.com/us

11. 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

12. Contrast Example taken from http://www.userfocus.co.uk/articles/A_CRAP_way_to_improve_usability.htmlhttp://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

13. Contrast Example of good contrast http://www.sonymobile.com/global-en/://www.sonymobile.com/global-en/

14. 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...

15. Contrast and Colour Good examples of balanced colour contrast http://www.xerox.com/

16. Contrast and Colour The Colour Wheel  The colour wheel is useful for showing how colours relate to each other

17. 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

18. Contrast and Colour Example of analogous colours http://www.stemiltcreekwinery.com/

19. 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

20. Contrast and Colour Complementary Colours http://www.indubitablee.com/

21. Contrast and Colour … although almost any colour can be used to highlight if no analogous colours are nearby http://www.indubitablee.com/

22. Colours and Tone Blues and navies are often used to instil a sense of calm professionalism http://alexswanson.net/

23. 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/

24. Colours and Tone Yellows and greens often emphasise warmth and youthfulness http://www.poprostupawel.pl/prace/termobravo/

25. 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…

26. Colour Combinations Certain colour combinations can be complicated by association http://www.creativespark.co.uk/

27. Contrast and Colour Mono-Chromatic Schemes  Where one hue and its variations are used for the vast majority of colours  May be monotonous and dull, but can work well if applied carefully and complemented with images/subtle colour breaks

28. Sites to discuss An example of a monochromatic scheme http://www.bankofireland.com/

29. Sites to discuss http://www.instabox.com/boxes/

30. Sites to discuss http://www.blackestate.co.nz/

31. Sites to discuss http://www.bidsketch.com/

32. Sites to discuss undergrad.biola.edu

33. Want to read more? Links and references  Williams, R. 2008. The Non-Designer's Design Book (3 rd ed), Peachpit Press  http://webstyleguide.com/type/align.html http://webstyleguide.com/type/align.html  http://www.colorsontheweb.com http://www.colorsontheweb.com  http://www.newentrepreneur.com/Resources/Articles/12_Com_Mis/12_c om_mis.html http://www.newentrepreneur.com/Resources/Articles/12_Com_Mis/12_c om_mis.html  http://www.colorado.edu/AmStudies/lewis/Design/graprin.htm#summary http://www.colorado.edu/AmStudies/lewis/Design/graprin.htm#summary  http://certainwebdesign.com/choosing_web_site_colors.htm#winery http://certainwebdesign.com/choosing_web_site_colors.htm#winery  http://certainwebdesign.com/color_schemes.htm http://certainwebdesign.com/color_schemes.htm  http://www.myinkblog.com/4-principles-of-good-design-for-websites/ http://www.myinkblog.com/4-principles-of-good-design-for-websites/