Designing Effective Websites Day 3 - April 24 Elements of Visual - PowerPoint PPT Presentation

Designing Effective Websites Day 3 - April 24

Elements of Visual Design • Lines, Shapes, and Forms • Space, Balance, and Unity � • Color, Texture, and Value

Homework Day 2 1. Construct a wireframe for each page of your site, again focusing on priority and grouping of information content. 2. Spend 15 minutes reviewing a site you frequent (e.g., apple.com, google.com, etc.) and identify how they use the at least three of the following design elements: lines, shapes, forms, space, balance and unity.

Unity • Definition - Sense that a work is whole • When a page has unity, it feels complete • Repetition can help with this

Unity Example: Old Tumblr Signup page

Color & Texture • Color: the way light reflects off of a surface • Texture: concentrated area of variation in value or tonality • Used to evoke emotions and to draw attention • Texture is best served with subtlety

Color & Texture Example: Emerils Holiday To Go page

Color & Texture Example: proxgo.com

Another Texture Example: MarieCatribs.com page

Value � � Definition - relative degree of lightness and darkness � Dark can denote: Light can denote: • happiness • gloom • fun • mystery • warmth • drama • safety • menace

Color Meaning The "perceived" meaning of color is determined by many factors: • experience • culture • personal taste • locale

austin.wordcamp.org

Color Theory • A common representation of the RGB color Model is: HSL � • Hue: gamut of pure colors � • Saturation: "colorfulness" of a color � • Lightness: amount of black or white

Color Mixing • Achromatic colors: blacks, whites, grays • Monochromatic colors: based on a single hue • Analogous colors: based on similar hues

Online Color Mixing Tools kuler.adobe.com � kuler for iPhone

Class Exercise: Create Your Own Kuler Mixes 1. Create a Kuler profile at kuler.adobe.com 2. Click "Create" and select a base color. 3. Create and Save a theme for each of the following: • Analogous • Complementary • Monochromatic

Another Color Site: colourlovers.com

Principles of Visual Design • Harmony, Contrast, and Emphasis • Repetition, Variety, and Scale

Harmony • Definition - Sense that elements belong together • A balance of shapes and colors providing "just enough" variation and similarity

Harmony Example: 37signals.com

Contrast • Definition - occurrence of different things • Uses contrast of elements (text, color, texture, shapes, etc.) to focus attention • Strong tie to Harmony

Contrast Example: DesignTaxi.com

Emphasis • Definition - Accentuation of focal points • Draws viewer's attention to important items • Most designs have one and often multiple focal points

Emphasis Example: Amazon.com

Repetiton • Definition - Recurrence of elements • Sometimes called rhythm

Repetition Example: tenbytwenty.com

Variety • Definition - Usage of dissimilar elements • Keeps the eye moving constantly with a large amount of visual interest • Not appropriate for all sites, but...

Variety Example: Old ma.tt site

Variety Example: petergranfors.com

Parallax: Variety through Repetition • Conveys motion or time passing • Often carries a repeating pattern or theme • Incorporates variety

Parallax Example: BenTheBodyGuard.com

Parallax Example: JessAndRuss.us

Scale • Definition - relationship between the size of elements • Varying the size of different elements on the page • Good use of scale often includes lots of negative space

Scale Example: apple.com

Homework: Applying the Principles to Your Design • Looking at your wireframe (or even your existing site), list adjustments you could make to improve emphasis? • Can you envision opportunities for harmony/ contrast in your site? • Does your design or theme employ Repetition, Variety or Scale? Are there pages or sections of your site that could?

What Does this Mean for Me??? • Should I create a Design "Comp" now? • Can I just start coding my HTML and CSS? • What if I am using WordPress?

Prep for next week… • Read the HyperArts.com post: What is Responsive, Adaptive and Fluid Design? Defining Terms in a Multi-Device World. • Watch Luke Wroblewski’s Mobile First (https:// vimeo.com/38187066) presentation that coined the term “Mobile First.