Graphic Design

Graphic Design is a fundamental aspect of interface design. It helps users to:

• Follow the expected sequence of interactions
• Understand the organization of data, functions, and tasks
• Build a consistent mental model for efficient use
• Benefit from visual consistency to become more proficient over time
• Brand recognition: Graphic design can provide a distinctive look and feel

Components of the Visual language

• Layout: How the content is structured on the display
• Typography: Typefaces & typesetting
• Imagery: Visual identity, icons
• Sequencing: How interactions unfold

Good Graphic Design

Good graphic design uses clear, repeated visual elements to guide the viewer.
It relies on modular structures. e.g. Same text column widths and placements.

• Create a unified visual identity
• Work across various presentation formats
• Help users navigate and understand information quickly

Gestält Principles

The whole is different from the sum of its parts!
Smaller objects are grouped to form larger ones.

Law of Prägnanz (Law of simplicity, Law of good figure): We tend to order our experience in a manner that is regular, orderly, symmetric, and simple. Complex images is perceived in the simplest possibility.

Emergence: The whole is emerged as a sum of its parts. We can perceive the whole even if we have noise or insufficient information.

Reification: The experienced perception contains more information than the sensory stimulus. i.e. We fill the missing part.

Multistability Perception: The experienced perception can be different even if the sensory stimulus is same.

Invariance: Perception are same even when the properties of an object change, such as its size, orientation, distance, or lighting.

Grouping:

• Proximity: Tendency of elements to be associated with nearby elements
• Similarity: Tendency of elements to be associated with similar elements
• Continuity: Preference for continuous, unbroken contours with the simplest possible physical explanation

Perception of Forms:

• Closure: Complete, closed figures
• Figure-Ground: Smaller one as figure, larger one as ground
• Symmetry: Symmetrical components will tend to group together

Principles of Graphic Design

CRAP: Contrast, Repetition, Alignment, and Proximity

Contrast

• Guides the user's attention to the key elements of a design
• Maintain the distinction between similar elements in a design
• Helps preattentive processing

Repetition

• Improves unity and harmony
• Creates visual consistency in page designs

e.g. Use same style of headlines, same style of initial capitals, or repeat same basic layout from one page to another

Alignment

• The act of keeping design objects in line
• Creates a visual relationships between elements such as images, shapes, or blocks of texts
• Enhance boundaries and grouping

Effective Visual Channel

Magnitude channels are used for ordered attributes. They determine how much the amount is.
Identity channels are used for categorical attributes. They determine what/where the value is.

False alignment

• Almost but not quite aligned
• Free standing objects not to be aligned with other objects
• Optical adjustment
  • Center point looks different depending on the shape of the elements (e.g. sharp, round-ended, rectangular)
  • From largest to smallest, straight edges, curved edges, and sharp edges appear larger.
  • It look misaligned even if it's actually perfectly aligned!

Relating Structure

• Grouping: Spatial logic is more powerful; Avoid explicit grouping
• Hierarchy: Privde a hierarchical context for each piece of information
• Relationship: Visual scanning order should match the logical information
• Balance: Harmonious global arrangement, usually using symmetrical objects

Proximity

Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.

Negative space

Empty space can be meaningful!

• Provide the ground on which the design appears
• Enhance/Enforce the structure of the display
• Reduce the use of explicit borders
• Use negative space as a design

Consistency

• Internal Level: inside an application
• External level: platform and interface guideline conventions

Consistency can help users from reliable expectations and avoid costly mistakes.

Color

• Cross-Cultural color naming
  • Primary color terms are consistent across cultures (e.g. white, black, red)
• Color Categories
  • Only 8 hues are named out of 210 colors!
  • We only need small number of labels (or colors)
• Color coding
  • Low saturation is enough for large areas
  • High saturation is needed for small areas
  • We can use borders to create high saturation
• Color Deficiency
  • There are lots of color-deficiency simulators
  • Distinguish by more than hue alone, e.g. saturation, brightness