E lements & P rinciples of D esign

Favorite Web Site 1.What attracts you to the main page? 1.What do you like or dislike about the page? 2.Who is the Audience?

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. Vocabulary

Design Concepts Alignment  Left, right, center, justified Proximity  Placement of graphic/pictures to related text

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

Elements of Design Line Shape Form Space Color Texture Value

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.

Identify which line represents Formality, romance, excitement, mystery, tranquility, or anger

Mood Definition Formality —Used for professional, conservative or structured documents. Recognized by straight lines and even patterns. Excitement— Represented by straight lines, sharp angles, and irregular patterns. Tranquility or Romance— Used in fashion ads, movie promotions and travel brochures because the lines are made with soft curves & regular patterns.

Mood Definition (continued) Mystery is used if you need to entice your audience to figure out a puzzle. Made with unusual lines & patterns— especially those with optical illusions. Anger is seen as highs & lows with sharp peaks & valleys—and incites action.

Do you want to make any changes to your choices?

Answers

Shapes Shapes define objects, attract attention, provide identity and communicate ideas. Geometric shapes Organic shapes look like things from nature.

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

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.

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.

Primary Colors Secondary Colors Tertiary Colors 12-Step Color Wheel

Primary Colors RED GREEN BLUE

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

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

Texture

Value Relative darkness or lightness of a color. Adds contrast and texture to a page and can set the mood—great for web page backgrounds.

Principles of Design Balance Unity Emphasis Rhythm/Pattern Contrast Movement

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.

Pattern/Rhythm Artists create pattern by repeating a line, shape or color over and over again.line shapecolor

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.

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

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

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.

Movement The movement of the eye from one element to another on the web page. How do you want the reader to view your page?  Top to Bottom  Left to Right