Understanding Design Jargon

Why doesn’t this page bleed? Is that RGB or CMYK? Does this comp need stock? Conversations around our office can be confusing if you don’t know the language—that is—design jargon. We throw around a lot of phrases and acronyms that refer to specific ideas or terms within our industry, and while some of these are commonly used, many are not properly understood. So here is a handy introduction for some of the basics, from photography to fonts, printing to the web, with helpful hints for ways to remember some of these key terms. 

Design terms

You’ve probably heard artsy terms like “whitespace,” “minimalism,” and “flat design” mentioned, but what do these actually mean and why are they important?

No, whitespace is not the single from Taylor Swift’s last album. Whitespace (or negative space) is the open area around design elements. Design without sufficient whitespace can end up looking crowded and unprofessional. In contrast, ample whitespace can give a sense of sophistication. In the example below, one side is cramped, and the other is open and easy to read. There is always going to be a balance of communicating everything you want to say while displaying it in a way that is digestible, but often, that “extra” space can be the key to bringing order, hierarchy, and focus to a design.

whitespace_example_sm

For a more in-depth discussion of whitespace, check out this article.

Minimalism refers to a design trend that pares back design elements to the basics. It attempts to only use what is absolutely necessary to communicate a message. This can help to focus a piece by limiting distractions.

Flat design is a minimalist trend over the last few years that gets rid of stylistic elements such as drop shadows, gradients, and textures. This style is implemented all over the web as well as in user interface design, such as in the smartphones we use daily. Below are two examples of icons transitioning from a skeuomorphic – where objects are designed to resemble a 3D object – to a flat design aesthetic.
flat_design_comparison

Photography

Most of us have a pretty good camera on us at all times—our smartphone. But how does the image taken with that differ from a fancy professional camera?

JPG vs RAW. One big way it differs is in its format. Camera formats generally break down into two categories – compressed and uncompressed. A professional camera, such as a DSLR, will have the capability to take a photo in a RAW—or uncompressed—format. This keeps more data and quality within the photo details, and allows for much greater flexibility when editing photos. The downsides? RAW files are extremely large and special software is required to process the images. Smartphones generally save their photos in a compressed format, such as the ubiquitous JPG, which saves space and is easily shareable, but it does give up a measure of quality.

If smartphone photos are all a client has to offer for a project, one solution is to use stock imagery. Stock imagery (or just stock) is professional photography of common places, events, or people that is sold to be used for commercial purposes. Unfortunately, stock photos often come across as cheesy or out of place. Unique photos from clients or specific photo shoots do a much better job of telling a compelling story and driving home a message.

Fonts

With the proliferation of computers in our homes and schools, we are all familiar with fonts, but do you really know the difference between a font and typeface, or why some fonts have serifs?

Font vs typeface. These days, typefaces and fonts have been conflated to be synonymous, but they are—technically speaking—distinct. Typeface actually refers to the broader family of fonts. For example, Arial is a typeface. Within that typeface are a number of fonts – Arial Italic, Arial Bold etc. So, a group of fonts make up a typeface. Unless you work in type design, the terms can probably be used interchangeably and it won’t really matter, but now at least you know the difference!

More on fonts vs typefaces

Serif vs Sans-serif. sans-serif serif Serif typefaces, such as Times New Roman and Garamond, have small flourishes—or feet—at the end of strokes. A sans-serif typeface—like the one you’re reading now—is simpler, without those flourishes, or sans (without) serifs. Several examples are Calibri, Arial, and Helvetica. In general, serif fonts are considered better for long passages, articles, or books because the serifs help the eye scan along a line of text, making reading more fluid. Sans-serifs have the advantage of being much more legible at small sizes and on screens, and so they are more often used for web pages and headings.

More on serif vs sans-serif

Printing terms

Most companies have projects they need printed at times, whether it’s a direct mail campaign, advertising brochures, or just business cards. Next time you talk to your printer, here’s a few terms it will be helpful to know.

bleed-and-cut-lineIn the context of design, a page that bleeds is actually a good thing! Bleed refers to printing past the edge of the final product size, so the paper can be trimmed, and the final product can have ink all the way to the edge of a page. In the diagram to the left, the red area shows where any content would bleed outside of the final cut line. Designs that bleed tend to look more finished and professional, but can be costlier to produce.

crop-marksCrop marks are used alongside bleed, to indicate where a printed piece should be trimmed. Crop marks are only included at the end of the design process to the final, print-ready file, and are added by design software.

cmyk_webCMYK and RGB are common color modes, but only one should be used for printing. CMYK refers to the four inks used in some color printing—Cyan, Magenta, Yellow, & blacK. When a file is going to the printer, it should be prepared in CMYK color mode.

rgb RGB is used on-screen only, and refers to the 3 primary colors used to make all other combinations—Red, Green, & Blue. As a general rule, for printing, use CYMK; for the screen, use RGB.
 

Web terms

These days, most of us like to think of ourselves as web experts, but here are a few terms you might not know.

You can thank DNS for allowing you to actually remember websites names. DNS (Domain Name System) is the system by which user-friendly internet URLs are translated to IP addresses. Each name is translated to a specific number that is part of a large directory. Rather than trying to remember a number like 74.125.224.72, you can type www.google.com instead.

Responsive design is a way of building websites to adapt or respond differently based on the medium. A desktop user experience is inherently different than that of a mobile phone, and a responsive website optimizes for each one. For example, when a webpage is viewed on a mobile phone, elements might shift to display more efficiently on a different screen size and orientation. Responsive sites are flexible, easy to manage, and create a better overall experience for the end user. If you are building a new website, or even re-working an old one, you should seriously consider making it responsive.

Explore the openbox9ionary

Over the years we’ve gathered terms like these and created a reference page that gives brief explanations for each phrase: the openbox9ionary! So, next time you’re wondering about what a printer meant by blind embossing, you’re curious about the difference between a hyphen and an em-space, or you’re wondering who coined the term “relevantkool,” you’ll know where to look.

Explore the openbox9ionary now!

avatar

Josh enjoys layout, typography, and thoughtful art and strives to bring beauty and functionality together through design.
February 2nd, 2016 // //
ShowHide Comments
Loading...
Design jargon artwork