Posts in Designer Lingo
Designer Lingo 101: Digital

Since we're on our digital devices constantly, we're all relatively savvy when it comes to the tech-speak now. But, here's a quick refresher of what you need to know when it comes to digital design.


RGB

Red, green, and blue. These are the colors that are used to create all web and digital colors. It's the color profile/setting you'll want to select for any design made with the intention of publishing online, on mobile, or for video. RGB color profiles create brighter colors than CMYK, including neons.

CMYK RGB.png

Pixel

The unit that screen size and display is measured by. All graphics and images on a screen are composed of pixels. Each pixel displays one color, therefore images or graphics with more pixels (aka higher resolutions) show more detail. Pixelation occurs when we begin to perceive the pixels in an image—a sign that the quality is low and an image with a higher resolution is needed. 

resolution

The number pixels that are displayed on a screen, measured by pixel width by pixel height. For instance, an HD display on YouTube is typically 1920 pixels x 1080 pixels.

retina/hd

Retina and High Definition (HD) displays have a higher resolution than standard displays. More pixels are squeezed onto a screen (becoming smaller pixels), showing twice the amount of detail than a normal display. Because retina and HD displays are becoming more common, we now create graphics at twice the resolution than we have in the past in order to display without pixelation. 

Pixelation.png

png

Stands for Portable Net Graphics. PNGs are the best image file type for digital displays. They're optimized for screen viewing and also support transparent backgrounds. 

gif

Stands for Graphics Interchange Format. GIFs can store multiple images in a single file, creating those fun animated graphics that we all love so much.

Powerful.gif

Coming up next week: Designer Lingo 101 - Digital

Designer Lingo 101: Color

In my opinion, color is the most fun and exciting part of a design! You might know all the colors of the rainbow, but when it comes to designing for print and for web, there are a few more terms that come in handy to get the exact color you're looking for.


rgb

Red, green, and blue. These are the colors that are used to create all web and digital colors. It's the color profile/setting you'll want to select for any design made with the intention of publishing online, on mobile, or for video.

RGB.png

cmyk

Cyan, magenta, yellow, and black (K). These are the colors that printers use to create all printable colors. It's the color profile/setting you'll want to select for any design made with the intention of printing.

CMYK.png

hue

Refers to a color on the traditional rainbow spectrum and how we identify it, regardless of its saturation or brightness. For instance, we identify both lavender and plum colors as purple, and both blush and burgundy colors as red.

Hue.png

saturation

The intensity of the color. High saturation colors are bold and vibrant. Low saturation colors are soft and pastel.

Saturation.png

brightness

The light or darkness of a color. 

brightness.png

Color-contrast

In terms of color, a noticeable difference in lightness/brightness and saturation/darkness between two colors. High color contrast increases readability and accessibility.

Color Contrast.png

Color-tension

Pairing two or more colors with similar saturation levels creates color-tension and makes readability difficult. Using high saturation clashing colors will also create color tension.

Color Tension.png

monochromatic

A palette using only one color or hue, regardless of brightness or saturation.

 


Coming up next week: Designer Lingo 101 - Print

Designer Lingo 101: Typography

While most of design might feel like a big hairy beast, typography is something we're all probably familiar with. We get to choose our fonts on a daily basis as we set up email signatures, write documents, and put together invitations for birthdays, weddings, and anniversaries.

You may already be familiar with a lot of these terms, but just don't know exactly what they mean. Or, you've been noticing these concepts in action but haven't known a word to describe it. Here's hoping your type-talk becomes even more productive!


SERIF

These fonts have little feet on each letter. Since the very first typefaces were created with serifs, these fonts tend to attribute a sense of tradition, formality, or maturity to a design.

Serif.png

sans serif

These fonts don't have little feet on each letter! This type that you're reading right now is set in a sans-serif font. Sans-serif fonts caused major hubbub in the design world when they were first introduced. They can lend a design a look that's cleaner, more modern, and simpler. They are usually easier to read on web and mobile interfaces.

Sans Serif.png

kerning

The measure and the process of manipulating the space between two individual letters. 

Kerning.png

letter-spacing

The overall measure of spacing between all letters in a line or body of text. Letter-spacing is most often seen in online text formatting, whereas print design programs will use the term "tracking."

Letter Spacing.png

leading

The spacing between two lines of text.

x-height

The height of the lowercase X in a font. Fonts with a taller x-height are usually easier to read and appear larger overall.

ascender

The part of a letter that extends above the x-height.

descender

The part of a letter that extends below the baseline.

glyph

These are characters or symbols that make up a typeset. Glyphs can be anything from letters to numbers to symbols. A single letter might have multiple glyphs to choose from in a font.

swash

Swashes are seen most in script fonts. They're ornamental flourishes coming off a letter. Letters with multiple glyph options are usually made because they have different swashes as well.

glyph swash.png

Coming up next week: Designer Lingo 101 - Color

 
Designer Lingo 101: The Basics

One of the greatest struggles that business owners face is how to communicate with their designers. There's so much technical jargon and designer lingo that you might not be familiar with. Or, there may be changes or designs you want to ask your designer for but can't quite find the right words to use. 

While there are a number of ways to ask for what you need in a design (a great inspiration board and plenty of examples are often helpful), knowing the lingo is one of the best ways to keep chats productive and enjoyable.

Welcome to Designer Lingo 101! Every week for the next six weeks, I'll be posting a new glossary of designer terms, broken into categories like "type," "print," and more. Today, let's just review the basics!

Unlike traditional glossaries that list terms alphabetically, I'm going to order this list by "most need-to-know."


visual weight

The boldness or level of attraction an element in a design creates. An element can be anything from a shape, icon, or letter, to an image, paragraph block, or headline. In general, darker and larger elements have greater visual weight.

Visual Weight.png

balance

The distribution of visual weight from an axis or central point. We usually think of balance from left to right, and we can achieve visual balance in a number of ways: We can display two similarly weighted things side by side. Or, we can display one a small number or visually heavy things on one side and a large number of visually light things on another side.

alignment

Lining up all elements to a single axis, horizontally or vertically. Vertically we can align things to their center axis, top axis, or bottom axis. Horizontally, we can align things to the left, right, or middle.

Alignment.png

distribution

Spreading out elements in a design so that there is equal spacing between each element.

grid

A framework that provides structure, balance, and organization to a design. Can be composed of as many components or spaces as needed.

Grid.png

scale

The size of a design element. Large scale elements tend to have a greater visual weight and tend to define elements of importance or high standing in the information hierarchy. Scale of design elements can also be used to impart a style or tone on a design. Small scale elements can be considered soft or luxurious, while large-scale elements may be bold or modern.

Scale.png

hierarchy

The organization and ranking of information or elements in a design in order to most effectively and simply communicate necessary information to an audience. The most important information should have the greatest visual weight and the least important information should have the least visual weight. 

whitespace/negative space

The space in a design that does not contain any elements, or is empty. Whitespace can be effective in creating a hierarchy of information, in organizing information, and in creating a cadence for reading a design -- whitespace indicates pause or breaks. 


Coming up next week: Designer Lingo 101 - Type