It’s one of our responsibilities as marketers, developers and designers to ensure that we communicate things to our clients in an easy-to-understand way that doesn’t confuse or misconstrue. Whilst we do our best, sometimes those industry terms that we know and naturally use sometimes just slip out.
If you’re new to the trade or thinking of pursuing a career in graphic design and trying to decipher what all those terms you keep seeing and hearing mean, stay tuned, this blog is here to help you grasp all that Graphic Design jargon.
And if you’re a business professional or leader, remember that there’s never any harm in asking us what those different terms, phrases, and particularly with marketing jargon, abbreviations mean. We’re always happy to help.
Let’s jump in!
Skip to a Term
Aspect Ratio
Time to get mathematical! It’s not actually that maths-heavy so there is no need to worry. Aspect ratio is the ratio of height to width of a rectangle, which typically will be in reference to screen sizes of devices. The format for this is width: height (measured in inches). So typical ratios you’ll come across will be 1:1, 4:3, and 16:9.
Bleed
Bleed is where design and print collide. It is a term used to describe the edges of a print that will be trimmed off in the printing process. In a design, bleed marks may be placed to help extend the design edges out to provide almost a safety net for when the design goes to print. Bleed ensures that none of the actual design itself gets cut off during print.
Adding ‘bleed’ to a print file and extending the background image or colour beyond the trim marks/crop marks also ensures that when a design is trimmed down, you’re not left with a dodgy white edge on any of the sides. You can describe a design as ‘full-bleed’ if the background image or colour extends right to the edge of the printable area.
Brand Identity
Brand identity often gets confused and used interchangeably with Brand and Branding, but they are all three different things. Brand identity (sometimes referred to as ‘brand essence’ is the part when the design is most heavily involved as it refers to all of the visuals that are shown to the public. Brand identity is the logo, colour palette, typefaces etc that people learn to recognise as yours – it’s the complete visual style of a brand.
Colour
Colour is crucial in the world of design. The role it plays is consciously underrated yet is a big part of subconscious emotion and action. Yes, whilst using yellow on the surface of it may be just an appealing design choice, the colour psychology behind it creates feelings of happiness, joy and energy.
Psychology aside, sometimes brands pick a colour more for what association or trend it correlates to. For example, colours like blue are quite a popular choice amongst a lot of companies as they look modern and technological. However, this can be quite a ‘safe’ choice and may often not make the brand stand out. Green is often chosen for brands and businesses that are environment-focused and perhaps more ecological.
In some instances, there are even companies that copyright their specific brand colours in an attempt to stand out, create brand recognition and be the only company that uses that unique shade. In the early 00s, a lot of brands were in a colour war, suing one another and raising infringement cases against competing companies that would use similar/the same colour.
The colour wheel
Ok, insert intermission here before we go on to define the colour jargon terms. The colour wheel is a visual aid that you’re likely most familiar with from your primary and/or secondary school days. It’s a circle with segments for each primary, secondary and tertiary colour. There are 3 colour principles/schemes that are born from the colour wheel used to help dictate the direction of a design: Analogous, Complementary and Triadic.
Analogous
Uses colours next to one another on the wheel. They create a feeling of harmony and comfort. One well-known example is the MasterCard logo which uses the accompanying colours red, red-orange and orange on the colour wheel.
Complimentary
Uses colours opposite to one another on the wheel which is thought to complement one another. They say opposites attract after all. The Mountain Dew (MTN Dew) logo is a good example where the two main colours used for the brand are red and green.
Triadic
Uses colours that are evenly distributed across the wheel. Think of a triangle shape on top of the colour wheel. The colours each point lands on can define the triadic colours. The web browser Firefox uses a triadic colour combo of different reds, blues and yellows.
All of the colours on the colour wheel are also sectioned into two referring terms called ‘warm’ and ‘cool’ colours. Imagine the wheel sliced in half; the blue to green side are cooler colours and the red to yellow side are warmer colours.
RGB
Nope, it doesn’t stand for Really Good Backgrounds but rather the primary colour combo of Red Green Blue. It’s the colour standard used when creating digital designs intended for digital applications such as social media posts, website design and logos. The three colours are used within design to create a spectrum of colours. Once combined, they become brighter.
CMYK
CMYK is the sibling of RGB, similar but different in its own right. It stands for Cyan Magenta Yellow and Key (meaning Black) and is used for print designs rather than digital. Just like with RGB, the four colours are used together to create a spectrum of colours for print designs but instead of getting brighter, they get darker.
Hex
Hex (or Hexadecimal if you want to say the full thing) is a code comprising six digits that represents a digital colour. It’s mostly used in HTML and CSS coding but still has a widely applicable place in the world of design, alongside its counterparts RGB and CMYK.
Pantone
You’ll likely have heard of the company Pantone and may even be familiar with their ‘colour of the year’ arrangement. They developed a system called the Pantone Matching System (PMS) which is a standardised colour scheme for mainly print but can also be used for graphic design. The system assigns a number and name to every colour shade that helps industry experts easily recognise and reference them.
Monochrome
Monochrome is the use of just one colour for a design, but utilising different shades and tones of that colour. For example, Calendy uses a bright blue as its main colour but accentuates its design and website with different shades of its hero colour to create definition and emphasis. Sometimes using just one base colours in different tones can really make a design sing. Simplicity doesn’t always mean boring.
Greyscale
Greyscale is a dedicated monochrome palette that only uses black, white and shades of greys. You probably initially think of photos that use greyscale filters to look dramatic or old-timey. That’s the same principle for greyscale.
Opacity
Opacity is just how transparent a design or image is. The lower the opacity, the more transparent an element is and the higher the opacity, the less transparent it is. Adjusting the opacity of elements of a design can help to either mask elements or blend them with others.
Palette
A design palette refers to the selection of colours/tones used for a design or brand, just like an artist with their paint palette! A strong palette defined early in the design stages helps to keep any future elements consistent. One popular example is google’s palette which comprises of blue (#4285F4), red (#DB4437), yellow (#F4B400) and green (#0F9D58).
Some brands will have a set of main colours, referred to as a ‘primary palette’ and additional colours that they can also use for design work and marketing called a ‘secondary palette’. Consistent use of these helps with brand recognition.
Gradient
A gradient is a gradual change of two or more colours in a design/element. This can be used for shapes, backgrounds and more. Gradients can also gradually transform from a colour to a transparent background.
(Psst, want to see a great example of a gradient in action? Check out the graphics we did for Fonix)
Composition
Composition is the layout of how elements are placed in a design. There are different layout possibilities that can be used within design to help organise and define the importance of different elements.
Alignment
You may be familiar with this in word documents, where you can select for text to either sit on the left, right or in the middle of your document. Alignment for design is the same concept, it dictates whether your design elements, either text, images or both, are aligned on the left-hand side, right-hand side or right in the middle. And if you have multiple items on a design, you can also use alignment to spread them out evenly across a page.
Balance
Balance in design indicates how evenly distributed elements are. Depending on the type of design being created, elements may need to be balanced out with one another to create a seamless style. Symmetry can be used to create balance in designs, where an element is reflected upon itself to create two or more exact parts.
Balance can also relate to how one element is sized in proportion to another. For example, look at any logo that includes a brand name (text) alongside a brand mark (graphic). If it’s been designed correctly the text and brandmark should look in proportion with one another. If the text is too small or too large, the logo as a whole will look unbalanced.
Hierarchy
For a lot of different design pieces, there will typically be a structure of hierarchy. This creates levels of importance for different elements and is used to direct the audience’s attention from the most important element all the way down to the least. For example, if an image or heading is bigger compared to other elements, people’s attention will naturally be drawn here first.
White space
White space, also known in the world of design as ‘negative space’ just means any area of a design that does not have an element within, no images, no text, nothing. The edges around this blog are its white space. And just because the name is ‘white space’, it doesn’t inherently mean that the colour of this blank space has to be white.
Repetition
Repetition is using multiple of the same element, shapes, or graphics over and over again to create consistency. Repetitive use of an element can be used to create a pattern for a design. Using repetition can help to create textures and generate some movement in a design. Repetition can also be just one or two more of an element repeated and doesn’t have to be hundreds upon hundreds. For example, the Audi logo is 4 circles repeated and overlapping one another.
Contrast
Contrast highlights the difference between elements. It helps to again build that visual priority of elements and allows certain aspects to stand out more compared to their counterparts. Contrasting elements can be two different colours, textures, and shapes.
File Types, Formats and Extensions
File types and formats are the names given to a saved document or design that decodes the type of work saved for computers to understand what is being stored on a file.
Raster
Raster images and graphics are made of pixels, with each pixel having its own colour, transparency etc. Because raster images contain pixels, when resized, they begin to lose quality and appear blurry.
Vector
Vector images and graphics consist of smaller graphical elements such as lines and points and unlike raster graphics, don’t lose quality as they’re rescaled. This is because the lines and points are mathematical equations that are almost recalculated as the graphic is scaled.
GIF (Graphic Interchange Format)
A raster graphic file format that is used for animation.
PNG (Portable Network Graphic)
A raster graphic file format that works with graphics with transparent backgrounds.
JPEG/JPG (Joint Photographic Experts Group)
The most commonplace file type that compresses both colour and greyscale digital images/photographs.
TIFF (Tag Image File Format)
A raster graphic file format used to store high-quality images prior to editing.
PSD (Photoshop Document)
File format specific to Adobe Photoshop documents, used for storing multi-layer graphics.
AI (Adobe Illustrator)
A vector file type specific to Adobe Illustrator, used for storing high-detail digital drawings, logos etc.
SVG (Scalable Vector Graphic)
A vector file type used to store graphics of any size or quality, regardless of their size.
EPS (Encapsulated PostScript)]
A vector file type used to store and produce quality large-scale print designs.
Both SVG and EPS file types are more versatile in comparison to Ai files and can often be opened and edited with a wider range of software.
WebP
A file size created by Google that displays high-quality images with smaller sizes, to help decrease website load times/speed.
PDF (Portable Document Format)
A file format created by Adobe that presents elements of a design in a formatted document display suitable for all applications to prevent loss of information. High resolutions PDFS are oftentimes used for printing.
Imagery
Imagery is every designer’s best friend. Whilst not used at every design corner, it can be used to help personify a design and add character. It’s a type of visual that helps to communicate an idea, thought, or tone to an audience, sometimes quicker than text can.
Mood board
The best starting place when working with image ideas for design is to work on a mood board. A mood board is a collection of images, icons, and photographs that help give designers some food for thought and direction for their designs.
Stock photography
Stock photographs are individually licensed photos snapped by someone else. It’s a brilliant graphic design tool that, especially for smaller businesses, means there’s no need to hire a professional photographer or rent an entire photography studio just to create some images for designs.
Icons
Icons are typically less complicated images consisting of just a few lines that represent an item, object, or person. They’re simple but effectively capture information without needing to overcomplicate. The Noun Project and Flaticon are great examples of icon-sourcing websites.
Logo Types
We couldn’t talk about graphic design without talking about logos! Logos come in all shapes and sizes and are so much more than just puzzling elements together to create a lovely-looking design. There’s thought and justification behind them too, plus different types, such as:
Logomark
A logomark (also known as a brandmark) is a ‘mark’ or symbol that represents a business. It doesn’t include the business name and instead opts for a graphic that the company uses. For example, with Milk & Tweed, we have a logomark that is our ampersand symbol. A brand will typically use a logomark/brandmark once they’ve established recognition of their business and for familiarity.
Logotype
Logotype (also known as a wordmark) is just the opposite of a logomark. It’s a logo design used by businesses that stays consistent with their style and brand identity but instead of using imagery, it’s a stylised format of the business name. Whilst some businesses use a straightforward typeface for their logotype, others choose to create bespoke lettering which helps strengthen the brand and create a uniqueness to the business. For example, Coca-Cola’s logo uses a customised version of a type called the “Spencerian Script”, a form of cursive handwriting script to create their own bespoke font.
Lockup
A lockup logo in a way combines logotype and logomark. The two elements, graphic and type are ‘locked’ together to create a whole graphic that most businesses will often use as an initial introduction to their brand. It is a type in an approved form, be it a horizontal lock-up with the brandmark beside the brand name, or a vertical lock-up with the brandmark above the brand name. Consistent use of these logo lock-ups helps with brand recognition.
Emblem
An emblem is a type of logo that captures the best of both worlds. It practically combines both the logomark and logotype styles. It’s a more traditional style logo that was once mostly associated with schools, colleges and universities. But the cat’s out of the bag now and the style is being used by car companies, fast food chains, delivery companies and more.
Margin
Margins in design refer to the spacing between the immediate border of an element and the edges of a page or document. It helps build breathing room between elements of a design and also for when your design is incorporated onto a different design/placement. For example, if you design a logo that is then used for print, a website header and so on.
Mock-up
It can be difficult to visualise something with just descriptions. To fully visualise a design idea, it can be created into a mock-up of the intended product to help both designer and client better envision the end results of a design.
Placeholder
Look, it’s Lorem Ipsum! Yes, placeholder usually refers to that well-known Lorem text. It’s used in place of the body, title, headings, and subheading text when a design brief has not yet had content supplied.
Resolution
Resolution is how sharp a graphic or image is. It’s important that graphics have a high resolution where possible so they appear more refined and less pixelated. Resolution on digital assets is measured using PPI (pixels per inch) and print assets are measured using DPI (dots per inch). Essentially, the higher the PPI/DPI, the higher quality of the image.
Rule of Thirds
Both a concept for design and photography, the Rule of Thirds isn’t some type of supreme overruling law, but rather a technique used to create balance within a design or photograph. The technique uses a 3 x 3 grid which helps align a subject to the lines and points on the grid.
Saturation
Saturation is the intensity and vibrancy of the colours in a design. An increase in saturation creates brighter colours whereas naturally, a decrease in saturation creates duller colours. Saturation can be used to enhance and create vibrancy on just one aspect of a design or of the whole design itself.
Scale
Going up? Scale is used to create a distinction between 2 or more elements of a design. Using size and scale within a design helps to differentiate one element from another and can be used to establish importance and priority.
Space
Spacing between words and letters in a design can be used to tidy up type and help create readability.
Kerning
Kerning is the adjustment of space between just two characters within the body or title text.
Tracking
Tracking is similar to kerning but refers to the space between all of the characters within a body of text or title.
Leading
Leading is similar to line height, as it refers to the space between two separate lines of text.
Style Guide
A style guide is documentation of standards created that is given to third parties or employees, allowing them to correctly use a company’s brand style without misusing it. It sets out the rules and guidelines for how to use a logo, type, colours, and tone of voice and provides a general model to follow to maintain consistency across platforms.
Typefaces
Typefaces are fonts that are categorised into a ‘family’ of styles. A typeface is different to a font. A font is the specific choice of weight or style font that is within a typeface.
Serif
The Serif typeface has more curves compared to its counters and features small decorative elements at the end of some of the letters known as ‘feet’. This typeface is more ‘classical’ and ‘professional’ and is usually more favoured for prints such as books.
Sans Serif
The Sans Serif typeface does not contain curves or feet or decorative elements compared to its Serif counterpart. This typeface is more ‘modern’ and ‘conventional’ and tends to be easier to read on digital applications.
Slab Serif
The Slab Serif typeface returns us back to the Serif and once again, uses ‘feet’ as an accent on some of the letters. Slab Serif is bolder and more ‘blocky’ and ‘bold’ than Serif.
Script
The Script typeface is more parallel to handwritten text that incorporates more movement, curls, loops and twists. This typeface is more ‘romantic’ and ‘stylish’ but can be difficult to read in smaller applications such as body text.
Good to go? There are undoubtedly a lot of terms thrown about in the graphic design industry but we hope that now you’ve learned some of them, you’ll feel a little more confident about all that jargon designers throw around (and perhaps volley some back at them).
And don’t worry, if you can’t remember a term, this article will still be here for you when you need it.
Ready to start your Graphic Design project now you know some of the lingo? Or maybe you want to get involved with the industry to show off the terms you’ve learnt! Either way, you can get in touch with the studio to enquire further.
