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.
About the Author
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
Subscribe to our newsletter
Come on... You know you want to.
Related Posts
Subscribe to our newsletter
Get monthly newsletters with timely blogs and occasionally announcements for resources including in-depth reports, data-driven insights, and webinars.