Design Talk Part 2

“Can you make the logo bigger?” 

Of all the things we hear as designers, this is by far the most common. We can make it bigger but we won’t — let us explain why.

HIERARCHY

In all things, there is a hierarchy. Think about the company you work for, likely you have a boss, who has a boss, and so on. There is a structure to the company. The same applies to design. 

When you ask, “can you make the logo bigger?”, likely you don’t think your logo stands out enough in the hierarchy of the design. When it comes to this, the size of it is not what matters most, but the location. We, as people, have been trained to look for logos in certain places on the page. These places are: Top Left, Top Center, and Bottom Right. It’s where your eye naturally goes to find out the brand of something. That doesn’t mean it has to go there, there are exceptions based on the rest of the layout but putting your logo in the middle of a page or package doesn’t always make sense (unless it’s the only thing on it — but then we wouldn’t be talking about hierarchy.) For fun, here is an example of poor hierarchy in design, where we made the logo bigger. See how it competes with the title?

Hierarchy also applies to the other elements on the page. When you think about the text on the page and the imagery, you want to make sure that the size, weight, and location guide the reader to the purpose. 

Here is an example of a page layout using all these same elements that follow the rules of hierarchy. 

WHITE SPACE

We’re really in our element here. The best way to explain white space in design is through visual examples. It’s a place on the page that is intentionally left blank, with no text, no images, just the page. 

Here is an example of a page with hardly any white space. The text and images take up the whole page, making it difficult to direct your eye to where to go. Likely, if you saw this in a magazine you would flip right past it. It’s too much to process. 

Here is an example of the same information but with white space included. See how much easier it is for your eyes and your brain to take in the information? Allowing those moments to pause on the page is such an important element in design. 

LAYOUT

We spoke a little bit about layout when discussing hierarchy but let’s look a little deeper. Layout is very dependent on the asset being designed so we’ll break it down. 

If we are designing a website, we want to make sure that the most important information is at the top of the page. Remember newspapers? The most important story went on the top of the front page and the term “above the fold” was coined because the paper folded in half. All the crucial stuff went above that middle fold. We use the same term for a website. Grab the user’s attention with a banner and headline that will draw them in and keep it “above the fold” meaning they don’t have to scroll to see it. Your logo and menu will be at the top above the banner so don’t worry about that. But think about what you want the user to see first, is it a product launch? Are you having a sale? Are you pushing a product that you have too much of? Put that in the banner then use the rest of the homepage, again think newspaper front page, to give secondary information. 

The same applies to newsletters / e-blasts. You want the layout to be dynamic and enticing with the most important information at the top so the viewer sees it right when they open the email. 

You never want objects in your layout competing for space or attention, even if you have a lot of important information to share. One of the more challenging places to remember this is when designing packaging. We know you have a lot of great features, want your brand to shine, we know there is necessary information like flavor or benefits, you likely have callouts like Fair Trade and believe us, we know you want all of this on the front of your packaging! Creating a layout that uses hierarchy to achieve the goal of displaying all your important information is what we do! Draw the customer in with a dynamic front and that will get them reading all your fun facts and interesting tidbits on the rest of the packaging. 

There’s a lot to consider when trying to layout anything in design. What helps us as designers most of all is for you to create an order of importance when it comes to talking about your brand. What’s the most important thing to convey (outside of your logo), what’s next? And what comes after that… you get it. If you need help with this, we can offer suggestions or think about yourself as a consumer. What matters most to you? 

CONTRAST

Okay, so you’ve got a great image (yay!) and some super catchy copy (yay again!) but can you make them work together? If the text is on the image, can you read it? Does it block the most important thing (your product) when placed on the image? You always want to make sure there is enough contrast between the image and your text. What does that mean? It means you can read the text AND see the image when they’re together. It means using light text on a dark image and vice versa. This also applies to the text on blocks of color, you wouldn’t want to use black text on a navy blue color block, as it wouldn’t be legible. If the color block is navy blue opt for white, beige, or light grey text. 

This image does not have enough contrast.

This is important for lots of reasons. First, you don’t want your image or text to get lost. If you are taking the time to create something, you want to make sure others will enjoy looking at it. It is similar to what we talked about with white space, if our brains can’t process what we’re seeing quickly, we skip over it completely. 

Here is an image with enough contrast that you can read the title and see the image.

Not only is this best practice in design but on the web, it’s required. Being accessible to everyone is part of ADA regulations. Creating websites with contrast between image or color blocks and text is something to keep in mind when creating or updating your website. We’ll get into more of that in a future blog post. 

Thanks for reading!