Graphic Design Terminology: A Go to Guide & Glossary

Written by Kevin Liew on 25 Mar 2020
156,614 Views • Web Design

The importance of high quality graphic design is easy to overlook, but when you really pay attention, you’ll realise it should be #1 in any marketers list of priorities.

No matter your level of knowledge in marketing, your interests, or your own artistic skill - when you browse a poster, an online ad, a social media page, or an infographic, the graphic design is the first thing you notice - every single time.

Being aware of graphic design techniques, and the effects they have on viewers, is crucial to every company. It doesn’t matter whether you’re marketing clients’ products, running a web design agency, or simply using a free website builder to begin your own journey - this awareness will help you to catch viewer’s attention, hold it, and drive them towards becoming leads or clients.

If you’ve grown up as a specialist in writing, data, or similar - you may well have been neglecting your design knowledge.

It’s time to catch up!

Let’s take a look:

Lorem Ipsum

Lorem Ipsum is something that will be all too familiar to anybody who’s ever worked in graphic design or web design, but for others it might quite literally appear to be an alien language.

Lorem Ipsum is simply a generic filler text based on Latin originally written by Cicero.

Example - imagine you need to design your own website, and to do so you need to know how the text on the homepage will look, even though you haven’t written it yet. In this instance you can simply fill the appropriate text boxes with Loren Ipsum text in order to play around with the rest of the page while being aware of how the text appears relative to everything else.


Typography is simply the art of arranging text in the most artistic and visually appealing way possible. Using the correct font comes under typography, but so does where you put that font. It is part of effective web design, document layout, branding and even simple tasks such as designing wedding invitations.

Typography allows your text to be appealing to the widest possible range of readers, and is a crucial part of communicating ideas. Good typography encourages users to read the text, as well as providing a positive, comfortable reading experience.


The term “margin” relates to the space (usually white) around the edge of a written page or online written content. It can be tempting to reduce the size of your margins in order to fill the page with as much information as possible, but this can have the opposite effect to what you’d hope, making the page seem overwhelming and too much effort to read.

Leaving generous margin space can make the page feel more “clean” and welcoming, encouraging more people to read your copy in the process. This provides a better user experience and means people are more likely to stay on the page longer.


It’s easy to think of the “scale” of an image or some text as simply the “size”, but there is an important differentiation.

To “scale” an image is to change its size while keeping its shape and relative proportions the same. This is crucial for graphic design as without maintaining scale it’s easy to stretch text or an image, leading to some pretty ugly results.

Brand mark

A brand mark is typically a symbol that is used to represent a company or organisation. Similar to a logo but without any text or a company name, a brand mark should be unique enough to be immediately obvious what it represents.

An example is Apple’s logo or the Nike tick. 

Brand marks are incredibly powerful if you can get your target market to associate your company with them - but doing so in the first place can be challenging.

A very effective way to get your brand mark out there is by turning it into a sticker. Apple is again a great example of this, with their very recognisable stickers of their brand mark that can be seen everywhere. Sticker It custom die-cut stickers are ideal for creating a simple but impactful sticker of your brand mark that will help you to build recognition.

Stock Photo

Stock photos are royalty-free images that are available online for use. Some are completely free of charge to all users, others may require a licensing fee before they can be used.

They are a great option for smaller companies and organisations who cannot afford their own photography but require high quality images regardless and can be used not only for web sites, but also any king of digital or printed materials.


Contrast is a huge part of effective graphic design, as well as being an important factor in photography and art.

The word simply refers to the extent of the variation between two juxtaposed elements. The most commonly used form of contrast in photography is dark vs light, for example in the case of a bright photo with some shadows.

However, other juxtapositions can be just as effective as forms of contrast, such as rough vs smooth, small vs large, etc.


All digital imagery and graphics are made up of pixels. Since pixels are the tiny coloured dots that make up digital images on screens, the amount of pixels used directly affects the detail that can be in these images. 

An image with more pixels can show more detail and appear more realistic, while an image with less pixels appears blurry and muddied.

The simplest way to understand this is to think of TV technology - the development from old fashioned CRT screens, to high resolution HD TVs, to even higher resolution 4K screens, is simply a reflection of improved resolution over time.

It can be a little more complicated with some graphic design tasks - with different images and tasks being more effective in different resolutions. However, in general the higher the resolution, the better quality the image - and the more memory it will required to be stored without a loss of this detail.


Opacity is simply used to explain how transparent an element of an image is in comparison to other elements. For example, if you add some text to an image, but you make the text more transparent in order to allow the details of the image behind to still be invisible, you have increased the text’s opacity.


