22 Web Design Terms You Need to Know
Dionne Morrish • December 7, 2021

Do you ever find yourself sitting in a meeting scratching your head wondering what on the earth your web designer is talking about? Do you ask yourself  "what language are they speaking?". Don’t worry, it happens to a good amount of us.

Whether you are a marketer, designer, or someone completely new to this side of the tech world, it is important to at least have a basic understanding of what they mean. You might ask, "why should I have a basic understanding?". Well, it is important so that you don’t sit in a meeting with a blank stare on your face having no idea what is being discussed/decided. Yes, you can certainly still ask for a little more clarification if you have questions, but it is always good to have a base understanding. Below are 22 web design terms that will help you better understand what is going on during your website process.

1) Alignment

This is the positioning of the elements in your design (e.g. text, images, etc.). These elements can be aligned to both the page and to each other. So for an example of alignment, this paragraph of text is aligned to the left margin of the page.

2) CMYK Colour Model

The CMYK acronym stands for Cyan, Magenta, Yellow, and Key: which are the colours used in the print design. A printing press uses dots of ink to make up the image from these four colours. ‘Key’ actually means black - it’s called Key because it’s the main colour used to determine the outcome of the image. Black ink provides depth and shading, whereas the other colours create different colours on the spectrum depending on how they are mixed.

3) Compression

Reducing a file size by eliminating excess data. This is particularly helpful when emailing or saving large image files. See more on lossy and lossless compression.

4) Dots per Inch (DPI)

Similar to the pixels, dots are the smallest unit of measurement of digital images. The number of DPIs refer to the resolution of a printed digital object - the higher the DPI, the higher the resolution.

5) Feathering

This is a technique commonly used in the web design world to smooth or blur the edges of a feature. The term is originally from a technique of fine retouching using fine feathers.

6) GIF

An image file format that's best used for small image files with few colours and designs, or animated images.

7) Gradient

A design technique in which one colour or section of an image appears to fade into another.

8) HEX Code

A code used in HTML and CSS to designate a specific colour, often appearing after the hashtag sign (#).

9) HTML

This is the computer language used to display content like text, images, and links on the world wide web.

10) JPEG

An image file type that uses lossy or lossless compression, with little perception in a loss of quality. This type of file is best used for photographs and realistic paintings where there are smooth transitions between colours.

11) Lossy

A form of data compression where detail is deleted as the file size is decreased. A usual lossy compression method is JPEG.

12) Lossless

As opposed to lossy compression (definition above), this format allows the image's detail to be restored.

13) Negative Space

The empty space surrounding a design/feature, whether it a webpage or a single image.

14) Pantone

A colour-matching system developed by the Pantone company. Largely used in print design, and used to match printed colours to those that appear on the screen during the digital phase of the design process.

15) Pixel

The smallest element of an image on a computer.

16) PNG

An image file format that's best used when the image has large areas of uniform colour, or a transparent background (unlike a JPEG file).

17) Resolution

A way of measuring the sharpness and level of detail in an image. A higher resolution usually indicates a larger file size, representing the amount of data (like pixels or dots) within the image.

18) Typeface

A design collection of characters (including letters, numbers, and punctuations). Popular examples of typefaces you've probably heard of are: Times New Roman, Helvetica, and Arial.

19) Vector Image

Instead of using pixels to represent images, vectors use lines and shapes. Because they do not rely on pixels, enlarged vector images still maintain image clarity and quality.

20) Visual Hierarchy

A design principle that visually orders and emphasises different parts of your content’s message by using colours, sizes, and layouts.

21) Watermark

A visual marker placed over the top of photos on the web and in print. It is used to identify the owner of an image and prevent visual content being copied or stolen.

22) ZIP file

A file format that compresses several files and combines them into a single folder. These compressed files do not lose any data to become smaller, and are easily restored by unzipping the ZIP file.

By Evangeline Walker May 29, 2024
Enjoy the power of site theme for buttons - easily set and change the style of your site’s theme primary and secondary buttons to keep design consistent across your site, and to cut your overall design time.
By Evangeline Walker May 28, 2024
Christmas came early this year for native eComm sites: we’ve just released a brand new native store template for a shoes & bags brand that isn’t just gorgeous. It includes a built-in surprise capability: custom fields.
By Evangeline Walker May 28, 2024
Following a major UX improvement, we’re happy to release a powerful image editor that’s packed with capabilities and fine tuning options so you can edit each of your site photos to perfection. The new image editor includes numerous options and actions that weren’t available before. Now you can do a lot more than mere cropping: use various adjustments, apply filters, add text on image and a lot more.
Show More
Share by: