Web Design for CQ Pages

The world’s libraries. Connected.

Web Design for CQ Pages

WebJunction

19 July 2012

Reneé PageSenior Web DesignerOCLC


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

Overview


Web Design 101Section One


• Lines and Linework• Shape• Texture• Color• Direction

Five Elements of Design


• 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


Lines Example


• 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


Shapes Example


• 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


Textures Examples


• 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


Color Example


• 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


Direction Example


• Balance• Contrast• Emphasis• Rhythm• Unity

Five Principles of Design


• 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


Balance Example One


Balance Example Two


Balance Example Three


• 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


Contrast Example One


Contrast Example Two


• 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


Emphasis Example


• 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


Rhythm Example – overview list display


Rhythm Example – News List


Rhythm Example – Documents List


• 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


Unity Example


Some other helpful hints and best practices

Section Two


• 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


Example - Apple.com


Example - ATT.com


• 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


Site Purpose Examples


• 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


Prioritization Examples


• 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


Color Example One


Color Example Two – Use of Red


Color Example Three – Use of Magenta


• 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


White Space Bad Example


White Space Good Example


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

Make your message memorable


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

Graphics are your friend


• 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


Balance Example One


Balance Example Two


Page Grids and Image Sizes

Section Three


• 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


Site Page Grid Example


Site Grid


Image Sizes by Grid


Image Size Cheatsheet in CQ


• 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


Image Styles in the Text Component


Image float left with border


Image float right with border


Image float left with no border


Image float right with no border


TypographySection Four


• 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


The Text Component


Font styles available in the text components – format dropdown styles


Font styles available in the text components – span drop down styles


Landing PagesSection Five


Landing Pages – Minnesota Current


Landing Pages – Minnesota Mockup


Landing Pages – Missouri Current


Landing Pages – Missouri Mockup


Landing Pages – Mississippi Mockup One


Landing Pages – Mississippi Mockup Two


Questions?Reneé [email protected]

Web Design for CQ Pages

Documents

Transcript of Web Design for CQ Pages