English word for design

Designers have a vocabulary all their own. If you’re getting design work done, knowing the right terminology will help you communicate with one another and get the results you envision. (We promise it’s a whole lot easier than high school French.)

Take a look at these design terms. Study them. Commit them to memory. Eh… That’s too much work. Just bookmark this page and use it as your design word cheat sheet. Here are the most important descriptive design words you should know:

• Design: composition, balance, proximity, alignment, repetition, contrast, white space, hierarchy
• Photography & artwork: resolution, DPI, PPI, bleed, trim, pixels, crop, stock photo
• Typography: serif, sans serif, script, ascender, baseline, descender, kerning, leading, tracking, weight
• Color: hue, tint, tone, shade, saturation, monochromatic, analogous, complementary, triadic, opacity, CMYK, RGB
• Website elements: header, navigation bar, breadcrumb trail, landing page, HTML, user interface, wireframe
• File formats: AI, EPS, PDF, GIF, JPEG, PNG, PSD, TIFF
• Logo types: abstract mark, emblem, lettermark, pictorial mark, mascot, wordmark

Design
—

Composition and layout

Composition is the arrangement of design elements that form a whole image. A successful composition attracts the viewer and guides their eye across the design. In visual art, you might hear this referred to as “form.” In graphic design, it’s often called layout. Composition is made up of a number of different visual design elements, including balance, proximity, alignment, repetition, contrast and white space.

Balance

This isn’t your ability to walk a straight line after three beers. In design, balance involves the placement of elements on the page so that the text and graphic elements are evenly distributed. There are three ways to achieve balance: symmetrically, asymmetrically and radially.

Symmetrical

Symmetry is achieved when all design elements are equal on both sides of a central line

Asymmetrical

When graphics and text are not equal on both sides of a central line, a design is said to be asymmetrical. In the example above, there is still balance, but there are graphics on one side and text on the other

Radial

A radial design is one in which elements radiate from a central point, creating balance.

Proximity

The way in which design elements are grouped or spaced on a page is called proximity. Great design groups like elements together.

Alignment

Alignment is the position of text or graphics, whether left, right, centered or full justified.

Repetition

To maintain a unified look, designers repeat elements throughout a design. (Repetition is also defined as the number of times your toddler asks for a cookie.)

Contrast

Contrast is achieved by including elements within the design that look measurably different from one another. A designer may use color, shape, texture, size or typeface to create contrast.

White space

White space—sometimes called negative space—is the part of the design that is unmarked by imagery or text. It’s also what Midwesterners call their depressing, winter landscape.

Rule of thirds

The rule of thirds is a technique that designers use to determine focal point. Using a grid of three rows and columns, focal points are indicated where the lines converge. Designers use this as a guide to determine where to place important elements in their design.

Grid

A grid is a series of intersecting vertical, horizontal, angular or curved lines used to organize graphic elements on a page, as well as in relation to one another.

Hierarchy

In design, hierarchy is the organization of elements by level of importance. Newspapers, magazine spreads and movie posters are good examples of the use of design hierarchy. Headlines (also called display type) are usually placed at the top, while subheads and body copy fall underneath.

Scale

Scale is the size of an object in relation to another object (not that thing in your bathroom that you curse at each morning). Scale can be used to create interest and grab a viewer’s attention.

Thumbnail sketch

When conceptualizing, a designer will often create small, rough drawings—thumbnail sketches—to explore many ideas.

Mock-up

A mock-up is a real or digital model used to test early design ideas and see how they could look in the real world.

Photography  & Artwork
—

Resolution

The detail of an image based on the number of pixels is known as resolution. An image looks clearer when it has a higher resolution.

DPI

DPI stands for “dots per inch,” which is a measure of a printer’s quality. For high-quality printing, 300dpi is recommended. For example, a 300dpi image at 1200×1800 pixels will become as a 4×6 inch print.

PPI

PPI stands for “pixels per inch,” which is a measure of pixel density used by electronic image devices. You’ll likely see this used with scanners, cameras, TVs or monitors. Learn more about the difference between DPI and PPI.

Bleed

Sounds pretty gruesome, but bleed is when a design actually extends past its printed edge so there’s no chance of white borders when it’s trimmed down after printing.

Trim

Trim size is the final size of a printed piece after it has been trimmed from its page. Trimming is executed along crop marks that show where to cut.

Pixels

Pixels are square-shaped dots that make a digital raster image (and a really bad movie starring Adam Sandler.) The more pixels an image has, the higher its resolution.

Crop

A designer can cut out or crop unnecessary parts of an image to improve framing, highlight a specific subject or alter the image’s aspect ratio.

Stock photo/art

Stock photos and art are licensed images created by a third party. Using stock images saves on the cost of a having a professional photo shoot. Check out some of our favorite places to get good, free stock imagery.

Typography
—

Font types

Most fonts fall into one of four different font types.

Serif

Serifs are the small lines and hooks at the end of the strokes in some letters.

Sans serif

Sans means “without.” A sans serif font has no serifs.

Script

      Script typefaces use a flowing, cursive stroke.

Slab serif

Slab serif is distinguished by thick, block-like serifs.

Components of type

All fonts are made of the same basic components.

Ascender

An ascender is the part of a lowercase letter that rises above the main body of the letter. Think “b” or “h.”

Baseline

All font characters sit on the baseline, the lowest point of all uppercase letters and most lowercase letters.

Descender

A descender is the part of a lowercase letter that descends below the main body of the letter. Think “g” or “p.”

Median/x-height

The median or x-height is where most lower-case letters should reach their maximum height. It is set from the height of the x in a font.

Font spacing

The vertical and horizontal spacing of a font is often altered to change its appearance.

Kerning

Kerning is the adjustment of space between pairs of letters in the same word. Certain pairs of letters create awkward spaces, and kerning adds or subtracts space between them to create more visually appealing and readable text.

Leading

Pronounced “ledding,” leading (also known as line-height) is the space between two lines of text.

Tracking

Not to be confused with kerning, tracking is the adjustment of space for groups of letters and entire blocks of text. Tracking affects every character in the selected text and is used to change its overall appearance.

Font case

Typically, characters are available in two forms.

