05 Jan The Client’s Design Manual
Have you ever sat down with a client and said something like this: “Well I’d love to fix that for you, but you’ve sent me a 200-pixel by 200-pixel JPEG to create your logo, and I need a vector file to do that correctly, not a raster.” Did you watch their eyes glaze over? Because mine just did, and I know what all that stuff means. Sometimes we can fall into this trap where we think everyone can speak our language, when that’s definitely not the case.
That’s why we created this guide. The next time you’ve got a client meeting and you want to prep them for the fancy words that you know, feel free to send them a link to this right here. Trust me, we’ve got your back.
Alignment
This runs into two different parts here, so let’s break it down a bit.
When you’re talking about objects in designs, this refers to the way that each one is setup in relation to the others. They may be spaced out evenly, all aligned via the left-hand side of the object, and so on. The goal is typically to create balance and order in the layout, to make it more aesthetically pleasing.
With text, it comes down to how the copy is lined up relative to each other as well, but it’s a bit more complex. Center-aligned text takes each line of type and centers them along a common vertical line. Left- and right-aligned text line up the left and right side of the sentences respectably, and justified text fills the words into what is essentially a container, making sure that each side is aligned, adjusting the tracking automatically.
Analogous Color Scheme
Pull out a color wheel. Pick three colors that are next to each other on the wheel — red, orange, and yellow, for example — and you have an analogous color scheme. This holds true for any series of three adjacent colors on the wheel.
Ascender
The x-height (which we get into later) refers to a standard height that varies from typeface to typeface. Any part of a lowercase letter that goes above the x-height — say in a lowercase h, for example — is an ascender.
Blackletter Font
Ever heard of Old English? Those fancy looking fonts like you’d see back in the olden days of knights and maidens? Sure, that’s a Gothic or Blackletter font, and it’s the same stuff they used in the Gutenberg Bible. You can tell them apart from the rest because they have very wide variances in the thickness of the strokes and serifs, and often have accents and swirls going all over.
Branding
Chances are pretty good that you’ve had to explain this concept to your clients before, and if not, get ready.
I think the best definition of Branding comes from Entrepreneur:
“Simply put, your brand is your promise to your customer. It tells them what they can expect from your products and services, and it differentiates your offering from that of your competitors. Your brand is derived from who you are, who you want to be and who people perceive you to be.”
Branding is made up of lots of different things, from business cards to packaging and everything in between, but one major aspect that designers deal with regularly is logo design. It’s not the only part of the branding picture, but it’s a big one.
Brandmark
Speaking of, a Brandmark is a part of some company’s branding. The McDonald’s arches are a brandmark. The Adobe “A” is a brandmark. Typically they don’t have the actual name of the company contained within, but it’s a representation of the company via a symbol.
CMYK
CMYK deals with the printing process, and it’s sometimes known as process color and four color. The letters themselves refer to the four colors used in this type of printing process. There’s Cyan, Magenta, Yellow and Key, with Key being black. Why Key? Because when you’re doing CMYK printing, you align the Cyan, Magenta, and Yellow plates with the key black Key plate.
Also, CMYK is subtractive. Meaning that you start with a white surface and any color that you add makes things darker.
Complementary Color Scheme
Take your color wheel out and pick two colors that are opposite each other. So red and green, purple and yellow-green, etc. Use those two colors in a design and you have a complementary color scheme.
Contrast
When looking at contrast, you’re comparing any two objects that have a wide difference between the two. Examples would be black and white, and rough and smooth. If you’re adjusting it using your image editor of choice, the contrast will pull out the extremes and make them either more vibrant or less noticeable.
Counter
Look at an O. You see that big hole in the middle? That’s called a Counter, and it’s the “enclosed or partially enclosed circular or curved negative space (white space) of some letters such as d, o, and s …” When it comes to the “A,” we’ve also heard it referred to as an “A-Hole,” but you can see how that might be a big confusing.
Copy
This stuff you’re reading right now? It’s copy.
OK, let’s go a bit deeper. Copy is the text that you put into any design, whether it’s a magazine or a simple ad; it’s the wording, phrases, and sentences themselves.
Crop
Ever take a picture and notice that there’s some dude hanging out in the background that you wish wasn’t there? Well you could do a ton of image editing magic to make him disappear, but if he’s not a main part of the focus of your image, you can crop him out. Cropping refers to cutting out the parts of an image that you don’t want or need, which will change how the image is perceived. It’s also a tool in Photoshop.
Descender
If you figured out what an ascender was, then you’ve got the descender down pat. It’s any part of a lowercase letter that goes below the baseline of the x-height. This includes the lowercase q, p, and so on.
Dingbat Font
Any character or icon that’s used as part of a font is a .. For example, you might have a Facebook logo or pencil as part of a font, or an entire font made up of those symbols. These serve all sorts of purposes, and you can often used Dingbats to fill in some of the gaps in your design. Need an arrow? Grab one from a Dingbat. It’s one of those things you should have in your arsenal as a designer.
Display Type
Display Type is another phrase used for headlines, which are the bits of big text that are supposed to grab your attention, whether it’s at the top of a webpage or a newspaper.
Dummy Text/Lorem Ipsum
I once had a client tell me that he wanted something laid out but he didn’t have the text yet. I filled it up with dummy text and he said, “This is great, but what does Lorem Ipsum mean?”
Dummy text is the copy that you use to fill a design as a placeholder until the actual copy comes in. Why would you do this? If you were laying out a page, this would help you decide what typeface to use, the size, spacing, etc. And Lorem Ipsum is the traditional dummy text of choice for most designers.
Font
Well, we’ve traveled down this road before, but let’s get into it.
Today, we think of fonts by names — Times New Roman, Comic Sans, etc. — but we don’t often associate their size with the font. Back in the day of the printing press, a font was a group of blocks that fell within certain parameters. If you had a block of Helvetica 10, then that was a font. However, Helvetica 14 was a whole different font.
When you put them into today’s terms, a font is the name of a style of lettering that a computer uses to render text. And when a client says they “don’t like the font,” they often mean the look and feel of the text.
Golden Ratio
1:1.6180. There, that was easy.
OK, this one is a bit more complicated than that. Take a square — an object with four equal sides and place it inside of a rectangle so that the remaining space is a vertical rectangle. If you were to remove the square, the remaining rectangle could also be divided into a perfect square and a rectangle, and this pattern could go on indefinitely. This is a golden rectangle, and if you do continue that pattern and graph it out, you end up with a fancy curling line that many designers consider to be aesthetically pleasing. Logos are done using the concept, and the same principles are found in famous paintings and even nature.
Gradient
Take any two colors (or one color going to transparency) and gradually blend them together, and the result is a gradient. A radial gradient is one that starts at the center of a circle and goes out from there. A linear gradient is one done across a line.
Hex
Anytime you see a color on the web, it has a Hex number. It’s six-characters long, and combines letters and numbers to represent a color. For example, #3b5998 is Facebook blue, while #00aced is Twitter blue. Typically you’ll find a # symbol in front of them.
Icon
This is any digital image that’s used to represent either a physical object or an action. For example, the floppy disk that sits up in the ribbon in Microsoft Word is an icon, as is the three-line hamburger that’s found on most apps for the menu.
Justification
When you have a lot of copy that you’re working with, organized typically in paragraphs, justification refers to the way the text is aligned so you could pull a vertical line to the left and right of the text, and it still lines up perfectly. This is done by the computer automatically adjusting the tracking of the text, and is found often in magazines and newspapers.
Kerning
Kerning is the spacing that’s found between individual letters in text. It’s not the same as tracking, because it just deals with the letters themselves, not the entire word.
Leading
First off, it’s not leading like “I’m leading a parade,” it’s leading as in “rhymes with bedding.” It’s the vertical spacing placed between lines of text in a paragraph. You can adjust it so that descenders and ascenders don’t collide, or to make them hit for a special look. The leading is measured based on the baseline of the text, which is also the starting point for the x-height.
Logotype
This is the name of a company done in such a way that it’s more than just text, it’s a design. Disney’s logo is a good example, as is Google and Ray Ban.
Monochrome Color Scheme
Any color scheme that only uses one wedge of the color wheel, and uses that color in varying darker and lighter tones.
Monospace
If you have a font in which every character occupies the same amount of space, then you have a monospaced font. Courier is a great example, and it’s why it’s often used in computer coding (I’m writing this in Courier Prime right now, as it helps me find extra spaces in my text).
Opacity
This refers to how transparent any object is. If it’s a low opacity, then it’s very transparent, and if it’s a high opacity, then it’s not very transparent at all. It’s typically measured on a scale from 100% (solid) to 0% (totally transparent).
Orphan/Widow
Any single word that sits on a single line after a paragraph. For example, if I wrote a sentence and the last word was “baby,” and “baby” caused the paragraph to push into another line, then that’s an orphan or widow (and that’s depressing to think about when referring to babies, but whatever). To fix this, you would adjust the tracking to either push more words onto the same line, or tighten it up to pull the last word into the paragraph.
Pantone
A color making system that’s used worldwide as a standard for selecting colors. They have a reference system that’s integrated into all kinds of software that insures that colors match no matter where you find them. We like them a lot around here.
PDF stands for Portable Document Format, and it’s a proprietary format that Adobe created. It’s so universal at this point that it’s used to send to printers for high-resolution designs, as well as in between offices for documents.
Pica
This is a typographic term that refers to the space measurements in a page layout. You can get approximately six picas in an inch, and 12 points in a pica.
Pixel
This is a point in a raster image that is one of many. Once combined, they create one larger raster image. It’s also used as a unit of measurement on the web, determining the width and height of certain objects (2000 pixels by 1400 pixels, for example).
Point
This is another typographic term, and it also works with leading, type size, and more. Form a measurement perspective, there are 12 points in a pica, and around 70 points in an inch.
Raster Graphics
A raster image is one made of individual pixels that all have different color values. You work with these in Photoshop or similar programs, and enlarging them or shrinking them will affect the quality of the image overall.
Resolution
This is the quality of the image that you’re working with, and the resulting amount of detail. Most print shops demand that images are at least 300 DPI resolution (DPI meaning dots per inch), or else they can look grainy. The lower the resolution, the blurrier and more pixelated an image will become.
RGB
What computers use for most screen images. It stands for Red, Green, and Blue, and like CMYK, it’s a combination of these tones that creates every other image.
RGB is additive, in that you start with a black color, and as you add more colors you end up with white.
Sans Serif Font
Any font that does not have the decorative strokes (known as serifs) at the ends or tops of letters. Examples would be Helvetica, Futura, and our favorite, Comic Sans.
Saturation
This is how intense the color is in a particular image. If it his very saturated, the colors are vivid and hit you in the face, whereas a low-saturation color is more light and subtle.
Script Font
These are fonts that are based on handwriting that have a flowing and fluid appearance. Examples include Lobster, Grand Hotel, and Alex Brush.
Serif Font
Any font that has decorative strokes (known as serifs) at the ends or tops of letters. Examples would be Times New Roman and Courier.
Slab Serif Font
This is a traditional Serif font that looks more geometric than a typical Serif model, and is usually bolder. Aleo, Rockwell, and Museo Slab are all examples.
Stock Photo
Any photo that you can purchase from an agency that other people can do the same. It’s a good way to purchase an image that would otherwise be difficult to get yourself, and they’re quite popular here at Creative Market.
Tracking
Tracking is similar to kerning, but not exactly. It’s the spacing between letters in a word. So you could adjust the kerning if you wanted the “T” and “r” to be spaced tighter or wider apart in the word “Train,” or adjust the tracking to space all of the letters apart equally.
Typeface
Deja vu, am I right? When the printing press came to be, each letter was hand chosen and placed onto a board. Put enough of those characters together, and you had a sentence, then a paragraph, and so on. Each one of those characters was a metal block, and it had a relief of the character on its face. That’s the type face.
When it comes to text today, particularly stuff that’s rendered on the computer, most clients will refer to it as a font, not a typeface. But it’s pretty much interchangeable, at least as far as the general public is concerned. But now you know better, right?
Typography
The art of arranging type so that it looks aesthetically pleasing on the page or the screen. It encompasses tracking, leading, kerning, and more.
Vector
An image that’s made up of curves and lines and is scalable without losing any quality. It’s what you use for logo design.
White Space
This is any area on a web page or a physical page that’s not filled with any copy or images. It’s also known as negative space.
X-Height
When you look at a typeface, you’ll notice that the lowercase letters typically line up with one another. That height — the distance between the top and bottom of a standard lowercase letter without ascenders or descenders — is known as the x-height, and it gets its name from the height of a lowercase x in a typeface. Makes sense, right?
Story via Creative Market.