FREE Salesforce Consultation: 508.935.2275 or contact us online

Designs That Work: Part 2

Jake Gibbs | October 23, 2015 

In this second part of our ongoing design series that focuses on excellent designs that work, we’ll focus on websites. For our case studies, we’ll analyze 5 different websites and discuss what they did well.

Let’s get started!

1. Apple

When it comes to minimalist design, Apple is king. Not only does Apple like clean, simple designs, but it uses very little color, preferring a more black-and-white color palette. So why does their design work well?

  • Simplicity. By reducing the amount of conflicting messages and clutter, Apple allows you to easily digest the message.
  • Empty space. Apple isn’t afraid of white – lots of it! But having this space creates breathing room for the design and lets you easily focus on the message. You think to yourself, “This is easy to understand” in large part due to empty space used effectively.
  • Imagery. Since most of the design is so simple, your eyes gravitate towards the imagery right away, which is what Apple wants. They want you to focus on the beautiful products they make, so the interesting imagery stands out from the crowd and gets your attention.
  • Heirarchy. Notice that the top menu and the footer menus stand out from the rest of the design, but they don’t dominate it. They basically say, “I’m here if you need me, but unless you do keep focusing on our beautiful products on the page.

website-apple

2. Carhartt

Carhartt does an excellent job of using design to relate well to their customers, who are outdoorsy, rugged, and adventuresome.

  • Texture. Instead of just using flat colors, Carhartt creates a rugged feel to their site by using subtle, yet powerful textures of light grey, charcoal grey, and light brown. These textures don’t overpower the eye, but seem to say, “We’re a cool, rugged brand.”.
  • Imagery. Wow. Talk about imagery! Obviously Carhartt uses professional photographers. But notice that these aren’t typical e-commerce images of products on a white background. These are lifestyle images. They show their products in action in the real world. Not only does this capture the lifestyle of Carhartt customers well, but it says, “You can be like the people in this picture if you buy our products.” Truly the imagery is the all-star of their overall design.
  • Contrast. Notice how well the white headlines on the images stand out from the images themselves. Keeping white text only allows them to focus mainly on the image without becoming overly distracting.
  • Color. Carhartt uses their yellow color effectively to draw attention. It is used sparingly, which allows it to catch your attention to the top banner offer, the logo, the free shipping offer, the search bar, other calls to action on offers, and the social media icons.

website-carhartt

3. Caterpillar

Caterpillar is an incredibly large, multinational company building complex contruction equipment. The success of their design lies in its simplicity and in its effective branding.

  • Simplicity. Talk about simplifying! No complex menus. No overwhelming home page. If a company as large and complex as Caterpillar can simplify their menu to 4 items then we can too! They don’t try to tell you everything at once. They say, “Here are the main things you need to know. If you need to know more, just click and you’ll continue your journey.” Most of the complexity lies in the footer, which is an area that people go to only if they are looking for specific things.
  • Color. If you’ve seen Caterpillar equipment, you know it’s yellow. They want that to be the primary color that they are known for. So to accomplish this, they use black, grey, and white in their design, which allows yellow to take center stage. The bold yellow band, the logo, the product pictures, and the dividing lines down the page all emphasize their primary brand color without conflicting with the overall design.
  • Contrast. Notice how well they use black, yellow, and white to create distinct sections of the site? It’s very easy to say, “This is the footer. This is the main headline. This is the menu.” The contrast makes the site very easy to navigate.

website-caterpillar

4. Reebok

Reebok is rebranding itself as a fitness line. This design does an excellent job at proving that they aren’t just a shoe company, but that they are a fitness lifestyle company.

  • Imagery. The imagery used on the site is incredible. It reflects excitement, determination, vision, and passion. They say, “We are an exciting brand. If you buy our products you join the fitness lifestyle.”
  • Icons. The icons used for shopping carts, logging in, need help, search bar, fitness options, and store locator easily guide the eye to know what to do in that section.
  • Fonts. Notice that 2 main fonts are used. The headline and subheadline fonts are very unique and reflect the independent lifestyle of those passionate about fitness. The body copy font is easier to read and gets the details across well. The contrast of the two fonts creates visual interest without becoming distracting. The fonts go well together.
  • Texture. Notice the brush strokes in the background down the page? Your mind doesn’t notice them a lot, but they do give the impression of ruggedness without distracting you. Another small touch that adds a lot.

website-reebok

5. Tire Discounters

Tire Discounters is in a competitive market. How do they stand out? Their website is significantly better than their competitors!

  • Navigation. This site is about as easy-to-use as you can make it. The top navigation is simple but clear. The store locator at the top makes finding a nearby location extremely easy. As you scroll down the page, each section is clearly defined with digestable information. The site has very little user friction, allowing the user to easily scan, read, and find what they are looking for quickly.
  • Color. They use different shades of blue to define regions and strengthen their brand identity. Since blue is a highly popular color and one that denotes trust, they use light, dark, and mid-tones to really drive home that they are a trustworthy company. The red stands mainly as a subtle contrasting color without dominating the design.
  • Creativity. This website works because they broke away from conventional design patterns. From chevron shapes and subtle background imagery to creative layouts and ways of telling their story, this design stands out from the crowd, which is exactly what they need to do to stand out in their market.

website-tirediscounters

Back to Blog
Jake Gibbs

Jake Gibbs | Design Specialist

Jake Gibbs is a Design Specialist at ListEngage and an expert at designing and building elegant, cross-platform compatible, mobile responsive emails and landing pages on the Salesforce Marketing Cloud. From brainstorming and ideation to polishing the final product, he loves the creative process. Jake has worked with more than 60 clients since joining ListEngage in 2014. Some of his projects have included L’Oreal, Vanguard, Carhartt, Harvard Business School, RCI/Wyndham, Huggies, and Planet Fitness.