Uppercase

The large, capital letters of a typeface are uppercase. They’re also used by your mom to accidentally YELL AT YOU WHEN SHE TEXTS YOU.

Lowercase

Lowercase refers to the small letters of a typeface.

Small caps

Small caps—or small capitals—are uppercase characters that are the same height as lowercase letters. They are used to prevent capitalized words from appearing too large on the page. Want an example? Open just about any book and look at the opening words of a chapter.

Font style

Beyond spacing and case, fonts can also be altered by scale, weight and style.

Point size

Point size is the size of text. There are approximately 72 (72.272) points in one inch.

Font weight

       Font weight specifies the boldness of a font.

Italics

When characters slope to the right, they’re in italics, a visual technique used to draw attention to specific words or sentences within a paragraph.

 Widows & orphans

Widows and orphans make designers very sad. That’s because they are poor, lonely words at the beginning or end of a paragraph left dangling at the top or bottom of a column and separated from the rest of the paragraph.

Lorem ipsum

Lorem ipsum (also known as dummy text) is used as a placeholder that will be swapped out later with actual copy. The Lorem ipsum text comes from “The Extremes of Good and Evil,” written by Cicero in 45 BCE.

Color
—

Color theory

The study of how colors make people feel and their effects on a design is known as color theory. Color theory is used to explore the best types of colors to work in different design instances—for example, choosing a pastel scheme for a website that needs to feel soft, or picking red and yellow for a magazine ad that needs to evoke energy.

Hue, tint, tone and shade

Hue is pure color. Tint is a hue with white added. Tone is a hue with gray added. Shade is a hue with black added.

Saturation

Saturation is defined by the intensity of color.

Palette

A palette is the range of colors used in a design. These are colors that work well together and are often aesthetically pleasing. Designers will defines a palette for a project to create consistency and evoke a specific feeling.

 Warm and cool colors

Warm colors can be found on one half of the color wheel (reds, oranges, yellows and pinks). Cool colors occupy the other half (blues, greens and purples).

Monochromatic

A monochromatic color palette uses one single color.

Grayscale

A monochromatic color palette based on gray is called grayscale.

 Analogous

Colors that are adjacent to one another on the color wheel (i.e. red violet, red and red orange) are analogous.

Complementary

Complementary colors are opposites on the color wheel. This relationship will produce visual tension and “shock.”

Triadic

Triadic colors are three colors evenly spaced on the color wheel. One colors dominates, the second supports, and the third accents.

Gradient

Gradient is a gradual change from one color to another. (For example, blue transitioning gradually to green).

Opacity

Opacity is synonymous with non-transparency. The more transparent an image, the lower its opacity.

CMYK

CMYK is a 4-color printing process made up of cyan, magenta, yellow and key (black). CMYK colors in print will never appear as vibrant as RGB colors on screen because CMYK creates color by adding color together (making images darker) while RGB colors come from light.

RGB

RGB stands for red, green and blue, the three colors of light typically used to display images on a digital screen.

Pantone

Developed by Pantone Corporation, a professional color company, Pantone is the most widely used, proprietary color system for blending colors. The system includes colors that cannot be mixed in CMYK.

Want to learn more about the difference between CMYK and RGB? Check out our video below.

Web & digital
—

 Web page elements

Most web page designs include combination of these elements.

Header

Design elements repeated at the top of every page is called a header.

Navigation & navigation bar

Navigation is a roadmap to the most important parts of a website and should be visually consistent across all pages. A navigation bar is a set of links repeated on each page that often includes links to pages like “About us”, “Products,” “Contact us” and “Testimonials.”

Breadcrumb trail

Breadcrumbs are navigation elements that generally appear near the top of a page to show users the section hierarchy of the current page.

Body text

Body text is the main written content of a page.

Links

Any word or an image can be a link that can take users to another page.

Sidebar

A sidebar is the left or righthand column of a page typically used for either vertical navigation links or advertising. It may also contain site search, subscription links (RSS, newsletters, etc.) or social network buttons.

Banner

Typically located at the top of a page or in a sidebar, banners are advertisements that link to other websites.

Footer

Design elements repeated at the bottom of every page is called a footer.

HTML

HTML stands for HyperText Markup Language. This is the standard coding language for websites that creates all of the fonts, colors, graphics and links you see online.

Landing page

A landing page is a single page that appears in response to search engine result. Landing pages are used for lead generation.

User interface (UI)

User interface is the design of applications for computers, mobile devices and other devices to maximize their usability and the user experience.

Wireframe

Basic images that display the essential functions of a website are known as wireframes. Designers use wireframes to show how a page or site works.

Image file formats
—

An image file format is a standardized way to encode art, graphics and photos digitally.

Vector graphics

Vector graphics are small graphics that use math to display images. They can be enlarged without losing quality and are essential for cross-platform designs (i.e. billboards, business cards, etc.).

AI

AI stands for Adobe Illustrator document. This is a file format developed by Adobe Systems to represent single-page vector designs.

EPS

EPS stands for Encapsulated Post Script. This is a resizable file format that is commonly used for vector designs. Due to its high quality, it’s commonly used with print elements such as logos, business cards or brochures.

PDF

A PDF is a Portable Document Format developed by Adobe that can be universally downloaded and viewed by any computer. PDFs are most suitable for sharing previews of work and are universally viewable.

Raster graphics

Raster graphics are composed of pixels on a grid, where each pixel is assigned a color value. They are good for assigning special effects, color correction and manipulating photos. They are resolution-dependent, which means that images cannot be enlarged without degrading their quality.

GIF

GIF or Graphics Interchange Format is a raster file format that supports animation and transparency. GIFs can only display up to 256 colors, allowing for very small file sizes. (PS: It’s pronounced, “JIF” as opposed to the widely-accepted pronunciation, “GIF,” according to GIF creator, Steve Wilhite.)

JPEG

Joint Photographic Experts Group is also known as JPEG, the most widely used raster file type for web-based designs. JPEGs are compressed files that load quickly. You’ll typically see them used for emails, banner ads, online photos, and pretty much anything else online. Unlike GIFs, they cannot have a transparent background (a white background will be added automatically).

