User Tools
design:elements_principles_of_design
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| design:elements_principles_of_design [2020/06/11 12:37] – created mmcc | design:elements_principles_of_design [2021/06/25 10:09] (current) – external edit 127.0.0.1 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== Elements & Principles of Design ====== | ||
| + | Author: Michelle McCausland | ||
| + | |||
| + | ====== TLDR; ====== | ||
| + | **Elements of Design** | ||
| + | * Color (Hue) | ||
| + | * Value (Tone) | ||
| + | * Texture | ||
| + | * Shape | ||
| + | * Form | ||
| + | * Space (whitespace) | ||
| + | * Line | ||
| + | * Type | ||
| + | |||
| + | **Principles of Design** | ||
| + | * Contrast | ||
| + | * Emphasis | ||
| + | * Balance | ||
| + | * Unity | ||
| + | * Pattern | ||
| + | * Movement | ||
| + | * Rhythm / Repetition | ||
| + | * Proportion | ||
| + | * Simplicity | ||
| + | * Gradation | ||
| + | |||
| + | ====== Elements of Design ====== | ||
| + | |||
| + | - **1. Color (Hue)** | ||
| + | - sets the mood or feel of design | ||
| + | - conveys emotion | ||
| + | - Color Wheel | ||
| + | - Types of Colors | ||
| + | - Primary | ||
| + | - Red, Blue, Yellow | ||
| + | - Secondary | ||
| + | - Primary + Primary | ||
| + | - Tertiary | ||
| + | - Primary + Secondary | ||
| + | - Harmonies | ||
| + | - Monocrome | ||
| + | - Complimentary | ||
| + | - Opposite colors on color wheel | ||
| + | - Split Complimentary | ||
| + | - Analogous | ||
| + | - Adjacent colors on color wheel | ||
| + | - Triad | ||
| + | - 3 Adjacent colors | ||
| + | - Tint | ||
| + | - Add White | ||
| + | - Tone | ||
| + | - Add Grey | ||
| + | - Shade | ||
| + | - Add Black | ||
| + | - **2. Value (Tone)** | ||
| + | - Degree of lightness or darkness | ||
| + | - Adds Contrast | ||
| + | - Creates area of interest | ||
| + | - Focal point | ||
| + | - e.g. Light shape on a dark background | ||
| + | - Use color to add depth | ||
| + | - **3. Texture** | ||
| + | - Surface quality of a defined shape or line | ||
| + | - Adds sense of depth | ||
| + | - e.g. reflective surface effect | ||
| + | - "Flat Design" | ||
| + | - More visually tactile | ||
| + | - rough, smooth, hard, soft | ||
| + | - Emphasize focal point | ||
| + | - Subtle decorations | ||
| + | - Texture Resources | ||
| + | - smashingmagazine.com/ | ||
| + | - Texture King | ||
| + | - Zen Textures | ||
| + | - Texturemate.com | ||
| + | - Grunge textures | ||
| + | - **4. Shape** | ||
| + | - Any flat area bound by line, value, color | ||
| + | - Organize and define areas | ||
| + | - Positive | ||
| + | - area a space contains | ||
| + | - buttons | ||
| + | - nav bars | ||
| + | - Negative | ||
| + | - Area around a shape | ||
| + | - Repetition of shapes creates harmony and unity | ||
| + | - Set of buttons | ||
| + | - Set of widgets | ||
| + | - Geometric | ||
| + | - Organic | ||
| + | - **5. Form** | ||
| + | - Overall mass of shapes & relationship between them | ||
| + | - The sum of all the parts | ||
| + | - Create black and white mockups first | ||
| + | - Then add color | ||
| + | - Clean and balanced design & layout | ||
| + | - **6. Space (Whitespace)** | ||
| + | - Areas, distances between all elements of a design | ||
| + | - resist temptation to fill all space | ||
| + | - give a sense of breathing room | ||
| + | - So eyes have a place to rest | ||
| + | - Use space deliberately | ||
| + | - Make use of negative space | ||
| + | - **7. Line** | ||
| + | - can imply movement | ||
| + | - left to right | ||
| + | - diagonal | ||
| + | - can create areas of emphasis | ||
| + | - create dividers | ||
| + | - Separate groups of content | ||
| + | - Mark, path, mass that defines position/ | ||
| + | - can be formed by edge where 2 shapes meet | ||
| + | - Don't need to just be straight | ||
| + | - Create order / organization | ||
| + | - **8. Type** | ||
| + | - typography | ||
| + | - Serif | ||
| + | |||
| + | - Sans-Serif | ||
| + | - Digital | ||
| + | - Font/text | ||
| + | - Fonts chosen to display text | ||
| + | - Typeface | ||
| + | - Set of fonts in a font family | ||
| + | - Arial | ||
| + | - Arial Bold | ||
| + | - Arial Regular | ||
| + | - Arial Italic | ||
| + | |||
| + | ====== Principles of Design ====== | ||
| + | |||
| + | **Rules of Design** | ||
| + | |||
| + | - **1. Contrast** | ||
| + | - shows users exactly where to look | ||
| + | - juxtaposition of elements to show emphasis | ||
| + | - Should be located at center of interest | ||
| + | - e.g. Hero section | ||
| + | - Opposite colors | ||
| + | - Space/ | ||
| + | - Play with direction | ||
| + | - Hard / soft edge shapes | ||
| + | |||
| + | - **2. Emphasis** | ||
| + | - Attention on single area to show visual importance | ||
| + | - Size & placement of elements | ||
| + | - Typographic Hierarchy | ||
| + | - Use of fonts to create a sense of flow / emphasis | ||
| + | - Varying the size, weight, color & spacing | ||
| + | - B, I, All Caps | ||
| + | - H1, H2, H3 | ||
| + | - Serif / Sans-Serif for paragraphs and headers | ||
| + | - **3. Balance** | ||
| + | - Alignment and distribution of content | ||
| + | - Squint and look at the whole composition | ||
| + | - making use of the grid system | ||
| + | - seesaw analogy | ||
| + | - not same as symmetry | ||
| + | - Can be asymmetrical | ||
| + | - Creates interesting tension that draws attention | ||
| + | - **4. Unity** | ||
| + | - Pleasing arrangement of parts in a design | ||
| + | - harmony | ||
| + | - presents info in a logical structure | ||
| + | - Consider user's experience | ||
| + | - link styles | ||
| + | - edit color to match layout | ||
| + | - active | ||
| + | - hover | ||
| + | - visited | ||
| + | - link | ||
| + | - extreme complexity leads to over stimulation | ||
| + | - **5. Pattern** | ||
| + | - Way to keep design organized | ||
| + | - sense of harmony through use of repeating elements | ||
| + | - Can be decorative | ||
| + | - less is more | ||
| + | - background patterns | ||
| + | - **6. Movement** | ||
| + | - the suggestion of action or direction | ||
| + | - scrolling | ||
| + | - fixed | ||
| + | - scrolling | ||
| + | - parallax | ||
| + | - easing | ||
| + | - Animation | ||
| + | - Sense of interactivity | ||
| + | - **7. Rhythm / Repitition** | ||
| + | - repetition of element that creates visual rhythm | ||
| + | - establish visual interest | ||
| + | - grid layout | ||
| + | - alter number of columns in each row | ||
| + | - **8. Proprtion** | ||
| + | - visual relationship between 2 or more things | ||
| + | - size | ||
| + | - most important = largest | ||
| + | - large background image with small text | ||
| + | - number | ||
| + | - Tiered dominance | ||
| + | - creates hierarchy | ||
| + | - text size | ||
| + | - Works with emphasis and unity | ||
| + | - **9. Simplicity** | ||
| + | - Removal of non essential elements | ||
| + | - only show what's essential | ||
| + | - difficult to determine | ||
| + | - **10. Gradation** | ||
| + | - gradual change that occurs in steps/ | ||
| + | - think of contrast | ||
| + | - draws the eye in | ||
| + | - creates a sense of movement | ||
| + | - size | ||
| + | - large to small | ||
| + | - color | ||
| + | - gradients | ||
| + | - light to dark | ||
| + | - 1 hue to another | ||
| + | - line | ||
| + | - thick to thin | ||
| + | - curved to straight | ||
| + | - long to short | ||
Page Tools
