the a-z of digital design terms

The Digital Design Glossary

Matt Leyland 6 hours ago

digital design glossary

The glossary of digital design

What is...

Alignment - This refers to a set of objects, whether that be text or images and how they are positioned relative to each other. Alignment gives design an order in the form of some unwritten rules. It links objects together and creates a unity in design so not to feel random or scattered.

Artboard - An artboard is your working area. Much like in painting the artboard is your canvas. Designers often work to a set size or scale – for example if you were working on a website your artboard would be set to a size that is suitable for that purpose.

Bleed - This leads us nicely onto ‘Bleed’. The bleed area is the margin around the artboard. The bleed ensures that you don’t end up with a white edge around your design when it gets trimmed down. This is true of print design and digital design – it is best practice to utilise the bleed area to avoid any embarrassing trimming errors.

Colour - Colour is much more complex than it seems on the surface. You have CMYK (Cyan, Magenta, Yellow and Black) in print design. These are the inks that are combined to create the colours we see. In digital design we use RGB (Red, Green and Blue) colours. RGB refers to the light that is combined to create the depth of colours we see on a digital screen.

Dimensions - The specified size that you require a piece of design to appear. Display ads need to be designed at a specific dimension to fit where they need to go. Same goes for social advertising. They have a rigid set of dimensions that require the designer to know what dimension to design something for.

EPS - You might have seen an EPS file when you have requested a logo from your designer. EPS stands for ‘Encapsulated PostScript’ – it will contain vector graphics which can be scaled infinitely, which is why they work so well for logos.

File-format - Following on for the EPS files which is a vector image, you also have PDF and AI files that are also Vector image files. JPG, PNG and GIF are all image formats that are pixel based. You often see these for photos. A JPG/JPEG is a standard web graphic, PNGs support transparency and a GIF supports animation.

Gradient - A gradient is a blend of colour that merges from one to the next. Gradients are much more prominent in digital design as the depth of colour that RGB supports is much higher. You get much clearer blends. If you were to use a gradient for print design often the print would appear to be stepped this is because CMYK doesn’t support as many colours as RGB.

Grid - You might have heard your designer talk about the grid that a design is set to. This is the framework that a design is layed onto. Take this infographic for example – we have the two-columns that separate the blocks of text, and within those we have a border where the text sits. This is because it is designed on a grid that had been carefully thought out during the design process.

Hex - Web-colours are often display using their hexadecimal (HEX) code. You often find websites using HEX to determine the colours. We have covered RGB colours which is a set of three numbers that run from 0-255. HEX codes are a three pairs of values that specify the colour such as #000000 is the hex-code for black and #FFFFFF is the hex-code for white.

Isometric - Isometric design is a style of illustration where flat graphics are drawn from a 3D perspective. This is by no means true perspective which is a different style of illustration.

Justification - All your text will run from right to left – this is the most common form of justification and you come across right-justified text everyday in books, magazines and online. Another form is centre justified – this is more prominent on websites and often reserved for headlines.

Kerning - A typographic process that refers to the space between two-letters. Not to be confused with ‘Tracking’ which refers to the letter-spacing of an entire word – Kerning is a manual process of correcting the spacing between two-letters that don’t sit next to each in the most visually pleasing way.

Leading - Another typographic term that in its simplest form is the line-spacing. Leading is measured between the two baselines (the invisible line that text sits upon).

Legibility - This is a term that defines whether a typeface can be read – legibility is how you distinguish the letters and not the overall block of text. Not to be confused with readability that refers to how easy or difficult it is to read a block of text or how it is arranged on the page. Examples of bad legibility normally come in the form of handwritten or script which by proxy have a poorer legibility than serifs or sans serif fonts. That doesn’t mean that they are bad but it needs to be considered – can you identify the letters in the word?

Mock-up - A mock-up is a real world example of the design/product. For example if you were to design a mobile app interface, you could show how that might look on an iPhone or another smartphone device. There are also prototyping tools like InVision that give you the ability to put together page designs to show how they might link with one another. It is the process of giving an impression of what a final developed app or site might be.