PNG

PNG stands for Portable Network Graphics, a web-based format that does not lose quality when compressed. PNG files were created to improve on the quality of GIF files.

PSD

PSD or Photoshop Document is the uncompressed working raster image file created by designers in Adobe Photoshop.

TIFF

TIFF stands for Tagged Image File Format, a common format for exchanging raster images between applications. TIFF produces a higher quality image than a JPEG or PNG, and is widely used among publishing industries and photographers. Don’t confuse it with a “tiff” or a “rift,” which happens when you send your designer eight rounds of revisions.

Logo types
—

All logos are built out of typography, shapes and/or images, and typically fit into one of these standard logo types. Each will give your brand or business a different feel. These six types can also be combined with one another to create even more unique logos.

Abstract mark

An abstract mark is a logo that uses the emotive qualities of color and form to convey your brand. Instead of being a recognizable image like an apple or a chicken, abstract marks use shapes to represent your business.

Emblem

Emblem logos uses frames and shapes to enclose the company or organization name. Think badges, seals and crests.

Lettermark

Lettermark logos feature one or more stylized letters (for example, a company’s initials) to identify the brand. Famous lettermark logos include those for IBM, CNN, HP and HBO.

Pictorial mark or symbol

Pictorial marks and symbols are non-abstract, visual icons that represent your company name or service. You can see this with the Apple logo, the Twitter bird and the Target bullseye.

Mascot

Mascot logos rely on a character or brand spokesperson to represent a business. Famous mascots include Colonel Sanders, the Kool-Aid Man and Mr. Peanut.

Wordmark

A wordmark relies on custom typographic treatment of text to illustrate a brand. Think VISA, Google or Coca-Cola.

This article was originally written by Alex Bigman and published in 2014. The current version has been updated with new information and examples.

Below is a massive list of design words — that is, words related to design. The top 4 are: art, layout, engineering and redesign. You can get the definition(s) of a word in the list below by tapping the question-mark icon next to it. The words at the top of the list are the ones most associated with design, and as you go down the relatedness becomes more slight. By default, the words are sorted by relevance/relatedness, but you can also get the most common design terms by using the menu below, and there’s also the option to sort the words alphabetically so you can get design words starting with a particular letter. You can also filter the word list so it only shows words that are also related to another word of your choosing. So for example, you could enter «art» and click «filter», and it’d give you words that are related to design and art.

You can highlight the terms by the frequency with which they occur in the written English language using the menu below. The frequency data is extracted from the English Wikipedia corpus, and updated regularly. If you just care about the words’ direct semantic similarity to design, then there’s probably no need for this.

There are already a bunch of websites on the net that help you find synonyms for various words, but only a handful that help you find related, or even loosely associated words. So although you might see some synonyms of design in the list below, many of the words below will have other relationships with design — you could see a word with the exact opposite meaning in the word list, for example. So it’s the sort of list that would be useful for helping you build a design vocabulary list, or just a general design word list for whatever purpose, but it’s not necessarily going to be useful if you’re looking for words that mean the same thing as design (though it still might be handy for that).

If you’re looking for names related to design (e.g. business names, or pet names), this page might help you come up with ideas. The results below obviously aren’t all going to be applicable for the actual name of your pet/blog/startup/etc., but hopefully they get your mind working and help you see the links between various concepts. If your pet/blog/etc. has something to do with design, then it’s obviously a good idea to use concepts or words to do with design.

If you don’t find what you’re looking for in the list below, or if there’s some sort of bug and it’s not displaying design related words, please send me feedback using this page. Thanks for using the site — I hope it is useful to you! 💐

У меня в голове уже настолько перемешался русский и английский язык, работа дизайнером, что многие английские слова по дизайну вошли в повседневный запас. IPAD есть айпад, tweet-ануть мы научились, и все мы каждый день что-то google-им . Но набор слов, которые использует дизайнер, еще более непонятный обычным людям, которые вроде как и знают английский.

Я не претендую на место педагога и  профессионала в написании статьи, расценивайте ее как информацию из Википедии – написал кто-то умный, хотя  это пока  не полноценный учебник.

Хочу поделиться с вами списком самых ходовых слов в английском для дизайнера. Ну и хочу дать пару дельных советов, как английский язык работу с иностранными заказчиками очень сильно облегчает.

Совет 1.

Установите Photoshop на английском. Это очень сильно расширит ваш словарный запас различными терминами. Потом, когда будете читать статью или смотреть видеоурок (ведь наверняка на английском, а то на русском вы не найдете актуальной специализированной литературы) эти термины будут очень часто встречаться, а вы уже будете знать интуитивно, что они значат. Вот я например так и не знаю, как переводится «adjustments» на русский, но помню из Photoshopа, что там собраны разные настройки для слоя.

Совет 2.

Смотрите пошаговые уроки на англоязычных ресурсах. Например tutsplus.com- я часто посматриваю тут уроки по веб-дизайну.

Посмотрите вот этот урок: Design a Clean Launch Email for a Mobile App По таким урокам очень легко усвоить новые слова – все тексты сопровождаются картинками, зная photoshop и как это делать руками, вы запомните быстро, как то, что вы делаете руками, называется по-английски.

Быть может вам будет полезен список английских слов по дизайну, часто используемых мной  в практике. Исключим отсюда те, которые вы выучите из Photoshopа, и оставим те, о которых я узнала на практике.

Английские слова по дизайну 

As a designer, explaining and putting visual work into words can be tricky, as not everybody is a designer. As a freelancer, it is up to you to get the idea across and describe (a.k.a. sell) your design to potential clients. Not only that, but getting feedback and knowing what you are talking about is important in order to be a credible designer. 

In this article, we put together a list of 65 design terms that can help you translate visual ideas into a verbal conversation. The design terminology is vast and can get complicated to explain, especially to other non-designers. So we hope this list helps you understand and provides an easy way to describe the must-know design vocabulary terms.

Prefer video content instead? Then don’t forget to visit the Envato Tuts+ YouTube channel. There you’ll find amazing video tutorials and courses, like this free course on fundamental design terminology:

What You’ll Learn in This Fundamental Design Terminology Guide:

• 10 Essential Design Terms
• 11 Important Color Terms and Definitions You Should Know
• 8 Technical Design Terms You Need to Know
• 18 Typography Terms You Should Know
• 8 Logo Design Styles You Need to Know
• 10 Must-Know Image File Formats

10 Essential Design Terms

What Is Composition?

Composition, also called layout, is the visual arrangement of design elements that create a complete image. Within a composition, you may use different principles of design to create visually pleasing work to deliver a functional layout.

What Is Balance in Design?

Any element placed on a page has visual weight that can be affected by form, size, color, and texture. In order to make a layout balance, some elements might need to have a certain scale. 

What Are the Types of Alignment?

Alignment refers to the position of the elements on a layout—the way the visual elements are arranged so that they line up. The alignment can be left, right, justified, or centered. 

What Is Repetition in Design?

Repetition creates consistency by repeating the same element within a layout multiple times. 

What Are Some Types of Contrast?

Contrast is the level of differentiation between different design elements to create visual hierarchies. The variation may be in form, color, texture, and size. 

What Is Negative Space?

Negative space is the blank area around a design element. It is used to emphasize certain parts of a layout and to focus on a specific element. 

What Is Hierarchy in Graphic Design?

In graphic design terminology, you’ll quickly learn to arrange elements by the level of importance. Hierarchy is exactly that. In order to create hierarchy, you need to have contrast in your design. If one image is larger than the other, this will place the emphasis on the larger image, and the reader will look at it first. 

What Is the Difference Between Symmetry and Asymmetry?

Symmetry refers to the equal amount of elements reflected on a page. If you were to draw a vertical line through its center, the elements can sometimes be mirrored or the visual weight can be the same from one half to the other.

The opposite of symmetry is asymmetry. The elements on both sides of the centerline aren’t equal and can create an unbalanced design. 

What Is a Grid?

Grids are groups of intersecting vertical and horizontal lines that can help you structure content on a page. There are many types of grids for different uses, but the common denominator is that they help keep the content organized and clean. 

If you are interested in diving into more composition and design terms, be sure to check out: 

11 Important Color Terms and Definitions You Should Know

What Is the Difference Between CMYK and RGB?

Let’s see some color terms and definitions. CMYK stands for cyan, magenta, yellow, and key (black). These are the four most basic colors you can use for print. You’ll notice CMYK colors aren’t as vibrant as RGB. This is because CMYK is subtractive—this means that the colors work with reflected light.

RGB colors are used on-screen only. RGB stands for red, green, and blue, and this color mode is additive, meaning that by mixing these primary colors in different combinations, we can simulate a bigger range of colors. 

What Is Grayscale?

In graphic design vocabulary, grayscale is a monochromatic palette using different shades of gray in an image. A single image is composed of up to 256 combinations of shades of gray. 

What Is the Definition of Opacity?

This refers to the level of transparency on an element. The lower the opacity, the more transparent the element is. If the opacity is set to 100%, it means the object is solid. 

What Is Saturation?

Saturation refers to the intensity of a color. You’ll notice saturated images appear brighter and punchier. Desaturated images are dull and almost colorless. 

What Is the Difference Between Hue, Tone, Tint, and Shade?

Hue is a way to describe a pure color without tint or shade (added white or black). For instance, any color on the color wheel is a hue (blue, yellow). 

Tone refers to a hue with gray added. The tone will lower the intensity of color, and it can become dull. 

Tint refers to a hue with added white to lighten it and make it paler. The tint can range anywhere from a slightly lighter color all the way to completely white, with barely any color. 

Shade refers to black added to a color. This is the opposite of Tint—instead of making the color lighter, shade will darken it. 

What Is a Color Palette?

A color palette is a group of colors that can be used for a specific design project. This color palette usually represents a brand and should be chosen to work in harmony with each other. 

What Is the Pantone System?

PMS or Pantone Matching System is the most widely used system for blending colors that aren’t CMYK. Every hue is identified by a number that is easy for designers to reference and reproduce when printing. 

If you want to check out more about color terms and definitions, we have a section on it in this article:

8 Technical Design Terms You Need to Know

What Is Resolution in Graphic Design Terminology?

The resolution of an image determines the file quality. A high-resolution image will be crisp, and wherever the focus is, it will have defined edges. The higher the resolution, the higher the quality. A low-resolution image will be pixelated and blurry.

What Are Pixels?

A pixel is the smallest basic unit of color on a computer that makes up images. Depending on the amount of these tiny squares, you can have a high- or low-resolution image. 

What Is the Difference Between PPI and DPI?

In graphic design terminology, PPI stands for pixels per inch. It is a measurement used to define the resolution of a screen, most commonly monitors, cameras, and scanners. 

DPI is similar to PPI but is used for printing, and it stands for dots per inch. Printers produce images composed of small dots that affect the printing quality of an image. 

What Is the Difference Between Crop and Close-Crop?

Cropping refers to eliminating unnecessary parts of an image. By doing this, you’ll change entirely the direction, emphasis, and even composition of an image. Cropping improves the framing of an image to fit your project.

Similar to cropping, close-cropping refers to cutting out a specific element from an image. This is mainly done for headshots if you wish to use a different color background. 

What Is Trim Size?

Trim size is the final size of a printed project after it’s been trimmed. The trim size is guided by the crop marks that are on a printed sheet. 

What Is the Rule of Thirds?

This technique is used to determine the focal points of an image or design. Imagine a 3×3 grid on top of an image or a design. The four spots where the lines intersect indicate the focal points, and these areas are where the most important elements should be placed. 

Learn more about grids in this article:

18 Typography Terms You Should Know

What Is the Difference Between Serif and Sans Serif?

A serif is a small extra stroke at the end of each character. A font family using serifs is called a serif typeface. These typefaces are usually easier to read because the extra stroke allows our eyes to follow the characters more easily. Serif typefaces are widely used for body copy as they are deemed elegant and highly legible, depending on the size. 

A sans serif is a character that doesn’t have the small strokes at the end of each character. Sans serif fonts are also used as body copy but most predominantly on screen as they don’t have small details that can be difficult to render. 

What Is a Script Font?

