Do you want to design like the pros? Apple.com, home of the iPhone, iPad, and Macs, has a reputation for developing some of the most fluid and aesthetic design concepts. Many professionals take cues from trendsetting websites, and learning what makes Apple special may inspire your own designs as well. That’s is precisely what we took when we designed our very own website of Amerisleep memory foam mattress. Yes, it’s not on the same niche, but the things that Apple website tell us are universal and can be implemented on a wide variety of markets.
Take a look at these tips gleaned from Apple’s website, a masterpiece in user-friendly, product-centric design.
1 Less is More
One of Apple’s key design principles remains simplicity. They don’t try to catch your attention with bright colors, patterns, or nouveau fonts. The background of the website is flat white and the layout has ample amounts of white space – they don’t try to fill every pixel. Menus are dark and light gray, with call to action buttons in a noticeable but unobtrusive blue. The text is almost exclusively black except for links. Apple also uses smooth sans serif fonts – a custom Myriad typeface for titles and larger text, and Helvetica for page copy. This design lets the product and color graphics shine through, and draws your attention to the product images.
The power tip here is not to make your site crowded, even when trying to add more of you (or your brand) in it.
2 Image Dominance
On Apple’s website, product images take center stage. They use crisp, very clear photos. Images typically have white or light gray backgrounds that blend with the page, putting the focus clearly on the item. Images make use of vivid color contrasts to contrast the whites and grays od website. Product photos are also large to show lifelike detail, and product pages feature multiple angles and active shots to give accurate perspectives.
3 Clean Content Organization
While the front page remains short and light on content, the product pages contain a lot of information, necessarily. By breaking the content into small, concise blocks however, the text appears more digestible and the organization looks cleaner. Pages make consistent use of headers and subtitles above each section, and plenty of images and graphs. Text is also crisp, large, and generously spaced for easy reading.
For example, consider the iPad 3rd generation content. The landing page features a large, bright image showing a person using the device. Subsequent large images show the main features, with short subtitles and 2-3 sentence paragraphs. Links to more detailed explanations are readily available for curious customers, and go to pages also heavy on visuals, but with more content. Even the “Tech Specs” section, usually a boring table chart, features many images and icons.
4 Consistent Branding
When you see something Apple, it is immediately recognizable as an Apple product. This is due to their consistent branding and design elements – across their website, advertising, packaging, and even in storefronts. Customers see the same typefaces, simple white/gray/black color schemes and understated design globally, giving excellent brand recognition and a comfortable user experience.
5 Newest Technologies
As a leading technology company, people expect Apple to stay on top of the latest developments. When it comes to their website, they use the latest coding and design technologies including HTML5 and CSS3. This keeps the appearance of the site up-to-date, allows them to get the most out of their designs, and keeps their site in favor with search engines.
6 Icon Elements/Graphics
In addition to images, Apple also implements a variety of icons and graphics on product pages. Design elements stay inline with the overall theme, and add to the surrounding text. In addition to giving memorable visuals, graphics help break up blocks of text and guide eyeflow around pages. Icons also help create familiarity with company and product features, as they are consistent across products. Using the iPad feature page as an example, the use “app style” icons when explaining built-in apps, graphs to show performance comparisons, and stylized icons to represent Siri, iOS, and Applecare features.
7 Overt UI Design Elements
A good website should be usable by anyone, even users with the most basic computer knowledge. And with Apple.com, this is visible as menus are prominent and easy to navigate, videos and links are clearly marked, no “hidden” elements to find, and almost all scrolling is vertical. There are clear links to get more information, buy, or get service. They anticipate what consumers are most likely to seek or be concerned with, and make answers visible.
While there is much more that makes Apple a superstar, basic concepts in your web design process that any website could take cues from are Simplicity, Consistency, Imagery, and Usability. Applying these to your website can make visitors feel more comfortable, more receptive to your message and more likely to visit again and recognize your brand.
Kim Tyrone Agapito is an Adviser of Search Engine Organization Philippines.
Do you like this article?