Master 5 Design Principles With This Course! (MUST WATCH)
By Satori Graphics
Uncategorized
Share:
Key Concepts
Repetition, Contrast (color, shape, texture, hierarchy), Hierarchy (attract, intrigue, deliver), Space (macro, micro, active, passive), Balance (symmetrical, asymmetrical), Rhythm, Negative Space, Proximity.
Repetition
- Definition: Repeating a single element multiple times to unify a design. It acts as "glue," holding everything together.
- Elements of Repetition: Colors, typeface styles and fonts, line size and scale, shape, texture, and language.
- Applications: Poster designs, graphic design portfolios, website design, editorial design (magazines), brand identities.
- Coca-Cola Example: Consistent use of bright red and white for over 100 years, creating a mental trigger for consumers.
- Rogue Beer Example: Repetition of hand-drawn illustrations, typographic logo, and consistent imagery of fruits, ingredients, and natural settings to install an independent and natural brand image.
- Logo Design E-Guide Example: Consistent fonts, color scheme, shapes, and layout to tie the design together and solidify competence.
- Portfolio Design: Lack of repetition leads to disjointed and unorganized designs. Professional designs are tied together with repetition.
- Portfolio Website Example: Black and white colors, consistent fonts, background texture, and rollover graphic of connected typography.
- Breaking Repetition: Useful for creating focal points. In the portfolio example, circular hover areas contrast with the angular design.
- Banking Logos Example: Most UK banks use black, red, or blue. Lloyd's Bank uses black and green to stand out.
- Summary: Repetition ties a design together, focusing on style, fonts, colors, shape, and size. It's a widely used and important principle.
Contrast
- Definition: Using different elements to create visual interest and highlight specific areas.
- Poster Example:
- Color Contrast: White against black or orangey-pink.
- Shape Contrast: Straight, angled lines contrasted with the smooth curves of the shoe and logo.
- Texture Contrast: Sandy background texture contrasted with the smooth shoe.
- Business Card Example:
- Color Contrast: One side dark background with white text, the other side white background with dark text.
- Hierarchy Contrast: Different weights and sizes of text.
- App Design Example:
- Color Contrast: Black labels on white/gray background.
- Font Contrast: Different font choices, weights, and colors to highlight important parts (e.g., "for sale" signs in red).
- Section Contrast: Bold, bright color sections contrasting with the white/gray background.
- Photograph Contrast: Red on blue, blue on orange, etc.
- UI Contrast: Red dots and tabs.
- Summary: Contrast is fundamental to graphic design, using color, shape, texture, and hierarchy to create visual interest and guide the viewer's eye.
Hierarchy
- Definition: Giving extra weight to certain elements of a design over others to convey a message and guide the viewer. Combines dominance and priority.
- Three-Stage Marketing Process:
- Attract: Bringing in the viewer.
- Intrigue: Spiking their interest.
- Deliver: Delivering the message.
- Adidas Poster Example:
- Attract: Shoe and pink splash.
- Intrigue: Quote "time to change up."
- Deliver: Message below the quote.
- Apple Website Example:
- Bottom Section: iPhone image and "iPhone" (level one), "lots of love less to spend" (level two), paragraph below (level three).
- Upper Section: Blue buy symbol and Apple logo (level two), rest of the content (level three).
- Brochure Example: Design split into sections with multiple levels of hierarchy. Headings and main imagery (level one), subtitles and other graphics (level two), body text and small details (level three).
- Hierarchy Techniques:
- Weight: Bolder fonts for important areas.
- Size: Larger elements for more important content.
- Color: Different colors to make elements stand out.
- Orientation: Arranging text and assets at specific angles.
- Space: White space to make elements more obvious.
- Font Style: Using different font styles (e.g., serif for body text, sans serif for headings).
Space
- Definition: The effective use of white space (negative space) to enhance visual hierarchy, prevent clutter, add style, and emphasize bonds between visual elements.
- Benefits of Mastering Space: Enhances visual hierarchy, prevents clutter, adds style and elegance, emphasizes proximity.
- Macro vs. Micro White Space:
- Macro White Space: Large expanse areas of nothingness.
- Micro White Space: Smaller sections of nothingness between lines of text, paragraphs, and design objects.
- Content Consideration: Determine the amount of text and visuals provided by the client to decide the balance between macro and micro white space.
- Target Audience: Consider the target audience when balancing macro and micro white space. More macro white space for quick digestion (e.g., posters for busy professionals).
- Rule of Thumb: More macro white space suggests minimalism, modernity, and luxury. More micro white space suggests informative and serious designs.
- Passive vs. Active White Space:
- Passive White Space: Helps legibility and aesthetics without guiding the viewing order.
- Active White Space: Helps the viewer move through the design in order and structure.
- Paragraph Example: Poor use of micro white space makes text illegible. Adding passive white space improves readability. Active white space breaks down text into digestible chunks.
Balance
- Definition: Even distribution of the weight of elements along the vertical and horizontal axes to give a design form and stability.
- Types of Balance:
- Symmetrical Balance: Symmetry of two or more shapes.
- Asymmetrical Balance: Using hierarchy to create visual balance.
- Symmetrical Balance Example: Graphics and typography balanced on the left and right.
- Groups of Three Example: Visual balance working in groups of three.
- Complex Balance Example: Three central circles balanced by type, fine line graphics, and other small elements.
- Image Balance Example: A large singular design element (a person) balanced by smaller design elements in the top left.
Design Principle Quiz
- Question 1 (3 points): Where is the main CTA using emphasis? Answer: "Then you're correct."
- Question 2 (3 points): What design principle makes the back of the business card appear so different to the front? Answer: Contrast.
- Question 3 (3 points): Positioning a design layout with an illustration on the right and a logo on the top left mainly uses what principle? Answer: Balance.
- Question 4 (4 points): What principle has been used to create the focal point illusion in the poster design? Answer: Negative Space (2 points for Space).
- Question 5 (4 points): What principle helps the viewer understand that all of these belong together on the website design? Answer: Proximity.
- Question 6 (4 points): What two things can we do to the typography on the left to make it more effective? Answer: Create contrast in fonts (2 points), create hierarchy with size (2 points).
- Question 7 (5 points): How many uses of hierarchy are on this web page design (excluding the main navigation bar)? Answer: 5 (1 point each).
- Brian is brighter white than Lane.
- Brian Lane is larger than the text above it.
- Edith is brighter white than the text above.
- The main graphic on the right is larger than everything else.
- The text here is slightly larger than the name Edith.
- Question 8 (5 points): What design principle has been used throughout every page of the magazine layout that helps you realize and is connected in some way? Answer: Repetition (square graphic).
- Question 9 (5 points): The line coming from a camera is making use of a design principle that relates to the viewer's eye, what is this principle? Answer: Rhythm.
- Question 10 (6 points): In terms of the design principle of color, what is so important to the effectiveness of this weight loss/health design message to the audience? Answer: The design heavily uses pastel colors because psychologically speaking pastel colors are a strongly positive Color Group. They are associated with cleanliness freshness and this makes them a good fit for marketing themes around Health makeup or fragrance.
Skillshare Ad
- Skillshare is an online learning community with thousands of online classes and members across 150 countries.
- The video creator took a class by Andrea on making a glitch text animation effect.
- Skillshare offers a risk-free 30-day free trial. The first 1000 people who use the link in the description box below will get a one-month free trial.
Conclusion
- It is possible to create a good design without thinking about design principles, but it requires intuition and trial and error.
- Using design principles removes trial and error, saves time, and guarantees a positive final design solution.
- Trial and error wastes time and doesn't guarantee a positive final design solution.
Chat with this Video
AI-PoweredHi! I can answer questions about this video "Master 5 Design Principles With This Course! (MUST WATCH)". What would you like to know?
Chat is based on the transcript of this video and may not be 100% accurate.