Are you new to the world of web and graphic design? Want to avoid getting the basic terminology wrong when discussing projects with your designer?

Admec Multimedia share the design terms you need to know in this infographic.

• Fonts and typeface
• Tracking and kerning
• Backdrop and background
• Gradient and gradient mesh
• Tint and tones
• Hue and colour
• Whitespace and negative space
• Lettermark vs wordmark
• Black-white and grayscale
• Wireframes and prototypes

Check out the infographic for more.

 

Design is a broad and multifaceted field that encompasses various disciplines, from graphic design and web design to interior design and industrial design. With such diversity, it’s no surprise that there are numerous design terms that people often confuse or use interchangeably. In this blog post, we’ll explore 20 commonly confused design terms and clarify what they really mean.

1. UI (User Interface) vs. UX (User Experience)

UI (User Interface) and UX (User Experience) are often used interchangeably, but they refer to distinct aspects of design.

• UI focuses on the visual and interactive elements of a product or website, such as buttons, icons, and layouts. It deals with how users interact with the interface.
• UX, on the other hand, is concerned with the overall user journey and satisfaction. It includes aspects like usability, accessibility, and the emotional response of users to the design.

2. Wireframe vs. Mockup vs. Prototype

These terms describe different stages of design development:

• Wireframe: A basic, low-fidelity sketch that outlines the layout and structure of a design. It’s like a blueprint, devoid of color and detail.
• Mockup: A higher-fidelity visual representation that includes colors, typography, and some design elements. It provides a more realistic preview of the final product.
• Prototype: An interactive model of the design that allows users to interact with it as they would with the final product. Prototypes help identify usability issues.

3. Typeface vs. Font

Though often used interchangeably, typeface and font have distinct meanings:

• Typeface refers to the design of the characters, including their shape, style, and weight. Examples of typefaces are Times New Roman or Helvetica.
• Font is the specific digital file that contains a set of characters in a particular typeface and size, such as “Helvetica 12pt Regular.”

4. Serif vs. Sans Serif

Serif and Sans Serif are two common typeface classifications:

• Serif typefaces have small decorative lines (serifs) at the ends of characters, giving them a more traditional and formal appearance.
• Sans Serif typefaces lack these decorative lines, resulting in a cleaner and more modern look.

5. Kerning vs. Tracking vs. Leading

These terms relate to the spacing between characters and lines in typography:

• Kerning: Adjusting the space between individual characters to ensure even spacing and improve legibility.
• Tracking: Adjusting the overall spacing between characters uniformly. It affects the spacing of an entire word or text block.
• Leading: Refers to the vertical spacing between lines of text. Proper leading improves readability.

6. RGB vs. CMYK

RGB and CMYK are color models used in design:

• RGB (Red, Green, Blue) is used for digital displays and combines these primary colors to create a wide range of colors.
• CMYK (Cyan, Magenta, Yellow, Key/Black) is used for print and combines these colors to produce a full spectrum of colors. The “K” stands for black.

7. Vector vs. Raster

Vector and Raster are two types of graphics:

• Vector Graphics use mathematical equations to define shapes and lines. They are resolution-independent and can be scaled without loss of quality.
• Raster Graphics, also known as bitmap images, use a grid of pixels to create images. They have a fixed resolution and can become pixelated when scaled up.

8. Hierarchy vs. Balance

Hierarchy and Balance are principles of design:

• Hierarchy involves arranging elements to guide the viewer’s attention. It often includes elements like headings, subheadings, and visual cues to prioritize content.
• Balance refers to the distribution of visual weight in a design. Balance can be symmetrical (evenly balanced) or asymmetrical (unevenly balanced) depending on the desired effect.

9. Saturation vs. Brightness vs. Hue

These terms describe aspects of color:

• Saturation refers to the intensity or purity of a color. Highly saturated colors are vivid, while desaturated colors appear more muted.
• Brightness determines how light or dark a color is. It is sometimes referred to as value.
• Hue is the specific color on the color wheel, such as red, blue, or yellow.