Most people who used WordArt back in the day will be aware of this!

Gradient is used to describe when an image gradually changes in color towards the other end of the image, towards the center, or towards any other focal point decided by the designer.

Color Theory

Color theory refers to the understanding of how different colors can affect people’s moods and outlooks. It is the reason warning signs are red, for example.

Colors tend to encourage certain feelings or behaviours in people.

For example, green gives off a natural, environmentally friendly vibe, as well as freshness in the case of food.

Light blue represents security and integrity, and is often used by tech companies.

Pink represents love, sexuality and femininity.

Red reflects excitement, emergency, aggression and passion.

By studying color theory and choosing colors accordingly, you can implant certain thoughts and moods into your viewer’s minds before they even read a single word.


Pantone is a standardized color system that provides a unique code for each commonly used shade of each color. The idea is to prevent any communication issues or misrepresented colors, especially when graphic design projects take place online or over long distance.

For example, if you’re telling a printer to produce copies of your work, giving them the pantone code for each color used in your design piece will ensure that the physical copies that result are the exact same shade as what you’ve used, as opposed to the printers best attempt at matching.


RGB is often used to represent on-screen colors, giving a code that represents the exact quantity of red, green or blue present. 

This allows you to easily carry exact shades of colors between software packages or between screens without having to match them by eye.


Taking its name from a painter’s palette, a palette in digital graphic design simply relates to the selection of colors you use in a specific project.

For example, if the first page of your brochure is mostly made up of certain shades of white and grey, but then the second page contains white, grey and blue, it’s best that you use the exact same white and grey shade, instead of choosing an appropriate one each time.

This gives a uniform feel to both the project and the brand as a whole, while ensuring a professional look at the same time.


Alignment allows you to justify text left, central, or right, or even to introduce additional spaces (tracking) to allow words to fill the line more completely.

This helps you to ensure it is as readable and as effective as possible no matter the situation or use case.


Composition is used to refer to how you have arranged the differing elements to create an end result or complete design. If you have composed your design well, each element should work together to an end goal, both attracting the viewer’s attention and guiding it towards a specific idea or goal.

Composition makes use of many techniques already described here, such as typology, contrast, margin space, alignment and more.


DPI stands for “dots per inch” and is very similar to resolution. However, DPI refers to dots of ink and is most often used to refer to printing quality, as opposed to on screen resolution.

300dpi is generally recommended for high quality printing.


An image “bleeds” when it runs off of the page. This strategy is often used to avoid white lines around the edge of an image, for example when trimming down images further after printing.

Bleed can also be used for other reasons, such as to create specific effects or to remove part of elements that aren’t necessary.


Cropping an image is simply the act of cutting away unnecessary parts, in order to reduce the size, improve the framing, or change the shape or aspect ratio of the image.

Font Types

While there are countless hundreds of thousands of fonts in existence, the vast majority fall into four main categories, and understanding these font types can help massively when it comes to choosing the appropriate font for your project:


Serif fonts are characterised by their small flicks and hooks at the end of the main strokes in each letter. This hook is called a “erif”, hence the name.

Sans Serif

“Sans serif” means “without serif” and simply refers to a simple lined font without the aforementioned hooks. Sans serif fonts tend to be much more legible, but serif fonts can appear more classy and refined.


Script fonts mimic handwriting, and tend to be cursive/flowing. They rarely have serifs, however they are not typically considered to be “sans serif” fonts as they do not typically represent block printed letters at all.

Slab Serif

The least common font type, Slab Serif fonts have large, blocky serifs. Think “Old West” style fonts.


UI refers to user interface, and UX refers to user experience. While they mean slightly different things, both are a crucial part of the design of websites and software, and both are heavily design influenced tasks.

UI = the layout of buttons, data, and forms on the screen in order to maximise usability.

UX = the overall experience the user goes through using the website or system.

We hope this list of graphic design terms has increased your knowledge. For beginners, the amount of unique terms involved in graphic design can be extremely intimidating.

However, for those who take the time to learn these terms and what they mean, it quickly becomes a more manageable and enjoyable task.

Final Thoughts

It is not necessarily necessary to read all the latest graphic design books, but having at least a basic understanding of graphic design concepts and terminology is essential for anyone involved with web design. This awareness will allow you to create website that are more aesthetically pleasing and therefore more comfortable and inviting for users. This will provide a better user experience, meaning visitors are more likely to stay on ryour site longer, and therefore improving your sales strategy. 

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.