Brush Up on Your Graphic Design Terminology
Graphic design is a field that is always evolving, and with that evolution comes new terminology. For the uninitiated, graphic design jargon can be confusing and overwhelming. However, it is important to familiarize yourself with the language of graphic design, as it can help you to better understand the creative process (and make you sound smart!).
Graphic and Web Design Terminology Glossary
Whether you’re creating print materials or designing websites—or having someone design them for you—read below for some of the most commonly used graphic design jargon and web design terminology, and what they mean:
Accessibility is the degree to which a website can be used by people with different abilities. This includes people with visual impairments, cognitive impairments, hearing impairments, and motor impairments. Accessibility is an important consideration when designing a website, as it can make the site more user-friendly for everyone.
Alignment refers to the way in which elements on a page are arranged. There are a number of different alignment options, each with its own benefits and drawbacks. In general, proper alignment can make a website or document look more organized and professional.
Animation is the process of creating moving images. This can be done using a variety of techniques, including traditional animation, stop-motion animation, and computer-generated animation. Animation can be used to add interest or simply make a website or document more engaging.
Ascenders are the parts of letters that rise above the x-height of the text. They are generally taller than the body of the letter and found on lowercase b, d, and k, for example.
Aspect ratio is the proportional relationship between the width and height of an image or screen. It is often expressed as a two-dimensional ratio, such as 4:3 or 16:9. When designing graphics or websites, it is important to be aware of the aspect ratio of the images you are using, as they may not be compatible with all screen sizes.
Balance is the distribution of visual weight within a design. This can be achieved through the use of symmetry, asymmetry, or radial balance. Balance is an important consideration in graphic design, as it can help to create a sense of visual stability and order.
Baseline is the imaginary line on which text sits. It is important to be aware of the baseline when designing documents or websites, as improper alignment can cause text to look messy or sloppy.
Body copy is the main text of a document or website. It is generally set in a smaller font size than headings or other display text, and it is used to provide information or instructions to the reader.
Brand identity is the visual representation of a company or product. It can include a logo, tagline, typeface, and color palette, among other elements. Brand identity is important for companies and products, as it can help to create a consistent and recognizable image across all communications.
Related Content: The 6 Stages of Web Design: What You Need to Know Before Starting a Website Design Project
Breadcrumbs are a navigation aid that allows users to track their location within a website. They are generally displayed as a series of links, typically at the top of the page, which represent the user’s path from the home page to the current page.
Cap height is the distance from the baseline to the top of a letter’s cap, or uppermost part. Cap height is just as important to designers and developers of documents or websites, as fonts with taller cap height to x height ratios will be slightly harder to read on screen.
A call to action (CTA) is an element of a website or document that encourages the user to take a specific action, such as making a purchase or signing up for a mailing list. CTAs are important for website design, as they can help to increase conversion rates and encourage user engagement.
Center-aligned refers to when lines of text have a consistent middle line, leaving a rough rag (rather than a straight edge) on both ends of a paragraph. This can also refer to elements that align to the middle of a webpage, with equal distance to each edge.
Character refers to the individual letters that make up a word or phrase. Good graphic designers pay attention to the character widths and spacings, as they can affect the overall appearance of text.
CMYK is a color mode that is used in printing. It stands for Cyan, Magenta, Yellow, and Key (black), and it refers to the four ink colors that are used in traditional printing.
Contrast is the difference in luminance or color between two elements in a design. Contrast is critical in graphic design, as it can help to create a more visually appealing and readable layout.
Counter, a typography term, refers to the space that is either fully or partially enclosed areas created by white space in letters or symbols. For example, the “o” shape that is formed in the white space of a “q” is the counter. Fonts with larger counters are easier to read on screen.
Descenders are the portions of letters that extend below the baseline. Examples include lowercase j, p, and q.
DPI stands for “dots per inch.” As a measurement unit, it refers to the number of dots per inch that a printer will print out on a piece of paper.
Font weight is the thickness or heaviness of a typeface. It can be used to create visual contrast between text and other elements in a design, or to make text appear more prominent. There are a variety of different font weights available, and it is important for designers to use them appropriately for the desired effect.
Gradient is a gradual transition between two or more colors. It can be used to create a sense of depth or to add visual interest to a design.
A grid is a layout tool that helps to organize content on a page. It can be used to create a visually attractive and balanced layout, and it can help to improve the readability of text. Grids are important for website design as they are key to establishing the user path and hierarchy of the page and aiding in development.
Hex colors are a system of six-digit color codes that are used in web design and other digital media. The hex code for a particular color is made up of three pairs of hexadecimal numbers, which represent the levels of red, green, and blue intensity.
An icon is a small graphic that is used to represent a specific function or action. Icons are often used in website design and other digital media, as they can help to improve the usability and readability of text.
JPEG is a common file format for web graphics. JPEGs are lossy, meaning they compress the image data in order to reduce file size. This can result in some degradation of quality, but for many applications, the tradeoff is worth it.
Justified text is text that is aligned evenly on both the left and right sides of a page or screen. This can be used to create a more uniform and visually pleasing layout, but it can also leave you with too much or too little space between words.
Kerning is the spacing between characters in a typeface. It is an essential aspect of typography, as it can help to improve the readability of text.
Leading is the space between lines of text in a document or layout. Just as with kerning, proper leading is critical for typography and graphic design, so the reader can easily move their eyes through the text.
Left-aligned text is when each line of text meets at the same position on the left side, leaving a straight edge with a ragged edge on the right. This is the most common way to see text in English, as it is read from left to right.
A ligature is a type of character that is formed by two or more letters that are joined together. Ligatures are used in typography to enhance the style, improve the appearance and/or enhance the readability of text.
Lorem ipsum is a dummy text that is commonly used in the graphic design and printing industries. It is a Latin text that is meant to be used as a filler, and it is typically used to test the layout of a document or to demonstrate typography.
A mock-up is a type of prototype that is used in graphic design and other related fields. It is a simplified version of the final product, and it is used to help visualize the end result and test its feasibility. In website design, a mock-up often refers to a “first version” of a webpage and is designed to gauge interest and inform future design decisions.
Related Content: FAQ about Oneupweb’s Graphic Design and Website Redesign Services
A moodboard is a collection of images, textures, and other design elements that are used to create a specific aesthetic or mood. It can be used to help designers visualize the overall look and feel of a project, and it can be helpful for making decisions about color, layout, and other design elements.
A palette is a collection of colors that are used in a particular design project. Designers create a palette early on in the design process, as doing so creates consistency across the design.
The Pantone Matching System (PMS) is a color-matching system that is used in graphic design, printing, and other related fields. It is a standardized color-matching system that uses specific Pantone colors to match colors accurately. This can be helpful for designers who need to ensure that their colors are consistent across different printing mediums.
PNG is a file format that is commonly used for web graphics. PNG files are lossless, meaning they retain all of the detail from the original image. They are also able to have a transparent background.
Point size is a term that is used in graphic design to describe the size of a typeface.
PPI stands for “pixels per inch.” It is a unit of measurement that is used to describe the resolution of an image.
Raster images are made up of pixels, unlike vector images, which consist of shapes and lines. Raster images can be edited to a certain extent, but they cannot be scaled up without losing quality.
Repetition is the use of a design element multiple times within a single document or layout. It can be used to create a unified look and feel, and it can help to reinforce the overall message or theme of the project.
Resolution is the number of pixels that are contained in an image. It is usually measured in PPI (pixels per inch), and it determines the level of detail that is displayed in the image. Higher resolutions will result in sharper images, while lower resolutions will produce images with less detail.
Responsive website design is a type of web design that allows a website to automatically adjust its layout and formatting to fit the device that is being used to view it. This can be done by using media queries, which are CSS rules that are applied based on the width and height of the device’s screen.
RGB is a color model, and the acronym stands for “red, green, blue.” RGB colors are created by combining red, green, and blue light, and they are displayed onscreen using various combinations of these colors.
An RSS feed is a type of XML file that is used to syndicate content from a website. It can be used to track updates to a website, and it can be used by readers to subscribe to the updates. This can be helpful for designers who want to make sure that their readers are kept up to date on the latest content from their site.
Right-aligned is a term for when each line of text meets at the same position on the right side, leaving a straight edge with a ragged edge on the left.
Sans serif is a typeface that does not have any serifs, or decorative flourishes, at the end of its letters. Sans serif typefaces are often used for body text, as they are easy to read on screen and typically have a clean and modern look.
Saturation is a term that is used in graphic design to describe the intensity of a color. It can be used to create a more vibrant and eye-catching look, or it can be used to help convey a specific mood or feeling.
Scale in graphic design is the relative size of one element to another. It can be used to create a more balanced and harmonious look, or it can be used to emphasize certain elements over others.
Serifs are the small flourishes that are found at the end of some letters. Serif typefaces have a more traditional look and feel, while sans serif typefaces are more modern and minimalist. The serifs can help lead the eye to the next letter, and they can aid in reading in printed formats.
A sitemap is a diagram of a website’s structure. It can be used to help designers plan out the layout of a website, and it can also be used to help visitors understand the organization of the site. A sitemap can be in the form of a text document or a graphical diagram.
A stock photo is a photograph that is available for purchase from a stock photography website. These photos are typically licensed for use in a variety of different contexts, and many popular sites offer them royalty-free. This means that the buyer does not need to pay any additional fees to use the image.
Stroke is a term that is used in graphic design to describe the width of a line.
A style guide is a document or set of guidelines that dictate the appearance and formatting of a website or brand. It can include things such as the colors that are to be used, the fonts that are allowed, and the general layout of the project. A style guide can be helpful for designers in ensuring that their projects have a consistent look and feel.
Typography is the art and science of arranging typefaces and typeforms in order to make language visible and more easily accessible.
User experience, or UX, is the term used to describe the overall experience that a person has when using a product or service. It includes things such as the ease of use, the usability of the interface, and how satisfying the overall experience is. Good UX is essential for creating a positive impression of a product or service, and it can be the difference between a user becoming a customer or leaving a website.
Vector is a type of graphic that uses mathematical equations, as well as lines and curves with fixed points, to create the final image. Vector graphics can be scaled to any size without losing quality, unlike raster images that use pixels, making them ideal for logos and other types of graphics that need to be reproduced at various sizes.
Visual hierarchy is the arrangement of elements on a page in order to create a sense of importance. It can be used to draw attention to specific elements, or to help the user navigate the page. In website design, it is important to use visual hierarchy to create a well-organized and professional looking layout that communicates the user’s desired information.
A web font is a font that is specifically designed for use on the web. They are typically hosted on a web font service, such as Google Fonts, and they can be used on any website that uses the service. Web fonts are a great way to add variety and personality to a website, and they are also a great way to ensure that text is legible on all devices.
White space is the area of a page that is left blank. It can be used to create a more open and airy look, or it can be used to emphasize certain elements. In web design, white space is critical to building the user path and creating a good UX.
A wireframe is a low-fidelity representation of a website or other design project. It is used to help designers plan out the layout of a website, and it can be helpful for getting a rough idea of how the site will look. Wireframes are typically created in black and white, and they do not include any graphics or text.
X-height is the height of the lowercase letter x. It is used as a measure of the size of a typeface, and it can be helpful for determining how readable a font will be.
Looking for a Web Design Partner to Make Sense of It All?
Look no further than Oneupweb’s team of seasoned pros. We’ve provided web design and graphic design services for hundreds of companies across the United States and Canada. Drop us a note today!
