1. The world’s libraries. Connected. Web Design for CQ Pages WebJunction 19 July 2012 Reneé Page Senior Web Designer OCLC

2. The world’s libraries. Connected. Today we will discuss: Web Design 101- Basics and Best Practices Page Grids and Image Sizes Typography Designing Landing Pages Questions Overview

3. The world’s libraries. Connected. Web Design 101 Section One

4. The world’s libraries. Connected. Lines and Linework Shape Texture Color Direction Five Elements of Design

5. The world’s libraries. Connected. 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. Lines and Linework

6. The world’s libraries. Connected. Lines Example

7. The world’s libraries. Connected. 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. Shape

8. The world’s libraries. Connected. Shapes Example

9. The world’s libraries. Connected. 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. Texture

10. The world’s libraries. Connected. Textures Examples

11. The world’s libraries. Connected. 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. Color

12. The world’s libraries. Connected. Color Example

13. The world’s libraries. Connected. 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 Direction

14. The world’s libraries. Connected. Direction Example

15. The world’s libraries. Connected. Balance Contrast Emphasis Rhythm Unity Five Principles of Design

16. The world’s libraries. Connected. 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 Balance

17. The world’s libraries. Connected. Balance Example One

18. The world’s libraries. Connected. Balance Example Two

19. The world’s libraries. Connected. Balance Example Three

20. The world’s libraries. Connected. 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; Contrast

21. The world’s libraries. Connected. Contrast Example One

22. The world’s libraries. Connected. Contrast Example Two

23. The world’s libraries. Connected. 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. Emphasis

24. The world’s libraries. Connected. Emphasis Example

25. The world’s libraries. Connected. 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; Rhythm

26. The world’s libraries. Connected. Rhythm Example – overview list display

27. The world’s libraries. Connected. Rhythm Example – News List

28. The world’s libraries. Connected. Rhythm Example – Documents List

29. The world’s libraries. Connected. 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; Unity

30. The world’s libraries. Connected. Unity Example

31. The world’s libraries. Connected. Some other helpful hints and best practices Section Two

32. The world’s libraries. Connected. 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 The Hero

33. The world’s libraries. Connected. Example - Apple.com

34. The world’s libraries. Connected. Example - ATT.com

35. The world’s libraries. Connected. 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. Site Purpose

36. The world’s libraries. Connected. Site Purpose Examples

37. The world’s libraries. Connected. 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. Hierarchy and Prioritization

38. The world’s libraries. Connected. Prioritization Examples

39. The world’s libraries. Connected. 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. Color

40. The world’s libraries. Connected. Color Example One

41. The world’s libraries. Connected. Color Example Two – Use of Red

42. The world’s libraries. Connected. Color Example Three – Use of Magenta

43. The world’s libraries. Connected. 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. White space defines relationships

44. The world’s libraries. Connected. White Space Bad Example

45. The world’s libraries. Connected. White Space Good Example

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

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

48. The world’s libraries. Connected. 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. Strive for Balance

49. The world’s libraries. Connected. Balance Example One

50. The world’s libraries. Connected. Balance Example Two

51. The world’s libraries. Connected. Page Grids and Image Sizes Section Three

52. The world’s libraries. Connected. The site is based on a base grid of 12 columns of 60px. For clean lines, pages and organized content, try to align your content to the grid. Use column controls to organize your content. Design samples width pixel dimensions will be available to you in CQ to reference. Page grids

53. The world’s libraries. Connected. Site Page Grid Example

54. The world’s libraries. Connected. Site Grid

55. The world’s libraries. Connected. Image Sizes by Grid

56. The world’s libraries. Connected. Image Size Cheatsheet in CQ

57. The world’s libraries. Connected. Try to save the image out as small as possible for the space it will be used for. Use the image samples to determine the proper width. Save out as jpg, png or gif at 72dpi. Images can now be floated right or left. By default images should use the gray border. Images

58. The world’s libraries. Connected. Image Styles in the Text Component

59. The world’s libraries. Connected. Image Styles in the Text Component

60. The world’s libraries. Connected. Image float left with border

61. The world’s libraries. Connected. Image float right with border

62. The world’s libraries. Connected. Image float left with no border

63. The world’s libraries. Connected. Image float right with no border

64. The world’s libraries. Connected. Typography Section Four

65. The world’s libraries. Connected. H1’s are meant for page titles H2’s- H4’s are meant for sub-headlines on the page to break up content. The use of bold, color and italics can be used to emphasize text. Text can also be emphasized by placement within a highlight box. A mix of serif and sans-serif fonts are used on the site to also show differentiation and contrast. Typography Hints

66. The world’s libraries. Connected. The Text Component

67. The world’s libraries. Connected. Font styles available in the text components – format dropdown styles

68. The world’s libraries. Connected. Font styles available in the text components – span drop down styles

69. The world’s libraries. Connected. Font styles available in the text components – span drop down styles

70. The world’s libraries. Connected. Font styles available in the text components – span drop down styles

71. The world’s libraries. Connected. Landing Pages Section Five

72. The world’s libraries. Connected. Landing Pages – Minnesota Current

73. The world’s libraries. Connected. Landing Pages – Minnesota Mockup

74. The world’s libraries. Connected. Landing Pages – Missouri Current

75. The world’s libraries. Connected. Landing Pages – Missouri Mockup

76. The world’s libraries. Connected. Landing Pages – Missouri Mockup

77. The world’s libraries. Connected. Landing Pages – Mississippi Mockup One

78. The world’s libraries. Connected. Landing Pages – Mississippi Mockup Two

79. The world’s libraries. Connected. Questions? Reneé Page pager@oclc.org