Design is undoubtedly a specialization with its own language and terminology, which can seem bewildering to the rest of us. Don't feel discouraged, though. We study design for living — so much so that we compiled a list of 45 design blogs for inspiration — yet we still have endless learning to do.
Now, you don’t need to become fluent in design-ese. But if you’re working with an in-house or external design team even just knowing a few key design terms can make all the difference.
Whether you’re commissioning some urgent work, discussing ideas or providing feedback on drafts, being familiar with the key concepts will help to make sure you get the design results you envisioned.
To get you started, here are some of the most common design terms, and what they mean.
What your presentation or webpage says is obviously crucial. But how that text is presented is equally important. The size, look and position of type can make or break a design. These terms will help you understand how best to display your words in any design.
Copy – The text provided for use in a design or on a website.
Kerning – The adjustment of the space between two individual characters in a piece of text, to make the spaces between different characters look more proportional or balanced.
Not to be confused with tracking, which involves the adjustment of the space between all the characters in a piece of text.
Leading (pronounced ‘ledding’) – The space between two lines of text. Sometimes also called ‘line height’ or ‘line spacing’.
OpenType Font (OTF) – A font format created by Microsoft and Adobe. OpenType fonts are cross-platform, and so are recognized by PCs, Macs and printers, and will look the same on each. Compared with TrueType Font, OTF can store far more characters, allowing the inclusion of characters, like glyphs or ligatures (e.g. œ or Æ).
Orphans, widows and bad breaks – Words or short lines at the beginning or end of a paragraph that are separated from the rest of the paragraph by a new page or column starting. This can give a piece of text an unbalanced look. Bad breaks is a generic term used to describe widows or orphans in a piece of text.
According to the Chicago Manual of Style:
Orphan can also refer to a word or part of a word that appears on its own line at the end of a paragraph.
In practice, however, the terms widow and orphan are often used largely interchangeably.
Serifs – The small curves, lines and ‘feet’ added to the ends of strokes on some letters.
Sans-serif font – A font (or typeface) in which the characters don’t have serifs (Arial, Futura, Verdana, etc.).
Serif font – A font (or typeface) in which the characters have serifs (like Garamond, Georgia and Times).
Serif vs. sans-serif – which to use? – There are no fixed rules on whether to use a serif or sans-serif font. Serif fonts are sometimes said to look more traditional, and be well-suited to printed formats, while sans-serifs are cleaner and more modern. Slab serifs are more commonly used in headings than in body copy.
This page uses sans-serif fonts for both headings (Futura Regular) and body text (Nunito Sans Regular).
Some people believe that serif fonts are more legible, but the evidence on this, particularly on screen, is in fact inconclusive. Legibility will have as much to do with things like kerning, leading and tracking.
Slab serif font – A font (or typeface) in which the characters have strong, block-like serifs (e.g. Figaro, Rockwell, and Sentinel).
Script font– A font that has a flowing stroke and mimics cursive handwriting. Examples include Lucida Handwriting, Monotype Corsiva and the infamous Comic Sans.
Tracking – The space between characters in a block of text. Unlike kerning (which focuses on the space between individual letter pairs), tracking relates to all the characters in the selected text, and is used to make it look more or less dense.
TrueType Font (TTF) – An open font format designed to ensure fonts look the same on Mac, PC or in print and can be enlarged or shrunk to almost any size.
Typeface vs. font –These terms are sometimes used interchangeably, but there is a difference. The typeface is typically the ‘family’, which can contain several fonts, of different styles (e.g. Roman, condensed or italic) and sizes.
So ‘Times’ and ‘Arial’ are typefaces; ‘Times New Roman’ and Arial Narrow’ are fonts within those typefaces.
How graphic elements relate to one another – how big they are, how they’re spaced, how they’re aligned – is a central part of design. We can all tell if a design isn’t quite laid out right, even if we can’t quite put our finger on why. The terms below will help you work out what it is that’s wrong.
Alignment – How text or images are arranged or lined up on a page (e.g. left, right, center, etc.)
Asymmetry – When text or graphics are arranged unequally on either side of a central line. An asymmetrical design can still be balanced – for example by balancing a single, dominant element on one side of the central line with several lesser elements on the other side.
Balance – The design or placement of images, text or other design elements so as to be evenly distributed (and thus more appealing to the eye). Balance can be achieved either through symmetry, asymmetry or radial balance.
Bleed – Where a design extends beyond the page’s printed edge. This helps eliminate the risk of a white border when the document is cut to size after printing.
Contrast – Where two elements on a page are markedly different from one another, typically to make a design or element stand out.
Contrast is often used in relation to colors (e.g. a black background and white text, or light vs. dark). However, it can equally apply to shapes (e.g. combining rounded and sharp-edged shapes) or sizes (e.g. large items positioned alongside small).
Grid – A series of intersecting vertical, horizontal, angular and/or curved lines used to organize and arrange graphic elements on a page.
Gutter – Typically, the gap between two columns of text.
In book production, gutter also describes the white space between the inside edge of the printed text and the book’s spine.
Hierarchy – The arrangement of design elements (typically text) so as to indicate their relative importance, and guide the user’s eye.
A typical typographic hierarchy might include headings, subheadings and body copy in different sizes, colors or weights of type.
Negative space (a.k.a. white space) – Parts of a design (such as a web page) without any text or images.
Remember, white space doesn’t have to be white – a background color without text or images is white space too!
Padding – In graphic design, the negative space (or ‘breathing room’) all the way around an object.
In web design and coding, padding is used more specifically to refer to the space between the inside edge of a border and the actual image. This contrasts with the margin, which is the space between the outside edge of a border and the next element.
Proximity – The closeness / distance between different design elements.
Radial balance – A radial design is one in which the design elements move outwards from a central point, as a way to achieve balance in a design, webpage or piece of text.
Repetition and consistency – The use of the same or similar design elements in order to create a unified ‘look and feel’ to a design or series of designs.
Symmetry – When text, graphics and other design elements are designed or arranged so as to be the same on both sides of a central line. Symmetry is one way to achieve balance in a design, webpage or piece of text.
Trim – Trim size is the final size of a printed design after it has been cut to size. Trim marks are the lines just outside the corners of a design to show where a cut should be made.
We’ve all seen suffixes like .jpg or .png at the end of image files. Terms like GIF have now been given ‘everyday’ meanings of their own. But what, in practice, is the difference between them? Why would a designer choose one over another? Here’s what you need to know.
Pixels – The small squares that make up a digital raster image. The word “pixel” is an abbreviation of “picture element”. See also Resolution, PPI.
Raster images – Raster images are made up of a preset grid of pixels, meaning that, if the image is enlarged, it can appear ‘blocky’ or blurred (this contrasts with vectors).
Because each pixel has an assigned color code, raster images are good if, for example, the colors in a photo need to be corrected or modified.
Raster file formats include JPG, GIF, PNG, TIFF and RAW.
Resolution – The quality and detail of an image based on the number of Dots per Inch (DPI) for printed images or Pixels Per Inch (PPI) for digital images contained within the image.
The more DPI/PPI, the higher the resolution, and the better quality the image. The lower an image’s resolution, the more blurred or blocky that image will look when enlarged.
Vector image – Vector images are made up of small graphics (points, lines, polygons and curves) generated using a mathematical equation.
This can be contrasted with the fixed pixel grid of a raster image, and means that, unlike raster images, vector images won’t become blurred when enlarged
Vector graphics are typically used for logos, illustrations and icons, and are particularly suited to images that will be used across different-sized formats.
Vector file formats include PDF, EPS and AI.
File formats: Whether you’re talking about photos, graphic designs, documents – or indeed some combination of them all – there are many different formats in which they can be saved. Each has its own specific characteristics, which may make them more or less suitable for specific uses.
When it comes to graphic design, some of those most commonly used include:
Color can create powerful visual impact or effects, and even trigger a deep emotional response. It’s why companies invest so much in their brand colors or we spend so much time deciding what to wear. Color is often the thing designers and clients end up discussing most. And it’s why the core principles and terms around color are well worth understanding.
Analogous – Analogous color schemes are those made up of colors adjacent to one another on the color wheel. The use of such similar, well-matched colors results in designs that feel serene and harmonious.
CMYK – A four-color model used for print. CMYK creates colors by adding colors (Cyan, Magenta, Yellow and the Key Color (Black)) together. As a result, when looked at on-screen, CMYK colors will tend to look darker and less vibrant than RGB colors.
Color theory – The series of rules, concepts and definitions relating to the use of color in design, including the mixing of colors and the visual effects specific color combinations create. Much of color theory is based on the color wheel.
Color Wheel, The – A circle with differently-colored sectors that is used to show the relationship between colors.
The color wheel shows three categories of color: primary colors (red, blue and yellow), secondary colors (made by mixing two primary colors), and tertiary colors (sometimes called intermediate colors, and made by mixing a primary and a secondary color).
Complementary – A complementary color scheme comprised of colors directly opposite one another on the color wheel.
Cool colors – Colors on one side of the color wheel, such as blues, greens and violets. Cool colors stimulate feelings of cold, and are therefore often used to create a calm, reassuring and soothing atmosphere.
Duotone – A method of printing images in just two colors, one of which is typically black.
Gradient – A gradual change of color, either from one color to another, or from a color to transparency.
The most common forms of gradient are linear (where the color changes between one point (or one end of a shape) and another) and radial (where the color changes outwards in all directions from a fixed point).
Grayscale – A monochrome color palette made up only of black, white and various (up to 256) shades of gray.
Hex – A system of classifying colors by allocating each a six-digit number. Hex is short for hexadecimal.
Hue – A ‘variety’ of color, hues are the terms we use when describing the color of an object. Red, blue, green and yellow are all hues. When blacks, grays and whites are added to hues, you get shades, tones and tints.
Monochrome – A color scheme made up of only one color and darker and lighter shades of that color (for example, grayscale).
Opacity – Opacity (typically measured as a percentage) indicates how transparent an image or design element is. 0% opacity is totally transparent (in effect invisible). 100% opacity means the image is completely solid (opaque).
Palette – The set of colors used to make up an image or other design elements. The colors in a palette will typically be chosen because they work well together. Using the same color palette across different design elements can help create a consistent, harmonious ‘look and feel’.
Pantone (PMS) – A color system (Pantone Matching System) which assigns a number to each hue. Pantone includes colors that can’t be mixed in CMYK. Some brands have trademarked particular Pantones, including Tiffany Blue (PANTONE 1837). Read more about brands and their color choices.
RGB – A three-color model used for displaying colors on-screen. RGB creates colors by adding together red, green and blue light in varying proportions.
Saturation – The intensity of a color. The higher the saturation, the brighter or more vivid a color looks, and the more it will stand out. Lower saturation images or hues are often used for backgrounds.
Shade – A color (hue) with black added.
Tint – A color (hue) with white added.
Tone – A color (hue) with gray added.
Warm colors – Colors on one side of the color wheel, such as reds, oranges and yellows. Warm colors stimulate feelings of heat and warmth, and are therefore often used to create a happy, energized or friendly atmosphere.
Each logo may be different, but that doesn’t mean that there aren’t features or similarities that link them. Understanding this can help you to decide which logo works for your brand, and the messages you want your brand to convey.
Brand Identity – The (visual) aspects of a brand that represent the values and ethos of a business, and how it wants to present itself to customers. A name, logo, stationery, packaging design, brand colors, website ‘look and feel’ and ‘tone of written voice’ can all be part of the overall brand identity of a business.
Logotype – A brand or product name styled as a logo. Examples include companies like Coca-Cola, Google, IKEA or Visa. Also known as a wordmark.
Favicon – The small logo that appears on a webpage tab in a browser toolbar (along with the title of the webpage).
Lettermark – A logo comprised of the initials of a business or product – examples include General Electric’s “GE” logo and Volkswagen’s “VW” logo.
Not to be confused with a logotype/wordmark, in which the full brand or product name is styled as a logo.
Logomark – A logo comprised of a unique symbol or graphical shape (or shapes). Also known as a brandmark. Examples include the Nike ‘swoosh’, the Android Robot or the Twitter bird.
Style guide – A set of standards for the writing, formatting and design of documents and other content. Many businesses will have their style guide, while others may adopt one of the commonly-used ‘standard’ guides, such as the AP Stylebook.
Website design has its own unique lexicon. Many terms will be second nature to anyone who has used the internet. Others have been absorbed into everyday language. But even then, it can pay to check your understanding – the everyday meaning of a term can be rather different from its original design definition.
Landing Page – The page of a website to which search results or digital ads link when clicked. A website may have a single landing page (the homepage), or – more typically – several.
Metadata – In short, ‘data about data.’ Metadata provides information about the content of an item (such as a document or image).
For images, common metadata may include the image’s size, its creation date, its color depth, its resolution and accessibility information.
For a text document, the metadata may show, for example the document’s author, its title and its word or page count.
Pins – Images from across the internet that are saved (pinned) in an online board (on a site such as Pinterest) or portfolio to act as design inspiration. Sometimes known as pegs.
SEO (Search Engine Optimization) – Designing a website or page (typically the copy within it) so as to enhance the site’s ranking in a search engine’s ‘natural’ (unpaid) results, and therefore drive more traffic to that website/page. SEO focuses on visibility within unpaid search results: it does not include strategies to win or target paid-for advertising space.
As the name suggests, user experience (UX) design is all about your user’s (or, say, audience’s) experience of a product or design. But beneath that, there is a range of different factors, considerations and terms at play. Here’s a few you should know.
Customer experience (CX) – The journey the customer goes on when interacting with a brand, viewed from the perspective of that customer.
The full customer experience will include interactions at different times (from initial discovery and research, through to purchase and after-sales support), on different channels and with different products.
Quality, user-centered design can help to enhance the customer experience and increase a business’ acquisition and retention of customers.
Metrics for measuring CX may include, for example, the customer’s overall experience, their likelihood of continued use, and the likelihood of them recommending the brand to others.
Design debt – When important design concepts, stages or solutions are skipped in order to hit delivery deadlines or achieve short term goals.
This deficit, or design debt, ultimately has to be ‘paid back’, meaning additional work and cost further down the line to avoid a negative impact on the brand’s sales or reputation.
Design validation – Testing carried out to ensure that a finalized interface, product, or other output corresponds with the original design and fulfills the user needs and requirements.
Microcopy – Short sentences or words on a website or app interface used to provide information, assistance or cues to users in using the site/app.
This might include, for example, a pop-up error message, the label on a call to action button, a roll-over explainer to assist in filling in certain form fields, or a link through to further information (e.g. ‘Forgot password?’ or ‘Why is this information needed?’).
User-centered design – An approach to design in which users and their needs are the key focus for the designer at each phase of the design process. The objective of user-centered design is to create accessible, ‘user-friendly’ designs that enhance the user experience.
Given this user-focus, users are often involved (e.g. through surveys or user-testing) throughout the design process.
User experience (UX) – A customer’s emotions and attitudes as a result of using a business’ product or service (including an app or a website).
Typical metrics for measuring UX include success or error rates, abandonment rates, and the time (or clicks) taken to complete a task.
UX is one part of the overall customer experience.
User interface (UI) – The means by which a user interacts with a computer. In digital, web or UX design, UI typically means the Graphical User Interface (GUI) – that is, the combination of graphical elements (text, links, buttons, etc.) a user uses to navigate and control a system such as an app or webpage.
A well-designed UI will be intuitive, enjoyable to use and enable the user to do what they want to do as quickly and effortlessly as possible.
Wireframe – In website design, a visual guide that shows only the skeletal framework of the site: for example, the layout of the site’s content and how the various elements on the page (interface elements, navigational systems, etc) work together.
Typically, a website wireframe won’t include the typographic style, color, or graphics. The focus is on the site’s functionality, not its ‘look’.
In three-dimensional design, a wireframe is the skeletal outline of a designed product, showing only the vertices and edges of the product (i.e., as if the product was made of wire).
Is a term you’ve heard not on our list? Let us know @supersideHQ. We’ll send you a definition and add frequently-raised terms to the glossary.
Now is the time for leaders to step up and provide clarity, unity and empathy to their teams. Check out the top remote work tips and advice from WFH pros.
If you’ve been looking for inspiration on ways to bump up those website conversions, then you’re in the right place. In this blog you’ll find nine homepage design examples, made to convert.
DesignOps professionals are being hired by companies like Slack, Pinterest and Visa. See what design operations influencers made our list in this roundup.
Superside is an always-on design company that makes design frictionless and hassle-free for marketing, sales, creative and product design teams. This means top quality designs at lightning fast speeds, improved velocity and go-to-market and completely secure and confidential file sharing and collaboration.
In this one-on-one live demo, you’ll see:
- How Superside works
- A first look at the Superside platform
- The most suitable subscription plan for you
Get ready to join 140+ scale-ups and enterprise teams doing good design at scale with Superside’s dedicated team model.