Script typefaces are based on handwriting, and they can be either historical or modern. They possess a fluidity compared to other traditional typefaces.

What Is a Slab Serif Font?

This is another typography key term you should know. Slab serifs are characterized by thicker and heavier serifs compared to regular serif fonts. Slab serifs can be square, angular or rounded depending on the typeface. 

What Is Monospace in Typeface Design?

Monospace fonts have a fixed width, meaning each character occupies the same amount of horizontal space. You tend to see this in typewriters or when setting computer codes. 

What Is the Difference Between Kerning and Tracking?

In graphic design vocabulary, kerning is the space between two specific characters. Certain pairs of letters can create awkward spaces, and by kerning them you can adjust the space between them. By adjusting the space, you can improve the legibility. 

Similar to kerning, tracking refers to the spacing between characters. While kerning refers to a pair of characters, tracking applies to a group of letters. Here’s an article you can check to learn more about typography key terms:

What Is Leading in Graphic Design Vocabulary?

Leading determines the distance between multiple lines of text. This ensures that the lines aren’t touching and that there’s enough space to read the lines comfortably. 

What Is Weight in Font Design?

Weight refers to the thickness of a character relative to its height. A typeface may come in many different weights, and most usually come with a normal and bold weight. It isn’t unusual to see fonts with anywhere from four to a dozen weights. 

What Is Point Size?

Here’s another typography key term: A font is measured in point size, and it dictates the height of the character. There are 72 points in 1 inch or 2.54 cm. 

What Is the Difference Between Uppercase and Lowercase?

Uppercase characters are used at the beginning of sentences or the first letter of proper names. They are also called capitals or caps. The name uppercase comes from the old-school typesetting printing presses. Printers kept capitals in the upper drawer of a desk.

Lowercase glyphs are the non-capital letters that make up the rest of a text block. The name lowercase comes from the old way of setting type with printing presses. Printers kept the lowercase letters in the lower drawer of a desk.

What Are Small Caps in Design?

Small caps are uppercase characters that are shorter than regular uppercase given in a font. Some typefaces come with small caps, while others don’t, and the software you are using will generate them. When small caps are designed as part of a typeface, they will usually be the same height as lowercase characters or just slightly taller.

What Is Lorem Ipsum?

Lorem ipsum is placeholder text that can help you show your design without meaningful content. It is mostly used at the beginning of a design project to mock up the design until the final copy is available. 

What Is Readability vs. Legibility?

Readability refers to the way blocks of text are arranged on a page. Legibility refers to how well one character can be distinguished from another.

What Are Widows and Orphans?

Widows and orphans are seen when typesetting text. A widow is a short line or a word at the end of a paragraph or a column causing too much white space between paragraphs at the bottom of a page. An orphan is a short line or a single word at the beginning of a column or page. 

If you are just as interested in typography as we are, be sure to check out:

8 Logo Design Styles You Need to Know

What Is a Lettermark or Monogram?

A lettermark is a type-based logo made of a few letters. It’s often used if a company’s name is made of two or more words. A monogram logo will shorten the company name by using only its initials, resulting in simplicity. For instance, NASA is easy to say and remember compared to National Aeronautics and Space Administration. 

What Is a Wordmark?

A wordmark focuses on the business name alone rather than reducing it to a single lettermark. For instance, Google is already a memorable name, but if it’s combined with a strong typeface and colors, it results in a powerful wordmark.

What Is a Pictorial Mark?

Also known as a brand mark in logo design style, a pictorial mark refers to a graphic-based logo. It’s usually an icon that has been simplified and stylized to represent a brand. For instance, Twitter’s icon is a bird, and it’s recognized around the world as Twitter. 

What Is an Abstract Mark in Logo Design?

The opposite of a pictorial mark, an abstract mark is not based on a real object. Instead, it’s an abstract geometric representation that represents a business. Adidas’s logo doesn’t represent anything from the real world. Instead, the brand designers distilled their ideas into a geometric shape that best represents the company. 

What Is an Emblem?

An emblem logo is a mark in which the name of a business is contained within a single shape. An emblem is not necessarily just for the corporate world—you’ll see emblems representing schools or sports teams. 

What Are Mascot Logos?

Mascot logos include illustrated characters that can be animated or static. They become the brand’s spokesperson. An example of this is the famous Cheetos mascot.

What Is a Combination Mark?

This is a mix of a wordmark and an abstract mark, a pictorial mark, or a mascot. The layout of this mark can vary depending on the elements you want to use. Think of the Victoria’s Secret logo or the Puma logo.

What Is a Favicon?

This is a shortcut icon: a distilled logo based on a primary logo that’s used on websites for branding purposes. These favicons are also used as profile pictures on social media. Some recognizable favicons are the «a» of Amazon and the «W» for Wikipedia.

10 Must-Know Image File Formats 

What Is a Raster Image?

Raster images are made up of a set of grid pixels that together make an entire image. If you want to stretch a raster image, it’ll get pixelated and blurry.

What Is a GIF?

GIF stands for Graphics Interchange Format. This file format supports animation and transparency. It can only display up to 256 colors, which allows you to have small files, making it perfect for the web. 

What Is a JPEG Image?

JPEG is the most widely known raster file. It’s used anywhere from images on an email to photos and anything you find online. JPEG stands for Joint Photographic Experts Group. Unlike PNG, JPEG doesn’t have the ability to be transparent. It’s suitable for web and print.

What Is a PNG?

If you are looking to maintain some quality when an image is compressed, PNG is for you. PNG stands for Portable Network Graphics, and it was created to improve the quality of GIF.

What Is a TIFF Image?

TIFF images are mostly used in layout design and InDesign. It stands for Tagged Image File Format, and the format produces a higher quality image compared to the formats above. 

What Is a PSD File?

Adobe Photoshop’s document format is PSD or Photoshop Document. This version is an uncompressed raster image file.

What Is a Vector?

Vector graphics are made out of small graphics like points, lines, and curves. The shapes within a vector use a mathematical equation that allows the vector to be resized without compromising the quality. Vectors won’t get blurry, unlike the raster image format.

What Is an AI File?

AI stands for Adobe Illustrator. This format was developed by Adobe to represent single-page vector drawings in EPS and PDF. 

