Typographic chaos

Typography in logo design can make or break a design, so it’s vital you know your typographic ABCs. A logo should be kept as simple as possible while still portraying the intended message, and for this to happen, one must consider all typographic aspects of the design.

Don’t use too many fonts or weights (two maximum). Don’t use predictable, crazy, or ultrathin fonts. Pay close attention to kerning, spacing, and sizing and most importantly, ensure you’ve chosen the right font(s) for the project at hand.

Take note how this logo uses just one font family but with different styling. The italic letterforms convey speed while the bold emphasizes the ease of the service.

Poor font choice

As touched on above, when it comes to creating a logo, choosing the right font can make or break a design. Font choice can often take as long as the creation of the logo mark itself and it should not be done briskly.

Spend time researching all the various fonts that could be used for the project, narrow them down further, and then see how each one gels with the logo mark. Don’t be afraid to purchase a font, modify one, or create your own. Also, keep in mind how the logo’s font could be used across the rest of the brand identity in conjunction with other fonts and imagery.

All fonts have their own personality, so you should choose the right “font personality” for the job at hand. The font chosen in this logo is much more serious than, say, a hand-drawn font, which would convey very different attributes.

Too complex, too abstract

Simple logos are more memorable as they allow for easier recognition; however, for a logo to be memorable and stand apart from the crowd, it must have something unique about it, without being too overdrawn. Not only does simplicity make a logo more memorable, but it also makes the logo more versatile, meaning it can work over more mediums. For example, a logo should work on something the size of a postage stamp and on something as large as a billboard. Don’t make your logo too abstract either.

Relying on special effects or color

If a logo requires color or special effects to make it a strong logo, it’s not a strong logo. To get around this, work in black and white first and then add the special effects or color later. This allows you to focus on the shape and concept rather than the special effects. Don’t use drop shadows, embossing, or other layer styles to gloss up logos—a good logo will stand on its own.

Although this logo has gradients and color, if we took away these effects it still has a strong form and concept.

Using raster images

A logo should be designed in a vector graphics program such as Adobe Illustrator to ensure that the final logo can be scaled to any size, enabling the logo to be applied easily to other media. A vector graphic is made up of mathematically precise points, which ensures visual consistency across all mediums and sizes. A raster image (made out of pixels, such as what you would find in Photoshop) can’t be scaled to any size, which means at large sizes, the logo would be unusable. Use a vector graphics program when creating logos.

Settling for a monogram
One of the more common mistakes of the amateur logo designer is trying to create a monogram out of the business’ initials (e.g., Bob’s Hardware would become a logo made out of B & H). Although this sounds like a smart solution at first, it’s rather difficult to build credibility or convey an intended message with just the initials of a company. You can certainly explore this route, but don’t settle on it unless you can create an original, creative, and memorable solution that reflects the business’ goals.

Also, try not to shorten a business name into acronyms until it has been around for a while. HP, FedEx, IBM, and GM never started out as acronyms—they became this way after many years of high-profile exposure.

Using visual clich©s

Light bulbs for creativity, speech bubbles for discussion, lightning strikes for electricity, swooshes for dynamism, etc. These ideas are often the first things to pop into one’s head when brainstorming, and for the same reason should be the first ideas discarded. How is your design going to be unique when so many other logos feature the same idea? Stay clear of these visual clich©s and come up with an original idea and design.

A pencil on its own would be a visual clich© for any illustrator or designer; however, if you use a clich© in a creative and unique way, then your logo will be much more memorable. Have a look for the hidden J, C, and D in the logo shown here.

Copying, stealing, or borrowing design

It’s sad that this has to be said, but it’s an all-too-common practice these days. A designer sees an idea that he likes, does a quick mirror, color swap, or word change, and then calls the idea his own. Not only is this unethical, illegal, and downright stupid but you’re also going to get caught sooner or later. Do not use stock or clip art either—the point of a logo is to be unique and original.

Getting too much client input

A client is paying you as a professional designer to come up with a relevant design, so you should direct the client to the best possible solution. The best way to do this is to offer your expertise, not by letting them direct the project (entirely). If a client asks for a misinformed change, explain why it may not be such a good idea and offer a better alternative. If they still refuse, try sending your own design decisions as well as their design suggestions. They will often realize that their suggestions may not have been the best; however, you as a designer should also realize that you’re not always right, so try giving the client’s suggestions a go—who knows where it will lead.

Providing too many concepts

Loosely linked to the above point is providing the client with too many options. This again means the client will have too much say over the design direction of the project. If you provide 10 concepts to a client, more often than not they will choose what you consider the worst design. A good rule of thumb is to only send one to three concepts that you personally could see working for their business. Of course, the number of concepts you send can change from project to project, but once you feel confident enough as a designer, these one to three concepts should nail the project on the head every time.

Not cleaning up logo files

Logo files should be one of the cleanest files you ever deliver a client. Node points should be kept to a minimum; curves should be as smooth as possible and without overlap. Shapes should be combined, and if your logo is symmetrical, it should be perfectly symmetrical. Everything about the delivered file should be perfect and as minimal as possible. Imagine if the client needs to blow up the logo to put on the side of a truck. If the logo has any mistakes, these will now be clearly visible. Make it perfect.

Take note of the wave hidden in this logo design. As an example of cleaning up files, this wave would have to be knocked out of the letters “W” and “A” rather than simply having a white wave shape sitting on top of the letterforms.

Not delivering correct files to client

Delivering the right files to your client is one way to ensure that your client never comes back asking for revisions or different versions of a logo. It also ensures that the logo gets displayed correctly in all circumstances, which should be supported by a style guide.

You should give your client four high-quality files per logo variation—this means providing a spot-color file, a pure CMYK (no spot colors), a pure black file, and a pure white (knockout) file. These should generally be in EPS, TIFF, and JPEG formats. You can provide a favicon too, if you’re feeling nice.

Hopefully, these ideas will help you build better logos and deliver happier clients. It’s important, however, to state that although lists such as this are a good starting point, they should not hold you back—rules are made to be broken.

What is a logo?

To understand what a logo is meant to do, we should first know just what a logo is: It’s one aspect of a company’s commercial brand or economic entity, and a logo’s shapes, colors, fonts, and images usually are different from others in a similar market. Logos are also used to identify organizations and other noncommercial entities. A logo’s design should make us immediately recognize the company—it should inspire trust, admiration, loyalty, and an implied superiority.

What makes a good logo?

A good logo is distinctive, appropriate, practical, graphic, simple in form, and should convey one message. An effective logo usually has a concept, or meaning behind the logo, that allows it to communicate the intended message. It should be printable at any size and be effective without color.

With these things in mind, it would be safe to say that a great logo usually comes down two things: a great concept and great execution.

The design process

When creating a logo, follow a logo design process that ensures the final design suits the client’s needs (not their wants). Here’s a list of what’s essential to the logo design process:

• Design brief: Start with a questionnaire or interview with the client to get the design brief.
• Research: Conduct research focusing on the industry, its history, and its competitors.
• Reference: Look at logo designs that have been successful and current styles/trends that may be related to the design brief; however, don’t follow trends just for the sake of it. Longevity in logo design is key.
• Sketching and conceptualizing: Develop the logo design concept(s) around the above-referenced brief and research.
• Reflection: Take breaks throughout the design process to allow your ideas to mature. This also helps to renew your enthusiasm and get feedback.
• Positioning: Position yourself as a contractor or build a long-lasting relationship with the client; for example, the client tells you what to do or you guide the client to the best solution. The latter is usually best.
• Presentation: Present only your best logo designs to your client. PDF format usually works best. You may also wish to show the logo in context to help the client visualize the identity.
• Celebration: Drink beer, eat chocolate, sleep, then start on your next project.

Getting the job

Now that you have an insight into the logo process, let’s go through it in more depth, using a recent job as an example. When the CEO of Vero contacted me late last year (he found me through my blog), the company was looking for a complete branding package for a new business they were launching. Not only did they want a logo and identity design, they also required the design of the actual product.

After going through the Vero business plan, numerous emails, and having them fill out a questionnaire (it’s available on my website), I had a good idea of what the whole project entailed. So, I did the math, sent them a proposal and agreement (never call it a contract!), and received a 50% deposit.

The brief

Before walking through the design process, here’s some background information on the project along with the design brief.

Sparked by environmental concerns, many hotels and restaurants have recently stopped selling bottled water and, instead, they’re serving either plain or filtered tap water. Vero offers restaurants, cafes, and hotels an eco-friendly bottled water alternative. The company uses the latest in microprocessor-controlled, water-purification technology to purify, chill, and carbonate (if needed) tap water at the point of use.

Without going into too much detail, the brief was to design a “South Beach chic” glass bottle that made people “feel cool drinking it.” The bottle should scream “practicality,” “environmentally conscious,” and should be something that “a celebrity would be pictured drinking.” The target market would be high-end hotels and restaurants—places where people would expect to pay $7 for a bottle of imported water.

In its purest form, the brief was to create a logo that could be placed on a glass water bottle and portray all of these things.

Research and reference

After the brief was clarified, the deposit received, and the agreement signed, the research began. This included researching Vero’s competitors, the industry, target market, location, other logos, and so on. Only after you’ve carried out a thorough research should you move on to the design development.

Sketching, reflecting, and developing

After the client signed off on the bottle shape and tag line (“Earth’s Purest Drinking Water”), the project’s next phase was to develop the logo. And this is where creativity comes into play. Based on the design brief and research conducted, this is where I let my ideas run wild.

I started by brainstorming and sketching my ideas and then experimented with them on the computer. A crucial part of this process is that I took breaks between these sessions to reflect on the designs and get a fresh perspective on the job at hand. The challenge that I had when creating the Vero logo was trying to incorporate “chic,” “practicality,” and “environmentally conscious” into one logo, while also making the logo look like it was for a high-end market.

Brainstorming ideas on paper

Here’s a page of my original sketches. I know I’m no Picasso but it’s the end result that counts. Remember: There are no bad ideas, just bad decisions.

Original sketches

Computer generation: As you can see, I had the idea of creating a “V” from two “leaves” of water. With a general idea in mind, I experimented with the concept in Adobe Illustrator, creating some rough, vectorized logos.

Experimentation results in Illustrator

Tip: This is a good time to advise that you should always design a logo in vector format to ensure that it can be scaled to any size. And you’ll note that I haven’t yet added any color. That’s because it’s best to focus on the shape and concept of the logo at the start of the process and then add color toward the end.

The concept for my final logo was based around two leaves forming the letter V, not just once, but twice. The middle V in the negative space suggests the shape of a leaf in a creative and clever manner, making it a memorable and identifiable mark. I left the bottom of the letter V open to suggest that the source was renewable—as if the leaves were coming out of the earth.

Typeface: After experimenting with a variety of logos, I then tried out typefaces. Keeping in mind the considerations stated in the design brief, I chose Bauhaus Light for its geometric, clean lines—these type characteristics will give Vero the look of a modern, fresh, and sustainable company. Bauhaus Light is also a very pretty typeface, which makes it great for display purposes and it looks great in both horizontal and vertical formats. The added spacing between each letter gives it a touch of class and luxury.

Bauhaus Light works very well for both vertical and horizontal versions of the logo

Presentation and color

Now that the typeface and logo concept were finalized (though this is never set in stone), I sent through one concept to the client. Why only one? It’s important to show only your best logo design concepts, not a large array of options. You’re the designer and should know best. You’re not there to say, “Here are 20 concepts, pick one.” This may just confuse the client.

The logo was approved straight away and we moved onto color choices. I experimented with a large variety of colors, keeping in mind how the logo would look on the bottle design and what each color would portray (your knowledge of color theory is vital here).

Experimenting with colors

After coming down to a few select colors that reflected the values stated in the design brief, I sent through these options and we agreed that the blue/light-blue variation was the best color for Vero.

The final approved logo

Time to celebrate

The client agreed to the final colors, logo, and tagline and sent the final 50% payment. I then completed a mock-up of the bottle design in MAXON CINEMA 4D. The horizontal version of the logo is featured on the back of the bottle. (As this article is being published, the bottle is being manufactured in China and a website will follow soon thereafter.)

Mock-up of bottle

2 [TYPE THE ALPHABET]
Select the Type tool (T) and choose a typeface in the Control panel that your font monster will be based on. In this tutorial, we’re using the notorious Comic Sans (Bold) just for fun! Drag out a big box to the right of your artboard, and type the alphabet in both lowercase and uppercase. Also type all of the numbers and special characters. Don’t click anywhere just yet.

3 [MAKE USE OF THE GLYPHS PANEL]
Look in the Glyphs panel and you’ll notice a lot of unfamiliar characters, but you’ll want to use these characters in your design, so go ahead and double-click on any characters that you find useful. If you’ve clicked outside of the text box, simply use the Type tool and click back in the box, then double-click on the glyph characters.

4 [CONVERT TEXT TO OUTLINES]
Now you need to create outlines of the characters so that you can use them as objects rather than as a typeface. Choose the Direct Selection tool (A), click once on the type, then Control-click (PC: Right-click) and choose Create Outlines from the list. You’ll notice that all the objects are in one group. We need to separate each character, so Control-click (PC: Right-click) again and choose Ungroup. Each character can now be selected on its own.

5 [CREATE A BACKGROUND]
Click the Create New Layer icon at the bottom of the Layers panel to create a new layer. Choose the Rectangle tool (M) and drag out a large rectangle over the whole artboard. This will be the background and mood of your piece, so if you’re creating a happy monster, go for a happy color; if you’re doing an angry or sad monster, try red or blue. The choice is yours. You can change this color later; it’s only here to set the mood of the piece. To change the color of the rectangle, select it, click on the Fill icon in the Toolbox, then choose a color from the Swatches panel.

6 [LOCK THE BACKGROUND LAYER]
With the background created, you’ll want to leave this layer on its own so you can create a more complex background at a later time, if you choose to do so. This is just good practice. Click-and-drag the background layer to the bottom of the layers stack in the Layers panel. It’s also a good idea to rename the layers. Do this by double-clicking on them and naming them in the dialog that appears. Now click once in the empty square to the right of the Eye icon to lock the background layer.

7 [GET INSPIRED]
When designing, gathering inspiration from a number of sources can be beneficial because it helps guide you in the right direction and gives you a base for your designs. Go forth and get inspired by whatever you have nearby. You can even draw your own robot at this stage; it’s up to you. In this tutorial, we’re continuing with the comic theme (hence Comic Sans), so for inspiration we’re using a jester illustration from iStockphoto. For easy reference, put the image on your Illustrator artboard. This is also a good time to save your document.

CREDIT: ©ISTOCKPHOTO/JOE PERAGINO

8 [DRAG CHARACTERS ONTO ARTBOARD]
With the artboard set up, now comes the fun part—designing the font monster! Now drag some letters onto the artboard to start creating your character. To do this, use the Selection tool (V), hold down the Option (PC: Alt) key, and drag a letter from the right side of the artboard. Holding down Option (PC: Alt) as you drag copies the character, which means you’ll be able to use the character more than once. Copy the characters that you think will work to the appropriate positions (i.e., match shapes to the body parts).

9 [RESIZE & REPOSITION YOUR CHARACTERS]
In the previous step, we positioned the characters in what we thought could work in relation to our font monster. Now let’s resize each of the characters to the right proportions. Click once on a character, press-and-hold the Option-Shift (PC: Alt-Shift) keys, and drag the corner of the character to resize it proportionally from its center outward. To reposition a character, simply click-and-drag it to the new position. Repeat this for the rest of the characters in sizes you think will work best. Remember to save your document.

10 [ROTATE YOUR CHARACTERS]
With some of the characters in place, we have a general idea of what position they need to be in, so we can begin to rotate them. Click once on a character with the Selection tool and then press the R key to select the Rotate tool. Click-and-drag to rotate the selected character in a position you think will work. When finished with that character, press V to choose the Selection tool, click off the artboard, and click on the next character you’d like to rotate. You may also want to resize the characters while rotating; just follow the directions in Step 9.

11 [REFLECT YOUR CHARACTERS]
Another thing that comes in handy when creating illustrations is the reflection command. Notice that we’ve used two Ls for the legs; however, the foot on the left is facing the wrong way. We can reflect this L shape and make it face the other direction. With the Selection tool, click on the character, then Control-click (PC: Right-click) and choose Transform>Reflect. Enter the appropriate settings and voil , your shape will be flipped! You can also use the other commands under the Transform function to manipulate and, strangely enough, transform your shapes.

12 [ADD TO YOUR MONSTER]
Repeat Steps 8 through 11 and let your creativity run wild to create your own font monster. For the advanced users, you may be interested in using the Pathfinder panel. Try selecting a combination of letters and experimenting with the Pathfinder commands. If you need more help with the Pathfinder panel, click Help>Illustrator Help and type in “pathfinder.” Keep experimenting and repeating these steps and you’ll have a font monster in no time.

ALL IMAGES BY JACOB CASS UNLESS OTHERWISE NOTED

Web design is one of those areas that, when done right, you just know it. The finished site looks refined and well done—it pops! There are a number of ways that you can achieve this by polishing off your design in Photoshop. Here we look at some of the ways to do just that.

1 [LAY OUT THE FUNDAMENTALS]
Before you go about making your website pop, you must first have your fundamentals in place. By this stage you should have done the research, laid out your website appropriately, and done most of the basic design work—but you haven’t applied the polish. In the following example, we’re going to look at some techniques used for a chocolate delivery website; however, these same techniques can be applied to any website.

2 [CHECK ALIGNMENT AND SPACING]
Alignment and spacing in website design creates order, organizes the page, and groups parts of the website for easy navigation. In the screenshot above you can see the guidelines in place ensuring everything is aligned (the grid is from www.960.gs). Notice how the logo and all of the text is left aligned? Also take note of the even spacing around the boxes and text. Use guides in Photoshop to ensure all of your elements are aligned. To add a guide to your document, drag it from one of your rulers (press Command-R [PC: Ctrl-R] to turn rulers on).

3 [APPLY ANTI-ALIASING TO TEXT]
Something that’s often overlooked when designing for the Web is anti-aliasing text. For those who don’t know, anti-aliasing is the technique of minimizing distortion artifacts. There are a few ways to minimize this distortion in your text but the best way is to make use of the anti-aliasing options in your Options Bar (or Character panel). You can choose between None, Sharp, Crisp, Strong, and Smooth. Experiment to see what works best, as different fonts and sizes will yield different results; however, the Sharp setting usually prevails in most cases.

4 [ADD A 1-PIXEL STROKE]
Something that really makes a difference in making a website pop is the use of a 1-pixel stroke inside borders and lines. Take a look at the zoomed-in screenshot above—see the inner purple line that runs alongside the inside of the box on the right? These stroked borders really add that extra crispness to the design as it provides extra contrast to the surrounding elements and gives the design more depth. You can add two strokes by selecting the object, choosing Edit>Stroke, and applying the 1-pixel stroke to the Inside. With your selection still in place, go back to Edit>Stroke and apply your second stroke to the Outside.

5 [ADD SUBTLE GRADIENT EFFECTS]
Gradients are popping up everywhere in Web design and for a reason—they add depth and real aesthetics to the design. Unlike print design where gradients seem flat, onscreen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot above? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen, so to speak. Use Gradient Overlay in the Layer Style dialog to create these nice subtle (emphasis on subtle) effects.

6 [ADD SUBTLE DROP SHADOWS]
Use subtle drop shadows in conjunction with the gradients and stroked borders. Once again, these shadows add a new depth and dimension to your design as it makes the different elements on the page play against each other and pop out at you. Notice in the screenshot above that the logo, text, and boxes all have subtle drop shadows applied to them, which break them away from the other elements. You can use the Drop Shadow layer style to achieve these effects—but make sure you use them in moderation.

7 [HIERARCHY & CALL TO ACTION]
When someone first visits your website, what is the first thing they’re going to do? Is there a clear hierarchy of what to read or do first? What is the purpose of the site? These are all questions that you should have considered at the start of the project; however, now is a good time to go back and reflect on these decisions. Can you adjust the colors, size, or position to achieve better results? Notice in the screenshot below that the call to action on the UKE website is the “Pick a Basket” button, which is placed conveniently after the main opening slogan.

8 [COLOR CORRECTION & SHARPENING]
In Web design, photos, icons, and images are usually quite prominent, so you should ensure that they’re of the highest quality. Check the color balance, sharpness, and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Levels, Unsharp Mask, and Curves in Photoshop. A quick search at www.layersmagazine.com will yield results on how to do this—these functions go beyond the scope of this tutorial.

Less Is More

In Web design, the old saying goes, “less is more.” After completing your website design, have a break and come back to it. Then ask yourself these questions to see how you can further improve your site:

1. Is there anything that I can remove, fix, replace, move, change or edit?
2. Does one element take up too much space or draw too much attention?
3. Are there too many colors?
4. Is the site balanced?
5. Is there consistency?
6. Can I make use of more white space?

When you set out to design your next website, you can also ask yourself these questions:

1. Do I have the basic fundamentals in place?
2. Can I improve my alignment or spacing?
3. Have I used the appropriate anti-aliasing?
4. Can I sharpen my images or text with strokes or borders?
5. Can I give more depth to the page by using gradients or drop shadows?
6. Is there a clear hierarchy with a call to action?
7. Are all of the images color corrected, balanced, and sharpened?
8. And last of all, ask yourself—does the website pop?

Before

After

ALL IMAGES BY JACOB CASS UNLESS OTHERWISE NOTED

Whether it’s a logo, a magazine page, or a website, sometimes the things you don’t design are more powerful than the things you do. This is often achieved by the use of negative space. In this article, we’ll teach you what negative space is, how it works, and what benefits it can add to your own designs along with some examples to help you along the way.

What is negative space?
When composing a piece of artwork, we generally work with three elements: the frame, the positive space, and the negative space (also called white space). The frame is the bounding size of the artwork, the positive space is the subject, and the negative space is the empty space around the subject. The three images below will give you a basic understanding of this principle.

The frame—the size in which the object is placed
CREDIT: ©SXC.HU/PAVEL JEDLICKA

The positive space masked in black

The negative space masked in black—notice how the negative space defines and implies the shape of a plane

Negative space helps define a subject, so subjectively speaking, negative space works when there’s a balance between the positive and negative spaces. Negative space also works when it draws the viewer’s eye into the subject at hand.
To show how negative space works, look at this personal logo design for Peter Ryan. Did you notice how the middle of the letter R is cleverly utilized to become the letter P? This has been achieved by reversing out the positive space of the letter P into negative space.

To put the importance of negative space and the frame into perspective, think about this: Do you ever wonder why when you watch a movie at the cinema, it’s more beautiful than if you watch it at home on a square-format TV? The cinematographer has composed the scene knowing that his frame was going to be viewed in the widescreen format of a cinema screen. However, once the movie gets cropped down to the square format of a non-widescreen TV, much of the beauty, negative space, and composition of the scene is lost, making for a less-appealing image.
The point to remember here is if the subject moves in any direction, inside or outside the frame, the shape and amount of negative space will change, so it’s always important to readjust your frame to the subject at hand.

Reproduction of Rubin’s Vase shows negative space as an optical illusion—two faces or a vase?

Why use negative space?
If you work with negative spaces rather than on the subject (positive space), you’ll often end up with a more accurate and aesthetically pleasing design and balanced composition. Let’s look at this picture of a toucan, as it’s an excellent example of negative space. The positive space of the photograph is at the forefront of the design, as you can see in the image where the toucan is masked in black. The positive space consists of not only the bird but also the railing that it’s perched on. The negative space is all the other space that’s not at the forefront of the image.
Did you notice the negative space is actually shapes within a frame? Negative space isn’t the absence of space but rather the space that defines the positive space. These shapes are even easier to see when you turn the negative space upside down.
Take one more look at the image where the positive space is masked in black. Notice how the line of the railing leads us into the image of the toucan. The positive space of the railing guides your eyes to the main subject of the image, the toucan, and then continues on to exit the image. This is achieved because of the relationship of the positive spaces of the railing and the toucan to the negative spaces of the environment in which the photograph was taken.

Frame CREDIT: ©SXC.HU/RONNEY GUIMARAES

Positive space (in black)

Negative space (in black)

Negative space flipped (in black)

Concentrate on the unfamiliar
More often than not when we’re designing something, we start from what we have in our memories. This focus on the positive space rather than the negative space can leave a design that’s not entirely balanced. The best way to take advantage of negative space is when we have to design something that’s difficult or something that’s not very familiar to us. Pretend that you have the lovely task of drawing your grandmother’s beautiful, wrinkly feet. Rather than focusing on the details, such as the wrinkles, toes, and nails, start looking at the unfamiliar negative spaces, such as the spaces between her toes, the distance from the ground of each toe, and the relationship with the edge of the frame (i.e., the piece of paper you’re drawing on).
If you concentrate on the unfamiliar, you’ll stop working on autopilot and become more focused. The result will be a much more accurate and polished illustration. This doesn’t work just for illustration, but all forms of design, so let’s take a look at how to use negative space in a variety of mediums.

Negative space in photography
In photography you’re dealing with aperture, shutter speed, lighting, and focus at every moment, and whether you know it or not, you’re also dealing with negative and positive space. As we discussed earlier, we define negative space as being the empty space around the subject of the image. It’s this space in photography that’s the most crucial aspect in nearly all compositions—having too much or too little negative space can completely ruin a potentially good photograph.
If you’ve been taking photos with your camera and everything is right technically but you feel something is missing, then it could well be your composition. Pay close attention to the negative space around your main subject, as changing the slightest thing can improve or reduce the quality of your photos. Consider this example: The two compositions use different amounts of negative space. The generous use of negative space in the image on the right makes it a much more pleasing image, as it draws the viewer to the subject and stabilizes the image.

Less negative space

More negative space

The best method to learn how to master the use of negative space in photography is to practice. Remember that negative space is always related to the edge of the image (i.e., the frame) and it’s not constant, so you must continually readjust, just as you would your aperture, shutter speed, and lighting. You can also observe the images and designs of others. Have a look through this magazine and see how the photos and ads are put together. How have they used negative space in their designs? Does the cropping (i.e., framing) of the photos add impact to the design? If not, how could you improve them?

Observe shapes around the subject
As touched on earlier, when we compose a drawing, we often create objects based upon our existing knowledge and memories. When we outline something that doesn’t look correct, it proves difficult to change because we keep coming back to the same method of observation: We’re trying to make the drawing look as we remember it, not how the object looks in reality.
To solve this problem we have to observe the negative space, which is something that we’re not normally prone to do. If we observe the shapes around the subject, then this will help us fix our false interpretation of the subject. In theory, if we focus on what doesn’t exist (the negative space), we can more accurately define the boundaries of what does exist.
In this example, we can see a chair even though the chair hasn’t actually been drawn? If you focus on the negative spaces first and then fill in the details, your final illustration will be much more realistic. Another tip for creating more lifelike illustrations is to look at your design mirrored—this will make you look at things in an unfamiliar way, helping you to spot flaws in your design.

Negative space drawing of a chair

Negative space drawing of a chair reversed

Design your website with negative space
In between columns, images, copy, and just about everything else on a website, there’s negative space. It’s our job as designers to maximize this space to its greatest potential so as not to crowd a website. We must use negative space to intelligently organize text and graphics to give visual relief to the user’s eyes, and we can do this by treating negative space as a crucial design element. Take notice of how much spacing is between your margins, columns, images and lines of text to effectively de-clutter your website.
For example, in this mockup website for a watch, generous amounts of negative space convey a sense of good taste and refinement. This amount of negative space may not be appropriate for your design. To guide you in your own designs, take the time to study how other good webpage layouts use negative space.

CREDIT: ©SXC.HU/MELISSA RAMIREZ

It’s creative and cost-saving in logo design
The use of negative space in logo design is probably one of the most cost-saving and creative techniques available to logo designers. Negative space reduces the amount of colors needed to produce a logo, which in the long run means you’ll pay less, as you’re not using as many colors in your print jobs.
The use of negative space in logo designs can also give logos a subtle third dimension, creating a layered look. The best example of this would have to be the FedEx logo. Visit www.fedex.com and take a close look at their logo. Have you ever seen the hidden arrow found in between the letters E and X? If you haven’t noticed it before, then you’ll never look at this logo the same way again. The hidden arrow portrays the speed and precision of the delivery service in a creative, simple, and clever manner.
How could you use negative space in your next logo design? Try turning the company name or part of the symbol into negative space by dropping the color out of that area. Usually, you’ll need some sort of background shape to do this. For example, in the Peter Ryan logo we showed earlier in this article, the letter P has used the letter R as the background to create the negative space.
Finding a creative solution for a logo that incorporates the use of negative space takes a lot of experimentation and sketching; however, it can really pay off, as the finished result will certainly stand out.

Use “white space” in print design
The use of negative space in print design is often called white space—it’s the space that doesn’t hold any content and it’s usually the key aspect of what makes or breaks a design. It’s also worth mentioning that white space doesn’t have to be white. Your background can be any color you wish; however, be sure to leave empty space. The effect will be the same as if the empty space was actually white.
White space in print design is used purely for semiotic value: a presentation that transcends economic values by insisting that the presented image is more important than the paper it’s printed on. For example, take this DL flyer for a fashion product. Straight away you can tell that the edgiest and most valuable fashion product would be the third design. This is achieved by using an unpredictable, asymmetrical balanced composition with a lot of white space, showing that the image is more valuable than the paper itself.

CREDIT: ©SXC.HU/SCOTT SNYDER

Although the other two designs are acceptable examples, they don’t communicate as much prestige and class as the third image. This shows just how much power white space can give to a design.

Although there are numerous ways to apply negative space to a design, the best way to come to grips with the concept is to practice. In the same way martial artists have to spend hours and hours practicing simple techniques, graphic designers have to do the same.