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

▶

Nov 27, 2023 278 likes •668 views

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

SLIDE 1

Designing Effective Websites

Day 3 - April 24

SLIDE 2

Elements of Visual Design

Lines, Shapes, and Forms
Space, Balance, and Unity
Color, Texture, and Value

SLIDE 3

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.

SLIDE 4

Unity

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

SLIDE 5

Unity Example: Old Tumblr Signup page

SLIDE 6

Color & Texture

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

SLIDE 7

Color & Texture Example: Emerils Holiday To Go page

SLIDE 8

Color & Texture Example: proxgo.com

SLIDE 9

Another Texture Example: MarieCatribs.com page

SLIDE 10

Value

Definition - relative degree of lightness and darkness Dark can denote:

gloom
mystery
drama
menace
Light can denote:
happiness
fun
warmth
safety

SLIDE 11

Color Meaning

The "perceived" meaning of color is determined by many factors:

experience
culture
personal taste
locale

SLIDE 12

austin.wordcamp.org

SLIDE 13

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

SLIDE 14

Color Mixing

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

SLIDE 15

Online Color Mixing Tools

kuler.adobe.com

kuler for iPhone

SLIDE 16

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

SLIDE 17

Another Color Site: colourlovers.com

SLIDE 18

Principles of Visual Design

Harmony, Contrast, and Emphasis
Repetition, Variety, and Scale

SLIDE 19

Harmony

Definition - Sense that elements belong together
A balance of shapes and colors providing "just

enough" variation and similarity

SLIDE 20

Harmony Example: 37signals.com

SLIDE 21

Contrast

Definition - occurrence of different things
Uses contrast of elements (text, color, texture,

shapes, etc.) to focus attention

Strong tie to Harmony

SLIDE 22

Contrast Example: DesignTaxi.com

SLIDE 23

Emphasis

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

points

SLIDE 24

Emphasis Example: Amazon.com

SLIDE 25

Repetiton

Definition - Recurrence of elements
Sometimes called rhythm

SLIDE 26

Repetition Example: tenbytwenty.com

SLIDE 27

Variety

Definition - Usage of dissimilar elements
Keeps the eye moving constantly with a large

amount of visual interest

Not appropriate for all sites, but...

SLIDE 28

Variety Example: Old ma.tt site

SLIDE 29

Variety Example: petergranfors.com

SLIDE 30

Parallax: Variety through Repetition

Conveys motion or time passing
Often carries a repeating pattern or theme
Incorporates variety

SLIDE 31

Parallax Example: BenTheBodyGuard.com

SLIDE 32

Parallax Example: JessAndRuss.us

SLIDE 33

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

SLIDE 34

Scale Example: apple.com

SLIDE 35

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?

SLIDE 36

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?

SLIDE 37

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.