14. Graphic Design
Why Graphic Design?
- 인터랙션의 예상되는 결과를 잘 따라올 수 있게 한다.
- 데이터, 기능, 작업들이 어떻게
조직
되어있는지 이해하게 한다. - 효율적인 사용을 위한
멘탈 모델
을 만들어 준다. - 시각적으로
일관성
을 가지는게 중요하다.
Components of the Visual Language
- Layout
- How the content is
structured
on display
- How the content is
- Typography
- Typefaces, typesetting (공대생들이 잘 못하는거)
- Imagery
- Visual identity, icons (Mac, Windows)
- 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?)
- Position (common scale)
- Position (unaligned)
- Length
- Tilt
- Area
- Depth
- Color luminance
- Color saturation
- Curvature
- Volume
(2) Identity Channels (categorical, metathetic, what-where)
- Spatial region
- Color hue
- Motion
- 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
- Grouping
- Rely on Gestalt principle (proximity)
- Avoid explicit grouping
- Spatial logic is always powerful
- Hierarchy
- Provide a context of each information!
- Relationship
- Visual scanning order vs layout of components
- Provide good spatial analog to the logical information.
- ex. 폴더 이후 콘텐츠 보여주도록 하기
- 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
- Internal level: 애플리케이션 안
- External level: 다른 유사한 플랫폼과 인터페이스 가이드라인 컨벤션
- 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)
- Cross-cultural color naming
- White/black → red → green or yellow → blue…
- Color categories
- We name color non-uniformly (only 8 hues)
- Color coding
- large areas → low saturation
- small areas → high saturation
Break isoluminance with borders! luminance가 비슷하다면 보더로 구분해주기.
- Color maps
- Color blind
- distinguish not only hue.
- Redundantly encode with saturation, brightness