What Is an EPS File?

EPS stands for Encapsulated PostScript, and it’s a resizable format that contains vectors. They’re mostly used for logos so they can be scaled as needed in any type of project. 

What Is a PDF?

PDF stands for Portable Document Format and was developed by Adobe. This format is the most used format to be downloaded and viewed on any computer. From the vector standpoint, Adobe Illustrator can embed PGF data (Illustrator’s native format) onto a PDF so it can be used as a vector format.

5 Top Digital Assets From Envato Elements for Your Next Project

Now that you know the fundamental design terminology for your work as a designer, you might be looking for a reliable source of assets for your projects.

Envato Elements is one of the best options you can find online. For a flat monthly fee, you’ll get unlimited access to thousands of digital assets. Download graphic templates, print templates, premium fonts, graphics, royalty-free images, add-ons, and more!

Here’s a short selection of some of the top digital assets you’ll find on Envato Elements: 

1. Magazine Print Template (INDD)

You don’t need to worry about layout, composition, negative space, and readability with this ready-to-use magazine template. The InDesign magazine template features a clear layout, structured files, and vector graphics for your next magazine.

2. Beer Badge Emblem Logo (AI, EPS, JPG, PDF, PNG, PSD)

We’ve talked about emblem logos, where the name of the business is contained within a single shape. Here’s a fantastic emblem logo template you can easily customize on different design software.

3. Addington CF Beautiful Serif Font Family (OTF)

Nothing beats the elegance of a serif font, and you can never have enough in your library. Check out Addington CF and add it to your toolbox. It includes:

• seven weights
• Roman and italic sets
• advanced OpenType features
• Latin alphabet
• free updates and feature additions

4. FlorArt Watercolor Vector Kit (AI, EPS, PNG)

Now that we know that vectors won’t get blurry, you might be in the hunt for top vector graphics. This kit of flower vector art will look beautiful on a flyer or logo, so consider downloading it today!

5. Lighting Minimal Flyer Template (INDD)

If you like minimalism, you’ll love the composition and white space on this flyer template. Get it today and customize it to your needs using InDesign.

That’s It! 

In this design vocabulary article, we rounded up 65 design terms that you should know. These terms can help you explain your designs to clients and talk about your work like an expert. Many of these terms we learn during our design studies, and it’s easy to forget them if you don’t use them often. Explaining these terms to your clients can also help them to be on the same page as you when it comes to feedback. 

If you liked this article about fundamental design terminology, be sure to check out: 

Editorial Note: This post has been updated with contributions from Maria Villanueva. Maria is the Associate Editor of the Tuts+ Design channel.

Did you find this post useful?

Laura is a design writer, design mentor, and entrepreneur leading Laura Keung Studio, currently based in Munich, Germany. She had her first design client during her first year of university and since then she fell in love with the design process. Laura studied at the Ontario College of Art and Design University in Toronto before interning at renowned studios in Canada and Austria. With 12 years of experience in the design industry, Laura leads her own design studio and collaborates with other creatives on branding and editorial design projects.

Listed below are some of the more commonly used terms associated with graphic design. This quick glossary should be helpful for any clients or novice graphic designers wishing to learn a bit more about graphic design related terminology. I’ve tried to keep these definitions as simple as possible.

Anti-Aliasing: the smoothing of jagged pixel edges in an image or graphic.

Bevel: applying a beveled effect – giving a 3d appearance to an otherwise flat looking graphic. This is achieved by adding highlights and shadows to an object’s edges.

Bleed (bleed edge): when creating a design for print, a “bleed edge” needs to be added to the document’s page size. For example, a brochure with the dimensions  8″ x 10″ needs to be created at something like 8.5″ x 10.5″. This leaves room for the design to extend past the cut area.

CMYK: a very common color mode used for printing, also known as “process colors”. The CMYK stands for the colors cyan, magenta, yellow, and black. The letter K represents black as a way to not confuse with blue. When printing in CMYK, not all colors are achievable (ex: bright blues). For this reason, spot colors (pantone colors) can be used to add shots of necessary colors (see “spot colors” to learn more).

DPI (dots per inch): represents the resolution of an output device such as a printer. The higher the DPI, the more pixels (dots) fit into each inch of the image. In other words, the higher the DPI, the better an image will look in print. 300 dpi is sufficient for many print jobs, but it’s all dependent on the detail required and the material being printed on. DPI is often confused with the term “PPI” (see “ppi” to learn more).

Duotone: Just like the name implies, a duotone is simply an image consisting of 2 colors. Printing an image with 2 colors rather than 1 will result in an image that has more depth than a single monotone color print.

FTP (File Transfer Protocol): ability to transfer files from one computer to another using the internet. There are FTP software programs (ex: “CuteFTP” or “Transmit” for mac) that make the process of transferring large amounts of data possible and simple. FTP programs (also referred to FTP clients) are commonly used tools for uploading and updating sites on the web.

Gamut: basically a range of available color. There are color modes in graphic design. Each mode consists of a certain amount of colors. This range of available color is referred to as “gamut”. Any color that falls out of this range is called “out of gamut”.

GIF: one of the most widely used graphic image file formats on the web.

-web browser friendly
-small file size is great for web pages.
-support background transparency
-limited to only 256 colors
-photos don’t look good saved as GIF

Gradient: a gradual transition of colors. The way the sky fades from one color to another during a sunset is an example of a gradient.

JPG: (also spelled “JPEG”) this image format is the most commonly used web format when it comes to photos or detailed imagery. JPGS are a “lossy” format, meaning some quality is lost to achieve their smaller file size.

-look great on a monitor, despite “lossy” format
-support a higher number colors than gifs, however larger file sizes
-web browser friendly
-ok for print if saved as highest quality
-Saving jpg images at high quality will result in better picture quality but longer loading times on the internet. Saving at low quality will result in lower picture quality but fast web page loading times.
-unlike “PNG” and “GIF” file formats, JPG’s don’t support background transparency