Navigation - On a website the links at the top of a page are described as the Navigation bar – these are the top-level ‘navigation’ element to a website. You could have other links that branch off into different pages thus navigation around the website.

Orphans (and Widows) - When a designer refers to an ‘Orphan’ or ‘Widow’ don’t be confused these are some more typographic terms. A widow is a word that you might get at the bottom of a paragraph if a line-breaks and only one word is left over. An orphan, might be a word or short line of text that opens a column – both are commonly frowned upon, so if you spot one let your designer know to correct it.

Pixel - A pixel in digital is the smallest unit of measurement. In digital we don’t measure things with centimetres or millimetres like we would in print. A pixel is a minute square of light that makes up the display on your digital device.

Quality - Quality is important when we are talking about design. Often designers push back when they receive an image which is low-quality which usually means it is too small for its purpose. If you send an image that is 200px (pixel) x 200px then the quality is unlikely to be high enough to fit in a 1080px x 1080px space. Raster graphics can scale down but not up.

Resolution - something that we measure in pixels which we talked about earlier. It is the amount of pixels that we see on your display. The most common screen resolution is somewhere around 1366px x 768px but this is ever changing especially with the growth of mobile devices. Many mobile devices have very high-quality screens which display at 2x resolution which always needs to be considered when designing.

Sitemap - A sitemap is what it says on the tin – it is the map of your website. A sitemap will allow you to have an overview of all the pages that sit on your website. These can come in many different ways – some more visual than others. What a site map should show you is the top down structure of the site from the homepage and branching down – think of it as the family tree for your website.

Sketch - The sketch is no longer just in reference to the scamp on a scrap of paper. Sketch is also an app that your design team may be using to design websites/apps. It specialist software for designer digital experiences. Other apps that you might hear getting mentioned include; Adobe XD, InVision Studio, Figma or Framer X.

Tracking - We have covered tracking briefly when we talked about kerning. Tracking is the global letter-spacing of a word or block of text. You might need to increase the tracking if words are looking too tight to each other.

Typography - In design a typeface is a set of fonts that come from the same family (font families), within this family you will have a range of styles and options often defined by their weight or width. A Typeface with a large family might contain font-weights like light, regular, bold or heavy. Typefaces can be categorised into different categories such as Serifs, Sans Serifs, Slab Serif Script, Monospace and Handwritten.

UX (User Experience) – This is how someone uses a site or app. It is the blanket term for how someone good or bad someones experience is on a site? This is determined through actions – does the site interact as expected. The process of improving UX is by finding pain points on a website and correcting them through testing and making improvements.

Vector - A vector in design basically refers to an image that can be scaled without loss of quality. Vector images use mathematic formulas that allow them to be scaled. But in simple terms if you are requesting a logo it might be best to ask for the vector file and your designer will know what you are looking for.

Wireframe - We use wireframes to give a rough outline of how something will work before adding any stylistic details. You can create a wireframe for someone to test how a site might work to use before we add any imagery or colour. A wireframe is much quicker to put together as they generally lack any styling and often are without colour to not distract from the layout.

X-Height - This is quite an ambiguous one and something that you will unlikely ever come across. The X-height is the measurement between the baseline and the top of the average lower-case letter height (which is where it gets the name ‘x’ height as this is commonly the height of the x).

YIKES! - We can't think of any important design terms that begin with the letter Y (unless you want to count the colour ‘yellow’ - which seems like a cop out!)

ZIP - A ZIP file contains multiple files that are compressed to be shared. If you have requested a set of images from your designer these might be sent to you in a ZIP format. When unpacked you are able to access the files inside.

Stay in touch with the Zazzle Media family

Sign up for our monthly newsletter and follow us on social media for the latest news.

Our website uses cookies for various purposes and to enhance the site’s functionality. This helps us understand how you use and interact with the website.

Settings Accept Cookies