Why Apple Ads Look So Damn Good / A Lesson in Minimalism

I love Apple.

I love the design of Apple’s retail stores, I love how they revolutionized handheld music players, and I especially love how my iMac G5 loads as fast today as it did when I first bought it.

Apple, as a company, has performed remarkably in many areas. The one area that is most noteworthy is their design scheme: ultra-clean minimalism. From the moment you take a look at any Apple product or step into their store, you can see how everything they produce adheres to that design scheme. And it’s also worked wonderfully for their branding, because now customers every equate Apple to “clean and elegant.”

As a web designer, I feel that everyone can learn a lot about design from studying Apple’s own approach to designing their ads and website.

So, without further ado, here is a tutorial on how to make your very own ad, in minimalist, Apple-fashion:

 

What you’ll need

• A good, image-editing program (I use Adobe Photoshop 7)
• Appropriate fonts (Apple’s official font: Myriad Pro or Myriad Pro Semi-bold)
• Good-quality images, preferably with isolated objects (no background)
• An interest in why Apple’s ads look so damn good

 

Step 1: Understand the Typographic Heirarchy

Apple’s website and their ads have a consistent typographic layout. Their entire site exercises 3 basic principles of typography:

1. bigger letters = more attention
2. bolder, brighter colors = distinguished text
3. lighter, duller colors = lesser text

If you browse Apple’s website, you’ll see the typographic layout repeated throughout almost every single page: headings and product names are big and black, sub-headings and product descriptions are smaller and grey, and everything that isn’t part of the main body of content is a smaller font size.

Using a typographic hierarchy is a standard practice in design. Not only does it help guide your visitor’s eyes to what is important, but on lengthier pages, it helps them to quickly scan a page. Not utilizing a typographic heirarchy results in a big blob of homogeneous text, which is always difficult to read because readers don’t know where to focus.

 

Step 2: Get Good-Quality Images

Did you ever watch Disney’s Cinderella? It’s a story about a young girl that lives with her mean step-mother and even meaner step-sisters. The step-mother forces Cinderella to do all the chores around their house, while the step-sisters get to dress up, go to the local dance party, and try to shack up with the prince. No matter how dolled up the step-sisters’ dresses were though, they could never attract the prince… because they’re ugly. In the end, the prince marries Cinderella, who is walking around in her rags. While the lessons implied by Cinderella make it an awful movie for young girls, it brings about a good point: no matter how hard you try to dress up something that’s ugly, it stays ugly.

As a web designer, I like to think of images as models: you can put dirty rags on a beautiful model and she can still make the rags stylish. If you put a Vera Wang dress on an ugly model though, you just have… an ugly model with a nice dress.

Low-quality images can impair an otherwise splendid design. So, all web designers should invest time in finding good images and learning how to adjust images to realize their potential (cropping, saturation, adjusting levels, etc). You don’t even need to ever take a picture – there are plenty of photos and illustrations already available out there for free!

Good-quality images are absolutely necessary for Apple’s designs to work. I’m not sure what the process is that they go through to get their images so nice, but I’m sure it’s an arduous one, which many, many different angles and takes.

In today’s example, I’m going to use a very clean image of a shelf that I found at FreePSDFiles.Net (note: PSDs are great to work with, because you can easily isolate the object via layers in Photoshop).

 

Step 3: Find a Purpose

Before you start designing the ad, you should think of what you want the ad to do. What’s the purpose of this ad? Is it informative? Is it to generate interest? Is it going to make people laugh? The purpose of the ad will affect the image and words you choose.

 

Step 4: Choose Your Words Wisely

The words you use can be anything, but they should be short and to the point – you want to convey a message, not write an essay. Furthermore, in ads, you only have a limited time to get your audience’s attention, so the ad should be short and sweet. All text should follow the typographic principles mentioned in step 1. And of course, in typical Apple fashion, you get bonus points for witty sentences. Feel free to ignore the rules of English grammar as well, as seen in this example below:

Lastly, be sure to play around with letter-spacing (“tracking” in Photoshop). I have never studied the science behind letter-spacing, but I do know that sexy, attention-grabbing headers usually have reduced letter-spacing (I do not suggest reducing letter-spacing for paragraph text though, as it may cause legibility problems). The picture below demonstrates the effect of letter spacing on the attractiveness of the font.

 

Step 5: Fill It Up

After you place your image in this ad, you’ll want to fill it up. Fill it up with what though? White-space. The secret to Apple’s designs are to always leave plenty of space. You might think this space is wasted, but it always serves a purpose. Just try and compare a Best Buy to an Apple Store (see image below) and you’ll understand this concept.

It’s not to say that the layout for Best Buy is bad, but when you want to make something look “damn good,” you’ll need to follow Apple’s footsteps and add white space. White-space is something that every website should have and in the case of Apple ads, you will need an excessive amount of white-space. In minimalist design, white space adds breathing room to elements and removes distraction, allowing people to focus on the important part: the main attraction. Remember, white space serves a purpose, so fight the urge to fill it with something.

 

Step 6: Add Subtle Details

Feel free to add details to your work. This can be a soft gradient overlay on the title, a fading reflection of your object, or a bit of noise/grain in the background. Whatever you do, stay true to the minimalist scheme of Apple ads and keep things subtle.

In this picture below, I added a soft gradient in the words, “iShelf” and I added a soft reflection to the shelf. I know it’s a ridiculous example, but you get the point, right?

 

In Conclusion

This article was more of an analysis than a tutorial. If you’ve wondered why Apple ads looked so good, well, now you know why. I hope you can take at least one thing from this and let it help you become a better designer. And if you’d like to see a live take on copying Apple’s ads, take a look at this hilarious video, “Stride Mintacular” by Stride Gum, featuring Shaun White, the pro snowboarder.