Visual design info design
Download
1 / 32

Visual Design - PowerPoint PPT Presentation


  • 280 Views
  • Updated On :

Visual Design, Info Design 12 May 2010 Visual Design Grid Color Typography Visual Design : The Grid A grid orders the elements on a page – whether the page is literal (paper) or figurative (a screen) Paper (print) – size is known, fixed

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Visual Design' - issac


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Visual design l.jpg
Visual Design

Grid

Color

Typography


Visual design the grid l.jpg
Visual Design : The Grid

A grid orders the elements on a page – whether the page is literal (paper) or figurative (a screen)

Paper (print) – size is known, fixed

Web (screen) – size is unknown, layout may be fixed or fluid


Visual design golden ratio 1 3 l.jpg
Visual Design : Golden Ratio (1/3)

The Golden Ratio (or the Divine Proportion, Golden Mean, Golden Rectangle, etc) is a visual representation of a number called Phi (pronounced fi) … it’s found throughout nature -- in space, physics, DNA, math, art, architecture (see Greek or Egyptian works)

The Golden Ratio is a measurement between two segments of a whole. If line “A” has two unequal parts, “AB” and “BC” – the golden ratio, 1.618 [actually 1.618033988749895], is achieved where A/B = B/C


Visual design golden ratio 2 3 l.jpg
Visual Design : Golden Ratio (2/3)

Source: Design and the Divine Proportion


Visual design golden ratio 3 3 l.jpg
Visual Design : Golden Ratio (3/3)

Source: Design and the Divine Proportion


The nautilus shell l.jpg

Once you start splitting a golden rectangle by the ratio, you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

The Nautilus Shell

Source: Anyone for thirds?


Visual design rule of thirds l.jpg
Visual Design: Rule of Thirds you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

Simplified Golden Mean

Symmetrical design is, usually, boring. Most designs can be made more visually interesting by mentally dividing the area (page, photo) into thirds vertically and horizontally and placing the most important elements within those thirds.

Examples: photos1, photos2


Color importance l.jpg
Color Importance you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

  • 80% of the brain is devoted to processing visual information

  • The two categories: form and color


What is color l.jpg
What is color? you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

The visual effect caused by the spectral composition of light which is emitted, transmitted or reflected by objects [Color Logic for Web Design, p 7]

The experience of color is always relative to context – relationship to adjacent color can cause noticeable differences in visual perception

See Color Perception (in 3000 Words) In William Bechtel and George Graham (eds), A Companion to Cognitive Science, Blackwells, 1998. http://www.ucc.uconn.edu/~wwwphil/ccompan.html


Color models l.jpg
Color Models you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

  • Sir Isaac Newton developed the first color wheel in 1666

  • Computer monitors use additive color model : RGB

    • Projected light

  • Printers use subtractive color model : CMYK

    • Reflected light


Color three primaries l.jpg
Color – Three Primaries you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

  • Red: #ff0000 or #f00 in CSS

  • Blue: #0000ff or #00f in CSS

  • Yellow: #ffff00 or #ff0 in CSS


Color the secondaries l.jpg
Color – The Secondaries you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

  • Orange: #ff9900 or #f90 in CSS

  • Green: #00ff00 or #0f0 in CSS

  • Purple: #ff00ff or #f0f in CSS


Color the tertiaries l.jpg
Color – The Tertiaries you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

  • Yellow-Orange: #ffcc00 or #fc0 in CSS

  • Red-Orange: #ff6600 or #f60 in CSS

  • Red-Purple: #cc00cc or #c0c in CSS

  • Blue-Purple: #9900ff or #90f in CSS

  • Blue-Green: #00cccc or #0cc in CSS

  • Yellow-Green: #ccff00 or #cf0 in CSS


Color harmony l.jpg
Color Harmony you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

Analogous color: side-by-side on color wheel

Complementary color: opposites on the color wheel

