99 Important Design Words You Should Know | Photoshop Services

Share on facebook
Share on google
Share on twitter
Share on linkedin
99 Important Design Words You Should Know | Photoshop Services

Designers have a vocabulary all their very own. Should you’re getting design work executed, understanding the precise terminology will provide help to talk with each other and get the outcomes you envision. (We promise it’s a complete lot simpler than highschool French.)

Check out these design phrases. Examine them. Commit them to reminiscence. Eh… That’s an excessive amount of work. Simply bookmark this web page and use it as your design phrase cheat sheet. Listed here are crucial descriptive design phrases you need to know:

You are watching: graphic design vocabulary

  • Design: composition, steadiness, proximity, alignment, repetition, distinction, white area, hierarchy
  • Images & paintings: decision, DPI, PPI, bleed, trim, pixels, crop, inventory picture
  • Typography: serif, sans serif, script, ascender, baseline, descender, kerning, main, monitoring, weight
  • Shade: hue, tint, tone, shade, saturation, monochromatic, analogous, complementary, triadic, opacity, CMYK, RGB
  • Web site components: header, navigation bar, breadcrumb path, touchdown web page, HTML, person interface, wireframe
  • File codecs: AI, EPS, PDF, GIF, JPEG, PNG, PSD, TIFF
  • Emblem sorts: summary mark, emblem, lettermark, pictorial mark, mascot, wordmark

Design —

rule of thirds
Designed by robbyprada

Composition and structure

Composition is the association of design components that kind a complete picture. A profitable composition attracts the viewer and guides their eye throughout the design. In visible artwork, you would possibly hear this known as “kind.” In graphic design, it’s typically referred to as structure. Composition is made up of a variety of totally different visible design components, together with steadiness, proximity, alignment, repetition, distinction and white area.


This isn’t your capability to stroll a straight line after three beers. In design, steadiness includes the location of components on the web page in order that the textual content and graphic components are evenly distributed. There are 3 ways to realize steadiness: symmetrically, asymmetrically and radially.


Symmetry is achieved when all design components are equal on either side of a central line


When graphics and textual content aren’t equal on either side of a central line, a design is claimed to be asymmetrical. Within the instance above, there may be nonetheless steadiness, however there are graphics on one facet and textual content on the opposite


A radial design is one during which components radiate from a central level, creating steadiness.


The best way during which design components are grouped or spaced on a web page known as proximity. Nice design teams like components collectively.


Alignment is the place of textual content or graphics, whether or not left, proper, centered or full justified..


To take care of a unified look, designers repeat components all through a design. (Repetition can also be outlined because the variety of occasions your toddler asks for a cookie.)


Distinction is achieved by together with components inside the design that look measurably totally different from each other. A designer might use shade, form, texture, measurement or typeface to create distinction.

White area

White area—generally referred to as unfavorable area—is the a part of the design that’s unmarked by imagery or textual content. It’s additionally what Midwesterners name their miserable, winter panorama.

boy and giraffe

Rule of thirds

The rule of thirds is a way that designers use to find out focus. Utilizing a grid of three rows and columns, focal factors are indicated the place the strains converge. Designers use this as a information to find out the place to position vital components of their design.


A grid is a collection of intersecting vertical, horizontal, angular or curved strains used to arrange graphic components on a web page, in addition to in relation to 1 one other.


In design, hierarchy is the group of components by stage of significance. Newspapers, journal spreads and film posters are good examples of the usage of design hierarchy. Headlines (additionally referred to as show kind) are often positioned on the high, whereas subheads and physique copy fall beneath.

bleed and trim


Scale is the scale of an object in relation to a different object (not that factor in your toilet that you simply curse at every morning). Scale can be utilized to create curiosity and seize a viewer’s consideration.

Thumbnail sketch

When conceptualizing, a designer will typically create small, tough drawings—thumbnail sketches—to discover many concepts.


A mock-up is an actual or digital mannequin used to check early design concepts and see how they might look in the actual world.

Images & Paintings —


The element of a picture primarily based on the variety of pixels is named decision. A picture seems clearer when it has the next decision.


DPI stands for “dots per inch,” which is a measure of a printer’s high quality. For top-quality printing, 300dpi is really useful. For instance, a 300dpi picture at 1200×1800 pixels will turn out to be as a 4×6 inch print.


PPI stands for “pixels per inch,” which is a measure of pixel density utilized by digital picture gadgets. You’ll possible see this used with scanners, cameras, TVs or displays. Study extra in regards to the distinction between DPI and PPI.

parts of typography


Sounds fairly ugly, however bleed is when a design truly extends previous its printed edge so there’s no probability of white borders when it’s trimmed down after printing.


Trim measurement is the ultimate measurement of a printed piece after it has been trimmed from its web page. Trimming is executed alongside crop marks that present the place to chop.


Pixels are square-shaped dots that make a digital raster picture (and a extremely unhealthy film starring Adam Sandler.) The extra pixels a picture has, the upper its decision.


