Post

14. Graphic Design

14. Graphic Design

Why Graphic Design?

  • 인터랙션의 예상되는 결과를 잘 따라올 수 있게 한다.
  • 데이터, 기능, 작업들이 어떻게 조직 되어있는지 이해하게 한다.
  • 효율적인 사용을 위한 멘탈 모델 을 만들어 준다.
  • 시각적으로 일관성 을 가지는게 중요하다.

Components of the Visual Language

  1. Layout
    • How the content is structured on display
  2. Typography
    • Typefaces, typesetting (공대생들이 잘 못하는거)
  3. Imagery
    • Visual identity, icons (Mac, Windows)
  4. Sequencing
    • How interactions unfold (인터랙션 순서)

For good graphic design…

Clear, repeated visual elements! (e.g. consistent header)

→ Relies on modular structures

이러한 design choice는

  • Unified visual identity 형성
  • Work across Various presentation formats (포스터든 웹페이지든, 모바일이든…)
  • 사용자가 정보를 navigate, understrand를 빠르게 하도록 도와준다.

Parsing Visual Input

Appropriate design can help user parse your input! → forces viewer to parse the picture


Gestalt Principles (게슈탈트 원리)

The whole is different from the sum of its parts (부분의 합은 전체와 다르다.)

작은 객체들은 큰 무언가를 형성하는데, 그 원리에 대해서 설명함.

Law of Pragnanz

  • Law of simplicity, Law of good figure
  • Fundamental principle of Gestalt Principles!

→ Tend to order our experience in a manner that is regular , orderly , symmetric , and simple

Basic Principles!

  • Emergence: 아무것도 없지만 각 부분이 전체로 보임.

  • Reification: 인지된 것은 좀더 명시적인 spatial 정보를 포함한다.

  • Multistability Perception

  • Invariance: 형태 및 특성을 달리해도 같은걸로 인식되는 경우

Grouping

  • Proximity: 가까이 있으면 연관되어있는 것처럼 보임 (ex. 선택리스트, depth 표시)
  • Similarity: 비슷해보이면 연관되어있는 것처럼 보임
  • Continuity: 가장 간단한 형태로 연결되어있는, unbroken한 형태로 봄 (ex. 십자가)
  • Common Region: 동일한 구역을 가지도록 묶어준다.
  • Connectedness: 서로 연결해준다.

Perception of Forms

  • Closure: 완전한, 닫힌 모양으로 본다.
  • Figure-Ground: 작은건 물체, 큰건 배경
  • Symmetry: 대칭성이 있는 건 같이 그룹핑된다.

ex. [ ][ ][ ]


Principles of Graphic Design

  • CRAP: contrast, repetition, alignment, and proximity

다 비슷한데 결국 공통된건 다음과 같다.


Contrast

  • Guides the user’s attention to the key element of a design
  • related to preattentive processing

Repetition

  • Elements being copied or mimicked numerous times
    • unity & harmony
  • creates visual consistency in designs.
    • Same style of headlines
    • same style of initial capitals…

Alignment

  • 중요!
  • Act of keeping design objects in line
  • creates a visual connection between elements!
    • 콘텐츠 정렬
    • 여러 것들이 있을때 그룹핑 쉽도록!

Effective visual channel

(1) Magnitude Channels (ordered, prothetic, how much?)

  1. Position (common scale)
  2. Position (unaligned)
  3. Length
  4. Tilt
  5. Area
  6. Depth
  7. Color luminance
  8. Color saturation
  9. Curvature
  10. Volume

(2) Identity Channels (categorical, metathetic, what-where)

  1. Spatial region
  2. Color hue
  3. Motion
  4. Shape

False Alignent

ex. Butterfly Ballot

Alignment, again

  • Alignment can establish visual relationship
  • Enhance boundaries and grouping → no need to make additional boundary
  • Be aware of optical adjustment (False alignment!, 우리 눈이 속임)
    • sharp elements, round-ended, rectangular

Relating Structure

  1. Grouping
    • Rely on Gestalt principle (proximity)
    • Avoid explicit grouping
    • Spatial logic is always powerful
  2. Hierarchy
    • Provide a context of each information!
  3. Relationship
    • Visual scanning order vs layout of components
    • Provide good spatial analog to the logical information.
    • ex. 폴더 이후 콘텐츠 보여주도록 하기
  4. Balance
    • Harmonious global arrangement
    • smaller elements can offset the visual offset of larger element

Symmetry

  • Sense of a holistic figure
  • Emphasize relationships

→ but careful to text! (글 위치 시작 예상 힘듦)

Proximity

Near → related. Spaced → separated

Negative space

  • The ground on which the design apprears.
  • Enhance the structure of the display
    • reduce the use of explicit borders

Utilize Narratives of space and time

  • Tell story of position and chronology through visual elements

Simplicity

  • Entities should not be multiplied unnecessarily
  • not add, take away!

Simplicity vs Usability (like our comment reactions…)

Consistency

  1. Internal level: 애플리케이션 안
  2. External level: 다른 유사한 플랫폼과 인터페이스 가이드라인 컨벤션
  3. Using Grid: alignment

→ Why consistency matters?

  • Helps users reliable expectations.
  • Banner blindness → decorative banner 인식 잘 못함
  • Inconsistent leads to errors

Color

이건 더 자세히 다뤄야하는데… 일단 넘어가자.

  • Contrast
  • Color-blindness problems
  • attractive (do not use full-saturated color)
  1. Cross-cultural color naming
    1. White/black → red → green or yellow → blue…
  2. Color categories
    1. We name color non-uniformly (only 8 hues)
  3. Color coding
    1. large areas → low saturation
    2. small areas → high saturation

Break isoluminance with borders! luminance가 비슷하다면 보더로 구분해주기.

  1. Color maps
  2. Color blind
    • distinguish not only hue.
    • Redundantly encode with saturation, brightness
This post is licensed under CC BY 4.0 by the author.