Creating Beautiful Layouts

Creating beautiful layouts is a bit of an art form, which is something that sets a great designer apart from a mediocre one. In order to create professional layouts, you have to understand the basic rules that make them up. I’m going to explain the rules, why they’re important, and where people tend to make mistakes… then I’m going to show you a good and bad example so you can see the difference for yourself.

The thing about good design is, unless you’re a designer, you don’t know why something looks more professional than something else, you just know it does. The following will help you see the difference and understand what specifically makes something well designed and professional so that you can carry it into your own creations.

Hierarchy of Information:

One of the most important things to note in all design is creating a hierarchy of information. Basically, what’s the most important thing for someone to see first, second, third, and so on?

Once you’re clear on what those things are, your design should reflect that. Something that’s the most important should be placed more prominently. “More prominently” means higher up, larger in size, and possibly a more noticeable color (though it’s never advised to just make things piercingly red “just because”!). The problem that most non-designers face is forgetting this hierarchy and trying to make many different elements pop in many different ways, effectively created chaos on the page and ensuring nothing gets looked at at all. Not everything is “the most important” and it’s important to visually honor that.

Balance:

This is all about making sure there’s a balance between elements that’s appealing to the eye. Balance is often achieved through the use of a grid. Starting with a clearly defined grid will help you align elements and ensure balance between them in a way that feels really clean and professional.

When someone doesn’t use a grid, you get elements all over the place and feel like you’re not sure where to look. Is it okay to break the lines of the grid? Sure, but only if you know what you’re doing. So a simple way to ensure that things look clean and balanced is to honor the grid. 

Breathing Room:

Also known as “white space” in the design world. This is basically ensuring that there’s plenty of space and breathing room between objects and elements inside your design. Most people don’t understand this concept and create teeny tiny margins which make a design feel cramped and overwhelming to look at. As important as creating breathing room, you also want to make sure you keep that breathing room even across the board. If you put a 0.5” margin around the outside of your layout and a 0.25” margin around your logo, then you want to make sure all the other elements within the body of the layout have the same 0.25” margin for balance.

Choosing a Color Palette

Color palettes can make or break your design, and not many people understand their importance, let alone how to choose the right palette. First things first, it all comes back to your brand strategy, audience, and mood board. What is the essence, feeling, or tone you want your brand, website, or collateral to convey? Is it feminine or masculine? Is it warm or cold? Is it luxury or cheap? Most people don’t realize that certain colors say certain things… and even though this is also true of our audiences, there’s still an unconscious response.

For example, black says luxury while yellow says cheap. More often than not, you’ll see the high end sports car in black, and the low end starter car in yellow. Additionally, yellows and reds make us hungry, while blues and greens are generally unappealing when it comes to food. Pretty much every fast food chain uses a combination of yellow and red for this reason. For a long time, it was said you should put food in a blue or green container, or put a blue lightbulb in your fridge to make eating less appealing. Now, however, most health food brands have adopted green as a health food indicator.

If you have strong branding and messaging, you can create or change the definition of a color and palette, but you have to know what you’re doing. For now, stick to the basics! If you want a warm and inviting feel, you want warmer colors. If you want a cool, masculine feel, you want darker, deeper, and richer colors.

Click here to learn more about color psychology!

Creating a color palette:

Here are some important color tips:

Don’t choose something you like just because you like it, and don’t exclude something just because you don’t like it. Does it really matter if you hate the colors pink and purple when you’re trying to market a toy to little girls? Does it really matter if you can’t stand photos of flowers when you’re creating a brochure for gardening tools? The answer is no, because your personal preferences are irrelevant unless you’re building a very personal brand that’s focused around you. Work to be objective. This is your business, but sometimes (depending on your business model) it’s not about you and what you think looks best. I’ve had clients tell me “I don’t like purple” or “I don’t like trees” with no valid reason to exclude those elements from a design other than “I don’t like them.”

Don’t shout with your colors. A lot of times I’ve designed beautiful websites for clients, only to check in on them later to see bright red, bold, and ALL CAPS text all over the page. It’s jarring and unnecessary. If you want someone to see something or do something, focus on creating a clear hierarchy of information, rather than making something blazing red. It doesn’t look professional and there are better ways to attain the results you want to achieve.

Avoid color clashes! This is one of those things you can usually show to anyone and get clear feedback around… colors that should not be side-by-side or overlapped, because they’re visually upsetting or even anger-inducing. Color can be pleasant and soothing and everything awesome in design, and it can also be awful, distasteful, or emotionally jarring. If you like to be visually jarring in your own outfits, that’s awesome. But when it comes to creating design that represents a brand, connects and communicates with an audience, and that people buy from, you have to be aware of any clashes that may be happening.

Stay consistent no matter what. Once you have your color palette chosen and in use, stay consistent. Color is a huge piece of branding that we respond and bond with, and to regularly change it up (unless you’re strategically creating an ever-evolving color palette as part of your branding and marketing - ninja designer level) will be confusing, even upsetting, to your audience. Don’t believe me? Several years ago Tropicana juice repackaged their orange juice with new graphics and branding and use of color and their customers were PISSED. So pissed that they immediately reverted, which cost them a whole lot of money. Consistency is essential to branding.

Remember: Stay objective, strategic, consistent, and on brand!

Typography Tips and Tricks

Just the same as color can make or break your design, so can 
typography and fonts. Every single font says something specific 
about your branding, so it’s important to create a family of fonts that represent you and your audience accurately. And just like color, it’s essential to remain consistent in your use of fonts. This is another area where people like to get a little crazy and playful, unfortunately to their own detriment. Just because you have thousands of fonts at your disposal does not mean you should use them all.

As a general rule, you should have a maximum of three fonts in your font family, and two of those are generally accent fonts used strategically alongside your primary font family.

This is another area where you can break the rules, however you have to understand them first and have a design eye for when and where it’s appropriate to do so.

Let's look at the general font styles you have to choose from:

Serif Fonts: Serif fonts are generally more classic in general and make good body fonts for books and ebooks. The little tails at the end of each part of the letter helps create a clear baseline which makes scanning a sentence faster.

These are serif fonts, they have a classic feel.
These are serif fonts, they have a classic feel.
These are serif fonts, they have a classic feel.
These are serif fonts, they have a classic feel.

Sans-Serif Fonts: Sans-serif fonts don’t have the little tail/serif on the letters and are generally considered more modern. They work well as body text as well.

These are sans-serif fonts, they have a modern feel.
These are sans-serif fonts, they have a modern feel.
These are sans-serif fonts, they have a modern feel.
These are sans-serif fonts, they have a modern feel.

Script Fonts: Script fonts are great when you want to add a classy feel, but can also be used to create a more personalized and handwritten feel. They should be used more sparingly in designs rather than as main heading text, unless they’re very easy to read.

These are script fonts, they have a personal feel.
These are script fonts, they have a personal feel.
These are script fonts, they have a personal feel.
These are script fonts, they have a personal feel.

Decorative Fonts: These are rarely used well, and should only be considered if you have a very playful of clearly themed brand. There also aren’t very many that are web friendly, and oftentimes they’re hard to read, so they should be limited to headings only.

These are decorative fonts, they have a theme feel.
These are decorative  fonts, they have a theme  feel.
These are decorative fonts, they have a theme feel
These are decorative fonts, they have a theme feel.

Here are some important typography tips:

Choose complimentary fonts. As a general rule, you want to choose a primary font family for the majority of your text, and those generally boil down to a serif or sans-serif font, depending on your audience, brand, and overall tone. Once you have a primary font, choose complimentary accent fonts to work alongside it. If you’re using a modern script font with clean edges, you’ll likely want to use a sans-serif font. If you’re using an old style calligraphy inspired script font, you’ll likely want to use a classic serif font. Think about the overall tone of your brand and what fonts work best together to support that.

Consider the placement of the text. If it’s going to be a big body of text, you likely won’t 
want to use a script or decorative font, as it won’t be easy to read. Generally speaking, a 
serif or sans-serif font makes the most sense for body text. As for headings or logos or pull quotes and highlighted content areas, you can get a little more playful, just be sure to 
choose fonts that are still legible.

Keep consistent with your fonts! No matter what you’re creating, consciously pull from 
your chosen font families and don’t stray. Remember what I said about color? Fonts are 
also a huge piece of branding that we respond and bond with, even if we don’t realize it. 
To regularly change it (unless you’re strategically creating an ever-evolving font family 
as part of your brand - designer level: ninja) will be confusing, even 
upsetting, to your audience.

Don’t ever stretch your fonts. Don’t pull them wider or taller unless it’s to scale. I don’t 
think there’s a font family out there that wasn’t carefully and meticulously built to be exactly balanced between characters, numbers, punctuation, and glyphs. Trust that it’s the exact height and width it’s meant to be, and if you don’t like it, find a different font that comes 
wider or taller. Please don’t ever stretch your fonts!

Choosing Imagery or Taking Photos

Imagery is a big, big, big piece of your branding and how you present yourself to the world, and just like everything else in the world of 
design, consistency is essential!

Lighting: You want to make sure all your images have the same feel when it comes to the lighting. This is essential for creating a cohesive feel. For example, don’t use one photo that’s bright, sunny, and crisp, and another that’s dark, drab, and backlit. Keep the lighting as consistent as possible.

Color tone: Some light is blue, some is white, and some is yellow. This is important to pay attention to. When you put all your images together, there should be a consistent color tone throughout them all. I’m talking every. single. Image. Color tone also translates to colors within the images. Is your primary palette heavy in purples and reds? If so, your photos should be too, rather than something random like orange and green.

People: This comes back to your brand strategy work… who is your audience? It doesn’t make sense to show a picture of a woman doing yoga when your audience is middle aged men who are trying to lose that spare tire. It doesn’t make sense to show a young Asian man when your audience is African American mothers.

Tip for choosing stock photography that isn' cheesy! One of the best things to do is look for images that feel more “in the moment” than posed. Rather than a picture of a young model standing and smiling at the camera with a stack of files in her arm to represent “business”, choose the image of a team going over notes together, not looking at the camera, and even with a bit of blur or elements out of focus to feel like you're in the moment with them.

Now, all that said, sometimes using illustrations or icons is what makes the most sense for your brand and audience.

This is generally true if your brand essence is about feeling young, modern, technologically advanced, or even playful. If your audience is younger kids, illustrations may also make the most sense rather than stock photos.

A general rule of thumb for using illustrations or icons comes down to consistency: I literally can’t say this enough when it comes to design and branding. Choose icons or illustrations that are consistent! Similar weights, lines, curves, or hard edges. Similar medium for illustrations (watercolor vs. ink). Even if they’re on different pages or from different artists or stock illustration sites, they must look like a family!

Noun Project and Shutterstock are great resources for icons and illustrations.

What about a photoshoot?

If you’re getting professional photos taken for your brand (or taking your own) there are a few things to keep in mind to get the best photos for your needs.

Color: Again, what is your primary color palette and what can you wear that’s in line with 
that in terms of color? If you don’t have something that works, use a light, solid colored top 
or outfit as those are easiest to photoshop to better match your site, or go for neutral 
colors like black, white, or cream.

Cropping: Head shots are important, but so is having a selection of photos where you’re 
not cropped tightly at the chest and shoulders. Ask your photographer to take wide photos of you where there’s plenty of space above your head and around your body. They can be cropped more tightly as needed later on.

Background: Most important is to ensure your background isn’t busy, distracting or cluttered, either by patterns, people, or even trees. The background should be soft and clean, allowing you to be more in focus.

Get Started Now!

This guide isn’t meant to turn you into a professional designer, it’s meant to clarify important rules of good design so you can create your own covers, headers, badges, buttons, ebooks, and anything else you might need to visually communicate your brand and message.

The best thing to keep in mind when designing your own pieces is to keep it simple. 

Remember your hierarchy of information. Remember your primary color palette and font family. Remember who your audience is and the core essence of your brand and business. Let those guide your choices as you put things together, rather than blindly copying something else.

Click the images below to look at my portfolio for inspiration in terms of layout, color schemes, imagery, typography, balance, and  design that truly reflects the company.

If you’re not sure, post your work for feedback.

Most people don’t know the specific differences between good design and bad design… but they can give you great feedback like “it feels busy” or “those don’t feel like the right images for your brand.” Just remember that as awesome as feedback is, it has to come from the right people! Design and branding experts, your actual audience, or people who have a firm understand of who you are, what you do, and who you serve.

Read my post on why Your Mom’s Feedback is Irrelevant for more on this!