A designer can reduce out or crop pointless elements of a picture to enhance framing, spotlight a particular topic or alter the picture’s facet ratio.

Inventory picture/artwork

Inventory images and artwork are licensed photos created by a 3rd get together. Utilizing inventory photos saves on the price of a having knowledgeable picture shoot. Try a few of our favourite locations to get good, free inventory imagery.

Typography —

Font sorts

Most fonts fall into considered one of 4 totally different font sorts.


Serifs are the small strains and hooks on the finish of the strokes in some letters.

Sans serif

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


Script typefaces use a flowing, cursive stroke.

Slab serif

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

Parts of kind

All fonts are made from the identical fundamental parts.

kerning leading tracking


Read more: The Complete Graphic Designer Salary Breakdown (2020 Update) | Photoshop Services

An ascender is the a part of a lowercase letter that rises above the primary physique of the letter. Assume “b” or “h.”


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


A descender is the a part of a lowercase letter that descends under the primary physique of the letter. Assume “g” or “p.”


The median or x-height is the place most lower-case letters ought to attain their most top. It’s set from the peak of the x in a font.

Font spacing

The vertical and horizontal spacing of a font is usually altered to alter its look.

website elements gif


Kerning is the adjustment of area between pairs of letters in the identical phrase. Sure pairs of letters create awkward areas, and kerning provides or subtracts area between them to create extra visually interesting and readable textual content.


Pronounced “ledding,” main (also called line-height) is the area between two strains of textual content.


To not be confused with kerning, monitoring is the adjustment of area for teams of letters and full blocks of textual content. Monitoring impacts each character within the chosen textual content and is used to alter its general look.

Font case

Usually, characters can be found in two varieties.


The big, capital letters of a typeface are uppercase. They’re additionally utilized by your mother to by chance YELL AT YOU WHEN SHE TEXTS YOU.


Lowercase refers back to the small letters of a typeface.

Small caps

Small caps—or small capitals—are uppercase characters which are the identical top as lowercase letters. They’re used to forestall capitalized phrases from showing too massive on the web page. Need an instance? Open nearly any e book and take a look at the opening phrases of a chapter.

Font fashion

Past spacing and case, fonts will also be altered by scale, weight and elegance.

Level measurement

Level measurement is the scale of textual content. There are roughly 72 (72.272) factors in a single inch.

Font weight

Font weight specifies the boldness of a font.


When characters slope to the precise, they’re in italics, a visible method used to attract consideration to particular phrases or sentences inside a paragraph.

Widows & orphans

Widows and orphans make designers very unhappy. That’s as a result of they’re poor, lonely phrases firstly or finish of a paragraph left dangling on the high or backside of a column and separated from the remainder of the paragraph.

Lorem ipsum

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

Shade —

Shade idea

The examine of how colours make folks really feel and their results on a design is named shade idea. Shade idea is used to discover the very best kinds of colours to work in several design situations—for instance, selecting a pastel scheme for a web site that should really feel gentle, or selecting crimson and yellow for {a magazine} advert that should evoke power.

Hue, tint, tone and shade

Hue is pure shade. Tint is a hue with white added. Tone is a hue with grey added. Shade is a hue with black added.


Saturation is outlined by the depth of shade.


A palette is the vary of colours utilized in a design. These are colours that work properly collectively and are sometimes aesthetically pleasing. Designers will defines a palette for a challenge to create consistency and evoke a particular feeling.

Heat and funky colours

Heat colours will be discovered on one half of the colour wheel (reds, oranges, yellows and pinks). Cool colours occupy the opposite half (blues, greens and purples).


A monochromatic shade palette makes use of one single shade.


A monochromatic shade palette primarily based on grey known as grayscale.


Colours which are adjoining to 1 one other on the colour wheel (i.e. crimson violet, crimson and crimson orange) are analogous.


Complementary colours are opposites on the colour wheel. This relationship will produce visible pressure and “shock.”


Triadic colours are three colours evenly spaced on the colour wheel. One colours dominates, the second helps, and the third accents.


Gradient is a gradual change from one shade to a different. (For instance, blue transitioning step by step to inexperienced).


Opacity is synonymous with non-transparency. The extra clear a picture, the decrease its opacity.


CMYK is a 4-color printing course of made up of cyan, magenta, yellow and key (black). CMYK colours in print won’t ever seem as vibrant as RGB colours on display screen as a result of CMYK creates shade by including shade collectively (making photos darker) whereas RGB colours come from mild.


RGB stands for crimson, inexperienced and blue, the three colours of sunshine sometimes used to show photos on a digital display screen.


Developed by Pantone Company, knowledgeable shade firm, Pantone is essentially the most broadly used, proprietary shade system for mixing colours. The system contains colours that can’t be blended in CMYK.

Net & digital —

Net web page components

Do you know: 30 Template Kolase Photoshop Terbaik | Photoshop Services

Most internet web page designs embrace mixture of those components.

image file formats


Design components repeated on the high of each web page known as a header.

Navigation & navigation bar

