Master 5 Design Principles With This Course! (MUST WATCH)

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.