Have you been in a meeting wondering what in the world is this person talking about? Most of us have. And many are too embarrassed to ask. I expect communication was difficult at any place in time, but in the past ten years, terminology has evolved at the same breakneck speed as social marketing and internet businesses.
My business is a blend of two disciplines, design and technology. Throughout my career I remind myself, most people don’t know what I’m talking about so educating my clients is critical to their understanding of what we are doing together. In the same token, if I don’t understand what my client is talking about, I ask. Otherwise, I can’t do a good job for them. Sounds like common sense doesn’t it?
However, with all the great tools for creating a design or video, I wonder how many people know what they’re doing while they’re having fun being creative. The personal computer put graphic design in the hands of everyone as professional graphic designers bemoaned its detriment to “good” design. Training and experience may still be the hallmark of a professional graphic designer, but graphic design has been part of everyone’s vocabulary for decades now. Still, there are technical considerations to achieve successful publishing outcomes in both print and web.
So it occurred to me that clarifying design terminology might be useful. As a client understanding design lingo might help you explain to the designer more accurately what you want. This understanding is also useful when a designer is trying to explain why something can’t be done.
Digital design has been around since the mid-’80s with roots in print design. By the mid 90’s digital design found it’s way into web applications. Here is a glossary of common design terms to help you communicate with your designer.
(Upon sharing this post with a client, she reminded me the post couldn’t be printed because it is copy protected. Her disappointment prompted me to create an ebook which has value in that you can open it whenever you need a quick review of terminology. You can also share it. Why waste paper? Download my design terminology ebook and share it with a friend or client.)
Typography: Creating the appearance of written content in print and web using typeface styles and fonts. This design layout uses a choice of font sizes and weights along with character spacing, word and line spacing, and other elements.
Typeface: The description typeface and font are often used interchangeably. More specifically a typeface is a font style displayed as letters, numbers, and punctuation. Typefaces fall into three main styles; serif, sans serif, and cursive. Serif typefaces are thick & thin and usually sit on feet. Because of this variation in weight, they are difficult to read on a web page. There are serif typefaces that are thick overall, but still, have feet.
San serif typefaces are blockish or uniform in weight throughout the character and don’t have feet. San serif typefaces are easier to read online than serif typefaces. Helvetica is a common san serif.
Font: The font refers to the style, size, and weight of characters in a typeface. There are thousands of font styles and the names and are often different from a Mac to a PC. In print, the font size is measured in points; web design fonts are measured in ems or pixels. A 12-point font is larger than a 10-point font with varied readability between size and styles. Three most common weights of type fonts are bold, italic, and roman.
Mock-up: Sometimes referred to a dummy or storyboard. Mock-ups take many forms from 3D to 2D. This as a rough layout of a project, so that you can review and approve the basic design before construction begins.
Negative space: Also known as white space, this describes areas of a design that do not contain copy or images. Laymen sometimes consider white space in a design is as wasted space. Designers know that a layout without sufficient white space will be cluttered, or unappealing.
Visual Design: This broad term typically involves creating marketing materials from concept to execution. Visual designers, more commonly referred to as graphic designers, translate a company’s visual language to create functional, consistent, branding products across print and web. Most often a copywriter/designer team collaborate to ensure the copy and design work together to ensure a finished product that’s engaging and on- brand.
Product Design: Before the internet, this term referred to tangible products like furniture or utilitarian items like vacuum cleaners and lamps in the industrial design realm. In the digital world product design refers to an app or a feature, such as the ability to search within an app.
Aspect ratio: This defines the proportion of an image’s width vs. its height. For instance, the typical aspect ratio for a computer monitor is 16:9: or 16” wide by 9” high. Aspect ratios are essential when resizing images for design.
CMYK/RGB: CMYK stands for cyan, magenta, yellow, and black. Hues in the image are broken down into percentages of these four colors.CMYK images are used in print design. Web images are defined in terms of RGB, or red, green, and blue. An RGB image needs to be converted via software to CMYK before it can be used in printed materials. And conversely, a CMYK image needs to be converted to RGB for use on the internet.
Below the Fold: Like many descriptions, the origin came from print reproduction. In this case, below the fold was a newspaper term that described content visible only on the lower half of the page. On a website, Below The Fold refers to content that is not visible on the initial screen view. When a viewer has to scroll down the page to see additional content, it is Below The Fold.
Layout Grids: The common meaning of a grid is a series of vertical and horizontal lines. A design grid is areas in which content can be placed. Using a grid for design ensures a sense of order and consistency in a layout. The most common styles of grids:
• Hierarchical
• Column
• Modular
The Hierarchical grid is the most flexible format. It is generally used when the other layout formats won’t solve the design problem. Content blocks in a Hierarchical grid will not necessarily have equal spacing between them.
Commonly seen in traditional print newspapers and magazines, the Column grid divides a page into—guess what—columns. This kind of grid might also use the term “ baseline alignment” which means that the lines of text appearing side by side columns are perfectly even on the bottom.
Modular grids are more complex with the columns further broken out into rows, similar to a checkerboard. Website authoring content management systems use this grid as the basis for the site layout. Visualize four columns divided them into three rows. This grid provides a layout with 12 available blocks of content. That doesn’t mean you have use all 12 blocks or limit yourself to 12 equal-size blocks of type or images. The content blocks could be combined for two columns wide by two rows deep and others one column wide by three rows deep. The flexibility of combinations offers unlimited design opportunities.
Spot Color: In traditional print reproduction images are produced primarily using standard CMYK inks (Cyan, Magenta, Yellow, & Black — known as 4 color process.) An additional color (or colors) can be added which are called “spot color.” Spot color inks are different in that they are a flat color generally used for particular emphasis or effects. Ink choices include hundreds of PMS (Pantone Matching System) colors including metallic and fluorescent. Spot colors are often used for logos or design patterns. Using spot colors increases the printing cost so to save money a designer can convert a PMS color to CMYK values to simulate the desired spot color.
Resolution: This refers to the reproduction quality of an image. Its clarity is determined by the number of pixels or dots in the image. In print work, a 300 dpi (dots per inch) image is required for high-quality reproduction while 72 or 96 PPI (pixels per inch) is suitable for web and computer screen presentation. A 300 ppi image on a website would eat up a lot of bandwidth (take a long time to open) with no discernible improvement in quality. Other graphics reproduction methods like signs and displays require different resolutions. Even if you are familiar with a particular reproduction method, it is best to double check with the printer.
Raster vs. Vector graphics: A photograph or halftone is a typical raster image. These images are made up of tiny dots or pixels. When excessively enlarged on the web or in print, the halftone image becomes pixelated or blurred. Excessive enlargement of raster images makes the dots visible. For that reason, raster images should be saved as the size you’ll want to use them. File formats for raster images include GIF, JPEG, PNG, and TIFF. The choice of file format is based on how an image will be used.
Vector images are a whole other animal. They are generally represented by a hard edge, two-dimensional graphics like logos and illustrations. Adobe Illustrator for the Mac and CoralDraw for the PC are the most well-known software for creating and editing vector graphics. Considerable skill is required to create images using paths consisting of straight lines, points, and arcs. Vector graphics can be scaled and printed at any resolution, without losing detail. Each software has its own format for their native files. The file format reproduction of these vector files is EPS or encapsulated postscript files.
New open web applications development brought another form of vector graphics called SVG (Scalable Vector Graphics). Today there is a proliferation of easy-to-use SVG graphics web-based services. These services provide vector shapes for a wide variety of business charts, clipart, and presentations. You don’t need to be a designer to create vector graphics, but it helps to have good taste. The file format for these graphics called SVG.
When I use the description weight or size, I’m referring to a files byte size which might be megabytes (MB) for large files or kilobytes (KB) for small files. File size is critical for managing a website’s loading speed. File size is also a consideration when you are purchasing royalty free images. If your pictures are only for web use purchase the smallest file size which will be 72 dpi. If your image is for print use, buy the largest size at 300 dpi. The large image would have to be resampled (resized) to the smaller appropriate pixel size for web use. Photoshop or other similar software is needed for image resampling.
File Format: This how image and text data are encoded for computer storage and transfer. There are different file formats for specific purposes. Here are the most common design related file formats:
EPS: Short for encapsulated postscript, this is a standard format in print production. In the early days of digital print reproduction EPS was a raster halftone file. Today it’s primarily a vector image file which can be resized without loss of detail. A vector image saved as an EPS can be opened by many types of software and can be placed in MSWord or other document types. If the vector image was created in Adobe Illustrator and saved as an AI file format, it can only be opened in Adobe Illustrator but can be placed in many document types. Some vendors like sign makers and advertising specialties (printing on things like mugs and pens) prefer using an AI file for vector images because they can edit the file or resize it without loss of detail.
The most common file formats of choice for online images are JPG and PNG and GIF. You need to know the differences between them when choosing which file format to use for your online images. These formats have different compression qualities which are another part of your choice, but my brief description might suffice. Image compression is not a topic I ever had the need to discuss with a client. They just want to know what looks the best as most of my readers probably want as well. However, if you’re interested in the subject of image compression, this link will be helpful.
https://www.elegantthemes.com/blog/wordpress/png-or-jpg-or-gif-choosing-the-right-image-file-type-for-your-site?
GIF: Short for Graphics Interchange Format, GIF is the most common format for sending flat graphic images online. Because they are compressed, GIF files tend to be a small weight—a boon for transferring—but they’re also relatively low in quality with only 256 colors, so the format is not suitable for use on printed materials or for halftone photos. (show halftone saved as GIF) GIFs can be animated to form a short looping video that loads quickly. Animated GIFs sometimes use clips from movies, TV shows, or longer videos for humor or memes on social media sites.
JPEG: JPEG or JPG is short for Joint Photographic Experts Group, the committee that created it. The fie compressed is relatively small in size (not dimension size, but file weight). JPG is an acceptable extension identified as the same. Unlike the GIF, JPG files contain the full range of color. Unlike GIFs, JPGs cannot be animated. While GIF files support transparent backgrounds, JPGs do not. For instance, placing a logo over a colored background would require using a transparent GIF file for the logo. A logo saved as JPEG would only appear with a white background. Text in a JPG image often looks fuzzy or pixelated.
PNG: Portable Network Graphics was explicitly designed for the web to displace GIF. The only similarity is they both support transparency. A PNG is the choice for logo placement on photos or color backgrounds. Additionally, benefits of a PNG file are:
• Better image quality while supporting a full range of color.
• Typefaces in a PNG file will appear sharper than those in a JPEG file.
• PNG compression could be up to 20% smaller than a GIF.
TIFF: Short for Tagged Image File Format, TIFF is the format of choice for print reproduction when converted to CMYK. Like other file formats, TIFF compression maintains the image quality, but the file size is much larger. For that reason, TIFF is not suitable for web use.
Responsive Web Design: This is today’s number one requirement for acceptable web design, and is by now a familiar description. In 2012 Google predicted more people would be using mobile devices to surf the web and shop online when they set the stage for responsive design as an SEO standard going forward. At that time Google shared their priority for Mobile First search placement within what was then a few years. Mobile First search has been in place for a few years now.
Responsive web design was developed to create webpages that could be easily read and navigated when viewed on a variety of mobile devices, including cell phones, and tablets Easy navigation meant a minimum of scrolling or resizing on the part of the user. How it works is the software recognizes the device/screen size the website is being viewed on and rearranges the content modules in flexible, proportion-based grids.
Often the designer starts with the mobile-first design because it is much easier to adapt the mobile layout to a larger format than to minimize a larger layout for a smaller size.
Wireframe: I always thought the term “wireframe” was a bit deceptive. I still think of a wireframe as part of three-dimensional object construction. However, a wireframe is a digital description for the mock-up of a website page layout. A wireframe will show where the page elements; navigation tools, and content will appear on a web page. The wireframe does not explain how those elements will look specifically, just their arrangement on the page.
Story Board: Storyboard is an advertising term for laying out frame content for a commercial or video. The storyboard is essential for concept visualization, script development, and overall production efficiency.
Now that we’ve covered the basic design terms most people encounter, here are some more complex design descriptions that glorify normal operations.
UX (User Experience Design)
Website design is more than visual appearance. User experience will make or break website success. Good UX Design delivers a clear path for the sites intended use. Design failure results when a visitor doesn’t understand where to go, or what to do next, or how to find what they want. The point of UX is to provide the best possible user experience by eliminating confusion and making the website or app easy to use. A frustrated user will just move on. A satisfied user might share their experience with friends and even come back.
UI (User Interface Design)
User interface design enhances the tools people use to interact with your mobile app or website. After the UX designer creates the best user experience the UI designer styles and visually enhances the elements used to navigate the intended path with the goal of making tasks an engaging experience. The UI focus is on components like buttons, menus, and slider bars. An example is the iPhone interface that enables you to send a text by tapping the green “Send” button or open a new Safari window by tapping the “+” symbol. UI design creates a positive user experience by accomplishing the tasks quickly and seamlessly.
IA (Information Architecture)
While UX & UI are relatively new terms, AI has been around since the first website. IA is a comparison between website design and building architects because the designers’ job starts with creating a blueprint of everything that needs to go into the site. Website designers use diagrams and flowcharts to structure content before construction begins visually. These diagrams show how content will be accessible to users with the flow of navigation. Like a storyboard, the flow charts keep designer on track.
There are many more buzz words in the digital world and the graphic design world, but these are the primary ones most of us encounter. Unless a word has immediate application to the task at hand, it’s just fluff or meant to impress.
Communication plays an essential role in the success of every marketing project, be it print or web. Because every project is a collaboration between my client and me, there should be no mystery about what can or can’t be accomplished. The use of these terms is part of our business every day.
We help companies and solopreneurs attract their perfect prospects by building them a commanding online presence with website design, search engine optimization, blog creation/management, and social media marketing. Call 954-257-7066 to explore how we can be your seamless marketing department. We’ll start with a free website/marketing audit.