Triads: where the points of an equilateral triangle touches the color wheel


Additive subtractive color l.jpg
Additive & Subtractive Color you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

From http://www.sanford-artedventures.com/study/g_color_wheel.html


Attributes l.jpg
Attributes you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

  • Hue – the specific color

  • Saturation – intensity

  • Value – brightness

    • Color Principles Lecture – Relative Value (Part1, 11.11)


Color theory chevreul 1 2 l.jpg
Color Theory: Chevreul you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature. (1/2)

French Chemist (1776-1889)

  • Highly contrasting colors used in sufficient quantities will make each appear more brilliant; when used in small quantities the eye blends and creates a new, duller color.


Color theory chevreul 2 2 l.jpg
Color Theory: Chevreul you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature. (2/2)

  • When colors are not analogous and not complementary, one will give the other a complementary tinge

  • Colors that are adjacent to one another tend to optically mix to create a new color


Color theory bezold effect l.jpg
Color Theory: Bezold Effect you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

Changing only one color can significantly alter appearance


Color theory albers 1 2 l.jpg
Color Theory: Albers (1/2) you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

L: r102/g102/b104; R:r153/051g/153b; C: r153/g102/b204

Perceived hue will change based on surroundings; Bauhaus (1888-1976)

Three colors below (and next) appear to be four


Color theory albers 2 2 l.jpg
Color Theory: Albers (2/2) you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

L: r153/g204/b000; R:r204/255g/153b; C: r051/g204/b102


Color theory movement 1 2 l.jpg
Color Theory: Movement you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature. (1/2)

  • Depending on the background, warm colors tend to “advance” and cool colors “recede”

    • Thus, pick your colors for visited/not visited links with care

    • Also be aware of cultural meanings (green = “go” so might not be a good choice for “went”)


Color theory movement 2 2 l.jpg
Color Theory: Movement (2/2) you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

Which color advances?


Harmonious guidelines l.jpg
Harmonious Guidelines you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

  • Use a limited color palette

  • Experiment with harmonies – match with tone

    • Dynamic, strong contrast = edgy, attention-getting, energizing

    • Subtle, low contrast = fluid, low key, sophisticated


Typography l.jpg
Typography you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

  • The art of arranging type, designing type and modifying type glyphs.

  • Serif and sans serif

  • Limited web palette

  • Monitor inconsistencies

  • Readability

    • There is an optimum line width, and it is determined by the number of characters in the line. A general rule of thumb is 2–3 alphabets or 52–78 characters (including spaces).


Design examples l.jpg
Design Examples you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

URLGreyHot – navigation

Portfolio 1 – overall (see samples)

Portfolio 2 – grid, typography

Business – broken grid

Inspiration: ZenGarden, DailySlurp (color)


Visual design resources l.jpg
Visual Design : Resources you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

Feeling Your Way Around Grids

Design Grids For Web Pages

Designing Blog Theme Templates


Color resources l.jpg
Color Resources you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

Choosing Effective Color Schemes

Why Color Matters

Tool: Color Harmony Chooser

Browser Safe Palette


Typographic resources l.jpg
Typographic Resources you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.

Web Design is 95% Typography

The Elements of Typographic Style Applied To The Web

Five Steps To Better Typography


Recap genres 1 2 l.jpg
Recap: Genres you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature. (1/2)

  • Individually:

    • Find three sites that you believe best epitomize the genre you worked on last week. Feel free to develop a “sub-genre” – such as “news” as a subset of “media.” Also, try to find at least one that categorically fits but visually breaks the genre.

    • Identify what “makes” this genre immediately self-apparent – regardless of entry point

    • Identify content types found in this genre


Recap genres 2 2 l.jpg
Recap: Genres you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature. (2/2)

  • Regroup– discuss – reach consensus. Try to agree on one or two example sites. What do they have in common?

    • Color?

    • Type?

    • Grid?

    • Page width?


ad