Twelve South make accessories exclusively for use with Apple products, “We’re not just Mac friendly. We’re Apple only.” I know from first hand experience that some of them are extremely good and they have to be if they want to be “designing products as innovative as Apple itself”. They’re also going to need a great website to convey the quality of their products.

Their website indeed does a great job of expressing the quality and usefulness of their products, through great visual design, photography and copywriting all wrapped up in an elegantly easy to use experience.

Ignore Web Design Trends

Web designers have a love affair with the latest trends, whether that be blindly following them or obsessively complaining about them. At the time of writing, designers are complaining that many sites look very similar, with a large background image and text overlaid on top.

It’s a valid complaint, but you should ignore trends and design the best possible solution, regardless of what everyone else is doing or saying. The average user doesn’t care or even notice, they just want to get what they want as easily as possible.

It’s great to see Twelve South ignore any talk about trends (good or bad) as the trend of large images works extremely well because it suits their products perfectly. Just look at the images above to see what I mean.

(The time and energy most designers waste on design trends is staggering to me.)

That leads me onto their photography.

Photography

While photography isn’t necessarily the job of a web designer (although it can be), Twelve South’s great design perfectly showcases the power of high quality photos. Ignoring the complaints against trends allows Twelve South to showcase their products in the the best possible way.

The most impactful photos show the products in real life situations, leaving nothing to the imagination, so people don’t even have to think what they would use them for.

They’re also very high quality and aspirational with their products situated in modern and sleek settings and used by people with more up-to-date fashion sense than I will ever have.

Clear Call to Actions

Clear call to actions are essential for great web design as the design of them can have significant impact on how visitors interact with a site and everything including size, positioning, wording and colour plays an important role. Call to actions can be the difference between a frustrating experience and a smooth, effortless one.

Twelve South are clearly aware of the importance of this by keeping the experience very simple, so the call to actions get the attention they deserve.

Every page includes the “Discover Products” button in the top-right corner, which expands to reveal a nice visual representation of associated Apple products.

If you can represent a choice of options visually without confusing, do it. It makes it much easier for people to find what they are looking for.

On the product pages themselves, the most prominent button is the one to add it to the cart, as it should be. Designing the price into the button itself gives it that extra prominence.

The price doesn’t have to be part of the button of course but at least make sure it’s located near the button to increase the awareness of it being the purchase/add to cart call to action.

The easier you make for someone to scan the page and find the buy button, the easier it is for them to purchase.

Let’s see how Twelve South have done this using the criteria I mentioned earlier:

• Size: With the inclusion of the price, it’s bigger than any other button anywhere on the site.
• Positioning: Look at all that wonderful whitespace., giving the button space to breathe means it doesn’t go unnoticed and lost amonst the rest of the site.
• Wording: The wording is clear and simple. Also be aware of the text below the button. Placing “With Free Shipping in the US” directly below the button will almost certainly increase conversions.
• Colour: The blue colour contrasts with everything around it so it stands out and catches your eye as you scroll down the page.

The key to combining the above attributes is to create contrast, so the call to action is immediately noticeable. Further evidence of the great design of this call to action can be seen with the buttons above (“HiRise” and “HiRise Deluxe”) which are visually less impactful, letting the star of the show shine.

Copywriting

Alongside the photos demonstrating how their products can be used, the copywriting does a great job of letting people know how their products can solve problems and make their lives easier.

“Elevate your iPad out of the spilt milk.”

“Put the “face” in FaceTime.”

Take a look at their BookBook product for MacBooks, a cover for your MacBook designed to look like an old book. There are two main reasons someone would buy this.

A good looking case to protect your expensive computer is the more obvious one of the two but good copywriting reinforces it:

“To keep your MacBook safe, BookBook has two rigid, hardback covers for impact protection. A tough spine and reinforced corners add another layer of defense. Inside the slim case, your Mac rests between two super soft, chocolate brown, padded cushions, which look amazing against the silver finish on MacBook.”

The second, less obvious benefit is security. Most cases don’t have this as a selling point:

“One of the coolest features of BookBook is the fact that it disguises your MacBook, making it look like a vintage book. Tucked safely inside BookBook, your Mac is kept out of sight, even while sitting in your dorm room, coffee shop or anywhere else you take your Mac. Along with protecting your Mac from the rigor of the road, BookBook helps keep it out of the hands of thieves.”

When a product has a unique selling point like this, it’s your duty as a designer to sell and copywriting is absolutely a responsibility of web designers, even if you don’t write the copy yourself. The purpose of your design is to communicate a message and you need to design the content to do that.

I was on the verge of buying a BookBook case for my MacBook Air prior to my year of travelling for this reason alone (protection is a given with any case) but decided it might add too much weight to travel with.

It’s also more expensive than the average case, so it’s even more important to highlight why people should spend more.

Let’s have a look at one more product to see how well they sell them with words, the PlugBug.

“Charges two devices at once, virtually anywhere.”

This is something I did buy for travelling. Going away for a year with an iPad, iPhone and MacBook Air meant this was the perfect accessory for a round the world trip and the headline above was almost all I needed, to know that it was something which would make my life easier.

What makes Twelve South’s copywriting great, as well as communicating how their products solve problems and make their lives easier, is how easy the language is to understand. This might sound like an obvious thing but if you try to be too clever and use fancy words, you risk alienating people who don’t relate to the language.

Mobile

Twelve South’s website is responsive and thanks to the simplicity of the site when viewed at desktop sizes, it flows just as well on smaller screens.

The only observation I have to share is the absence of the “Discover Products” button. Gone is the universal button that allows anyone to easily browse based on what Apple device they want without going to the product finder page.

It isn’t obvious there is a product finder page, as it’s hidden in the hamburger menu area, so I would figure out how to elegantly reintrodue the discover products button.

High Quality Products, High Quality Website

Twelve South’s website matches the high quality of their products, with a simple to use website that contains high quality photography, great copywriting and excellent visual design that their products deserve.

Source: Inspect Element