10. Grid vs. Layout

Grid and Layout are essential in design:

• Grid is a framework of horizontal and vertical lines used for aligning and organizing content. It provides structure to a design.
• Layout refers to the arrangement of visual elements within the design, considering factors like balance, hierarchy, and flow.

11. Above the Fold vs. Below the Fold

These terms originate from web design:

• Above the Fold refers to the portion of a webpage visible without scrolling. It’s crucial for capturing the viewer’s attention and conveying essential information.
• Below the Fold refers to the content that becomes visible after scrolling. It’s where additional information and details are usually placed.

12. JPEG vs. PNG vs. GIF

These are common image file formats, each with its use:

• JPEG (Joint Photographic Experts Group) is best for photographs and images with many colors. It uses compression to reduce file size.
• PNG (Portable Network Graphics) is suitable for images with transparency and sharp edges. It’s a lossless format, preserving image quality.
• GIF (Graphics Interchange Format) is ideal for simple animations and images with a limited color palette. It supports transparency and animation.

13. Moodboard vs. Style Guide

Moodboard and Style Guide are tools used in design projects:

• Moodboard is a visual collage of images, colors, textures, and fonts that convey the overall mood and aesthetics of a project. It helps set the design direction.
• Style Guide, also known as a brand or design guide, provides detailed instructions on how to apply design elements consistently across all project materials. It ensures brand consistency.

14. Serif vs. Script vs. Display Fonts

These are different font categories:

• Serif Fonts have serifs (small decorative lines) at the end of characters and are often used for body text in print materials.
• Script Fonts mimic handwriting and have a flowing, cursive style. They are used for decorative or artistic purposes.
• Display Fonts are highly decorative and attention-grabbing fonts used for headlines and titles.

15. Responsive vs. Adaptive Design

These terms relate to web design:

• Responsive Design involves creating a single website that adapts to different screen sizes and resolutions, providing an optimal viewing experience on various devices.
• Adaptive Design involves creating multiple versions of a website tailored to specific device types. Each version is optimized for a particular screen size or device.

16. Branding vs. Logo

Branding and Logo are integral to a company’s visual identity:

• Branding encompasses the overall image and perception of a company or product. It includes elements like logo, color palette, typography, and messaging.
• Logo is a specific visual symbol or mark that represents a company. It’s a crucial part of branding but not the entirety of it.

17. Serif vs. Slab Serif

Slab Serif is often confused with Serif, but they have distinct characteristics:

• Serif fonts have small, fine lines or strokes at the ends of characters, creating a more traditional and classic appearance.
• Slab Serif fonts have thicker, rectangular serifs that give them a bold and chunky appearance, often used for a more modern and impactful look.

18. Mockup vs. Dummies

Mockup and Dummies are both used in design presentations but serve different purposes:

• Mockup is a high-fidelity representation of a design, often used to visualize how a finished product will look. It can be digital or physical.
• Dummies, in design, refer to physical, non-functional models or prototypes. They are used to test ideas, layouts, or structures in a tangible form.

19. Opacity vs. Transparency

These terms describe the visibility of objects in a design:

• Opacity refers to the level of visibility of an object. Lower opacity makes an object more transparent or see-through.
• Transparency is the property that allows objects to be seen through. Objects with transparency let other objects or backgrounds show through.

20. Leading vs. Tracking vs. Kerning

Leading, Tracking, and Kerning are all related to text spacing:

• Leading refers to the vertical spacing between lines of text. Proper leading improves readability.
• Tracking involves adjusting the overall spacing between characters uniformly, affecting the spacing of an entire word or text block.
• Kerning is the adjustment of space between individual characters to ensure even spacing and improve legibility.

Understanding these distinctions in design terms is crucial for effective communication and collaboration within the design field. Whether you’re a seasoned designer or just starting, clarity in terminology enhances your ability to convey ideas and create visually compelling designs. So, next time you discuss design, remember the differences between these commonly confused terms to ensure everyone is on the same page.