Kerning: the horizontal spacing between a pair of letters in a word. Certain letter pairs look awkward together, so sometimes it’s necessary to move the letters closer together or further apart. Examples of how spacing varries with various letter combinations: AV, PA, AT, and AY. Kerning is often confused with the term “tracking” (see “tracking”). Tracking is used for spacing larger groups of letters or text.

Pantone matching system: a color matching system allowing designers and print shops to more easily match colors. This is accomplished by referencing Pantone swatch books (guides) for the proper recipe of colors. This Pantone system is not perfect, but it has become the industry standard for color matching.

-good way to select “out of gamut” (see “gamut”) spot colors (see “spot colors”) for print projects.
-spot colors can be expensive
-no two color guides are printed exactly the same

PDF (portable document format): a document format that allows for the reading and writing of multi-page documents or articles. It’s possible to keep the same format, layout, and fonts of a document across any computer setup. A free software program like Adobe Acrobat is needed to read PDF’s. PDF’s are a good way to write ebooks, articles, and also serve as a good way to show images.

Pixelation: raster images (see “raster”) are comprised of tiny dots. The more dots that fit into a certain area (1×1″ for example), the higher the resolution. Often times images with low resolution appear “blocky” or pixelated because of their lack of pixels per inch (see “ppi”). This blocky appearance is referred to as pixelation. Vector (see “vector”) image are void of pixelation.

To understand pixelation, think of the old Atari video games. Remember how the graphics were made up of tiny blocks. Each of these blocks are called pixels. Now look at today’s video games, monitors, and tv screens where the pixels are much less noticeable. The reason is because the pixels are smaller and more crammed. This results in a more detailed viewing image.

PNG: a common image format used for displaying images on the web.

-offers background transparency (great for web)

-larger in file size than a gif, but still reasonable for web use
-display many colors
-display text more crisp than jpg images.

PPI (pixels per inch): specifies the resolution of an input device (digital camera, scanner, monitor). Web pages run at a resolution of 72-96 PPI. PPI is often confused with the term “DPI” (see “dpi”).

Raster: a raster image is an image that is made up of pixels (tiny dots). Raster graphics or images are resolution dependent, meaning they cannot scale to arbitrary size without apparent loss in quality. Photographs are raster images. Vector (see “vector”) images on the other hand, can be scaled to any size, with no worries of pixelation (see “pixelation”) or quality loss associated with raster imagery.

Resolution: The detail of an image is based on how many pixels (dots) are included in 1 square inch of space. The more pixels (see “pixels”) included in that space, the higher the resolution.  Computer monitors use no more than 72 pixels (dots) per inch, so going higher is pointless. However a minimum of 300 dots per inch is usually recommended for printing.

RGB: the color mode that is read by computer screens and the web. The RGB mode consists of red, green, and blue color combinations. Anything created for web use should be created in RGB color mode, while anything for print should be created in CMYK color mode.

San Serif: A kind of font type that is void of the strokes on the end of letters that can be found on a “serif” typeface (see “serif”).

Serif: A type of font that has exaggerated strokes or details at the end of it’s letters (unlike “san serif” typefaces).

Spot Color: When printing in CMYK color (see “cmyk”), often times certain colors can not be achieved. This is when “spot colors” are called upon. An extra printing plate with the spot color is added to the printing process (costing extra money). Spot colors are also used for limited color print jobs, since it’s sometime cheaper to print just the single or double spot colors rather than the entire 4 used in CMYK process printing. The Pantone Matching System (PMS) is the most widely recognized system for spot colors.

TIFF: (also spelled TIF) image format commonly used when printing of high quality is necessary. Unlike the “JPG” format that sacrifices quality for file size, TIFF’s sacrifice file size for quality.

-very large file sizes
-great format for printing (not “lossless” like JPG)
-not web friendly due to large file size

Tracking: the adjustment of space between a group of letters or entire blocks of text. A change in tracking can result in easier to read text, making it feel more “airy” and open. Tracking is often confused with “kerning” (see “kerning”). Kerning is more the spacing between 2 letters that appear to close together.

Vector: a graphics format that uses shapes and paths (lines) to form graphic images. Vector graphics are resolution independent and regardless of how magnified, all edges  will remain crisp, clear, and smooth. This ability to stay crisp at any size, means vector graphics are great for logos, line art, and other designs that don’t require complicated coloring or textures.

Are there any commonly used graphic design terms that I’m leaving out? If so please let me know by commenting below.

That’s right: Even if you’re not part of the design world, understanding common design words can help you talk the talk, walk the walk, and stay on top of the latest design trends. Below, we’ll cover why design terminology is so important, along with some basic graphic design vocabulary everyone should know.

Why Is It Important to Know and Understand Design Terminology?

In a world where we’re constantly bombarded with promotions, ads, and digital content, it’s no wonder that so many marketing disciplines touch upon design. Visual content, like infographics, is one of the best tools for brands to communicate easily with their audience. And good design leaves a mark in our memory, often helping us retain information better than text alone.

Thankfully, we live in a world where anyone can create designs for social media, newsletters, marketing campaigns, or just for fun. And with easily accessible photo and video editing tools in Picsart, it’s easy to create beautiful designs—even if you’re not a graphic design pro.

What Are the Most Important Design Words?

Good design starts with a solid understanding of commonly used design words. After all, you should be able to verbally express what your designs are all about. Or, if you’re working with a Creative team, you should be able to clearly communicate what you’re looking for using descriptive design words. That’s why we’ve pulled together a graphic design terms list full of common design vocabulary.

Check out this list of design words to help you cut through the jargon.

Typography, Text, and Font Design Vocabulary

1) Hierarchy

One of the basic principles of design, visual hierarchy adds organization and direction to your creative work. It might not always be obvious to someone outside the design world, but hierarchy adds order to various elements like text and shapes. The result is a design that’s visually appealing with text that is easy to read.

2) Leading

When you’re reading multiple lines of text, there should be enough distance from the bottom of the words above to the top of the words below to make them legible. Leading describes how text is spaced vertically to boost readability.

3) Lorem Ipsum

If you’ve ever downloaded a WordPress template, you’ve probably seen that section of Latin text that fills in the spaces where your web content goes. 

Lorem Ipsum is placeholder text used by the design industry. Since it has a more-or-less average distribution of letters, it looks more like readable English than “Add content here.”

