Visual Design

Formstorming

An Act of visual thinking. The goal is to exhaust the obvious solutions so that you can discover more creative possibilities.

Point

Simplest element of visual design

• focuse

• Establishes orientation

• Creates relationship with other points

Line

An infinite series/chain of points.

Invisible lines

Created by alignment, grids, typography, baselines .

Plane

A flat surface with considerable height and width.

Sketching

A preliminary, hand-drawn representation of a user experience including: user research outcomes, interfaces, and interactions. Used for visual communication. About ideas.

Composition

Arranging elements into a pleasing whole. Controls how the viewers eye moves through the design

CRAP Principles

Contrast

Repetition

Alignment

Proximity

Contrast

Creates differences between elements.

Light vs dark

Large vs small

Thick vs thin

Different colors

Repetition

Repeating visual elements to create consistency

Alignment

Placing elements so they visually line up

Proximity

Placing related elements close together

Balance - placement of elements

Symmetrical - elements are balanced/equal on both sides

Asymmetrical - elements are not identical but still create visual balance

Radical - elements radiate from central point

White space

empty space that gives design breathing room

Focal point

The area you want the viewer to notice/leverage point

Leading lines

Help direct the viewers eye

Grids

• -visual hierarchy

• visual impact

• ease of viewing

• structure

• appropriate line length

Margin

Empty space between the edge of the format and content

Column

Vertical spatial zone

Row

Horizontal spatial zone

Gutter

Space between rows and columns

Rule of thirds

3 × 3 grids

Golden ratio

1 : 1.61

Dual coding theory

verbal and visual information can be processed together, and that presenting information visually and verbally can improve recall/recognition.

Print

Typically uses CMYK or cyan, magenta, yellow, key/black

Digital

Typical uses RGB or red, green, blue

Icon

Has a physical resemblance to the idea it represents

index

points to its referent or is a trace/direct impression of an object or event.

Symbol

Abstract and its form does not physically resemble its meaning

Hue

Pure color

Shade

Add black to a hue

Tint

Add white to a hue

Tone

Add gray to a hue

Complementary

Colors that are opposites on the color wheel

Triadic

Three colors equally spaced around the color wheel

Split complementary

One color + two colors on either side of its opposite

Analogous

Three colors next to each other on the color wheel

Warm color

Red, yellow, orange

Cool colors

Blue, green, purple

Hex Code

A six symbol code used to express rgb color