Designer Best Practices

100 Do's and Don'ts of Design

These are some of the most common mistakes I see beginnings repeat over and over. Good design can be acheived by learning some basic rules.

Basics

Get peer critique.

Sometimes, we can get sucked into our own minds if we work on a design for too long. Get a fresh set of eyes on your work.

Break rules only after understanding and respecting them.

Most people break the rules because they don't understand those rules even exist. The people who are able to influence the industry and be innovative already understand the importance of the rules and break them intentionally in order to get a specific response. Make sure that all of these best practices make sense to you and become very good at executing the instinctively. Only then should you start thinking about breaking the rules.

NEVER do anything in a layout without a reason.

Design is all about making intentional decisions, whether that has to do with layout, type, user experience, or anything else. Do not make any design choices "just because".

Avoid having too many styles in your layout.

Many beginning designers feel like by incorporating many different colors, fonts, styles, etc., they are displaying how much they know about design. Really, it is much better to restrain yourself and stick with a specific set of rules and ideas for design in order to make a bigger impact.

Removing is often better than adding.

Often times, a design can become stronger and clearer when it has many unnecessary and inappropriate items removed. Apple is famous for having very minimalistic hardware, and people love them for it. If the design is not working for you, think about removing fonts, colors, or elements before you try to add anything.

Minimize clutter.

How easy is it to concentrate on a speaker when you have people around you talking on cell phones, babies crying, and music playing in the background? Think of your layouts in the same way. Your intention as a designer is to make your viewers experience as simple, easy, and enjoyable as possible. Don't throw too many things at them at once, or they will become paralyzed with indecision.

Remember "hierarchy of importance".

You should decide ahead of time what elements you want to make most important followed by the next importance and followed by the least important. By making everything the same size, fontweight, or color, you were making everything the same level of importance. Make sure to break down the page into sections and break those sections into subsections. This will create a logical organization.

Less is more.

Multitasking does not increase productivity. People can be much more attentive and absorb much more information if they have one item to focus on at a time. Do not make your audience multitask by giving them too many things to focus on.

ALWAYS research other similar sites before designing.

If you were trying to come up with a logo, layout, or any other design concept, it is most likely that thousands of other designers have had to think through the same process as you. By looking at what other people have done, you can eliminate going through the preliminary thought process that has already been gone through. You can also see what has already been done, so that you don't spend hours coming up with an idea that's already been taken. You can also be inspired by what many better designers have done and allow that to propel you even further. Don't try to reinvent the wheel. Innovation comes from branching off of existing ideas or combining multiple ideas that haven't been combined before. There are billions of people on earth all creating things and thinking of ideas. What do you think the chances are that you're going to come up with something 100% original?

It's ok to use pre-designed icons and images, as long as they match your brand.

80% of all websites share many of the same characteristics. Their all written in code, they all are optimized for browsers, they all make use of type and imagery. You can save hours of time by allowing someone else to create the base layer for you and then building upon it. There are thousands of templates available online design by world-class designers. Why not use their work as a steppingstone and propel from there? Be careful though. Just because you were using a well design template, it does not make it foolproof. You can quickly turn a great layout into something horrible if you don't understand what you're doing or if you do not follow the same stylistic guidelines of the original template.

Branding and philosophy should drive your design.

Many designers make the mistake of thinking purely visually. Think first and foremost about the logic that plays into the design. The style should only be a shell to the infrastructure which is based around keeping the user in mind.

Google "Make My Logo Bigger Cream".

There's a hilarious infomercial parody called "Make My Logo Bigger Cream". It basically demonstrates all of the major crazy mistakes that clients end up forcing designers to make. Watch this video to see just how ridiculous some of those requests are and so that you do not make those same mistakes yourself.

User Experience

Think about the user (UX). Don't make them think.

There is a great book titled "Don't Make Me Think". This book is all about leading the website user on a very simple, easy journey. You should not present your user with any choices or layouts that caused them to wonder what they are supposed to do. Do all the thinking for them by having rational, user-focused design. The general rule is that you do not want to make a user think from more then three seconds about what a link is intending for them to do. You should also not make anything more than three clicks away in the site.

No one should have to search more than 10 seconds to find something on your site.

Think of a website visitor like a customer at a department store. When have you ever been to a department store and spent a very long time looking for a particular product? Many stores help to alleviate this problem by organizing their products into categories and then creating signage at a very high visual level to lead users to the right place. To me, having to have a search bar on your website is like having to consult with a customer service agent at a store. Things should be simple enough to find on your own without consulting anybody.

