A Client’s Guide to Design Terminology

As designers, we often use professional terminology, which can sometimes seem overwhelming for a client or someone from the other branch in the same agency. This blog post should help you with the most commonly used terms, and generally get you more acquainted with design.

Colour terminology

RGB is a colour system we use in electronic devices that use light emission to form colours. The name is an abbreviation of three primary colours: red, green, and blue. By combining those, you will get white colour.

HEX is a hexadecimal way of writing the red, green, and blue values in a particular colour. Each hex uses six different characters by combining letters from A-F and numbers from 0-9

CMYK is a colour system we use in print. Unlike RGB, it uses the absorption of light, and it stands for cyan, magenta, yellow, and key, which is black and is used in print to add pure black.

The gradient is a smooth transition between two or more colours.

Opacity is a measure of lacking transparency on specific design elements.

Hue is a pure colour which can refer to the dominant colour family. Those correspond to different parts of the visible colour spectre. That’s the reason why we don’t consider black and white to be hues.

Shade is a mixture of a particular colour with black, increasing the colour’s darkness.

A tint is a mixture of a particular colour with white, which increases a colour’s lightness.

Saturation is the intensity of the colour or, in other words, the amount of difference between the specific’s colour and neutral grey. For example, pure colour is 100% saturated, while the saturation of colour grey is exactly 0%.

Design Principles Terminology

Contrast is the difference between two different design elements. The most common term used is the degree of colour difference, but contrast is a much broader term, and it can signify the difference in size, shape, texture, etc.

Hierarchy is an arrangement of visual elements to make a structure by utilizing scale, proximity, colours, etc. An excellent example of visual hierarchy is organizing text into headings, body text, and captions.

Scale is the relative size of the design element to another or a frame. By manipulating scale, different effects can happen and make certain pieces feel more critical than others.

Balance is a distribution of different elements in the design. It makes the design more intuitive since people seek visual balance and are aesthetically pleasing.

Proximity in design defines the relationship between different elements. The closer the pieces are to each other, they seem more contextually connected, and vice versa. As such, we perceive them as members of the same group.

Alignment is an arrangement of elements in a certain way with each other or the frame. For example, in typography, alignment aligns the text to the left, right, centre, or justify.

Repetition refers to repeating a particular element more than once in the design, thus creating rhythm, cohesion, and familiarity.

Unity in design is wholeness achieved by the arrangement of elements and by respecting the design principles.

A grid is a design tool. It consists of intersecting vertical or horizontal lines which help us organize content and other visual elements.

Ratios etc.

Aspect ratio is the proportions between the width and height or other geometric shapes. They are usually written in x:y format, for example, 1:1 (square), 16:9 (typical screen size), and others.

White space is a design term for an empty area (of any colour) that surrounds the design elements. It is an active design element because it can make the design stand out if used correctly. However, putting too many elements at once and not using whitespace enough can lead to busy, overcrowded design.

The golden ratio can be explained with a simple formula (a+b)/a=a/b, which in plain terms means that the sum of the two numbers divided by the more significant number is equal to the larger number divided by the smaller number. We commonly use it in design and art and consider it divine proportions because it appears mainly in nature. In addition, designers use this number to make aesthetically pleasing designs.

Dummy text is a filler or placeholder text that we use for testing the final looks of the copy and its visual properties before getting the final copy. Lorem ipsum is the most commonly used filler text and the most famous one, but you can use any text.

Here I’ve tried to explain everything in short, but check this blog if you want to go for a deep dive.

Typography 

Serif is a decorative line on the end of a stroke on a letter. Fonts that use serifs are called serif fonts.

Sans is a french word for without, and it refers to fonts that don’t have serifs.

The script is a typeface based on handwriting. It is almost always used as a display type.

Slab or slab serif is a typeface whose serifs are flat and uniform blocks.

Monospace is a type of font that uses the same width for all the letters and characters. They were primarily used in typewriters and early computers for practical reasons.

Kerning is the adjustment of empty space between the individual characters in a typeface. Usually, it is done to achieve better aesthetics in a particular design.

Leading is the space between two adjacent lines of text.

Tracking or letter-spacing is similar to kerning, but it applies spacing on the range of characters instead of just the individual one.

The X-height is a height of lower-case letters in a particular typeface; it got its name after a letter x which is one of few letters that share this essential height.

Ascender is a part of a lower-case letter that extends above the x-height; some examples are letters h, d, b, etc.

Descender is a part of a lower-case letter that extends below the x-height, for example, y, q, j, etc.

More on fonts…

Orphan/Widow are two interchangeable terms to describe the single line of text separated from the paragraph by, for example, being put on a new page or in a recent column.

Font weight defines the thickness of a font. We usually represent it with a number from 100 to 900 where the 100 is thinnest and 900 is the thickest. Each weight usually has a light, regular, bold, etc.

Italic is a term that represents the correct slanted letters of a particular typeface.

Display type is a typeface designed in headings and larger sizes. This font can have more details and functions at smaller sizes and in larger passages. Its focus is readability.

Body type is a typeface we use in passages of text and generally smaller sizes. It has to be functional and all details simpler because it has to be legible.

Legibility is an informal measure of distinguishing one character from another. A lot of font properties influence legibility.

Readability is related to the arrangement of text, and it is a measure of how easily a reader can distinguish different words and sentences.

Why stop at reading the basic terminology? Find more about typography here.

Branding

A logotype is a graphic representation of a company or a brand based on the name or initials.

Logomark is similar to logotype, but it is only a graphic symbol or an icon that can be figurative or abstract. One such example is Apple.

A style guide is a set of principles we use in design that specify the rules of a particular design. We use it to shape the look and feel of the design and create consistency in visual language.

A brand is a set of marketing and design concepts used for shaping the perception of a product or a company.

Brand identity is a set of visible aspects of a brand, such as colour, logotypes, and other graphic elements.
User testing is validating design on real users to collect feedback and make changes to enhance the user experience.

Mockup is a preview of a final product that is cheap to make, and we use it to validate the design before the launch.

Still not tired of reading? Maybe the next station could be reading about the logotype redesign? 

Web Design Terminology

A wireframe is a skeleton preview of a design that focuses on information and features of the product. It can be low-fidelity or high-fidelity without using any colour or decorative elements.

A prototype is a design sample for testing and previewing the design or the wireframe before the launch of the final product.

MVP or minimum viable product is a digital product, most commonly app or a web app ready for launching or to use with only minimum features.

Interaction design is a design field focused on the interaction of a user with the product so that all of the user’s needs are satisfied in the best way possible.

UX or User experience is a design process that establishes the foundation of a design. Its goal is to define a user journey and shape a user’s experience when interacting with a design in the best possible way.

UI or User Interface comes after the UX, and it focuses on the visual aspect of the design.

Human-centred design is a design philosophy that focuses on the human as a user and shaping the design to fit human needs best.

Responsive design is creating a design that functions on all devices. This can be a smartphone, computer, or something else entirely as a watch or smart TV.

Inclusive design is a design process and philosophy to make the design usable to a wide range of people, such as people with disabilities, older people, etc.

Common Design Terminology

Raster graphics are pixel-based images and are resolution-dependent. This means they will get blurry when we resize them to a bigger size than the original. An example of raster graphics is photography.

Vector graphics are images we define as mathematical functions and flexible to work with. The biggest strength of vector graphics is that it is lossless and resolution-independent. Logotypes and web graphics, such as icons, come as vector graphics.

File formats in design are mainly pictures, and this is one of the things people commonly misunderstand. Images can be vector or raster graphics, and the formats depend on the type of graphic. Vector formats are .svg, .ai, .eps and sometimes a pdf can be considered as vector. Raster image formats are .png, .jpg, .tiff, .gif,

Resolution is the level of detail an image has. Low resolution means fewer details or quality, and vice versa. We measure them in DPI or PPI.

DPI or dots per inch is a measure of resolution used in print. It says how much ink will be used per square inch. Different devices support different DPI printing abilities, and each design should be optimized for the device it’s being used on.

PPI or pixels per inch is a measure of resolution on screens.