Web Design for CQ Pages

The world’s libraries. Connected.

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.

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 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 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 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é Pagepager@oclc.org

Web Design for CQ Pages

Documents

GLOW Party!Pages/CQ/CQ...*A friendly reminder that all cost activities are cash only. Please note activities can be cancelled or moved due to inclement weather. Check with a friendly

Design Book - GitHub Pages

CQ Magazine

Student Design Website Pages - maneasc.wa.edu.au

Responsive Design for Landing Pages

How to design web pages

Design Of Accessible Web Pages

CQ Presentation CQ

CQ CQ CQ DE VE3WE CQ CQ CQ DE VE3WE CQ CQ CQ DE VE3WE … · CQ CQ CQ DE VE3WE CQ CQ CQ DE VE3WE CQ CQ CQ DE VE3WE 65th Anniversary WAVELENGTH Official bulletin of Scarborough Amateur

CQ Researcher

Optimal Rating Design - GitHub Pages

AUDI CQ-EA1070L CQ-EA1071L CQ-EA1072L CQ-EA1073L CQ

SPX-CQ Presentation April, 2006. About SPX-CQ About SPX-CQ Subontracting and Partnership Exchange of Chongqing(SPX-CQ) is a non-for-profit organization

AUTOMOTIVE AFTERMARKET CQ-C1401U CQ-C1301U automotivo_panasonic… · FM Stereo Radio Frequency Range 87.9MHz ... • • PLL (Phase Locked Loop) ... CQ-C1401U / CQ-C1301U. 9.3. CD

Invito all E.M.E CQ CQ CQ Sezione A.R.I. Lucca 13 novembre 2009

Bangla ICT BOM ACC 3RD English 4th Class Roll CQ MCQ CQ CQ … · 2017. 9. 19. · english cq mcq cq cq mcq cq mcq cq mcq 3rd cq mcq 4th cq mcq 35531 e-5 apmm fbi 35786 e-5 apmm fbi

CQ Rewind – Summary Only Summary Only FULL EDITIONabsonh.net/RewindSVdownloads/CQ Rewind 07-18-2010...The FULL EDITION of approximately 10-12 pages includes comprehensive excerpts

Book pages design

John Bergman, KC5LK P.O. Box 792 ... - CQ Amateur Radio€¦ · CQ WAZ Manager y del Comité CQ de Diplomas Las decisiones del Comité Asesor CQ DX (CQ DX Advisory Committee) sobre

RF Design 4 pages