Remember "Call to Action".

A call to action is something that leads a website user to do something specific. Think about what your intention is for the visitor and make sure that that intention is clearly marked and that you persuade users to follow through with that intention. In sales, there is a phrase "Always Be Closing". This is essentially the ABC's of sales. This means that you should always leave potential customer to a decision to close. Don't waste time with unnecessary fluff if it is not leaving the user anywhere.

See the site from your visitors' point of view.

Ultimately, the site is for the user not for you. Do not design things just because you think they look cool or because you like them. Of course, it's always great to incorporate your own personality, but only if it furthers the intentions of the website, which are to serve the customer.

You should have no more than 3 main goals in mind with the site. Design the site around those goals.

I typically ask potential clients what their main three goals are for the site. Typically they are things like "educate visitors about my company" or "get visitors to buy something" or "get visitors to sign up for my newsletter ". You don't necessarily need to be pushy, but you should definitely have those intentions in mind.

Type

Do NOT use the stair step arrangement for text.

One thing that beginning designers want to do is create a text arrangement in which a sentence is broken up into multiple lines and each line is indented further and further to the right, creating a stairstep pattern. I personally hate this arrangement, because it creates empty, unused space to the bottom left and upper right of that arrangement. I'm not really sure why people like using this layout, but I've never used seen it used in any professional context for any reputable company. This layout screams "amateur!".

Do NOT use the following fonts: Comic Sans, Papyrus, Zapfino, Myriad Pro, or anything curly.

These fonts are all on my shit list. Most everyone has heard of comic sans, and it has gained a notorious reputation even among nondesigners. Papyrus is a close second, and is used even in many professional contexts. I have even been guilty of using this font in middle school and high school for reports. I'm not really sure what the appeal is for these fonts, other then to create an intentionally hand-made it look. making something handmade is fine, but using these particular fonts, which are so widely known, it's sort of like wearing white socks with black shoes. This is something culturally that you don't do if you don't want to be left out. Zaffino became a font that I've despised for the past three years or so. It is a very really any thin, almost illegible font, that people seem to love to use. Even when used just as a header, there something about this phone that I just hate. Even more so, some people even try to use this font for paragraph text, which becomes almost illegible. Myriad Pro isn't nearly as bad as these first three, but since it is typically used as the default font for illustrator, I tend to avoid it. To me, it is like the cheap man's Helvetica. It has many of the same aesthetic qualities, but not the same level of craftsmanship or elegance. Please don't use anything currently.

Understand the difference between Serif, Sans Serif, Script, and Decorative.

First off, these are the four basic categories that most any typeface can be placed under. Each of them has its own unique qualities and characteristics and can be used appropriately or inappropriately depending on the context or style.

Serif

Serif fonts typically have slabs or feet or whatever you prefer to call them. Some very popular examples of surf fonts are Times New Roman, Courier, Georgia, or Baskerville. Surf fonts are typically used in print, and especially novels, because the seraphs help guide the reader's iPhone one for the next. Serifed tends to have more of a sense of tradition, establishment, and respectability.

Sans Serif

"Sans" means "without", and therefore this category type does not have serifs. Send Sarah is typically used in digital contexts since those situations are resolution dependent. This means that we have a limited number of pixels to work with, and therefore need to be very efficient with them when creating our letters. These are especially much easier to read at much smaller point sizes. With serifs, you have many more pixels to cram into a letter, thus making them much more cluttered and harder to read. Send Sarah typically has a more modern, clean, sophisticated feel to it. So very popular examples are Helvetica, Arial, Verdana, and Myriad Pro.

Script

Script basically refers to anything that looks handwritten. Designers will typically use script fonts when wanting to get a sense of authenticity or craftsmanship. Script fonts can vary widely in terms of their style, elogance, texture, brush type, and thickness. some subcategories are calligraphy, graffiti, or handwriting. Some popular (or natorious) examples are Comic Sans, Zapfino, Papyrus, or Marker Felt.

Decorative

The greatest fonts are typically used for headers, especially in posters or album covers. They tend to go a much more illustrative route and tend to break a lot of rules. You generally want to avoid using decorative fonts for paragraph type, since legibility can be a major issue.

Do NOT use decorative fonts for paragraphs of text.

As mentioned in the previous section, the decorative fonts tend to be a lot more illustrative, and when reduced to the size typical for paragraphs, it can become eligible.

Use all lowercase, all uppercase, and mixed case intentionally and consistently.

One technique that can be used to create a sense of hierarchy of importance and text is how we use uppercase and lowercase. Kanye West is infamous for using IN his blog entries. Many older folks tend to do the same thing as well. The reaction people have when reading is that they imagine that the writer is screaming at them. As a result, if you want to get peoples attention or make something seem very important, using IS a very effective way to do that.

When it comes to logo design, many companies are switching to an all lowercase arrangements, since this tends to be much more approachable and modern. It's most likely because when people are texting or IMing to each other, they tend to leave capitalization out since it is one extra level of mechanics which can slow down the typing process. Since that is the context for using all lowercase, we tend to associate that with person-to-person dialogs or less formal situations.

When using, especially in logo design, it can give the sense of authority, dominance, and strength. Therefore, if you are a construction company or manufacturer of heavy machinery, this may be more appropriate for you.

Using CAN also be good since it does not create an under evenness above and below the x-height by creating a Senderson descenders. What this basically means is that all the letters are going to be the same height no matter what. When you're dealing with lowercase, you have letters like L, H, NT with a Synders, which stick up above the rest of the t letters. You also have descenders such as in the letters G, Y, Q, which drop below all the other letters. This can create issues, if you are stacking lines of text vertically.

Do NOT use small caps.

Small caps is when you type something in all capital letters in the first letter of the word is larger than the others. I haven't figured out the exact reasons why this bothers me, but I do know that I rarely see it in professional contexts and that I personally do not like it.

Do NOT underline your text.

Underlining text creates visual clutter, and can also distract from legibility. Again, I really see this in professional contexts.

Do NOT highlight your text.

Although this has been found to increase call to actions in many persuasive sales letters online, visually, you can come across as very tacky and tasteless. If you should use highlight, be sure that you have a little bit of space of highlighting around the letters instead of cutting off the highlight immediately at the top and bottom of the letters.

Do NOT turn your text diagonally.

This can be done in very rare cases to create more of a fine or dynamic feel. However, most beginning designers will use this technique very improperly and can hurt your designs more than help them. Similar to the stairstep arrangement of text, creating diagonal text causes there to be empty, unused space in the opposite corners around the text. Typically, the only time you want to use diagonal text is to create a sense of movement, or unease.

Do NOT use faux bolds or italics.

Hey full bold is when Photoshop or some other program takes a standard sickness fonts and applies its own algorithm to it to make it look thicker. This typically causes the text to look more rounded, balloon-like, and unprofessional. When typographer creates a Typecase, he or she will usually include multiple styles or sets for the various contexts such as italics, light, and fold. These various styles are handcrafted and designed very carefully and specifically to create the best results for each style. You should not make something bold or italic unless you know that you have those styles included in your phone set.

Do NOT have text stretch across the entire layout.

When people are reading from one side of the page to the other they have to immediately bring their eyes back to the left edge to continue on the very next line. Further across the page they have to look, the more difficult it's going to be to keep their place. You will notice, if you have her open Bible, the text is very small, and all the pages are broken up into two columns. By having two columns, the reader has a shorter distance to bring his eyes back and forth, and therefore are able to read from one till like much more easily. Many magazines and newspapers do the same thing. The only case where this can actually be pulled off successfully is with header text, since usually do not want to have a header run more than two lines.

Do NOT mix very similar fonts.

Although you shouldn't use more than three fonts and layouts, those three fonts should be very distinct from each other so as not to mix them together. If you take three very similar fonts such as Times New Roman, Georgia, and Baskerville, and mix them all together, it creates the appearance of inconsistency and unprofessionality, because it is very difficult to tell whether they are distinct fonts or if the type is just inconsistent. 

Do NOT use more than 3 typefaces in a site or layout.

By having too many typefaces, you are not focusing your brand sharply enough. Don't give the viewer to many different styles or influences to look at, or else your layout will look like it has no direction. Remember, less is more.

ALWAYS make sure text is legible.

Legibility should be the number one goal for your text. This doesn't just mean making sure that it's easy to read, but also so that all the typographical elements and techniques help emphasize the message behind the words. For example, if you write a sentence like "whisper your message Gencheli", you don't want to use, bold, and arrange it diagonally. This hurts fungibility, since the viewers mind is getting two different messages at the same time – one literally and the other visually.

Avoid large amounts of text at all costs, unless, of course it is a blog entry or news article.

How often have you gone to a website that had thousands of words and read through every single sentence? This rarely happens with web users, since when browsing the web we are typically in a scanner mode, meaning that we are searching for something specific and want to get there as quickly and efficiently as possible. Only if someone is reading a news article, blog, we're doing research, will they want to have large bodies of text. Otherwise, keep everything to the point and don't write any more than you yourself would read when visiting a website.

Make use of bolds and different sizes.

This plays into the role of hierarchy of importance. When writing a section of text, make use of things like bold, colors, sizes to help break that section of been to more bite-size pieces. So many beginners make the mistake of having an entire section of text the exact same size, color, and thickness. This creates one big visual chunk that all runs together.

Use Google Web fonts for non-web-safe fonts.

When creating layouts for the web, making sure that type is any website font is very important. This is an entire topic on its own, but basically you need to know that there are very few fonts that are web safe, and to alleviate that problem several development companies have come up with some of their own solutions to allow for a more diverse array of fonts to be displayed dynamically on the website without resorting to image-based text. Google fonts seems to have one of the best solutions out there. Google also allows you to download these fonts and use them in your design layouts on your computer.

Copy

Do NOT use any of the following headers: "Welcome", "About Us".

There is an argument between writers and designers in which each of them proclaims either "design is King" or "content is king". The fact of the matter is that both of them are right. The "content is king" argument states that it doesn't matter how your page looks, as long as you have a important vital information to give to the rear. I only have to agree with this. If I were to combine these two statements I would say "Content is king and design is queen, and together you had a kingdom". When using headers like "welcome to my website" or "about our company" you're basically wasting very valuable, I catching information with absolutely useless text. Make those headers counts and say something useful and attention-getting that explains the preceding paragraph. For example, if you have a website for a organic farm, instead of saying, about our organic farm" say something more like, "fighting obesity through natural choices" or something like that. buy rating that way, you're pulling the viewer into the paragraph by catching their attention.

Use terms that you would search in Google to find this kind of site.

This gets into the topic of SEO or "search engine optimization". This in itself is a multi-million-dollar industry, in which websites will strategically use words in their website in order to get higher organic search results in sites like Google or Yahoo. So essentially, what you need to think about is if someone were searching for your website on Google, what sort of terms with the enter into the search bar? If you don't have those words and phrases in your website, and especially in your headers, you're losing valuable traffic.

Use Lorem Ipsum for filler text, but not for headers.

Lorem Ipsum is essentially Latin filler text that designers use to fill up paragraphs of text that they haven't yet received copies for. Since writing effective copy requires a skilled writer, as well as lots of time and thought, as a designer, you are better off focusing your efforts on good layout instead of writing, which are not being paid for. before I knew about this Latin filler text, I used to just put fake text into my layouts when presenting a design to a client. I was astonished when the clients focus more on what I had written then the actual layout of the site. I have to continually told them that what was written was only filler and that we would replace the text as soon as they provided it to us. As a result of finding my filler text, I no longer got countless inquiries about what I written, but rather have the client focus on the design instead, realizing that the text come later.

On the flipside, I think as a designer, it is still important to provide some actual written text for the headers, just to give the client an idea of the intention of that section. These headers don't take very long to write, and it can clear up many questions that the client might have in terms of the actual full intention of the site.

Color

Have an accent color, and use it sparingly.

Use correct terminology - Hue, Saturation, Value.

Understand CMYK vs RGB.

Understand blend modes.

Avoid vibrating borders.

Vibrating borders occurred when you have two complementary colors of the same value overlapping each other directly without any sort of order or gap between them. This effect occurs because your eyes or your brain is trying to adapt and compensate for these two colors. you will notice this affects if you wear a pair of old-school red and blue 3-D glasses for several minutes and then take them off and shut one I had a time. You'll notice that your eyes see different colors afterwards, because of your brain adapting. this also occurs with areas of high white contrast. If you stare at a black dot in the middle of a white piece of paper for a minutes and then look away, you will notice that dot still your vision.

Do NOT put anything other than white on middle tone background.

Do NOT use more than 3 brand colors.

Layout

ALWAYS start with a sketch.

ALWAYS use a grid.

Use padding and white space to draw attention. This is not the same as having blank gaps.

Do NOT use the checkers pattern for elements.

Do NOT overlap the corners of photos.

Do NOT feather your images.

Do NOT put secondary columns on both sides of your layout.

Avoid centering your layout and/or text.

 

Styling

Only use styles and effects to create MORE contrast from the background.

I have lost count of how many times I have seen a student take grey or dark type and applying a drop shadow to it.

Avoid using strokes, especially on letters, at all costs.

If using Photoshop effects, NEVER use the default settings.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu