Visual Hierarchy

2022/04/01 (新增投影片)
2023/05/20 (投影片補充內容)
2023/09/16 (補充連結)
2024/11/23 (更新內容)

• Understanding Hierarchy in Design (9:30) **

  • Size (Big=First)

  • Color (Contrast = First)

  • Position (Standout = First)

• 11 Visual Hierarchy Design Principles - Learn How to Improve and Create Beautiful Graphic Designs (8:27) 

  • Size and Scale

  • Perspective

  • Color and Contrast

  • Typography

  • Proximity

  • Negative Space

  • Alignment

  • Rule of Odds

  • Repetition

  • Leading Lines

  • Rule of Thirds

• 7 Important Visual Hierarchy Design Principles 2023

• Visual Hierarchy 

  • What is Visual Hierarchy?

  • Building Blocks of Visual Hierarchy

    • Size – Users notice larger elements more easily.

    • Color – Bright colors typically attract more attention than muted ones.

    • Contrast – Dramatically contrasted colors are more eye-catching.

    • Alignment – Out-of-alignment elements stand out over aligned ones.

    • Repetition – Repeating styles can suggest content is related.

    • Proximity – Closely placed elements seem related.

    • Whitespace – More space around elements draws the eye towards them.

    • Texture and Style – Richer textures stand out over flat ones.

  • How to Craft a Strong Visual Hierarchy

  • Things to Watch regarding Visual Hierarchy

• The fundamentals behind visual hierarchy 

  • The laws

    • Gestalt principles

  • Composition

    • Consider scanning patterns

  • Visual hierarchy tools

    • Colour & contrast

    • Typography

    • White space is king

    • Size

• A Graphic Designer’s Guide to Visual Hierarchy 

  • Designing Visual Hierarchy

    • Size

    • Position

    • Negative space

    • Color

    • Contrast

    • Repetition

    • Alignment

• Fundamentals of Hierarchy in Interface Design (UI)

  • There are seven resources that must be taken into account to create a correct hierarchy:

    • Size

    • Color

    • Proximity

    • Alignment

    • Repetition

    • Negative space

    • Texture

• 5 ways to establish visual hierarchy 

  • Size and Scale

  • Color and Contrast

  • Alignment

  • Perspective and Depth

  • Typography

• Z-Pattern, F-Pattern, and Visual Hierarchy (Daily UX Crash Course: 17 of 31)

  • Viewing patterns: The subconscious psychology of the eye **

    • F Pattern

    • Z Pattern

    • Layer Cake Pattern

    • Commitment Pattern

  • Why I had to break up with the famous F-pattern in UX and move on? : My relationship with Z-pattern, F-pattern, and my new partner.

  • F-Pattern in Reading Digital Content (2:40) NN Group

    • Text scanning

      • Chunking

      • Bullets

      • Headings and Sub-headings

    • F-Pattern -> Layer-Cake Pattern

  • The F Pattern and Web Content (1:36)

  • Using The F Pattern (4:02)

• Designing for scanning

Size

• Design Rules: Use Different Heading Sizes to Indicate Hierarchy (2:13)

• ‘Contrast’ Design principle of Graphic Design Ep9/45 [Beginners guide to Graphic Design] (7:44)

  • by Size and Color

• Visual Weight: Contrast, Depth, and Size (Daily UX Crash Course: 12 of 31)

Color

• Color (Daily UX Crash Course: 13 of 31)

• ‘Contrast’ Design principle of Graphic Design Ep9/45 [Beginners guide to Graphic Design] (7:44)

  • by Size and Color, shape, scale, layout, type, alignment

• How combining schemas and color psychology will improve UX: Find out the psychology behind color and subconscious communication in UI design

  • Why is color psychology important?

  • Schemas and colour psychology

  • How do schemas work with colour in web design?

  • How brands can combine schema and colour psychology

  • Product application and color choice

  • Schema and color communication — my conclusion

    • Colour psychology defines surface level emotions

    • By combining colour psychology and schemas, we are able to make our messages stick and/or ease interaction

    • Application and use cases can act as filters for colour in order to define design language and the brand

• Color psychology & visual hierarchy for UX & behavioral design 

  • 有些顏色對使用者來說是比較會吸引注意力的

    • 如:Blue-Green多了19%、Red多了15%、Red-Violet多了15%

Repetition

• Repetition and Pattern-Breaking (Daily UX Crash Course: 14 of 31)

• Line Tension and Edge Tension (Daily UX Crash Course: 15 of 31)

• Alignment & Proximity  (Daily UX Crash Course: 16 of 31)

Typography

• Typographic Hierarchy: Explained (2:49)

• 7 typography tips for interface design

  • Promote clarity using a hierarchy

  • Let your text breath

    • Line Height

    • Letter Spacing

    • Line Length

  • Choose font based on context

  • One family, one look

  • Align left for better readability

Grid

• How thinking about hierarchical grids helps you take a content-first approach to design 

  • five steps of the content-first approach:

    • First, identify the various audience segments and their top needs.

    • Prioritize those needs: assign each one a number to indicate its relative importance. No two items can have the same number.

    • Before designing a page, write a concise message (one to two sentences) that identifies what the page should get across.

    • Select the needs this page will fulfill. Then, compare them to the message to make sure the message and the needs are in sync.

    • Design the page to support the message and these needs further.

Process

• How to Use Visual Hierarchy to Create Impactful Interfaces

  • What is a visual hierarchy in design?

    • Visual hierarchy is one of the approaches to control user attention. By making one component more dominant than the others, designers can influence how people navigate on the page or hint what actions they want users to take and in what order.

  • Developing a wireframe: How to organize page elements across the interface

  • Creating a mockup: How to incorporate colors and text formats

  • How to test a visual hierarchy

    • User testing

    • Blurring technique

    • A/B testing

    • Eye-tracking

Case studies

• A Study of Visual Hierarchy in Streaming Websites

• How Scan Control Improves the Readability of Content Cards