Designers Vocabulary

Composition and layout
Composition is the arrangement of design elements that form a whole image. A
successful composition attracts the viewer and guides their eye across the design. In
visual art, you might hear this referred to as “form.” In graphic design, it’s often called
layout. Composition is made up of a number of different visual design elements,
including balance, proximity, alignment, repetition, contrast and white space.

Balance
This isn’t your ability to walk a straight line after three beers. In design, balance involves the
placement of elements on the page so that the text and graphic elements are evenly distributed.

Symmetrical
Symmetry is achieved when all design elements are equal on both sides of a central
line.

Asymmetrical
When graphics and text are not equal on both sides of a central line, a design is said
to be asymmetrical. In the example above, there is still balance, but there are
graphics on one side and text on the other.

Radial
A radial design is one in which elements radiate from a central point, creating
balance.

Proximity
The way in which design elements are grouped or spaced on a page is called
proximity. Great design groups like elements together.

Alignment
Alignment is the position of text or graphics, whether left, right, centred or full
justified.
Repetition
To maintain a unified look, designers repeat elements throughout a design.
(Repetition is also defined as the number of times your toddler asks for a cookie.)

Contrast
Contrast is achieved by including elements within the design that look measurably
different from one another. A designer may use colour, shape, texture, size or
typeface to create contrast.

White space
White space—sometimes called negative space—is the part of the design that is
unmarked by imagery or text. It’s also what Midwesterners call their depressing,
winter landscape.

Rule of thirds
The rule of thirds is a technique that designers use to determine focal point. Using a
grid of three rows and columns, focal points are indicated where the lines converge.
Designers use this as a guide to determine where to place important elements in
their design.

Grid
A grid is a series of intersecting vertical, horizontal, angular or curved lines used to
organize graphic elements on a page, as well as in relation to one another.

Hierarchy
In design, hierarchy is the organization of elements by level of importance.
Newspapers, magazine spreads and movie posters are good examples of the use of
design hierarchy. Headlines (also called display type) are usually placed at the top,
while subheads and body copy fall underneath.
Scale
Scale is the size of an object in relation to another object (not that thing in your
bathroom that you curse at each morning). Scale can be used to create interest and
grab a viewer’s attention.

Thumbnail sketch
When conceptualizing, a designer will often create small, rough drawings—thumbnail
sketches—to explore many ideas.

Mock-up
A mock-up is a real or digital model used to test early design ideas and see how they
could look in the real world.

Photography & Artwork

Resolution
The detail of an image based on the number of pixels is known as resolution. An
image looks clearer when it has a higher resolution.

DPI
DPI stands for “dots per inch,” which is a measure of a printer’s quality. For high-
quality printing, 300dpi is recommended. For example, a 300dpi image at
1200×1800 pixels will become as a 4×6 inch print.

PPI
PPI stands for “pixels per inch,” which is a measure of pixel density used by
electronic image devices. You’ll likely see this used with scanners, cameras, TVs or
monitors.
Bleed
Sounds pretty gruesome, but bleed is when a design actually extends past its printed
edge so there’s no chance of white borders when it’s trimmed down after printing.

Trim
Trim size is the final size of a printed piece after it has been trimmed from its page.
Trimming is executed along crop marks that show where to cut.

  Pixels
Pixels are square-shaped dots that make a digital raster image (and a really bad
movie starring Adam Sandler.) The more pixels an image have, the higher its
resolution.

Crop
A designer can cut out or crop unnecessary parts of an image to improve framing,
highlight a specific subject or alter the image’s aspect ratio.

Stock photo/art
Stock photos and art are licensed images created by a third party. Using stock
images saves on the cost of a having a professional photo shoot. 

Typography
Font types
Most fonts fall into one of four different font types.
Serif
Serifs are the small lines and hooks at the end of the strokes in some letters.

Sans serif
Sans means “without.” A sans serif font has no serifs.

Script
 Script typefaces use a flowing, cursive stroke.

Slab serif
Slab serif is distinguished by thick, block-like serifs.

Components of type
All fonts are made of the same basic components.

Ascender
An ascender is the part of a lowercase letter that rises above the main body of the
letter. Think “b” or “h.”

Baseline
All font characters sit on the baseline, the lowest point of all uppercase letters and
most lowercase letters.

Descender
A Descender is the part of a lowercase letter that descends below the main body of
the letter. Think “g” or “p.”
 Median/x-height
The median or x-height is where most lower-case letters should reach their
maximum height. It is set from the height of the x in a font.

Font spacing
The vertical and horizontal spacing of a font is often altered to change its
appearance.

Kerning
Kerning is the adjustment of space between pairs of letters in the same word.
Certain pairs of letters create awkward spaces, and kerning adds or subtracts space
between them to create more visually appealing and readable text.

Leading
       Pronounced “ledding,” leading (also known as line-height) is the space between
two lines of text.

Tracking
Not to be confused with kerning, tracking is the adjustment of space for groups of
letters and entire blocks of text. Tracking affects every character in the selected text
and is used to change its overall appearance.

Font case
Typically, characters are available in two forms.

Uppercase
The large, capital letters of a typeface are uppercase. They’re also used by your
mom to accidentally YELL AT YOU WHEN SHE TEXTS YOU.

Lowercase
Lowercase refers to the small letters of a typeface.

Small caps
Small caps—or small capitals—are uppercase characters that are the same height
as lowercase letters. They are used to prevent capitalized words from appearing too
large on the page.

Font style
Beyond spacing and case, fonts can also be altered by scale, weight and style.

Point size
Point size is the size of text. There are approximately 72 (72.272) points in one inch

Font weight
Font weight specifies the boldness of a font.

Italics
When characters slope to the right, they’re in italics, a visual technique used to draw
attention to specific words or sentences within a paragraph.

 Widows & orphans

Widows and orphans make designers very sad. That’s because they are poor, lonely
words at the beginning or end of a paragraph left dangling at the top or bottom of a
column and separated from the rest of the paragraph.

Lorem ipsum
Lorem ipsum (also known as dummy text) is used as a placeholder that will be
swapped out later with actual copy. The Lorem ipsum text comes from “The
Extremes of Good and Evil,” written by Cicero in 45 BCE.
Colour
Colour theory
The study of how colours make people feel and their effects on a design is known as
colour theory. Colour theory is used to explore the best types of colours to work in
different design instances—for example, choosing a pastel scheme for a website that
needs to feel soft, or picking red and yellow for a magazine ad that needs to evoke
energy.

Hue, tint, tone and shade

Hue is pure colour. Tint is a hue with white added. Tone is a hue with gray added.
Shade is a hue with black added.

Saturation
Saturation is defined by the intensity of colour.

Palette
A palette is the range of colours used in a design. These are colours that work well
together and are often aesthetically pleasing. Designers will define a palette for a
project to create consistency and evoke a specific feeling.

 Warm and cool colours

Warm colours can be found on one half of the colour wheel (reds, oranges, yellows
and pinks). Cool colours occupy the other half (blues, greens and purples).

Monochromatic
A monochromatic colour palette uses one single colour.

Gray scale
A monochromatic colour palette based on gray is called gray scale.

Analogous
Colours that are adjacent to one another on the colour wheel (i.e. red violet, red and
red orange) are analogous.

Complementary
Complementary colours are opposites on the colour wheel. This relationship will
produce visual tension and “shock.”

Triadic
Triadic colours are three colours evenly spaced on the colour wheel. One colour
dominates, the second supports, and the third accents.
Gradient
Gradient is a gradual change from one colour to another. (For example, blue
transitioning gradually to green).

Opacity
Opacity is synonymous with non-transparency. The more transparent an image, the
lower its opacity.

CMYK
CMYK is a 4-color printing process made up of cyan, magenta, yellow and key
(black). CMYK colours in print will never appear as vibrant as RGB colours on
screen because CMYK creates colour by adding colour together (making images
darker) while RGB colours come from light.

RGB
RGB stands for red, green and blue, the three colours of light typically used to
display images on a digital screen.

Pantone
Developed by Pantone Corporation, a professional colour company, Pantone is the
most widely used, proprietary colour system for blending colours. The system
includes colours that cannot be mixed in CMYK.
Web & digital
Web page elements
Most web page designs include combination of these elements.

Header
Design elements repeated at the top of every page is called a header.

Navigation & navigation bar

Navigation is a roadmap to the most important parts of a website and should be
visually consistent across all pages. A navigation bar is a set of links repeated on
each page that often includes links to pages like “About us”, “Products,” “Contact us”
and “Testimonials.”

Breadcrumb trail
Breadcrumbs are navigation elements that generally appear near the top of a page
to show users the section hierarchy of the current page.

Body text
Body text is the main written content of a page.

Links
Any word or an image can be a link that can take users to another page.

Sidebar
A sidebar is the left or right hand column of a page typically used for either vertical
navigation links or advertising. It may also contain site search, subscription links
(RSS, newsletters, etc.) or social network buttons.

Banner
Typically located at the top of a page or in a sidebar, banners are advertisements
that link to other websites.

Footer
Design elements repeated at the bottom of every page is called footer.

HTML
HTML stands for Hyper Text Mark up Language. This is the standard coding
language for websites that creates all of the fonts, colours, graphics and links you
see online.

Landing page
A landing page is a single page that appears in response to search engine result.
Landing pages are used for lead generation.

User interface (UI)

User interface is the design of applications for computers, mobile devices and other
devices to maximize their usability and the user experience.

Wireframe
Basic images that display the essential functions of a website are known as
wireframes. Designers use wireframes to show how a page or site works.

Image files formats

an image file format is a standardized way to encode art, graphics and photos
digitally.
Vector graphics
Vector graphics are small graphics that use math to display images. They can be
enlarged without losing quality and are essential for cross-platform designs (i.e.
billboards, business cards, etc.).

AI
AI stands for Adobe Illustrator document. This is a file format developed by Adobe
Systems to represent single-page vector designs.

EPS
EPS stands for Encapsulated Post Script. This is a resizable file format that is
commonly used for vector designs. Due to its high quality, it’s commonly used with
print elements such as logos, business cards or brochures.

PDF
A PDF is a Portable Document Format developed by Adobe that can be universally
downloaded and viewed by any computer. PDFs are most suitable for sharing
previews of work and are universally viewable.

Raster graphics
Raster graphics are composed of pixels on a grid, where each pixel is assigned a
colour value. They are good for assigning special effects, colour correction and
manipulating photos. They are resolution-dependent, which means that images
cannot be enlarged without degrading their quality.

GIF
GIF or Graphics Interchange Format is a raster file format that supports animation
and transparency. GIFs can only display up to 256 colours, allowing for very small
file sizes. (PS: It’s pronounced, “JIF” as opposed to the widely-accepted
pronunciation, “GIF,” according to GIF creator, Steve Wilhite.)

JPEG
Joint Photographic Electronic Group is also known as JPEG, the most widely used
raster file type for web-based designs. JPEGs are compressed files that load quickly.
You’ll typically see them used for emails, banner ads, online photos, and pretty much
anything else online. Unlike GIFs, they cannot have a transparent background (a
white background will be added automatically).

PNG
PNG stands for Portable Network Graphics, a web-based format that does not lose
quality when compressed. PNG files were created to improve on the quality of GIF
files.

PSD
PSD or Photoshop Document is the uncompressed working raster image file created
by designers in Adobe Photoshop.

TIFF
TIFF stands for Tagged Image File Format, a common format for exchanging raster
images between applications. TIFF produces a higher quality image than a JPEG or
PNG, and is widely used among publishing industries and photographers. Don’t
confuse it with a “tiff” or a “rift,” which happens when you send your designer eight
rounds of revisions.

Logo types
all logos are built out of typography, shapes and/or images, and typically fit into one
of these six standard logo types. Each will give your brand or business a different
feel. These six types can also be combined with one another to create even more
unique logos.

Abstract mark
An abstract mark is a logo that uses the emotive qualities of colour and form to
convey your brand. Instead of being a recognizable image like an apple or a chicken,
abstract marks use shapes to represent your business.

Emblem
Emblem logos use frames and shapes to enclose the company or organization
name. Think badges, seals and crests.

Letter mark
Letter mark logos feature one or more stylized letters (for example, a company’s
initials) to identify the brand. Famous letter mark logos include those for IBM, CNN,
HP and HBO.

Pictorial mark or symbol

Pictorial marks and symbols are non-abstract, visual icons that represent your
company name or service. You can see this with the Apple logo, the Twitter bird and
the Target bull’s eye.

Mascot
Mascot logos rely on a character or brand spokesperson to represent a business.
Famous mascots include Colonel Sanders, the Kool-Aid Man and Mr. Peanut.

Word mark
A word mark relies on custom typographic treatment of text to illustrate a brand.
Think VISA, Google or Coca-Cola.