Web Design for CQ Pages

1. 19 July 2012 Reneé Page Senior Web DesignerOCLC WebJunction Web Design for CQ Pages

2. Overview Today we will discuss: • Web Design 101- Basics and Best Practices • Page Grids and Image Sizes • Typography • Designing Landing Pages • Questions

3. Section One Web Design 101

4. Five Elements of Design • Lines and Linework • Shape • Texture • Color • Direction

5. Lines and Linework • Lines can be vertical or horizontal. They can include borders, rules or be visually created by the alignment of items. It does not have to be a literal line on a page. Lines help create content areas on web pages. Lines and divisions increase the readability of the web page through organization. • Ex. Aligning content to the page grid.

6. Lines Example

7. Shape • Shapes are any delineation or curve created in design. The most common shapes on the web are squares and rectangles. Images can be used to introduce other shapes. • Ex. Introduction of curves with the highlight box, logos and imagery to soften the design.

8. Shapes Example

9. Texture • Texture gives a website a tactile experience by creating a feeling of surface. Texture on Web pages is all visual, but you can use natural or artificial textures to get the effect in your designs. • Ex. The use of gradients and noise textures in backgrounds.

10. Textures Examples

11. Color • The use of color is one of the most commonly known ways to establish a design. On the web, color is used to establish hierarchy and call attention to specific items. • Ex. Colored highlight boxes, buttons, images and hyperlinks.

12. Color Example

13. Direction • Direction gives a piece movement. A good design will lead the eye through the design in a deliberate fashion so that the user sees what the designer wants them to. Or allow the user to find what they are looking for quickly and in an efficient manner. • Ex. Headline – to sub-head – to content

14. Direction Example

15. Five Principles of Design • Balance • Contrast • Emphasis • Rhythm • Unity

16. Balance • Balance is the equilibrium of heavy and light elements on a page. Larger, darker elements appear heavier in the design than smaller, lighter elements to the user. Creating a good blend of both heavy and light elements will create harmony. • Ex. Large bold headlines to body content; bold colorful highlight box to a simple quicklinks list

17. Balance Example One

18. Balance Example Two

19. Balance Example Three

20. Contrast • Contrast is the differentiation between an element. The most common example would be color. It can also include contrasting shapes (square vs. circle), or contrasting sizes (large vs. small), or contrasting textures (smooth vs. rough). • Ex. Teal to Gray; H1 to H6; size of images;

21. Contrast Example One

22. Contrast Example Two

23. Emphasis • Emphasis is what the eye is drawn to in a design. Where the user looks for. It's easy to give everything equal emphasis or try to emphasize everything in a design, but this will make the design bland and flat. The best plan is to establish a hierarchy of the page and then apply the emphasis to the elements based on that hierarchy. • Ex. H1 to H6; The hero of the page.

24. Emphasis Example

25. Rhythm • Rhythm = repetition. Rhythm brings an internal consistency to your pages. Patterns are easy for humans to understand, and repetition provides patterns that make your site easier to comprehend. • Ex. Consistent use of color, size, type and location;

26. Rhythm Example – overview list display

27. Rhythm Example – News List

28. Rhythm Example – Documents List

29. Unity • Unity = proximity. It is the principle of keeping like items together and diverse items further apart. Unity pulls elements together. • Ex. Quicklinks and tertiary content in the right column;

30. Unity Example

31. Section Two Some other helpful hints and best practices

32. The Hero • Each page should have a primary message. This is the “hero” of the page. If a formula existed for the hero, the ratio would be a two-thirds – one thirds ratio in page real estate. Two-thirds “hero” – one-third supplemental content. This formula works especially well on landing pages or section pages of a site. • Ex. Apple and AT&T

33. Example - Apple.com

34. Example - ATT.com

35. Site Purpose • Make sure the site’s purpose is immediately known to the user without thought or effort on their part. • State: Who you are. What service you provide. • This can be done with taglines, images, or short intro text.

36. Site Purpose Examples

37. Hierarchy and Prioritization • When creating a page the first step is to identify the main message of the page. Next, prioritize the remaining content into secondary and tertiary buckets. Once priority is assigned, then arrange content on the page and weight them accordingly using space, color, size, texture, etc.

38. Prioritization Examples

39. Color • Warmer tones like red, yellow and orange are naturally bright and so tend to attract the eye. They also “expand” when set against colder colors like blue and green. This means that an orange button on a blue background looks like it’s flowing outwards and taking the front seat. Conversely, a blue button on an orange background contracts inward, wishing to stay in the background.

40. Color Example One

41. Color Example Two – Use of Red

42. Color Example Three – Use of Magenta

43. White space defines relationships • If everything has equal spacing there is no separation of content into groups. • Everything blends into one which makes it harder for the user to scan the page for the content they are looking for.

44. White Space Bad Example

45. White Space Good Example

46. Make your message memorable • The design of a great website will support that website’s overall message or purpose.

47. Graphics are your friend • Graphics and images will reinforce your message and can be used to attract the user’s eye to specific content.

48. Strive for Balance • Balance can be subjective. Symmetrical designs are the most obvious examples of balanced sites. Asymmetrical designs can be well-balanced, too, as long as the different elements are positioned in such a way that one side of your site doesn’t overpower the other.

49. Balance Example One

50. Balance Example Two