lecture 8 - university of massachusetts amherst · css stands for cascading style sheets styles...

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Lecture 8

color theoryweb design

intro. to CSS


AnnouncementsExam October 7thReview October 5thProject #1 due Octoner 8thTopic covered by your website and intendedaudiencePreliminary design, layout,that includesStructure diagramOutlineStoryboard and page organization for a web page(color scheme, identity,menu/links, etc.)initial decision on browser, vertical and horizontalsizing constraints


CSS

What is CSS?CSS stands for Cascading Style SheetsStyles define how to display HTML elementsStyles are normally stored in Style SheetsStyles were added to HTML 4.0 to solve aproblemExternal Style Sheets can save you a lot ofworkExternal Style Sheets are stored in CSS filesMultiple style definitions will cascade into one


h3 { color: green; font-family: Arial; font-style: italic;}

Quick CSS examplesLinked (external) - style declarations arecontained in an external text file (e.g. blah.css,should be used when you are assigning the

same styles across multiple pages)

<html> <head> <title>My styled page</title> <link rel=stylesheet type="text/css" href="example.css"> </head> <body> <h3>This is a green, italic, Arial H3 header.</H3> <br> <h3>So is this.</h3> </body>

</html>

example.css

Quick CSS ExamplesEmbedded - style declarations areplaced in the HEAD element of yourHTML documentuseful when you're creating a singlepage, or want to override linked styles ona single page) <html>

<head> <title>My styled page</title> <link rel=stylesheet type="text/css" href="example.css"> <style type="text/css">  </style></head> <body> <h3>This is a green, italic, Arial H3 header.</H3> <br> <h3>So is this.</h3> </body>

</html>


Quick CSS examplesInline - style declarations are includedin the element's open tag within anHTML fileuseful for adding a single instance of astyle, or overriding linked or embeddedstyles in a single instance

<html> <head> <title>My styled page</title> </head> <body> <h3 style="font-family: Arial; font-style: italic; color: green;"> This is a green, italic, Arial H3 header.</h3> <br> <h3>So is this.</h3> </body>

</html>


Cascading Order

Generally speaking we can say that allthe styles will "cascade" into a new"virtual" style sheet by the followingrules, where number four has thehighest priority:1. Browser default2. External style sheet3. Embedded style sheet (inside the

<head> tag)4. Inline style (inside an HTML element)

Note: If the external style sheet linkis placed below the internal stylesheet in HTML <head>, the externalstyle sheet will override the internalstyle sheet.

IncreasingPriority

We’ll come back to this


Color Basicsthe perceptual characteristic of lightdescribed by a color namelight is composed of many colors—thosewe see are the colors of the visualspectrum: red, orange, yellow, green,blue, and violet.

a color is described in three ways: by itsname, how pure or desaturated it is,and its value or lightnesseach hue is distinct and differentiated byits chroma, saturation, intensity, andvalue.

http://www.worqx.com/color/index.htm


Describing color

ChromaHow pure a hue is in relation to gray

SaturationThe degree of purity of a hue.

IntensityThe brightness or dullness of a hue.One may lower the intensity byadding white or black.

Chroma

Intensity



Describing colorLuminance / Value

A measure of the amount of light reflected from a hue.Those hues with a high content of white have a higherluminance or value.

Shade and tint are terms that refer to a variation of ahue.ShadeA hue produced by the addition of black.

TintA hue produced by the addition of white




Color SystemsSubtractive Color CMYK

when we mix colors using paint, or through the printingprocess, we are using the subtractive color method.Subtractive color mixing means that one begins withwhite and ends with black; as one adds color, the resultgets darker and tends to black.

Additive Color RGB

the colors we see on the computer screen are createdwith light using the additive color method. Additive colormixing begins with black and ends with white; as morecolor is added, the result is lighter and tends to white.



Color Wheel

Primary ColorsColors at their basic essence; thosecolors that cannot be created by mixingothers

Secondary ColorsThose colors achieved by a mixture oftwo primaries

Tertiary ColorsThose colors achieved by a mixture ofprimary and secondary hues



Color WheelComplementary ColorsThose colors located opposite each other on a colorwheel

Analogous ColorsThose colors located close together on a color wheel.

Vibrating Boundaries


Color Combinations




Color & Contrast

Figure-ground relationships relationship between a subject (or figure)and its surrounding field (ground)the more an object contrasts with itssurrounds, the more visible it becomes.need to offer the viewer enough contrastbetween the background (paper or screen)and the text … at least an 80% contrastbetween figure and ground.Yellow text on a white background or blue texton a black background, are difficult to read


Color & Contrast'simultaneous contrast' -> text mayappear to vibrate, or cast a shadow.leads to eye strain and fatigue

Some color combinations, such as red text on a blue background, causeillusions when positioned together.Sensitivity to Colorblind Deficiencies. visual documents or signage withoutthought to the overall contrast levelbetween figure and ground can beproblematic for people with sightdeficiencies.



Itten's Color Contrasts



Proportion & Intensity

The color with the largest proportionalarea is the dominant color (theground)Smaller areas are subdominantcolorsAccent colors are those with a smallrelative area, but offer a contrastbecause of a variation in hue,intensity, or saturation (the figure)


Proportion & Intensity

Placing small areas of light color on adark background, or a small area ofdark on a light background will createan accentIf large areas of a light hue are used,the whole area will appear light;conversely, if large areas of dark valuesare used, the whole area appears dark.

Alternating color by intensity ratherthan proportion will also change theperceived visual mix of color.



DominanceExamples of Contrast Dominance


Color Shade and Tints


Using colour in web design

Give your web site a color schemeVisually appealing web pages need aconsistent colour scheme.No color = no personality.Too much color, or erratic color, gives apage a confused personality.

