SI 320 Quiz

Achromatic

"Colorless" - black/white/gray

The Rule of Thirds

- A compositional guideline that proposes an image should be divided into 9 parts by 2 equally spaced vertical and horizontal lines - Important elements should be placed along these lines or their intersection - Other elements should not distract from the main points of emphasis

Grid

- A number of lines that make up a structure (framework) of a layout - Organizational element of design - Guide for image + text alignment - Guide for page alignment - Can be used both for print and web design Used for: 1. clarity 2. efficiency 3. economy 4. consistency

DPI

- Dots per inch (PPI - pixels per inch) - "density" of an image - Images may have the same vertical and horizontal size, but different ___ Both image size and ___ may influence file size

image file characteristics

- File Size - Size of computer file

visual identity assets

- The Symbol / Mark - Logotype - Logo: Versions - Safe Area - Primary Palette - Secondary Palette - Primary Typography - Secondary Typography - Grids, free space - Different Backgrounds - Incorrect Use - Stationery - Communications - Additional Applications

negative space

- relies on the space that surrounds the subject to provide shape and meaning - works for various backgrounds, and for color and grayscale solutions

structural elements

1. informational components 2. input controls 3. navigational components 4. containers

visual elements of brand identity

1. logo 2. typography 3. colors 4. photos 5. additional graphic elements (borders, patterns, special use elements, etc.)

interaction elements

1. motion 2. space 3. time 4. appearance variables 5. sound

typography hierarchy

1. typeface selection (size, weight, style, color, position, type, contrast) 2. alignment 3. free space ...and all possible combinations of them additional elements and principles to consider: depth, borders, direction, animation

Shade

A color + black

Tone

A color + gray

Tint

A color + white

layout grid

A graphic design in which a designer establishes the arrangement, proportions, and relationship between the individual elements on the page to be designed, that is: the images, body copy, headings, captions, and other graphic elements

Shot

A single take made by a camera without cuts and/or editing. In terms of camera distance vs. the object within the shot

Hue, saturation, lightness

Any color can be described with three attributes: ___ ___ ___

Analogous Harmony

Blend well (adjacent to each other); may include 2-4 unique hues

Primary Colors

Cannot be made by mixing other colors (red, blue, yellow)

CMY(K)

Cyan, Magenta, Yellow + (K=black)

Basic types of shots (zoom)

Extreme close-up Close-up Medium close-up Medium shot Medium long shot Long shot Extreme long shot (panoramic)

hexadecimal notation (HEX)

HTML colors are defined using a ___ for the combination of RGB values

gestalt in graphic design

Human perception groups/organizes/transforms visual signs into (various) unitary forms 1. proximity 2. similarity 3. figure-ground 4. symmetry 5. continuity 6. closure

Alignment

Lining up the top, bottom, sides, or middle of text or graphic elements on a page

Tertiary Colors

Made by mixing a primary and secondary color Unique hues

Secondary Colors

Made by mixing two primary colors

CSS

Pixels (px) and points (pt) are fixed, whereas em and percents(%) are relative unit sizes. For digital layouts we use pixels or points, while developers can also use ems

Resolution

Pixels / Inch Web - 72 dpi or more (depends on the target screen resolution) Print - 300 dpi

RGB

Red, Green, Blue Web & devices (what our monitors display)

RYB

Red, Yellow, Blue Traditional model craft, design (physical objects)

Typeface

Set of characters, e.g., letters, numbers, punctuation marks of the same design and style (weight, condensation, italicization, ornamentation)

closure

When the brain processes an incomplete shape, it fills in the missing information to create a whole, so that an image with missing pieces will then appear complete

User Interface for Web

___ brings together concepts from interaction design, visual design, and information architecture and interaction elements - comprised of structural and interaction elements

Gestalt

a configuration, pattern, or organized field having specific properties that cannot be derived from the summation of its component parts; a unified whole; Gestalt, an organized whole that is perceived as more than the sum of its parts

widow (line)

a paragraph-ending line that falls at the beginning of the following page/column, thus separated from the remainder of the text

verbal identity

a short, memorable phrase that captures a brand essence 1. name 2. domain name(s) 3. slogan, tagline 4. units/departments names

orphan

a word, part of a word, or very short line that appears by itself at the end of a paragraph

Containers

accordion, slider, carousel

static (vertical)

alert, balance, serenity

principles of composition

balance (equilibrium) rhythm (repetition) emphasis (attention control) direction & movement unity (harmonious agreement)

baseline grid

based on "flow lines" (horizontal guides); also is built on body copy font size

column grid

based on proportion btw, page, and # of columns

Navigational Components

breadcrumb slider, search field, pagination, slider, tags, icons

Input Controls

buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field

circular

closure, security, embracing

visual elements

color, typography, point, line, plane, shapes

alternate-complementary

complementary + split analogous

complementary harmony

creates contrast (opposite on wheel)

hierarchical grid

developed and based on the info that needs to be conveyed (informational hierarchy, or/and semantics)

Font

different sizes

a great logo is

distinctive, practical, graphically effective, simple in form, one message, based on one or several gestalt principles, appropriate

Triad harmony

evenly spaced on the wheel; triad complementary

modular grid

for complex projects, and for layout of tabular information (charts, graphs, forms)

tetradic (compound)

four colors arranged into complementary pairs with more distinction

HIS

hue, saturation, intensity (for web and devices)

HSL

hue, saturation, lightness

HSV

hue, saturation, value

identity

identity is the effective sum of the facts that can be used, in the minds of various audiences, to distinguish a given entity from all others

split-complementary

in addition to base color, it uses the two colors adjacent to its complement

direction & composition leading lines

lead to the main subject of the image and direct viewers' attention

graphic designer's typography concerns

legibility (typeface), readability (text), appropriateness for the audience and the message, reproducibility, practicality

leading

line-spacing

dynamic (diagonal)

motion, movement

manuscript grid

oldest and simplest grid designed for continuous text content

tracking

overall letter-spacing

static (horizontal)

rest, stability, calmness

kerning

selective letter-spacing that adjusts the space between individual letter forms

glyphs

single character or symbol in a typeface that conveys certain meaning

white space

space in between of lines of text, images, geometric elements, any objects; also, gutters, columns, and modules within grid systems

Split-analogous harmony

split by one color on the wheel

Color Hue

the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow (the unique hues)

Informational Components

tooltips, icons, progress bar, notifications, message boxes, modal windows

double complementary

two colors + their complements

ligature

two or more (characters) are joined as a single glyph

font family

typeface variants

Typographic Elements

typeface, font, font family, glyphs, ligature

Logo and style guidelines

unify communications and help to make a clear and strong impression Safety area

image size

vertical and horizontal dimensions

passive white space

white space as a constituent of graphic design assets: space in typography, grid, UI elements, logos

active white space

you make efforts to add it for creating a balanced structure