Navigation is a roadmap to crucial elements of a web site and needs to be visually constant throughout all pages. A navigation bar is a set of hyperlinks repeated on every web page that always contains hyperlinks to pages like “About us”, “Merchandise,” “Contact us” and “Testimonials.”

Breadcrumb path

Breadcrumbs are navigation components that usually seem close to the highest of a web page to indicate customers the part hierarchy of the present web page.

Physique textual content

Physique textual content is the primary written content material of a web page.


Any phrase or a picture generally is a hyperlink that may take customers to a different web page.


A sidebar is the left or righthand column of a web page sometimes used for both vertical navigation hyperlinks or promoting. It might additionally include web site search, subscription hyperlinks (RSS, newsletters, and so forth.) or social community buttons.


Usually situated on the high of a web page or in a sidebar, banners are ads that hyperlink to different web sites.


Design components repeated on the backside of each web page known as a footer.


HTML stands for HyperText Markup Language. That is the usual coding language for web sites that creates all the fonts, colours, graphics and hyperlinks you see on-line.

Touchdown web page

A touchdown web page is a single web page that seems in response to look engine consequence. Touchdown pages are used for lead technology.

Consumer interface (UI)

Consumer interface is the design of functions for computer systems, cellular gadgets and different gadgets to maximise their usability and the person expertise.


Primary photos that show the important features of a web site are referred to as wireframes. Designers use wireframes to indicate how a web page or web site works.

Picture file codecs —

A picture file format is a standardized strategy to encode artwork, graphics and images digitally.

99 Important Design Words You Should Know

Vector graphics

Vector graphics are small graphics that use math to show photos. They are often enlarged with out shedding high quality and are important for cross-platform designs (i.e. billboards, enterprise playing cards, and so forth.).


AI stands for Adobe Illustrator doc. It is a file format developed by Adobe Techniques to signify single-page vector designs.


EPS stands for Encapsulated Submit Script. It is a resizable file format that’s generally used for vector designs. As a result of its prime quality, it’s generally used with print components reminiscent of logos, enterprise playing cards or brochures.


A PDF is a Moveable Doc Format developed by Adobe that may be universally downloaded and considered by any pc. PDFs are most fitted for sharing previews of labor and are universally viewable.

Raster graphics

Raster graphics are composed of pixels on a grid, the place every pixel is assigned a shade worth. They’re good for assigning particular results, shade correction and manipulating images. They’re resolution-dependent, which implies that photos can’t be enlarged with out degrading their high quality.


GIF or Graphics Interchange Format is a raster file format that helps animation and transparency. GIFs can solely show as much as 256 colours, permitting for very small file sizes. (PS: It’s pronounced, “JIF” versus the widely-accepted pronunciation, “GIF,” in accordance with GIF creator, Steve Wilhite.)


Joint Photographic Consultants Group is also called JPEG, essentially the most broadly used raster file kind for web-based designs. JPEGs are compressed information that load rapidly. You’ll sometimes see them used for emails, banner adverts, on-line images, and just about anything on-line. Not like GIFs, they can not have a clear background (a white background might be added routinely).


PNG stands for Moveable Community Graphics, a web-based format that doesn’t lose high quality when compressed. PNG information have been created to enhance on the standard of GIF information.


PSD or Photoshop Doc is the uncompressed working raster picture file created by designers in Adobe Photoshop.


TIFF stands for Tagged Picture File Format, a typical format for exchanging raster photos between functions. TIFF produces the next high quality picture than a JPEG or PNG, and is broadly used amongst publishing industries and photographers. Don’t confuse it with a “tiff” or a “rift,” which occurs if you ship your designer eight rounds of revisions.

Emblem sorts —

All logos are constructed out of typography, shapes and/or photos, and sometimes match into considered one of these customary emblem sorts. Every will give your model or enterprise a unique really feel. These six sorts will also be mixed with each other to create much more distinctive logos.

Summary mark

An summary mark is a emblem that makes use of the emotive qualities of shade and kind to convey your model. As a substitute of being a recognizable picture like an apple or a hen, summary marks use shapes to signify your enterprise.


Emblem logos makes use of frames and shapes to surround the corporate or group title. Assume badges, seals and crests.


Lettermark logos characteristic a number of stylized letters (for instance, an organization’s initials) to establish the model. Well-known lettermark logos embrace these for IBM, CNN, HP and HBO.

Pictorial mark or image

Pictorial marks and symbols are non-abstract, visible icons that signify your organization title or service. You possibly can see this with the Apple emblem, the Twitter fowl and the Goal bullseye.


Mascot logos depend on a personality or model spokesperson to signify a enterprise. Well-known mascots embrace Colonel Sanders, the Kool-Help Man and Mr. Peanut.


A wordmark depends on customized typographic therapy of textual content for instance a model. Assume VISA, Google or Coca-Cola.

This text was initially written by Alex Bigman and printed in 2014. The present model has been up to date with new data and examples.

Leave a Reply


Powered by WhatsApp Chat

× How can I help you?
%d bloggers like this: