Improving Your Design Eye
Nicholas Soos (@nick_soos) — Creative Designer at Digital Natives
I was recently on the subway commuting to work. I always find that the subway is one of those awkward spaces between destinations where everyone tries not to make eye contact. I was a few stations away from my stop and I found myself scanning for something to look at…voila! There was an advertisement in front of me. So, I did what any other designer would do: critique it. The composition was fairly simple: there was a big, bold headline at the top, a small logo in the bottom right corner, a large cut-out photograph of a clean-cut man in a suit, and an illustration masked behind the photograph hanging off to the left. I analyzed the piece from top to bottom, scanning every detail like I was the Terminator. Then I saw it. Sticking out like a sore thumb was the illustration. The lines in the illustration were jagged and messy, anchor points were misaligned, and there were gaps where you could tell the illustration was incomplete. I knew right then that this was the work of an amateur designer.
To the untrained eye, amateur design can go unnoticed. These mistakes can completely change the impression of yours or your clients’ work no matter how small the detail is. Outlined below are three specific areas of design that, with the proper practice and focus, can take a designer from amateur to the big leagues.
One of, if not the most, important and easily overlooked elements of design is typography. Typography, much like traditional art, has an extensive history. Thousands of books and documentaries have been created on the subject; you could spend your whole life learning about type and still not be a master. Kerning is a specific area of typography that deserves the attention of any designer. You may have heard the word kerning before and you perhaps even use it in presentations to impress your clients, but do you actually know what it means? In its basic explanation, kerning is the manual adjustment of space in between letters. Type designers set a spacing per character but obviously don’t account for all character spacings. Anyone can type words on a page and call it a day. It’s a designers job to ensure that the type is perfectly kerned. Programs such as Adobe Illustrator and InDesign have the necessary tools to manually adjust letter spacing.
Having an in-depth knowledge of type and its relationships shows a level of passion and detail an experienced designer should have. Below are a few tips and tricks to help you improve your level of typographic knowledge.
Learning Letter Relationships
Before you get into actually kerning any letters it is important that you understand some of the basics of letter relationships. Every letter is made from three types of strokes: curved strokes, straight strokes, and angled strokes. Learning how to properly tackle each of these relationships will greatly aid you in your kerning skill. When dealing with straight strokes you want to give it the most space because this pairing is typically set as your baseline for how the other relationships should be kerned. Curved strokes will require a slightly tighter spacing than your baseline as there is more white space around the letterform and they will look farther apart. Lastly, the dreaded angle strokes require the most attention as they have the largest amount of whitespace and will have to be optically kerned as tight as possible to make the baseline spacing.
To The Upside Down
If you are struggling to spot where your kerning attention needs to be focused, a simple trick is to turn your work upside down. Now I know that may sound strange, but going into the upside down is a useful way of spotting incorrect letter spacing. Your brain has been taught to read in a certain pattern. By breaking that habit, you will increase your ability to focus on different details. No longer will you be distracted by reading the physical words as a whole, instead, you’ll be focused on each individual letter. This simple trick is a fast way for you to easily pinpoint inconsistent spacing in-between each character and allow you to adjust accordingly.
Practice Makes Perfect
I know this may sound cliche, but one of the most important tips for improving your kerning skills is practice. The more you practice, the more it will become second nature. A good habit to pick up is to go back and look at your old work and see if you can spot any mistakes. Being able to spot your own mistakes and learning where you can improve is a fundamental step for any amateur designer. A great online exercise you can use is Kerntype. Kerntype is a simple game where you are given a series of words that you have to kern optically, to the best of your ability. In the end, it gives you a total rating out of 100.
If you’re new to the typography scene or you just love type, a great book to pick up is “A Type Primer” by John Kane. It is a practical and hands-on guide that walks you through all of the facets of type design and layout.
White space is one of the tricky grey areas in design (the irony of this statement is not lost on me!). White space is the void space around content on a page. When used correctly, it can efficiently create a frame around your content that focuses the user’s attention. Additionally, it can direct the user’s eye to create a narrative, forcing them to read your layout in a specific and intended way. I always laugh because the discussion of the use of white space always reminds me of the opening credits in Airplane!. In the scene, you can hear two PA announcers at the terminal argue over the speaker about the restrictions of the white zone. Their argument has no resolve because, like in design, white space has no defined rule. You can use as much or as little white space as you need and sometimes shapes and artifacts can be placed in conjunction to help increase the visual narrative.
Being able to properly manage white space on your artboard is a tough skill. If you’re not really sure whether the white zone is for the immediate loading and unloading of passengers or if there is no stopping in the white zone, the following tips and tricks will provide you with a good foundation to help better define the white space in your layouts.
Plotting the Land
You’ve just been handed your brief. You now know what information needs to be laid out on your artboard, yet you sit there staring at a blank screen not knowing where to start. A great way to help define a visual narrative is to begin with a grid system. I like to think of an artboard as a large plot of land. You, the landowner, must now decide how to divvy up the space. Constructing a grid divides the space and is an important first step in organizing and laying out visual elements on the page. Adding a grid structure to your work will help with content placement and allow you to better define the amount of white space needed in-between your elements.
How Much White Space is the Right Space?
Even though it’s called white space, it does not necessarily have to be white. This is where that tricky grey area comes in; leaving white space in between content is perfectly fine, however, content can occasionally be better emphasized with other devices. If your project has a branding guideline document, read through it. It can be a helpful resource to offer insight into which design artifacts you can utilize to help communicate your visual narrative. There is a time and a place for every design element and which element you use varies on a case-by-case basis. If your work is starting to feel claustrophobic, take a step back and look at all of the elements on your page. Ask yourself: Do I really need this border here? What purpose does this shape offer? If you do not have a clear reason for its purpose and it is taking up a large portion of real-estate — kick it out!
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” — Antoine de Saint-Exupery
Once Upon a Page
Lastly and most importantly is hierarchy. Hierarchy is the story of the page and the order your viewer will read the content. Now that you have set up your grid lines and have a clear vision of the design elements you want to use, think about their visual order. Where do you want the reader’s eye to go first? Does this content need to be called out? Can I use a shape here? Is this button important? Asking yourself these kinds of questions will greatly help you lay out your work, manage white space, and keep your viewers engaged.
When I spotted that error in the design on the subway I reminisced back to my early beginnings tinkering with Illustrator. Needless to say, it was overwhelming. Illustrator is an extremely powerful program with a vast arsenal of tools at your disposal. With a lot of amazing built-in features and a vast online library of free graphics, one can easily get carried away. You should not be relying solely on freebies or the program to do your work — people will notice. To grow as a designer, you need to take risks, and learn to experiment for yourself. Set up a process and work through it, step-by-step. You would be amazed how much more efficient and effective you will become when you break down a process into simple steps. To help you get started on the right path to developing your own design process, here are a few tips on how I typically tackle my illustrations.
Draw, draw, draw, draw, draw, draw
I know I am not the only designer out there who occasionally finds themselves staring at a blank canvas not knowing where to start. From personal experience, a good habit to get yourself into before starting any illustration project is to gather as much visual reference as possible to help get your mental gears turning. Websites such as Dribbble and Pinterest are fantastic resources that can get you inspired by a vast library of designers. The beauty of design is that, in some shape or form, we all inspire each other through our work. Once your “inspiration folder” is bursting at the seams, take some time to sketch your ideas out on paper. Drawing your thoughts out on paper is a perfect way to visualize your ideas and see which direction has the most potential. Remember, these are just quick sketches, so don’t worry if it is the messiest collection of ideation on a page that you have ever seen — some of the greatest ideas started as a scribble on a napkin.
I’m in Love with the Shape of You
After you have scanned your sketches into the computer it is now time to proceed to the illustrating process. It can be daunting thinking about where to place your first anchor point on your scanned image. A great tip to help you to get started is to think about geometry and how complex illustrations are comprised of basic shapes. I think it is safe to assume that we have all, at one point or another, followed an unhelpful drawing tutorial, where the first few steps start off with simple shapes that somehow magically transform into a piece that belongs in an art gallery. In retrospect, I realized that the process wasn’t meant to frustrate me, but was a guide to learn about form. Once I understood that I can distill any complex object into simple shapes it became simple to create a process. Establishing a starting point using simple shapes in your illustrations can act as an effective technique to help construct your designs and grow your understanding of form.
The Pen Tool is Mightier
They say the pen is mightier than the sword. That figure of speech is especially true when it comes to illustrating. The pen tool is a powerful utility and one of the basic foundations of creating any illustration. The ability to fully utilize this tool will have a massive impact on your proficiency as an illustrator and your skill as a designer. In order to understand how the pen tool works you must understand what a Bézier curve is and more importantly, how to manipulate them to your will. For example, if you’re struggling to create those perfectly smooth shapes, using the pen tool correctly will solve this problem with ease. Below are a couple of resources that can help introduce you to and understand the Bézier curve in detail:
In the End
With so many available resources at our disposal, new designers should take every opportunity available to advance their craft by honing their skill, learning new techniques, and incorporating them into their workflow. With the countless programs and hours of tutorials waiting to be taken advantage of, the lengths of your development depend on your willingness to learn. The moment you stop refining your skills and pushing your boundaries is the moment amateur mistakes will shine through. Although those mistakes may seem small or insignificant, they’re a big tell that you have room to improve.
Looking back, I wish I took the time to follow as many tutorials as possible or find a mentor to help me hone my design vision. There are no keyboard shortcuts or easy methods for designing. It can be hard and frustrating. We all had to start somewhere, which is mainly why I am sitting here writing this: to help those of you just starting out or those who need encouragement to keep going and keep improving.
Regardless of where you are in your design career, improving within these areas of design will drastically elevate your work. Your portfolio is a reflection of your ability as a designer and when you are not there to talk it through it, it will speak volumes on your behalf. So I ask you this: What do you want your work to say about you?
