Sure, a plain peanut butter sandwich is ok, but it’s a little dry. A plain jelly sandwich is also edible, but it’s lacking something. This is exactly how it is when you have a great design with uninspiring or meaningless copy, or great copy with a visually unreadable design. You need the two to be equally fabulous if you really want to have a winning combo that keeps people coming back for more. That’s why it’s so important for copywriters and designers to work together. We work in a content-focused industry, so we place high value on this symbiotic relationship.
Copy inspires design, design inspires copy
It’s tremendously helpful for a writer to see a design before writing. It gives them a sense of how much space they have to work with. They can also see how many titles, call outs, headings and other elements the design has that will need words. It’s also great to see a design because it establishes the tone for the copy. A more playful design will call for less formal copy and a more corporate design will need something more conservative. For example, it would be really weird if a clinical website had lots of whimsical copy, wouldn’t it? That would be like having a clown give you a dental exam. That “dentist” would lose all credibility with you and you’d be looking for a new one realquick.
Especially if you’re afraid of clowns.
But just as the design can inspire the writing, the writing can also inspire the design in the same ways. It’s helpful for the designer to see how much copy there is and how many titles, call outs and headings they may need to make space for. The copy can also help the designer establish the tone and the audience so that the design works in harmony with the copy.
Writers and designers working together
Clearly it’s kind of a chicken or the egg situation when it comes to who inspires whom. Who goes first? Does the designer come up with a design first or does the writer draft some copy? That’s always the question, so what happens quite often is the designers and writers sit and work together. Lots of times there’s a wireframe and a sitemap (click here to learn more about wireframes and sitemaps) that they both work from at the beginning that helps them shape their own individual piece of the messaging and tone.
It sounds odd to think of a designer as someone with a message to convey because after all, don’t they just work with colors and layout and stuff? If you remember back to some of our past blog posts, you know that the colors, navigation and layout have their own messages to convey and that they’re just as important as the copy. Design communicates volumes in its own right.
Designers and writers need time to bond
If you happen to be putting together a project and you hire a designer who does not work with a writer in-house, make sure they have a chance to meet one another or at least have a phone call so that they can have a chat and strategize together. Otherwise, there’s a chance you’re going to wind up with a plain peanut butter or plain jelly sandwich that will leave readers feeling empty and unsatisfied.
Put the two together, however, and you have a winning combination!
This is the last edition of our three part series on the anatomy of a website! By now you know what a sitemap and a wireframe are and you know all about the different kinds of navigation. Today we’re going to wrap it all up by going over a few of the other important elements of a website that you already know about, but maybe haven’t thought of in quite the way that we do.
You still need those exam gloves, so go get ‘em!
All the stuff on a website would be awfully disorganized without some sort of container to help us keep the contents of the pages organized. It’s the same thing with that shameful drawer or closet in your house that you’d be mortified if anyone saw (you know you have at least one of those spots!). To make it nice and neat, all that drawer or closet needs are a few nice containers to keep everything in its place. It’s the same thing with a webpage. Without containers, the elements of the page would drift around without boundaries and be a gigantic mess. That’s why you see boxes and lines separating the different elements of a webpage.
Located at the bottom of the page, a footer contains contact information, links to main sections of the website, social media links, and other important stuff like that. The footer usually doesn’t change when a user navigates to a different page so that the information contained in the footer is always available. Footers are helpful not only because they list important info, but they also let visitors know they’ve reached the bottom of the page.
Any area of a website where there’s no text or graphics is called whitespace. While it’s very tempting to fill every little piece of a webpage with stuff, there’s great value in whitespace. It helps a design feel light and breathable, it helps guide the user’s eye around the page, and it helps to create balance and unity. Without judicious use of whitespace, a webpage would look chaotic and crazy. It would confuse and overwhelm a visitor, making them uncomfortable and sending them elsewhere.
It’s important that your website be consistent with your brand. While it may be cool to think of your website as a chance to really go nutsy and experiment with a whole new look, it’s probably not in your best interest. Your logo and the colors you choose should match the rest of your collateral like your business card, letterhead, and so on. You want your customers to recognize your website instantly and know they’re in the right place. When we talk about making it consistent with your brand, this is what we mean. We even think about the fonts we use and the tone of the copy. It’s got to suit you right down to the tiniest of details! This is not to say that you can’t be fun or jazzy on your website, you just have to be recognizable as you.
Content refers to all the things on your webpage like the text and the images. Content should be well organized, concise, and easy for the eye to scan for information. Most of your visitors have a short attention span, so you need your content to be as tight as possible. It’s very tempting to try to stuff as much as you can onto your site and include all sorts of pictures and snippets of info, but, in general, less is more.
There are many, many other things we could tell you about with regard to the anatomy of a website, but these are things that you’ll hear about most often when we talk to you about your project.
Thanks for letting us geek out and share our knowledge with you!
After our discussion of sitemaps and wireframes from last week, we thought we should move on to talk about some of the more fun parts of a website’s anatomy and talk about navigation. Web users are very impatient, so navigation is incredibly important in helping them find what they’re looking for as quickly and easily as possible. It can actually make or break the success of your website, so it’s certainly a very big deal and something you should pay close attention to.
Still got your dissection kit from last week?
You’re gonna need it!
The term “website navigation” refers to the way users get around your website. It’s kind of like using street signs to find an address. Without them, you’d be pretty lost, wouldn’t you? With that in mind, you can see how it’s incredibly important that the navigation of a website is very easy to find and easy to use.
The first thing we need to think about is placement. Since a navigation bar doesn’t take up a huge amount of space, it can get lost in a sea of other content you have on your site. That’s why it should be a very prominent and consistent element that appears in the same place at the top of every page. It should also have the same style, type and colors so that users know where to go to get around no matter what page they’re on. There are two common kinds of navigation: horizontal and vertical.
The kind of navigation you see most often is arranged horizontally across the very top of a page. It’s a list of all the pages on the website that a visitor may want to see.
Another common arrangement is vertical text navigation. You see this most often on the left side of a website. Vertical navigation can be used in conjunction with horizontal navigation and it’s often used for sub-sections of a larger one found in the bar at the top of the page.
You know how when you click or hover over a button in the navigation bar, a menu comes down and offers you a look at what other sections of the site can be found under that heading? That’s a drop-down menu. They break down top-level buttons into smaller sections. Sometimes they even have sub-menus that show users even more choices as they look through the drop-down menu.
So, let’s say for example you’re on a clothing website and the navigation at the top has options like “clothes,” “shoes” and “accessories.” When you choose “clothes” a drop-down menu appears and offers you more options like “women’s clothes,” “men’s clothes,” or “children’s clothes.” If you choose “men’s clothes” the sub-menu has even more options like “shirts,” “pants,” and so on. Drop-down menus are a great way to help users get around a website quickly and easily without taking up valuable screen real estate. Without them, there wouldn’t be much room for any other content in complex websites.
Obvious section names
As tempting as it may be to have clever and quirky ones, the section names of a website should be really straightforward so people can find what they’re looking for without thinking. People hate to think, you know. Their brains are already overloaded with all kinds of other stuff, so you’ve got to keep it as simple and direct as you can. This helps folks navigate without the frustration of having to click around trying to figure out where stuff is. Concise names may also help with SEO.
Navigation is a very important consideration in any website no matter how big or small. It’s crucial to have it set up so that users have an easy time finding their way around.
Greetings GLAD WORKS friends! Due to the smashing success of our post on RGB vs. CMYK color spaces, we decided to dig in a little more and explore the wild and wooly world of Raster Images vs. Vector Graphics. They’re two different kinds of computer graphics, and just like with RGB and CMYK, they have everything to do with the way your projects come out. We’re telling you about all of this so you won’t feel quite so lost and in the dark when we start speaking GLAD WORKSIAN on you. We do that sometimes and we don’t even mean to.
But that’s ok because now you can just nod along and not even have to pretend to know what we’re talking about!
Two kinds of computer graphics
Raster and Vector are types of computer graphics. Raster images (aka bitmap) are composed of pixels (bits of image color) and vector graphics are composed of paths. A raster image uses a grid of pixels where each pixel can be a different color or shade. If you were to zoom in on a raster image, the edges would become jagged as you would start to be able to see the little pixel squares of color. This is different from a vector graphic which uses mathematical relationships between points and the paths connecting them to describe an image. Since they’re composed of paths instead of pixels, when you zoom in on a vector graphic, the edges are smooth.
Raster images require higher resolutions and something called “anti-aliasing” in order to look smooth. Vector graphics, on the other hand, since they’re made of lines, curves, and points that are calculated mathematically, can be scaled to any size or resolution and still have clean edges. Each have their place in your design projects, and it’s important to have the right type of graphic depending on what you’re trying to accomplish.
Vector imaging is frequently used in printed page layouts and illustrations. They can be made larger or smaller without loss of image quality because they’re mathematical descriptions of an image instead of pixels. Typography and illustration are vector graphics. Complex logos and shaded illustrations can be vector based, but it’s tough to get a photo-realistic appearance. Most of the vector images you see tend to look more one dimensional and cartoon-like.
Adobe Illustrator is a vector-based program, but you can still place raster graphics in an Illustrator file. Because you can make them bigger and smaller without losing quality, vector-based images offer freedom from resolution when developing print-based projects.
Raster images up close and personal
Raster imaging is usually used for photographic images with complex shading. They function like pointillist paintings— your brain mixes the color information into recognizable shapes. Digital photos and scanned drawings are raster images. If you scale a raster image down, you essentially omit some of the unneeded bits at the smaller size, and the software reinterprets the color for you. If you try to scale it up, you end up seeing the individual pixels. That’s why it looks jagged or blurry depending on how much you try to enlarge it. Because of this decrease in quality when enlarged, raster images are resolution dependent and require minimum resolutions, or DPI, based on the size of its intended output.
DPI: pixels for every occasion!
Because vector images are not pixel-based, they aren’t ruled by DPI. The advantage to using vectors is that they can be sized, small to large, without a loss in quality. That gives them a distinct advantage for some projects. Now, when we talk about raster images, we do have to be concerned with DPI since they’re made up of so many pixels per inch.
The number of pixels per inch (PPI) or dots per inch (DPI) is called resolution. The higher the resolution, the more pixels you have crammed in there. For web and screen view, you typically need just 72dpi because that’s the maximum amount that monitors and projectors can display. For printing from your printer at work or at home, you need 150dpi. Professional press printing typically requires a minimum of 300dpi since the equipment is capable of much finer detail.
That’s part of the reason why it’s very hard to use a photo you took with your phone as the cover of your annual report. The resolution of the image is far too low and you’re limited in what you can do to make it bigger. And although we know you’re oh-so tempted, we beg of you, just don’t do it!
The more pixels you have in an image, the more bits of data need to be stored which increases your file size from kilobytes to megabytes to (hold onto your hats) gigabytes! So, for example, an average home page photo on your website shouldn’t be more than 100KB since most monitors max out at 72dpi, but that annual report we talked about might have an image that’s 5MB or more, weighing in at a minimum of 300dpi! When talking about raster images, the bigger the image, the bigger the file size should be. And don’t even get us started on printed billboards! Those files can be like, whoa, HUGE!
Now, we don’t expect you to be graphics experts after having read this, but we do hope that it gives you a general idea of the different kinds of computer graphics we work with when we do our magical design-y stuff.
We want you to speak our language! We have so much to share!
We know that CMYK and RGB totally sound like the two boy bands your teenage daughter is swooning over, but they’re actually color spaces that we encounter with images. Each color space has a specific use and they’re the reason why things that look one way on your computer screen may look completely different in print.
Today we’re going to explain what CMYK and RGB are and how they have different uses depending on what your project is. It’s going to be a lot like an episode of Bill Nye the Science Guy only with less bowties and fewer awesome sound effects.
CMYK stands for Cyan (pale blue), Magenta (hot pink), Yellow, and Key (black) and they’re the ink colors used in the offset printing process. The four colors are combined to varying degrees to create the colors on printed pieces. CMYK is considered a subtractive color mode. To understand what that means, think of the paper that’s being printed on as white and the ink subtracting from the brightness or whiteness of the paper. Typically CMYK is used for print pieces such as postcards, newsletters, invitation suites, etc.
RGB stands for Red, Green, Blue and it’s the color of the light that comes from computer monitors or other electronic devices like televisions and scanners. A computer has a much different array of colors that it can display as opposed to what a printer can print. With RGB, the primary colors red, green and blue are combined to create a huge array of colors. It’s considered an additive color mode because the background of the screen is black. The LEDs that light the screen add light to black. The variations in colors determine what color the viewer sees. Anything dealing with the web or that’s meant to be viewed on a screen should be done in RGB.
Why Do RGB colors need to be converted to CMYK for printing?
So, let’s say you’ve made a very nifty looking poster on the computer and you’d like to print it out. Once printed, the poster isn’t nearly as nifty as it looked on your computer screen. The colors are dark and dull and the whole thing looks kinda wonky. Why did this happen? You have a nice printer full of new ink! But it’s not your printer, it’s that the RGB color scheme on your monitor has a different range of vivid and vibrant colors than CMYK can produce. Luckily, the above scenario doesn’t happen very often as most home ink jet printers are smart and do the conversion from RGB to CMYK for you.
Converting RGB to CMYK
Sometimes converting from RGB to CMYK requires the use of a conversion table to make sure the colors on the screen will match the color in print. There are other ways to do this, but we won’t bore you with the details you hire us to worry about! Photos that are placed into the piece will probably be in RGB format and will have to be converted separately. Some colors just cannot be reproduced in print and have to be changed in Photoshop.
Of course, this is all a bit more complicated than we’re making it out to be, but we hope you come away from this post today with an understanding of the standards we’re working with and why things need to be done a certain way so that we can get the best possible results.
“Kickoff meeting” sounds like you’re either about to get a kick in the shins or we’re all about to have a party where we chat about your project while sipping some champagne, munching on a nice crudité, and dancing. That’s pretty much what it’s like, except instead of champagne we have flavored coffee or herbal tea. Perhaps one of our account managers will do an interpretive dance for you at some point?
All kidding aside though, the kickoff meeting is very important for several reasons. First, you get to meet the creative team who will be working on your project. That’s pretty cool, but what’s also important is that we talk about your contract and your scope of work. These documents are incredibly extremely magnificently super important because they contain all of your project details and they help set project expectations.
The kickoff meeting is designed to help us get to know each other and to understand more about the project before we officially start work. There are a few things you need to do to prepare for this meeting. We know you’re crazy-busy and that it’s hard to make time to meet with us, so we want to make sure that you get as much out of your time with us as possible.
Here’s a list of things you can do to help us help you.
The more you read, the more you know!
The first thing you should do is read the contract and the scope of work thoroughly because therein lie the details of exactly what we will be doing for you. If there are things you want that aren’t in there, we need to know so we can make adjustments. We don’t want you to have any surprises once work has commenced, so read the contract and the scope and jot down any questions you have for us.
Sometimes our clients have a hard time articulating what they want, but then feel disappointed when they don’t get it later on. The last thing we want is for you to feel negatively about the end result, so it’s very important to keep the lines of communication open. If there’s something that you are expecting and don’t quite have the words to describe, try anyway. There’s a very good chance we’ll understand just what you mean.
No matter what, always remember that we’re very nice people and we don’t mind answering questions one bit. And if we’re talking about something technical and you don’t understand, say so and we’ll explain it better. This is where an interpretive dance might be appropriate. Our account managers love when we offer this service to our clients. They even made outfits. It’s…a thing.
What do you love?
Another thing that happens at the kickoff meeting is we get to know you a little better. Whether we’re working on a website, a print piece, or a video, we need to have a place to start, so even if you don’t know exactly what you want, come prepared to share your ideas, your inklings, whatever you have. Even if those ideas are in the form of competitors' websites, printed pieces or videos you’ve seen that you like or dislike, that’s ok. Before the meeting, do a little shopping around the Internet and write down a few things you’d like to show us. Even if you walk in and say “I dislike the color red!” That’s good to know! The more information you bring to the table, the faster and easier we will be able to create something you’re going to love.
Sharing is caring
The combination of your unrivaled knowledge of your business and our expertise will give way to a solid partnership and a successful project, so come prepared to share some business-y details with us. We’re going to ask you about your target demographic, what you hope to accomplish with your project, who your main competitors are, etc. The more information we have about the way your business functions at the kickoff meeting, the more successful the project will be. In exchange for your wonderful information, we’ll tell you about our process and what you can expect from our end.
We try to be as thorough as possible at the kickoff meeting so that we spend as little time as possible emailing to bug you for information. But don’t worry. We never bug people for information unless they’re being terribly stubborn and then it’s GAME ON.
So, those are the basics of the kickoff meeting. What will take place specifically will depend on what your project is. Just make sure to come having read your paperwork and having put some careful thought into the project and we’ll be off to a very strong start!
And nobody will kick you. We promise!
The principles of design determine what to do with each of the design elements we talked about last week. The principles of design are like the recipe we follow when we bake a cake, and the elements of design are the raw ingredients we use. But you can’t just go dumping stuff in a pan (or onto a page) and hope it comes out well. You have to have a little bit of skill, so today we’re going to talk about how all of this comes together to form a great layout.
Balance: Balance is an equal distribution of weight. When things aren’t balanced in the physical world, we feel uncomfortable. The same goes for things that aren’t visually balanced—it’s uncomfortable to look at. That’s bad news if you want somebody to read your piece! So, to create balance we have a few tricks up our sleeve. We can repeat a specific shape at regular intervals, center elements on a page, put small visuals in one area to offset a large chunk of copy, leave a lot of white space around dense or dark elements, or we can divide a page into equal columns or rows.
Sometimes we even play with the balance to help create a mood. If we make the balance asymmetrical, the design will evoke excitement and interest. If the design is symmetrical, it conveys peace and order.
Rhythm: We all know what rhythm is when we talk about music, and in the design world, it’s actually the same thing. Rhythm in a layout refers to a pattern created by repeating and varying elements. We can create a relaxing mood by placing elements at regular intervals. Changes in the size and spacing of elements create a livelier layout. To create rhythm, we can repeat a series of progressively larger or smaller elements, alternate dark type with light type or repeat the same element in the same place on every page to help guide the reader’s eye steadily through the whole piece. We can also use lots of tight spacing or lots of loose spacing.
Emphasis: Just like when you say something louder to emphasize what you’re saying, we use emphasis to help things stand out and get noticed. We do this by surrounding an illustration with a lot of text, putting an important piece of copy on a curve or an angle while keeping everything else straight, using bold black type for a head or subhead and lighter type for the rest of the text. We can also place a big image next to a small amount of text, use colored type, or reverse the headline out of a black or colored box.
Unity: Just like we wouldn’t frost our cake with salsa, we would never put design elements together that don’t harmonize. Every layout needs to have unity, so we make sure there’s some kind of organization or relationship between elements. We do this by repeating a color or texture in different areas of the spread, grouping elements together, choosing visuals that have a similar color or shape, using the same type style consistently throughout the piece, or by sticking to the same color palette. Maybe we even do several of these things at once.
Obviously, the principles of design can be applied to a layout in many different ways. Each element of a design can be placed in such a way as to create a balanced, unified layout that has the perfect emphasis and rhythm. The elements we choose and how we apply the principles to them determines the functionality and attractiveness of the final layout.
Said another way, when things are arranged mindfully and with skill, a layout will do what it’s intended to do and be darn good looking, too!
So that concludes our basics of making a great layout lesson for now. If you’ve ever tried to design a flyer or newsletter for your business, you’re already familiar with all of the things we’ve been talking about for these past two blog posts.
Next week, we’ll shift our focus from design to social media because we enjoy being random like that.
See you next week!
When you make a cake, there’s a list of ingredients you have to include. If you don’t have everything you need, your cake is probably going to come out pretty crummy (no pun intended). But, if you included all the right ingredients, measured and mixed carefully, poured the batter into the pans and watched the timer like a hawk, your cake is going to be a success.
That same kind of precision and attention to detail is exactly what goes into creating a good layout. First, a good layout must do what it’s meant to do—help a reader understand a message quickly and easily. It must also be well organized and map out a visual path for readers to follow so they know what part comes first, next and last. A good layout is also attractive and grabs a reader’s attention, making them want to read the piece.
There are basic design elements that help make a layout successful--just like there are ingredients in a cake. All the right ingredients need to come together for it to work, and today we’re going to give you the 4-1-1 on a few basic ingredients or design elements, just so you can get a little glimpse into our secret world of design cookery.
Put your aprons on, GLAD WORKS friends! Let’s get baking!
Line: Lines are amazing things when you think about it. Lines can be straight or curved, graceful or crazy. They can be used to delineate objects, create graphs, or outline areas like a picture frame. Imaginary lines can be created when two areas of different colors, textures or values meet to create a line between those effects. Lines also help us control how your eye travels around the layout. Did you know that WE CAN CONTROL YOUR EYES?!? (Do not be afraid. We’ll only make you look at important stuff.)
Shape: Anything that has height and width is a shape. Shapes can add fun and excitement to any layout. They can be used to crop a photo an interesting way, symbolize an idea, make a chunk of copy look more interesting, or highlight important information. Shapes can also tie together all the elements on a layout.
Texture: The look or feel of a surface is its texture. We use texture in a layout to create a feeling of depth or richness, to add liveliness or activity, provoke emotions, fool the eye (more eye control! Heavens!), or relate an image to its background.
Space: Space is the distance or area between or around things. It can be used to do lots of things like give the eye a visual rest, create ties between elements, make certain elements stand out, and make a layout easy to follow. There are two kinds of space: Positive and negative. Positive space is represented by highlights or an object. Negative space is blank space or shadow.
Size: Size obviously refers to how large or small something is. Size is super important because it can show the relative importance of certain elements. It can also make elements come forward on the page, give the reader a sense of scale, break up space, or make elements fit together nicely within the layout.
Value: Colors have what’s called a value. That value can be light or dark and every shade in between. Value can visually separate different kinds of copy, create a pattern, give the illusion of volume and depth, create drama or emphasize an element.
Color: Color is a very important tool for symbolic communication, but we’ve written about it before, so we’re just going to let you click on over and read that…
Is your head swimming yet, GLAD WORKS friends? That’s ok because this is why you have us to do this stuff for you. We might also be able to whip up a darn fine cake, too.
Next week, we’ll tackle the principles of design that help combine the elements of design into a great layout. It’s gonna be fun!
6:30 am: Wake up to the sound of my alarm clock and realize my cat is sleeping on my head, as usual. As soon as my feet hit the floor, he starts clamoring for food by winding around my legs and meowing loudly. I mutter something about turning him into a pair of slippers if he doesn’t pipe down.
7:00 am: I pack my lunch for work and head to the gym. Depending on the day, spin class, swimming, Pilates, treadmill, or my personal trainer awaits. On days that I don’t go to the gym, I do the Insanity workout in my living room. The downstairs neighbors love all my jumping around at such an early hour. I like to think I’m helping them keep an early schedule.
8:45 am: Consider roller-skating to work.
8:46 am: Drive to work.
9:00 am: At my desk. There are approximately 15,000 (40) emails to sort through. Doesn’t anyone sleep at night? Some of these were written at 3:00 am!
9:30 am: Prioritizing my work according to what’s left over from the day before, what deadlines are looming, and what has just come through via email.
10:00 am: Production meeting. I sync up with the other designers on my team as well as the Production Manager. We go over the day’s work as well as the details of a few new projects. I get more assignments, and trade some off to the other designers on my team. I got a fun one! I get to design a veterinary hospital website! I can’t wait to tell my cat! (He’s going to need that vet if he keeps up his shenanigans!)
11:00 am: I’m finally able to start the day’s designs! On my plate today I have an email flyer for a major retail chain, edits to an iPhone app I’ve been designing, low resolution proofs on a vehicle wrap for a major gasoline distributor, and some initial concepts for that veterinary hospital website. I’m not gonna lie, I’m a little overwhelmed, but I remind myself that this is ok. It’s job security.
12:00 pm: Lunch time! I eat at my desk while continuing to work on those vehicle wraps, then I put on my sneakers and go for a power walk. This helps me keep my creative juices flowing and gets me over the afternoon slump.
1:00 pm: Conference call with a client and our Account Manager to discuss an upcoming project. I love doing invitation suites! I’m pumped!
2:00 pm: A printer comes in with some proofs for me to review. They look amazing! I’m glad we went with this printer because she was fast and did a perfect job.
2:15 pm: Back to work on that email and the vehicle wrap!
4:00 pm: Come up for air after a couple of solid hours of design time. Vehicle wraps are looking good! After a brief stretch and a cucumber (is it normal to eat an entire cucumber as a snack?), I’m back at it.
6:00 pm: I’m leaving on time tonight! This doesn’t always happen, but I don’t have any pressing deadlines to deal with today. Thank goodness. I’m tired! Plus, I have some freelance work to do when I get home.
7:00 pm: I feed my cat (He’s so demanding!) and then I get settled in to do my freelance work. I’m designing a logo for a woman who makes fancy soap.
9:00 pm: With the cat trailing behind me (I’m NOT feeding you again, you beast!), I head to my couch to catch up on a few episodes of Mad Men. I make a promise to myself that I’m not going to fall asleep on the couch again.
11:30 pm: Zzzzzzzzzzz (on the couch) (Darnit!)
Once you’ve chosen a color for your design project that communicates all the right things, then what? Certainly that can’t be the ONLY color you use in your whole design!
Well, it’s not. Today we’re going to explore the topic of color combinations!
When combined with other colors, each color helps work to tell a story. Just like with words, you can’t tell a story with only one sentence--you need a few others in there to help support it. Below, you’ll find a few examples of what we’re talking about to help us demonstrate what we mean.
Normally, when we design a project, we choose two or three colors to work with. These colors are labeled dominant, subordinate, or accent depending on the role they play in communicating our story.
Dominant color: This color defines the communicative values of the combination. So, if we’re trying to communicate dependability and order with the color blue, this is our dominant color. We’ll use blue most often.
Subordinate Color: This is not as visually strong as our dominant color. It should either contrast or complement the dominant color. For example, yellow would be a good choice as a subordinate color to blue.
Accent color: Every good color combination needs an accent color for a little extra pizzazz. The accent color can be a color that’s as visually strong as the dominant color or the subordinate color. It can be a very striking color as it’s only used sparingly. So maybe to go along with our blue and yellow, we can use red or orange as our accent color.
Obviously, different color combinations come together to set different moods and tell different stories. The combination we just described above is more of a vibrant combination using very strong colors.
We could go into color harmonies and explain the basic color chords based on the color wheel, but really, it’s something for design nerds. You don’t really need to know about complementary, analogous, triadic, split-complementary, rectangle, and square combinations. What you do need to know is how different color combinations can build different stories.
Active combinations often involve some mix of primary, secondary and tertiary colors to build a story that’s got a lot going on. It’s often used in projects directed at young people, or when we need to communicate something dynamic. Our example of the blue/yellow/red combination is an active combination. You can picture those colors on a superhero, can’t you?
Super Color Wheel Guy to the rescue!!!
Muted combinations use a lot of white to evoke a sense of calm and balance. The hues are visually quiet, and the accent color is usually in agreement with the dominant color. This is a fresh, feminine color combination that you see a lot on products made to appeal to women. Take a stroll down the cosmetics aisle and you’ll see lots of things done in muted tones.
Pastel combinations are similar to muted combinations in that both make use of white. They’re different though because pastels involve both warm and cool tones. Muted tones don’t have the range or vibrancy that pastels do. Take a walk down the baby aisle at Target and you’ll see pastels a-plenty! You can practically smell the baby powder and yummy shampoo, can’t you?
Natural combinations throw everything out the window. Since they’re borrowed from nature, they follow those rules, which can be unpredictable. In this combination, all kinds of crazy combinations can get along like peas and carrots. Just go outside and take a picture. There are some amazing combinations that don’t follow the rules.
Rich combinations consist of deep, traditional hues. This is where you see maroon, royal blue and dark green happening to evoke a sense of tradition and regality. Rich colors have a very serious tone, and so they’re reserved for projects of a more refined nature.
Of course, none of what we talked about today is anything new or ground breaking. In fact, it maybe served as a refresher course from Art class. We thought it would be a fun topic since it’s something that lots of people don’t consider when they think about their design projects, but it’s way up there on the list of importance! You don’t want to tell the wrong story!