Sur La Table

Creating the Perfect Design

Do you ever see a design that just feels right but you can’t put your finger on what makes it so great? Well here’s a breakdown of things every designer should know to make their design fabulous. I chose this email from Sur La Table to dissect as an example. I thought the design was well done overall. So let’s dig in!

From: Sur La Table
Date: 11/09/15
Subject Line: Our Holiday Gift Shops are ready — take a peek!

Sur La Table

FLOW
You want to weave the subscribers’ eyes through the design — over each product and down the page. There are many ways to create flow from staggered products, angled images, or added graphics. Sur La Table used a numbered list to zig-zag your eye through the page.

Sur La Table

CALL TO ACTION
No email is sent without a purpose. Make sure it’s clear to the subscriber as well by making your call to action clear and present. Make it pop on the page and keep the copy concise and specific. This email isn’t the best example of this, but it’s not bad. The call to action is a nice contrasting red to the light grey background, but a colored box could have helped it stand out a bit more. Spoiler alert: I’ll have another blog coming soon all about call to actions!

COLOR
Color can be a great way to add flow and interest to your design. You can stagger colors (just like images) to create flow. In this email for example, the white is used as negative space. The dark brown curves your eye around the section. Color can also be used to unify sections and products. If you notice all the imagery in the first section sets a grey tone. The secondary section is primarily reds and browns. It helps to separate the sections and makes the product feel like they belong together.

Sur La Table

HIERARCHY
Again, you don’t want to confuse subscribers about the focus of the email. Without a sense of hierarchy, you will lose their interest. Make sure sections are clearly defined, sized appropriately, and don’t try to cram too much into one email. Although Sur La Table’s primary and secondary sections are fairly equal in size, they are clearly separated and defined. They use extra white space between the messages and placed the secondary headline in a color bar. I love the addition of the arrow to tie the headline with the products and draw your eye down.

Sur La Table

BALANCE
Time for me to get a bit OCD on you. Sometimes image and text groupings just click. They feel right but it may not be obvious why. Well, here’s a big tip for you. Place every object with equal balance and purpose. And I don’t just mean aligning your copy. Look at the space that surrounds the copy vertically and horizontally. Is it equal? What about the space that borders the entire hero? Now that you’ve seen it, it can’t be unseen. I’m sorry and welcome to my world.

Sur La Table

I created an animated gif below (a before and after), showing how I would modify this hero. I made the following adjustments:

  • Centered the call to action to the headline
  • Centered the grey body copy
  • Moved the call to action up so that the space below the button was equal to the space above the headline
  • Moved the stocking image right so that the space to the left and right of the headline was equal

Sur La Table

Doesn’t that just feel a little bit better? It’s all in the details. No one will measure the pixels in your design (other than me), but when it fits, the design simply feels complete.

EMBELLISHMENTS
Whenever you get the chance, break out of the box. Find unique ways to add interest by using things like graphics, textured backgrounds, fun image borders, animations, etc. Sur La Table added a little value with some curved text and a fun font.

Sur La Table Sur La Table

CONTENT
The last thing I want to mention is content does matter. The wrong copy and/or imagery can really kill any design. If the copy is too wordy or bland, subscribers will lose interest. It’s also hard to get bad imagery to work. These can be real struggles for a designer since content is usually handed to them. But when you see an opportunity to make an improvement, pitch your idea! Support your claims of why it’s a good idea. Show an example of working copy from a competitor or take the time to find some stock imagery that might be suitable. They just might be appreciative of the new perspective.

So there you go! Every email is a piece of art just waiting to happen, so get creative and go rock it!