A color scheme often refers to aconsistent system of matching hues. Itmight alternatively mean a way of usingcolors, which don’t necessarily belong toa family of hues.


Examples - not enough color


Example - too much color

The large area ofintense orange inthe middle of thepage is the mostattractiveelement, butdoesn’t containhigh-valuecontent. This is adesign error.


Example - too much color

uses too manyhighly-attractingelements. Thelarge number ofbright red boxesconfuses theeye, and thelarge number ofheavy colouredboxes draws youaway from therelatively lightcontent in themiddle of thepage.


Better?


Start with a photo?

http://kuler.adobe.com/#create/fromanimage


Another


Red http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/

powerful and high-end feeling

powerful and elegant

energy and movement


Design Process

http://www.principlesofbeautifulwebdesign.com/

Discoverywhat does the company, product,organization, person, etc. do, represent?does the company, product, organization,person, etc. have an existing logo, brand,theme, … ?what is the goal for the websiteinformation to be providedtarget audiencedemographicscompetitors, similar companies, products,organizations, peopleaccessibility requirements -- ADA & beyond


Design Process


Implementationstart with a paper designignore limitations of html/CSS,dreamweaver, flash, ruby, jScript, AJAXtarget:PC, tablet, mobile device

Good design insuresusers pleased with design, but drawn tothe contentusers can move easily with intuitivenavigationusers recognize each page as belongingto the site


Anatomy of a web pagecontaining block

Preferably a <div>, butcould be a <table>

logo

navigation content

white space

footer


Anatomy of a web pagecontaining block

logo

navigation

content

white space

footer

abovethefold

browser window

negative space


Golden ratio


Also called “divine proportion”considered to be aesthetically pleasing

Rule of thirds

100100/Φ = 100/1.6180339 … = 61.73


Layout


SMITH’SSERVICES

homeabout

servicescontact

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Maecenas at dui quis urnasuscipit cursus volutpat id est. Curabiturcondimentum tincidunt vulputate.Curabitur volutpat facilisis diam. Aenean utvelit massa, sed ornare lacus. Sed velmauris velit, sit amet consequat velit.Vivamus dapibus justo eu augue varius inimperdiet libero tincidunt. Mauris etimperdiet dui. Mauris varius justo ac liberoeleifend bibendum. Quisque at blandit orci.Donec id lectus sapien. Vestibulumplacerat turpis ut dolor mollis ultrices. Namat ultricies tortor. Lorem ipsum dolor sitamet,

© Smith Corportation 1932

SMITH’S SERVICEShome about services contact

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Maecenas at dui quis urnasuscipit cursus volutpat id est. Curabiturcondimentum tincidunt vulputate.Curabitur volutpat facilisis diam. Aenean utvelit massa, sed ornare lacus. Sed velmauris velit, sit amet consequat velit.Vivamus dapibus justo eu augue varius inimperdiet libero tincidunt. Mauris etimperdiet dui. Mauris varius justo ac liberoeleifend bibendum. Quisque at blandit orci.Donec id lectus sapien. Vestibulumplacerat turpis ut dolor mollis ultrices. Namat ultricies tortor. Lorem ipsum dolor sitamet,

SMITH’S SERVICES

homeabout

servicescontact Curabitur volutpat facilisis diam. Aenean

ut velit massa, sed ornare lacus. Sed velmauris velit, sit amet consequat velit.Vivamus dapibus justo eu augue varius inimperdiet libero tincidunt. Mauris etimperdiet dui. Mauris varius justo ac liberoeleifend bibendum. Quisque at blanditorci. Donec id lectus sapien. Vestibulumplacerat turpis ut dolor mollis ultrices.Nam at ultricies tortor. Lorem ipsum dolorsit amet,Mauris varius justo ac libero eleifendbibendum. Quisque at blandit orci. Donecid lectus sapien. Vestibulum placeratturpis ut dolor mollis ultrices. Nam atultricies tortor. Lorem ipsum dolor sitamet,

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Maecenas at dui quis urnasuscipit cursus volutpat id est. Curabitur

condimentum tincidunt vulputate.


Principles of Design

Balancedistribution of elements across thedesign.symmetrical balanceasymmetrical balancediscordant or off-balance

Contrastaccentuation of the differencesbetween elements in a design


Balance


Symmetry


Balance


Asymmetry


Contrast


Contrast -- another example


Principles of Design

Emphasisprovides the focal point for the piece. It isa way of making the element that is mostimportant stand out in the design

Rhythmallows your designs to develop aninternal consistency that makes it easierfor your customers to understand

Unityalso called proximity, providescohesiveness to your designs


Emphasis


Emphasis

Placementthe direct center of a composition is the point atwhich users look first, and is always thestrongest location for producing emphasis.

Continuancewhen our eyes start moving in one direction,they tend to continue along that path until amore dominant feature comes along.one of the most common methods that webdesigners use to unify a layout.


EmphasisIsolationproximity creates unity in a design, isolationpromotes emphasis.

Proportiondifferences in the scale of objects, an objectin an environment that's of larger or smallerscale than the object itself, makes the objectappear larger or smaller than it does in reallife and draws viewers' attention to theobject,


Rhythm and repetition


Unity


Visual Analysis Diagram

The menu block overlaps theimage on a transparent field thatliterally overlaps and attachesitself to the image and providesunity.


Typical layouts


Left-column NavigationRight-column NavigationThree-column Navigation


Left-column Navigation


Right-column Navigation


Three-column Navigation


3-column with content above



Getting Inspired

Go beyond bread and butterdesignsCSS Zen Gardenhttp://www.csszengarden.com/

CSS Beautyhttp://www.cssbeauty.com/

CSS Vaulthttp://www.bestcssvault.com/

lecture 8 - university of massachusetts amherst · css stands for cascading style sheets styles...

Documents