fbpx

Design Lingo: Speak Like a Pro

Share

Ever felt lost in a sea of design jargon? This blog will equip you with the knowledge to decode the lingo, fostering better relationships with the creative minds you collaborate with. Let’s bridge the communication gap and dive into the world of design together!

TYPOGRAPHY

Typeface vs Font

While “typeface” and “font” are often used interchangeably, they actually refer to distinct aspects of text design.

A Typeface represents a family of letters and characters sharing a cohesive style. Within a typeface, you’ll find variations in shapes, sizes, and design features for each letter, number, or symbol.

On the other hand, a Font is the specific version of a typeface. Think of it as the outfit a typeface wears, including size and style choices. For example, Helvetica is a typeface, and includes a remarkable 51 fonts in the ‘family’. These fonts encompass all the different weights, like regular, italic, and bold.

So, why the confusion? With the rise of modern desktop publishing, operating systems and applications adopted “Font” menus instead of “Typeface” menus, perhaps intentionally or by oversight.

But does it truly matter which term you use? Not in most cases, unless you find yourself in a conversation with a typography enthusiast who might appreciate the precision of the correct terminology.

 

Serif

A Serif typeface features small decorative strokes, or “serifs,” at the ends of its letterforms. Serif typefaces are often seen as giving text a classic and traditional appearance.

Examples include: Garamond, Times New Roman and Merriweather.

Sans Serif

In contrast to ‘Serif’, Sans Serif typefaces lack those decorative strokes at the ends of letterforms. These typefaces are considered as clean, modern and straightforward.

Design Lingo

Script

Script typefaces are imitative handwriting and cursive styles. They range from elegant cursive to bold handwritten or calligraphic styles. They can add a touch of sophistication or fun informality.

Examples include:

Slab Serif

A Slab Serif typeface is characterised by bold, rectangular serifs that are more prominent than standard Serif typefaces. They are considered to convey strength and confidence and maybe a retro aesthetic.

Tracking

In typography, Tracking refers to the consistent spacing between all characters in a block of text. Unlike Kerning, Tracking adjusts the spacing of a whole word, sentence or paragraph. Adjustments to letter spacing can enhance readability and visual appeal.

Kerning

Often overlooked, kerning refers to the fine-tuning of space between individual characters. Kerning is automatically placed on a typeface but tweaking when necessary ensures letters sit together in harmony, making your text more visually appealing. You may not notice it when it is done correctly but you certainly will when it isn’t.

Leading

Pronounced ‘ledding’ because who doesn’t love how confusing the English language can be! Leading deals with the vertical space between lines of text. You can increase (or decrease) your content readability when increasing or decreasing your leading.

IMAGE

Bitmap/Raster

Bitmaps or Rasters consist of lots of pixels, each one holding colour data that when put together form photographs and complex visuals. Resizing photographs incorrectly can comprise the quality and sharpness.

Vector

Vectos employ mathematical equations to define shapes and lines, they ensure flawless scalability without quality loss, this means they’re great for logos but not photographs.

Resolution

Measuring an image’s level of detail is expressed in DPI (dots per inch) or PPI (pixels per inch). A high resolution (such as 300DPI) is absolutely necessary for crisp and clear visuals when printing any images and photographs. However online content and images are only ever viewed at 72PPI. You can also not increase the resolution of an image, for example you cannot convert a 72 DPI image to 300 DPI. But a 300 DPI image can be reduced to a 72 DPI.

Pixelation

When an image is scaled up beyond its native resolution it will result in a blocky and distorted appearance, referred to as pixelation. Knowing your images quality and resolution is key to avoiding pixelation, if your image is only 72 DPI it is not suitable for print, remember you cannot increase an images resolution.

COLOUR

CMYK

This is the colour mode for print. These four inks mixed together create a wide spectrum of colours. Perfect for magazines, brochures, photographs and more.

RGB

This is the colour mode for the web. It relies on blending these 3 colours at varying intensities to produce a broad range of hues. RGB is for all digital materials, no matter the type of screen or device.

HEX

This is a coding system combining letters and numbers to specify a particular colour’s intensity and hue. For example #FFFFFF equals white.

Pantone

Are a standardised colour matching system used in various industries, such as printing and graphic design. Each Pantone colour has a unique code for identification and ink measurements for mixing. Using Pantones ensures accuracy and uniformity over projects, products and branding.

DESIGN

Opacity

Opacity refers to the degree of transparency of an object, or how much light is allowed to pass through the object. High opacity means less transparent and low opacity is more see-through.

Transparency

While Opacity refers to how see-through an object is, Transparency refers to an object’s ability to allow underlying content to be visible.

Saturation

Is the intensity or vividness of a colour. Highly saturated colours appear rich and vibrant, while desaturated colours are more muted or devoid of colour appearing gray.

White space (aka Negative Space)

These are the areas of your page (print or digital) that do not contain any content. This can also be referred to as breathing space. It is always best to ensure your content has ample white space between elements, this enhances readability, navigation and understanding. There is nothing worse than a cluttered design.

Size and Scale

Size and scale are what quietly shape your visual story. When used right they create harmony among elements and make everything click perfectly. Using size and scale effectively creates a wonderful hierarchy that leads your audience’s gaze to what matters most.

Hierarchy

The boring definition is – hierarchy is about the organisation of elements to convey importance. But I suggest thinking of it as guiding your viewer’s eye. By implementing a clear hierarchy you are making your design more structured and easy to understand while ensuring your viewer is prioritising the right content, in the right order.

Contrast

Contrast in design is the deliberate juxtaposition of different elements such as colour, size, shape, texture or style. You can boldly contrast light with dark, bold with subtle or angular with curves. Designing this way seizes attention, draws focus and creates amazing visual interest. In other design fields such as photography, contrast is a fundamental tool for adding intrigue, emphasising details and transforming the ordinary to extraordinary.

Gradient

A smooth transition from one colour to another. Gradients can add depth, dimension and visual interest to an object or design.

Grid

The design’s backbone, a network of intersecting horizontal and vertical lines that help you align and structure elements within your design. Grids can ensure consistency and visual harmony.

Mockup

This is a visual representation of a concept, serving as a bridge between the idea and final product. Creating a mockup of a product packaging for example can aid clients envisioning the end result before it becomes reality.

Wireframe

A simplified, monochromatic layout that outlines structure and functionality of a website or apps. A wireframe focuses on content placement and user interface rather than design or final style.

UI and UX

User Interface (UI) handles the visual and interactive aspects.

User Experience (UX) ensures overall usability, accessibility and user satisfaction.

For example: a shopping app will use UI design to look stylish and entice customers to buy products, the UX design comes in to make sure it loads effectively, limit the number of click throughs a customer must take (to make a purchase) and other behind the scenes interactions. If you are having trouble loading the app or making a purchase it won’t matter how nice it looks.

Responsive Design
Having a responsive design ensures your website or app can adapt seamlessly to various screen sizes and devices. A properly responsive website will be consistent and user-friendly whether viewed on a computer or mobile screen.