Elements

1
Elements Principles of Design

• By
• Laura McKee
• Box Elder High School

2
Magazine Questions

1. What attracts you to the cover?
2. What do you think the message is?

3
Vocabulary
As in just about any field of endeavor, it helps
to have a common language to describe things. If
I say 'dohickey' and you say 'doodad', we may not
know we're talking about the same thing.
Vocabulary is vital for correct principles to be
taught in any discipline.
4
Design Concepts

• Alignment
• Left, right, center, justified
• Proximity
• Placement of graphic/pictures to related text

5
Design Concepts (continued)

• Repetition
• Use of bullets, numbers, symbols, graphics, or
  pictures used more than once. Creates unity.
• Contrast
• Large vs. small
• Dark vs. light
• Thick vs. thin

6
Elements of Design

• Line
• Shape
• Form
• Space
• Color
• Texture
• Value

7
Line

• A straight or curved mark connecting any two
  points.
• Most obvious lines are rules, boxes, and borders.
  Less obvious-but more powerful-are lines that
  direct your eye or define the mood.

8
Identify which line represents Formality,
romance, excitement, mystery, tranquility, or
anger
1
2
3
4
6
5
9
Mood Definition

• FormalityUsed for professional, conservative or
  structured documents. Recognized by straight
  lines and even patterns.
• ExcitementRepresented by straight lines, sharp
  angles, and irregular patterns.
• Tranquility or RomanceUsed in fashion ads, movie
  promotions and travel brochures because the lines
  are made with soft curves regular patterns.

10
Mood Definition (continued)

• Mystery is used if you need to entice your
  audience to figure out a puzzle. Made with
  unusual lines patternsespecially those with
  optical illusions.
• Anger is seen as highs lows with sharp peaks
  valleysand incites action.

11

• Do you want to make any changes to your choices?

12
Answers
13
Shapes

• Shapes define objects, attract attention, provide
  identity and communicate ideas.

Organic shapes look like things from nature.
Geometric shapes
14
Forms

• Forms are 3-dimensional. Where shapes are flat,
  forms have height, width and thickness.

15
Space

• The absence of elements or the area between or
  around elements.
• Space is used to rest the eye, to visually
  organize, and to make text more readable.

16
Color

• The most critical design element on the page.
• It is the most difficult to work with and the
  most effective in achieving the results you want.

17
Primary Colors
Secondary Colors
Tertiary Colors
12-Step Color Wheel
18
Primary Complementary Colors
19
Warm Colors

• Reds, oranges, and yellows are considered warm
  colors. Warm colors are said to come towards
  you.

20
Cool Colors

• Blues, greens, and purples are considered cool
  colors. Cool colors are said to move away from
  you, or appear more distant.

21
Texture

• The structure or grain of a surface gives added
  dimension to a layout.
• Design is FUN

22
Value

• Relative darkness or lightness of a color.
• Adds contrast and texture to a page and can set
  the moodgreat for web page backgrounds.

23
Principles of Design

• Balance
• Unity
• Emphasis
• Rhythm
• Pattern
• Contrast
• Movement

24
Balance

• The distribution of weight may be either
  symmetrical or asymmetrical. If you see something
  hanging crooked it makes you feel uneasy until it
  is balanced.

Asymmetrical (informal) balance means each side
of an imaginary line are different yet equal.
Symmetrical (formal) balance means both sides of
an imaginary line are the same.
25
Pattern/Rhythm

• Artists create pattern by repeating a line, shape
  or color over and over again.

26
Rhythm

• A regular or harmonious pattern created by the
  alternation of contrasting elements.
• This can be music, speech, poetry, and dance. On
  the printed page, repetition of elements at
  regular intervals communicates calmness
  stability.
• Variations or abrupt changes in size, color or
  spacing of repeated elements can add a sense of
  liveliness and excitement.

27
Proportion

• Describes the size, location or amount of one
  thing compared to another.

28
Emphasis

• Special weight or importance placed upon
  something.
• In speech we talk louder or whisper. In
  appearance we dress or style our hair differently
  from the norm. With objects, we paint them bold
  colors, build them enormous or make them noisy.
  We make them different!
• Use contrast
• Add texture
• Color headings graphics or backgrounds
• Lead the reader to the most important thing on
  the page

29
Unity

• Each element in a layout should have a visual
  connection with something else in the layout to
  establish unity. Even elements that are
  unrelated and separate can be aligned to make
  them look as if they all belong together.

30
Hexadecimal Numbers

• Hexa 6
• Six digit number made up of letters from A to F
  and numbers 0 9.
• FFCC99
• Hexadecimal numbers are used in designing a web
  page because hexadecimal numbers will appear the
  same color on each different brower.

31
Three Colors of Hexadecimal

• Red
• Green
• Blue
• Each of the two-digit color codes are in the
  range of 00..FF

32
Create and Prepare Images

• Adjust the Appearance
• Brightness Contrast
• Color Balance
• Resize the Image
• Pixiels size for Interent use
• Scan at 300 dpi
• No more than 400 pixels
• Crop
• Save GIF/JPG

33
Good Web Page Design

• Page download quickly
• Every graphic has an Alt tag
• Link colors coordiante with page colors
• Background does not interrupt the text
• Navigation buttons and bars are easy to
  understand and use
• Navigation is consistent throughout the site

34
Good Web Page Design

• Every web page in the site looks like it belongs
  to the same site
• Animated graphic to not distract from the page.
• Text is big enough to read, but not too big.
• The hierarchy of information is perffectly clear.
• Link colors coordiante with page colors