Defining Common Design Terms: A Beginner's Guide - Adpearance

Defining Common Design Terms: A Beginner’s Guide

Social media and the mass availability of Internet-enabled smart phones have recently exposed new web design terms to many. Although most of us don’t fully understand all of the terminology, it is likely you or someone you know has, at one point, saved an image to fit the size of your Facebook or Twitter cover.

As a digital marketing agency, Adpearance develops assets for multiple platforms in varying sizes and modes. Below is a brief guide of industry terms we’ve put together that help you present your media at its very best—clear and vibrant.

Print versus Web

Deciding between “Print” and “Web” for an asset is part of the litany of questions designers will ask clients before proceeding with a design. Getting any one of these terms confused can mean the difference of hundreds of dollars in capital loss.

CMYK (PRINT)

(Cyan, Magenta, Yellow and K for black) Printing method in which all four secondary “process” colors are applied at varying levels for full-color, offset printing.

The reason secondary colors (CMYK) are used instead of primary are for their subtractive nature. Additive would mean starting with black and then “adding” colors until the desired tone is reached.

Spot color (PRINT)

Any color or mixture of CMYK in ink form used for offset printing.

Pantone (PRINT)

Otherwise known as “spot” colors, these are a brand of patented CMYK color blends.

RGB (WEB/ DIGITAL)

An additive, light based color model that mixes the colors (Red, Green, and Blue) to create tones on digital devices.

Hexadecimal (WEB/DIGITAL)

Utilizes the RGB color model to create the varying tones viewable on your screen. Hexadecimal numbers are binary based like the systems they were designed for.

Since computers interpret information in binary digits, web developers have access to a color model, expressed in a computer comprehensible language.

Image Compression and Form

Resolution

The clarity and density of pixels on your screen.

DPI (Dots Per Inch)

Refers to the amount of dots/pixels on your screen.

Rasterized

A type of image that is pixel determinate and has been encoded to display each pixel on a grid/rectangular based layout. You can see this display whenever you zoom in very close to an image that has been rasterized.

Vector

A type of image that is not pixel dependent and therefore does not lose clarity or quality regardless of size. Vectors are linear algebra that utilizes lines, points and polygons to display images. This means that no matter how small or how big you make the vector image, it will always remain crisp.

Still have questions? Learn more about the differences between a vector file and a high-resolution image.

File Extension Terms

PNG

This file extension is excellent for web-displayed images because of the small, lossless file compression with transparent and gradient display capabilities.

JPG

Great for web displayed images due to their small file size. However, this is achievable due to their “lossy” compression feature that loses data and quality in order to achieve the small file size. Just remember, the higher the quality, the larger the file, which equates to slower load times.

GIF

Developed by CompuServe, this file extension is one of the older file extension names on the market initially developed for 8-bit video, which is why this lossless file compression has the ability to animate your favorite gif(s).

Static, Liquid, Adaptive, or Responsive Websites

Static

Otherwise known as “fixed,” static is a web design based on one static set of dimensions (ex: 1024 x 788 pixels) regardless of browser size or device.

Liquid

Instead of staying a fixed width, liquid layouts expand and contract with the size of the browser, but without the same adaptability and thought consideration as responsive layouts. At certain widths, the design becomes compromised since the layout was only designed to flow to the size of the browser or device, while the text and columns were designed for a limited dimension range.

Adaptive

Adaptive design is similar to responsive design since the design adapts to different device/browser sizes with the use of media queries. However, unlike responsive web design, adaptive sites contain break points. What this means is that a device beyond or below a break point may look compromised by too much or too little space.

Responsive

Responsive websites are developed dynamically using relative units and media queries to respond to varying widths, alignment and orientation across a range of devices without break points for a more cohesive web experience.

Mobile Site

Responsive websites are developed specifically for mobile / smartphone devices. The mobile site is often used in conjunction with a desktop model. With the increase of smart devices, mobile-only sites are dwindling in popularity in favor of responsive design.

Get monthly newsletters with timely blogs and occasional announcements for resources including in-depth reports, data-driven insights, and webinars. Once subscribed, you can select your preferences to get only what matters to you.

On-Demand Webinar
Why Connected TV is Taking Over Traditional TV Advertising
On-Demand Webinar
How to Measure Your Digital Success
About the Author

User

Adpearance is the digital marketing company obsessed with generating quality leads. Our solutions combine cutting-edge technology, premium tracking, and an expert team to transform business results.

Follow Us

Leave a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

Subscribe to our newsletter

Come on... You know you want to.

Subscribe to our newsletter

Get monthly newsletters with timely blogs and occasionally announcements for resources including in-depth reports, data-driven insights, and webinars.

Subscribe Form

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.