4) Monospaced

In monospaced fonts, every character is the same width, and all characters occupy an equal amount of horizontal space. 

5) Script

Script fonts are based on modern or traditional handwriting. There are two types of script fonts: formal and casual. 

Alex Brush, a traditional script font, adds a sense of elegance to documents and invitations. Meanwhile, casual scripts appear to be created by a wet bush, featuring more casual letterforms (see: the Grand Hotel font).

6) Serif 

A serif is the extra stroke at the end of letters in serif fonts. They often look like little feet on a font. Serif fonts are easier to read in printed design, making letters more distinctive and easier to recognize. Common serif fonts include Times New Roman, Garamond, and Georgia.

7) Sans Serif

A sans serif typeface is a font that doesn’t have serifs, or the small projecting lines trailing the edges of letters. San serif fonts are great if you want to achieve a sense of modern minimalism and elegance in your designs. Because they’re very easy to read, they’re often used in web design. For example, one of the most instantly recognizable san serif fonts is Arial.

Typography

Typography refers to two things. First, it’s the style and appearance of printed words. Second (and more importantly), it’s the art of arranging words to make them readable, legible, and engaging in design. 

Basically, typography is the visual component of a written word. Typography and text layout design are things that all designers deal with at some point – whether they’re creating a font, working in UX, or designing an Instagram story. 

9) Kerning

You may not have heard of this one before, but it should hold an important place in your design vocabulary. Kerning is adjusting the spacing between a font’s letters depending on their form. It’s important to kern text to make sure it’s legible. 

Color Design Descriptive Words

10) RGB Color

The RGB system is one of the most commonly used color classifying systems. It’s an additive color model, which means that when you add the primary colors of Red, Green, and Blue together, you’re able to produce other colors. The RGB color spectrum is used when designing digital applications.

11) CMYK Color

You may have heard of the RGB system to describe colors. But have you heard of CMYK? This is used to describe the color in print designs. It stands for cyan, magenta, yellow, and key (black) – the four colors most commonly used in printing. Like RGB, these colors can be combined to produce the majority of colors in print.

12) Hex Code

Hex is a six-digit code used to represent a color. For example, the hex code for black is #000000. They’re found alongside RGB and CMYK in most design applications, but they’re most often used in HTML and CSS.

13) Color Theory

With infinite color combinations at your disposal, it’s not always easy to pin down what color scheme will work best for your design. Color theory creates a logical structure, helping designers choose balanced combinations using the color wheel, color harmony, and the context of how colors are used.

Pro tip: If you’re just getting started with the color wheel and color pairing, play around with the Color Wheel in our Quicktools. 

14) Gradient

A gradient is a gradual change of colors (such as yellow turning into orange) or a color fading into transparency.

15) Opacity

Opacity determines how transparent a design is. The lower the opacity, the more transparent an element is. For example, 100% opacity means the element is completely solid colored.

16) Palette

A color palette is like a visual guide for design work. Following a color scheme helps create consistency, especially when it comes to branding. A palette should be carefully crafted so colors work harmoniously together. 

Pro tip: You can easily create your own color palette using this color palette generator. 

Branding and Logos Graphic Design Terms List

17) Icon

Icons are images used to represent objects or actions, like a magnifying glass to represent a search. Icons are used in various industries, from supermarkets to manufacturing. Just make sure they’re clear to avoid any confusion since they’re often used to replace text.

18) Logotype

A logotype (or “wordmark”) is a brand name styled as a logo design. They’re usually very distinct, making it easy for people to associate a brand with its visual identity (see: Google).

19) Logomark

Unlike a logotype, a logomark doesn’t contain the brand name itself. Instead, it uses a shape or character to represent the brand, like Twitter’s bird or Nike’s iconic swoosh.

20) Style Guide

A style guide outlines design standards for anything related to your brand—whether it’s a website homepage, business card, or Facebook posts. A brand style guide helps ensure consistency, enabling you to create a strong brand that consumers instantly recognize.

Graphic Design Vocabulary and Techniques

21) Crop

When you crop an image, you’re removing the unnecessary portions of the image. Cropping is an easy way to change the emphasis or size of an image. 

22) Grid

Grids are the foundation of any well-crafted layout. They help designers arrange text, pictures, and design elements in a consistent way by using positive and negative space to maintain balance.

23) White Space

This design term describes when an area is intentionally left blank. White space is clean, crisp, and contrasting, and it helps create legibility if designing around text. It’s one of the key elements of design. 

24) Resolution

Resolution is used to describe the number of pixels that occupy a linear inch of an image. It determines the quality of the image – the higher the resolution, the better the quality (and the less pixelated your image will be).

25) Rule of Thirds

The rule of thirds helps designers make images more visually appealing. Picture a 3×3 grid over your picture. Then, align the picture’s object with the intersection points or allow the object to stretch across the grid.

26) Saturation

Saturation measures the intensity of a color. The more saturated a color is, the more vibrant it appears.

27) Scale 

Scale is the relative size of an object (or the different objects) within a design. While two objects of the same scale are typically considered equal, making one object considerably larger can make it seem more important. As a result, scale is one of the design tips most often used to establish hierarchy in design.

28) Texture

In design terminology, texture is the visual appearance of a design. Adding layered graphics to a design can help create a visual texture. Sometimes, designs can also imitate real-world textures, such as metal or fabric.

Create at the Speed of Culture

Picsart is a full ecosystem of free-to-use content, powerful tools, and creator inspiration. With a billion downloads and more than 150 million monthly active creators, Picsart is the world’s largest creative platform. Picsart has collaborated with major artists and brands like BLACKPINK, Taylor Swift, the Jonas Brothers, Lizzo, Ariana Grande, Jennifer Lopez, One Direction, Sanrio: Hello Kitty, Warner Bros. Entertainment, iHeartMedia, Condé Nast, and more. Download the app or start editing on web today to enhance your photos and videos with thousands of quick and easy editing tools, trendy filters, fun stickers, and brilliant backgrounds. Unleash your creativity and upgrade to Gold for premium perks!

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

• #
• #
• #
• #
• #
• #
• #
• #
• #
• #
• #