\u201cWhat the heck does visual hierarchy mean, anyway?!\u201d<\/p>\n
Don\u2019t worry, we\u2019ll get into that \u2014 and many other graphic design words \u2014 below.<\/p>\n
By learning these design terms, you\u2019ll be on the right path to designing your own logo, marketing materials, website, and much more.<\/p>\n
1. Typography<\/h2>\n
Typography is the arrangement of type, ideally in a visually appealing and legible format. It\u2019s one of the most fundamental graphic design terms and is a broader descriptor for typographic elements like typefaces, fonts, hierarchy, and more.<\/p>\n
Learning about typography is a great place to start your design journey, as it plays a vital role in any design it\u2019s included in (and that\u2019s most!).<\/p>\n
![\"typography\"](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/18120911\/menu-typography-pairing-600x342.jpg\")
<\/p>\n
And because many people confuse the two, or think they\u2019re the same thing, here\u2019s what the terms typeface and font actually mean:<\/p>\n
- \n
- Typeface:<\/strong> a set of one or more fonts that are put in a single category, due to their shared common design features. Example: Avenir.<\/li>\n
- Font:<\/strong> a specific typeface of a certain size and style. Fonts within a shared typeface will often differ in weight, slant, italicization, and more. Example: Avenir LT Std 35 Light.<\/li>\n<\/ul>\n
2. Kerning, Leading, and Tracking<\/h2>\n
These are three graphic design terms that all refer to the space between type.<\/p>\n
- \n
- Kerning is the spacing between two specific characters in your type<\/li>\n
- Leading is the spacing between two lines of copy<\/li>\n
- Tracking is the space between all letters<\/li>\n<\/ol>\n
![\"kerning\"](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/18120905\/Kearning-leading-and-tracking-600x359.jpg\")
Image source: MGS<\/p><\/div>\n
All of these elements play a big role in the legibility of your type, and can also be used to convey different emotions.<\/p>\n
For example, text that has widespread tracking and leading can evoke feelings of calmness, whereas tight kerning and leading may cause feelings of tension.<\/p>\n
Tip: Don\u2019t make your spacing too tight \u2014 it can make copy hard to read! <\/div>\n![\"kerning,](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/18120906\/leading-and-tracking-example-600x335.jpg\")
<\/p>\nWhen using tools like Photoshop and Illustrator to play around with the spacing between your type, make sure to keep the user experience in mind! It\u2019s better to have text that can be easily read than text that\u2019s overly \u201cstylish.\u201d<\/p>\n
3. Serif Typeface<\/h2>\n
Serif typefaces<\/a> contain small decorative strokes (also referred to as \u201cfeet\u201d), which are at end of each line in the letters. Fonts of this style are often seen as classic, fancy, or professional. Many newspapers use serif typefaces, and they\u2019re also popular in books, brochures, and fine print.<\/p>\n
![\"serif](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/07111412\/serif-600x300.png\")
<\/p>\nSome examples of this font type are Baskerville, Caslon, Didot, Bookman Old Style, and Times New Roman.<\/p>\n
4. Sans-Serif Typeface<\/h2>\n
Sans-serif typefaces<\/a> are the opposite of serif fonts: they contain no decorative strokes at the end of each line in the letters, making them appear more modern and simple.<\/p>\n
They\u2019re super readable in both large and fine print, which makes them ideal for use on any digital asset, from websites to ebooks.<\/p>\n
![\"avenir](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/07111404\/sansserif1-600x300.png\")
<\/p>\nSome examples of this font type are Avenir, Futura, Circular, Lucida Sans, and Helvetica.<\/p>\n
5. Slab Typeface<\/h2>\n
Slab typefaces are a type of serif that has a thicker, more bold appearance. Because of this, they\u2019re often only used as titles or headlines (or as a company name in a logo), and are rarely used as body text.<\/p>\n
In the example below, only the company name is in a slab typeface, while the slogan is sans-serif, giving clear hierarchy.<\/p>\n
![\"arvo](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/07111413\/slab-600x300.png\")
<\/p>\nSome examples of this font type are Clarendon, Black Slabbath, Sentinel, Rockwell, and Arvo.<\/p>\n
6. Script Typeface<\/h2>\n
Script typefaces<\/a> mimic handwriting, with decorative curls and twists. This style can add romanticism or elegance to a design. Because they can be harder to read at different sizes, script typefaces work best in headings or larger applications.<\/p>\n
![\"script](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/07111330\/script-600x300.png\")
<\/p>\nSome examples of this font type are Hickory Jack, Noelan, Beautiful Bloom, Dancing Script, and Sweet Mia.<\/p>\n
7. Visual Hierarchy<\/h2>\n
Visual hierarchy<\/a> is the arrangement of design elements to guide a viewer and help them decide what information is most important. It\u2019s achieved through the use of fonts, colors, images, and sizing \u2014 such as a brighter, bigger, and bolder company name, with a lighter and smaller slogan underneath.<\/p>\n
This is one of the most critical graphic design terms to understand, as it affects the overall user experience.<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"\"](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200514163625\/TerraCustomPlanters-600x600.png\")
\n\t\t\t<\/dt>\n\t\t\t\t - \n\t\t\t\tLogo made in Looka\n\t\t\t\t<\/dd><\/dl>
- \n\t\t\t
- \n\t\t\t\t
![\"logo](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211145952\/42754168_padded_logo-600x600.png\")
\n\t\t\t<\/dt>\n\t\t\t\t - \n\t\t\t\tLogo made in Looka\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\nAs you can see above, without the correct hierarchy, the logo on the right becomes unclear. If Terra is the name of the company, then it should be bigger, bolder, and draw the most attention.<\/p>\n
Help your viewers out by using the correct hierarchy, and guiding their eyes to your company name or main message.<\/p>\n
8. Orphan and Widow<\/h2>\n
Your eye might start to twitch when you see a text widow or orphan, without even knowing why. Orphans and widows are those lonely words left hanging by themselves at the top or bottom of a block of text. You’ll likely hear these graphic design terms come up around printing designs.<\/span><\/p>\n
- \n
- Orphan:<\/strong> A is a single word (or short line) that is separated from the rest of the text. Often seen at the end of a paragraph, or the beginning of a column or a page.<\/li>\n
- Widow:<\/strong> A line at the beginning or end of a paragraph that is separated from the rest of the text.<\/li>\n<\/ul>\n
![\"orphan](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20220927111922\/orphanwidoworphan-600x187.png\")
Image source: type-ed.com<\/p><\/div>\n
9. Branding and Brand Identity<\/h2>\n
A brand is the overall essence of a company. It\u2019s what makes your business unique, and stand out (or blend in) from your competitors. You can try your best to communicate exactly what you think your brand is, but in actuality, your brand is what your audience and customers say it is!<\/p>\n
\u201cBrand isn\u2019t what you say it is. It\u2019s what they (your audience) says it is.\u201d<\/p>\n– Marty Neumeier <\/div>\n
![\"brand](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2019\/02\/20164723\/how-to-build-a-brand-cosmic-coffee-600x300.png\")
<\/p>\nOn the other hand, branding is what you actively present to the world. It\u2019s your logo, tone, font choices, colors, messaging, ads, affiliations, and so much more! All of these elements are chosen to communicate in a specific way, and to target a specific demographic.<\/p>\n
So, what can you do to help shape a brand identity<\/a> through graphic design? Understand your customer\/audience, and craft your visuals to appeal directly to them.<\/p>\n
![\"Vrai](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200812135709\/Screen-Shot-2020-08-12-at-1.56.27-PM-600x280.png\")
<\/p>\nFor example, if you\u2019re a jewelry maker focusing on feminine bracelets and rings, then your brand should reflect this!<\/p>\n
Once a company solidifies its brand, they\u2019ll often create custom brand guidelines<\/a> that help to keep their messaging, tone, and visuals consistent across all touchpoints.<\/p>\n
10. Logotype<\/h2>\n
A logotype is a logo that uses only the brand’s name. Also known as a “wordmark” a logotype is a great option for brands that are looking for name recognition. Logotypes provide more space for information about a company, and can often allow for room a slogan<\/a>.<\/p>\n
![\"google](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200430133806\/GOOGLE-600x300.jpg\")
<\/p>\n11. Brandmark<\/h2>\n
Also known as the “logomark” this design term is actually the opposite of the one above. Brandmarks are logos conveyed exclusively through a symbol, emblem, or some kind of imagery. Brands typically transition their logos to brandmarks once they’ve gained recognition by the masses and can afford to remove their company name from their logo.<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"Retail](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/05\/15161848\/12100.png\")
\n\t\t\t<\/dt><\/dl> - \n\t\t\t\t
![\"\"](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813181130\/rsz_nike-swoosh-wikipedia.jpg\")
\n\t\t\t<\/dt><\/dl>
\n\t\t<\/div>\n\nNike evolved their logo to the “swoosh” symbol in 1995 after decades of building up brand recognition. As a small business, if you like the look of a brandmark, we recommend checking out emblem logos<\/a> as an option.<\/p>\n
12. Contrast<\/h2>\n
Contrast is the level of difference between two opposing elements. This commonly refers to the juxtaposition between dark vs. light in a photograph or image, but can also account for elements like rough vs. smooth, or thin vs. thick.<\/p>\n
The more contrast, the more these elements become different. The less contrast there is, the more they blend together.<\/p>\n
![\"contrast](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/18163908\/AdobeStock_144790320-600x400.jpeg\")
<\/p>\nTip: Think about this carefully when you\u2019re creating a design. Contrast can be a great way to pull attention towards a particular element or even word, but can also deter people from the overall design when used too heavily. <\/div>\n13. Negative Space<\/h2>\n
Negative space<\/a> (also called \u201cwhite space\u201d) refers to any area of design that isn\u2019t filled with visual content. The space doesn\u2019t have to be the color white necessarily, but it\u2019s the absence of design.<\/p>\n
Designers sometimes use negative space to convey hidden messages or meanings or to tease the viewer into seeing various shapes, symbols, and letters in the white space used.<\/p>\n
![\"Fedex](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200218152633\/fedex-600x435.jpg\")
<\/p>\nCheck out the famous FedEx logo below, and how it uses negative space to form an arrow between the “E” and the “x”.<\/p>\n
14. Palette<\/h2>\n
A color palette is a curated selection of colors that complement each other. Color palettes can be comprised of 3-6 colors, and range from <\/span>neon<\/span><\/a> to <\/span>moody and fall-inspired.<\/span><\/a><\/p>\n
![\"psychadelic](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20220810125545\/psychadelic-blue-and-pink-neon-colors-600x297.jpg\")
<\/p>\nIn design, color palettes are used to represent different elements of your brand.\u00a0<\/span><\/p>\n
Read here to learn how to select your <\/span>brand color palette<\/span><\/a>! <\/div><\/span><\/p>\n15. Hex<\/h2>\n
Hex codes are commonly used in design vocabulary. These codes (seen above) are six-digit codes used to display a color, often used in HTML and CSS.<\/span><\/p>\n
16. Pantone<\/h2>\n
![\"Pantone](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20220927112612\/Screen-Shot-2022-09-27-at-11.25.57-AM-600x412.png\")
Image source: Pantone.com<\/p><\/div>\n
Developed by the Pantone Corporation, the PMS (Pantone Matching System) is a standardized color system. You’ll hear the design term “Pantone”\u00a0 used in multiple industries beyond graphic design- including fashion and interior design. Overall, it makes it easy for people to find and recreate the same colors.\u00a0<\/span><\/p>\n
17. Monochrome<\/h2>\n
Monochrome is a graphic design term for a color scheme built out of only one color. For example, if you wanted to create a monochromatic image with the color green, you could use any shade of green, including dark and light tones, but nothing outside of this range.<\/p>\n
![\"monochrome](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/18120912\/monochrome-color-pallate-600x314.jpg\")
<\/p>\n<\/p>\n
When would you use this scheme? Whenever you want to evoke unity in a visual. Monochrome color palettes are actually a common practice in interior decorating!<\/p>\n
18. Transparent Background<\/h2>\n
Transparent background refers to when graphics or logos have no background color \u2014 or really, no background at all.
![\"transparent](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200812140646\/Screen-Shot-2020-08-12-at-2.06.29-PM-600x131.png\")
<\/p>\nThese designs are often saved as a PNG file and can be placed over top of videos, ads, photos, and more \u2014 take this example of a logo being used on a black hat. (Note: When you purchase a Looka Premium or Enterprise package<\/a>, you get versions of your logo on a transparent background).<\/p>\n
19. Clear Space\/Exclusion Zone<\/h2>\n
Clear space (or the exclusion zone) refers to the specific amount of space (or padding) that a logo must have on all sides. No matter where it’s used, there must be this set amount of space around it.<\/p>\n
![\"Brand](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/19095305\/img_bg-rhino-007%401x-600x400.png\")
<\/p>\nWhy does this space exist? To ensure that a logo always looks great, and is clearly visible and not crowded by other elements. It’s usually specified in a brand guidelines document.<\/p>\n
20. Gradient<\/h2>\n
A gradient is a gradual change in color, starting at one tone and morphing into another. You can also use a gradient that fades from one color into transparent, which is an effect often used as overlays on images and designs.<\/p>\n
![\"example](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20190718163447\/How-To-Design-a-Gradient-Logo-01-600x358.png\")
<\/p>\nThere are two common types of gradients:<\/p>\n
- \n
- Linear gradients, where each color sits on opposite sides of the frame<\/li>\n
- Radial gradients, where one color sits in the middle, and another at the edge<\/li>\n<\/ul>\n
The Instagram logo redesign<\/a> is a famous example of a gradient in logo design<\/a>. Though it contains many colors, each color blends into the next gradually, giving this logo an almost retro\/psychedelic feel.<\/p>\n
![\"Instagram](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/12\/18120902\/Instagram-gradient-logos-600x300.png\")
<\/p>\nThey then used this gradient design and color scheme and applied it across their other app designs: Instagram TV, Boomerang, Hyperlapse, and Layout.<\/p>\n
21. Foil<\/h2>\n
Foil is the metallic look you’ll sometimes see in logos and business cards\u2014gold foil, and silver foil being the most common. The use of foil in logo design is a bold choice that creates a dynamic and luxurious effect.<\/p>\n
- \n\t\t\t
- \n\t\t\t\t
![\"Gold](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/08\/30153828\/gold-0031-300x227.png\")
\n\t\t\t<\/dt>\n\t\t\t\t - \n\t\t\t\tLogo made in Looka\n\t\t\t\t<\/dd><\/dl>
- \n\t\t\t
- \n\t\t\t\t
![\"Silver](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/2018\/08\/30155251\/silver-001-300x227.png\")
\n\t\t\t<\/dt>\n\t\t\t\t - \n\t\t\t\tLogo made in Looka\n\t\t\t\t<\/dd><\/dl>
\n\t\t<\/div>\n\n22. Opacity<\/h2>\n
Opacity is a regularly used design word that describes the level of transparency in a design. You can adjust the opacity to fade, blend, or brighten an element of your design!<\/p>\n
![\"opacity](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200812162604\/opacity-600x199.jpg\")
<\/p>\n23. Container<\/h2>\n
- \n\t\t\t\t
- \n\t\t\t\t
- \n\t\t\t
- Widow:<\/strong> A line at the beginning or end of a paragraph that is separated from the rest of the text.<\/li>\n<\/ul>\n
- Orphan:<\/strong> A is a single word (or short line) that is separated from the rest of the text. Often seen at the end of a paragraph, or the beginning of a column or a page.<\/li>\n
- \n\t\t\t\t
- \n\t\t\t\t
- Font:<\/strong> a specific typeface of a certain size and style. Fonts within a shared typeface will often differ in weight, slant, italicization, and more. Example: Avenir LT Std 35 Light.<\/li>\n<\/ul>\n
![\"logo](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200812162531\/Containers-600x203.jpg\")
<\/p>\n![\"aspect](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813121805\/aspect-ratio-600x300.jpg\")
![\"\"](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813162339\/45998542_padded_logo-600x600.png\"){kind=logo}
\n\t\t\t<\/dt><\/dl>![\"\"](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813162351\/45998542_padded_logo-1-600x600.png\"){kind=logo}
\n\t\t\t<\/dt><\/dl>![\"the](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813130042\/rule-of-thirds-600x416.jpg\")
<\/p>\n![\"\"](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813201511\/logo-600x314.png\"){kind=logo}
\n\t\t\t<\/dt><\/dl>![\"\"](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813201111\/coca-cola-logo-low-ppi.jpg\"){kind=logo}
\n\t\t\t<\/dt><\/dl>![\"grid](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813230652\/luke-van-zyl-Fs1hfkNOGsQ-unsplash-min-600x338.jpg\")
<\/p>\n![\"bleed](\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200813230257\/AdobeStock_162113675-min-600x365.jpeg\")
<\/p>\n