Voltage Creative

Web Development & Design | Online Marketing

You are viewing items Tagged "Design".

A Quick Web Design Case Study - Apple Macbook Air Call to Action

We tell a lot of e-commerce clients that if you’re not going to A/B split test, at least copy Amazon… I have a similar stance on design. If you’re not going to hire an amazing web development and design agency (like us, amiright?) then there are roughly two things you should keep in mind:

  • Keep it simple
  • What is Apple doing? (I’m only half kidding; you’ll see why.)

So what is Apple doing? Let’s take a look at what I consider one of the best product pages online right now. The product page for the Macbook Air:

Macbook Air Product Page Design - Above The Fold

My favorite thing about this page is that the call to action (CTA). The little blue “Buy Now” button in the upper right sticks out like a sore thumb, but it doesn’t break the design language of the page in the process. They tastefully drew attention to it by making it the most extreme iteration of their design language.

The button is completely in line with the overall design language,  it’s just been turned up to eleven.

  • It has the most drastic rounded corners.
  • It’s the brightest and largest concentration of the page’s highlight color.
  • It anchors the site navigation of this area on Apple.com by placing it last punctuating it with the bright blue button background gradient. (When you’re making a list and want something to stand out, always put it first or last.)
  • It doesn’t look out of place, but there isn’t anything else on the page that looks like it, or more importantly, that competes with it. This is the big one – your CTA should be the most extreme example of your design language, but it shouldn’t look like it came from another site.

One great way to test your CTA’s visibility is the ten foot test. The literal version of this to step back from your monitor 10 feet and see what you can still deduce about the content of your page. Of course, the fake version is to just zoom out your browser a few steps:

Apple Macbook Air Product Page Design - 10 Foot Test

You can still read the main title of the page, “The Macbook Air”. Great. You can’t make out much of the other text unless you’re eagle-eyed and even then the vast majority of it is still unintelligible, but that’s OK. One other thing above the fold (not that there’s a fold :) does still stick out, though. It’s that little bright blue button in the top right. You can’t tell what it says, but you still know it’s important.

And back to my earlier note about putting things at the front or back of lists when you think they’re the most important; you’ll notice the first item on that sub navigation list is Design. I’m shocked I tell you… just SHOCKED.

As usual, Apple’s page layouts are a master class in how to get the response you want from your audience. (Not that they never miss, they still can’t seem to make a mouse I care to use for more than about 20 minutes.)