{"id":4523,"date":"2021-09-21T16:23:48","date_gmt":"2021-09-21T16:23:48","guid":{"rendered":"https:\/\/www.waterscapetech.com\/?p=4523"},"modified":"2021-09-21T17:08:02","modified_gmt":"2021-09-21T17:08:02","slug":"design-tips-to-learn-from-apple","status":"publish","type":"post","link":"https:\/\/www.waterscapetech.com\/design-tips-to-learn-from-apple","title":{"rendered":"Design Tips to Learn From Apple"},"content":{"rendered":"

There is no shortage of companies that follow popular design trends to appeal to a mass market. Much more rare is the breed of company that actually sets design trends. Today we\u2019ll examine the techniques of a company that occupies the top of the design food chain: Apple.<\/p>\n

Below you\u2019ll find 15 practical ways to follow Apple\u2019s example in creating beautiful interfaces.<\/p>\n

<\/h2>\n

#1: Keep it Simple<\/h2>\n

\"Picture<\/p>\n

Take a look at Apple\u2019s homepage and don\u2019t think about what you see, but what you don\u2019t see. I\u2019ll give you a hint, it\u2019s all over\u00a0this site<\/a>\u00a0(no not this very site, click the link silly). The answer of course is visual clutter. A homepage is supposed to tell users everything about your company, to communicate all your product categories in detail, to list endless features, and to showcase your logo as big as possible. Right? According to Apple: wrong.<\/p>\n

Apple\u2019s homepage simply shows off their most recent work and provides you with a few easily understood categories to help you get to the information you want to see. Granted, odds are you aren\u2019t designing for a remarkably ubiquitous company that needs no introduction. However, you can still use minimal but attractive design to increase usability.<\/p>\n

Imagine you\u2019re driving up to an airport. As you drive along you are simultaneously hit with five or six signs containing maps with the locations for everything from terminals right down to handicap accessible restrooms. The argument the map designer would make is that he gave you all the information you needed to get anywhere you wanted to go. You would no doubt quip back that his fault was in giving it to you all at once as you were driving by at 20 mph. Now imagine you are at Sky Harbor, Phoenix Arizona\u2019s remarkably easy-to-navigate airport. As you pull in you see a sign that says \u201cHello, welcome to Sky Harbor. There are three terminals\u201d. Then as you drive along, you reach more signs, each with a brief description of what airlines fly into each terminal and where to go for arrivals or departures. The feeling you get as you drive into Sky Harbor is \u201cWow, this is easy!\u201d<\/p>\n

Apple takes the same approach to interface design. Rather than hitting you with everything they\u2019ve got in the name of usability, they use smaller bits of information to lead you to the place that holds the content you\u2019re really after. Look at the site you\u2019re working on and consider how you can break the complex information up into smaller pieces that the user won\u2019t find overwhelming.<\/p>\n

<\/h2>\n

#2: Use Amazing Product Shots<\/h2>\n

\"Apple<\/p>\n

 <\/p>\n

One of Apple\u2019s principle reasons for cutting back on superfluous graphics on their site is to really showcase what\u2019s important: their products. Just look at the shots they use; it\u2019s nearly impossible to look at a page on the Apple site and not have your eyes focus on the products for seconds on end.<\/p>\n

There are several things that make these products look so incredible. The first is that they are obviously pristine. Chalk this one up to digital imaging experts. I haven\u2019t seen exactly how they do it, but the combination is likely a mixture of photography, 3D modeling (take your pick: Modo, Lightwave, Maya, etc.), and of course, Photoshop.<\/p>\n

The next thing they do is to make them take up a huge portion of the page. If you spend hours making a beautiful package shot and then size it down to a thumbnail, it\u2019s simply not as overwhelmingly impressive. Notice that Apple also frequently includes multiple products arranged in an attractive way as in the picture above.<\/p>\n

The lesson here is to not just take a photo of your product and call it a day. Spend the time to make it look fantastic. Whether it\u2019s a can of refried beans or a Lexus, do your best to make a great hero shot.<\/p>\n

<\/h2>\n

#3: Contrast is Key<\/h2>\n

\"example<\/p>\n

Another thing that makes those Apple product shots look so darn great is the simple environment they drop them into. The human brain loves contrast. It\u2019s the reason we stare at mountain ranges and the horizon over the ocean. It\u2019s also the reason we say \u201coooooohhhh\u201d when we see a black shiny iPhone on a flat white background. You should seek to apply selective contrast in every single design you create. Look for opportunities to use contrast with color, size, font thickness and anything else you have to work with.<\/p>\n

Apple doesn\u2019t just apply contrast to their product shots. Take a look at the pic above and think about what jumps out at you. It\u2019s probably the big blue download button. Cruise around Apple\u2019s site and you\u2019ll see that nearly every time they want you to do something (buy, download, etc), they use a bright blue button to grab your attention.<\/p>\n

<\/h2>\n

#4: Sweat the Small Stuff<\/h2>\n

\"simple<\/p>\n

Apple is all about attention to detail. Every little piece of their site is finessed into perfection. Never fall into the trap of saying \u201cno one will notice\u201d or \u201cgood enough.\u201d It is often the margin of time spent on the tiniest details that separate the good designers from the great ones.<\/p>\n

Don\u2019t buy into the small stuff argument? Check out the social media logos on the Microsoft Office homepage and tell me that they don\u2019t make you cringe.<\/p>\n

I personally possess vector files of each of these logos. Now if I can do it, don\u2019t you think the Microsoft designers could\u2019ve taken the time to track down better versions of these logos to avoid the sloppy Photoshop Magic Wand selection they\u2019ve got going on? I challenge you to find something this poorly done anywhere on Apple\u2019s site, much less on the landing page of one of their most popular pieces of software.<\/p>\n

<\/h2>\n

#5: Avoid Flash<\/h2>\n

\"no-flash-adobe-bad-design\"<\/p>\n

I\u2019ve never been one to join in with the Flash hater crowd, but the fact is, that crowd is growing. Leading the masses is none other than Apple CEO and world-renowned technology clairvoyant Steve Jobs. Check out this excerpt from a recent\u00a0Wired<\/a>\u00a0article:<\/p>\n

\u201cAbout Adobe: They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don\u2019t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it\u2019s because of Flash. No one will be using Flash, he says. The world is moving to HTML5.\u201d (Source<\/a>)<\/em><\/p>\n

Those are strong words from a man revered for leadership in the tech world. To be honest, much of what he says rings true. Online Flash content certainly isn\u2019t the most reliable technology out there and is highly dependent upon extra software and up-to-date plugins that the user may or may not have. Further, HTML5 and CSS3 are glimpse into a future where you can accomplish a richly interactive multimedia experience with with simple, standards compliant code.<\/p>\n

As a developer, if you join Apple in their virtual Flash boycott, you probably won\u2019t regret it. You don\u2019t even have to take an active stance against Flash so much as simply avoid using wherever possible. You\u2019re pretty much guaranteed to have a lot less headaches from users who can\u2019t view your content.<\/p>\n

<\/h2>\n

#6: Make It Friendly<\/h2>\n

\"friendly<\/p>\n

For years, Apple was branded as a cult that was anything but friendly. They\u2019ve really sought to purge this idea in recent years by restructuring their image to be more approachable. The most noticeable place you see this is in the \u201cGet a Mac\u201d ads. The Mac is portrayed as an every day kind of guy while the PC is the \u201cout there\u201d business man who\u2019s always up to no good. Subliminally, these commercials are saying that Apple is really an open community and anyone from teenagers to grandmas will fit right in.<\/p>\n

Another thing they\u2019ve done is improved their formerly abysmal tech support record. Now anyone in a major city can just make an appointment at the Apple store for a free one-on-one consultation to address any problems and\/or questions customers might have.<\/p>\n

All of these techniques are reinforced by graphics of friendly, smiling faces. Currently the Apple store near me has about a dozen cardboard cutouts of Apple employees in the window as if to say \u201ccome on in, we\u2019re happy to help.\u201d You can also spot these smiling employees in a few places on the Apple website as shown in the pic above.<\/p>\n

What Apple is doing is forming a balance between amazing but non-personable technology-based design and approachable smiling faces. No matter what you\u2019re selling, consider whether it\u2019s appropriate to make it look more friendly and think about what you can do to get it there. Even a simple \u201cHello\u201d in a headline can go a long way.<\/p>\n

<\/h2>\n

#7: Use a Strong Grid<\/h2>\n

\"grid<\/p>\n

The picture above speaks for itself. Every page on Apple\u2019s site adheres to a strict grid structure; whether simple or complicated, it\u2019s there. The purpose? Check out how much information they\u2019re throwing at you on the page above. There is simply a ton going on, but it somehow seems attractive instead of overwhelming.<\/p>\n

Breaking sporadic information up into manageable cells drastically reduces visual clutter and confusion. Notice that each cell also contains a visual reference to accompany the text description. These visual references all look very similar and fit into the overall Apple theme. Even if you\u2019re using stock images, try to maintain a similar theme so there\u2019s no visual disparity in the pictures scattered all over the page.<\/p>\n

<\/h2>\n

#8: Create Instructional Aids<\/h2>\n

\"instructional<\/p>\n

To reinforce the message that the top of the mouse is actually a multi-touch surface, Apple created the above illustration. Even without the headline, nearly anyone would be able to comprehend what\u2019s happening in the picture and consequently understand how to use a brand new piece of technology that they\u2019re completely unfamiliar with.<\/p>\n

Apple goes even further than illustrations though. Nearly every piece of hardware and software on their site has an accompanying video that shows you how it works. This goes a long way to reduce tech support questions. I frequently refer my friends (who have all converted to Mac because of me and therefore see me as free tech support) to these videos because they provide a much richer and easier to understand experience than a phone conversation ever could. Check out\u00a0Apple\u2019s library of instructional videos<\/a>\u00a0to see how great they are for yourself.<\/p>\n

<\/h2>\n

#9: Be Consistent<\/h2>\n

\"be<\/p>\n

The pic above is a screenshot of the iTunes store. Look familiar? If you\u2019re thinking it looks a lot like Apple.com, you\u2019re right. Now have a look around Mac OS X, specifically in the Finder. Again we see strong grid-based design, lots of white, metallic textures, and blue as an attention grabber (in selections). And finally, have a look at the full\u00a0Apple line of hardware<\/a>\u00a0to see these textures and design elements brought into the real world.<\/p>\n

Apple\u2019s general look or \u201cbrand essence\u201d is applied across every single thing they design. It\u2019s quite stunning when you realize how much their software actually looks like their hardware. How much more integrated can you get? If you\u2019re ever tasked with the job of developing a brand, look at every aspect of the company from televised ads and websites on down to the products themselves. Consider how you can integrate all of these disparate elements to look like individual pieces of a cohesive whole.<\/p>\n

<\/h2>\n

#10: Not Just a Big Store<\/h2>\n

\"apple-Mac-Mini\"<\/p>\n

 <\/p>\n

Apple is a great case study in a successful e-commerce site. Notice that the entire site is bent on influencing you to buy, and educating you about, their products. However, the site doesn\u2019t feel like one big store.<\/p>\n

What I mean by this is illustrated in the screenshots above. The top shot is the dedicated Time Capsule page. Apple loves making beautiful product pages with clever headlines informing you of how great their products are. Notice that this technically isn\u2019t the \u201cstore.\u201d If you click the buy button, you are then taken to the page in the second screen: the actual online store. Here Apple has completely stripped down the visual appeal and focused on usability. They give you the information you need without distractions and make it easy to purchase an item in a few clicks.<\/p>\n

If you\u2019re making a online store, your first idea will probably be to do just that: build a store. If you have the time, budget, freedom, etc., consider building a website to showcase the items in the store in a way that simply wouldn\u2019t be efficient in the store itself. Create beautiful dedicated pages that really boost your product and include a \u201cbuy now\u201d link that takes customers to the visually boring but highly practical store section of the site.<\/p>\n

<\/h2>\n

#11: Be Confident<\/h2>\n
\"confident

Apple uses the most confident headlines in the world<\/p><\/div>\n

Let\u2019s face it, Apple products are pretty amazing. Click around Apple\u2019s site for a few minutes and you\u2019ll find they aren\u2019t exactly humble about this. Their headlines are filled with adjectives like beautiful, powerful, fun, revolutionary, easy-to-use and advanced. Their product descriptions inform you that the item is the best thing available in its category. If you overanalyze it, this may sound a bit haughty. However, as a casual visitor, you would probably just be impressed.<\/p>\n

Whether your website is advertising a product, service, or simply an idea, don\u2019t sell yourself short. Never use the word \u201cgood\u201d when you can say \u201cgreat,\u201d never say \u201cattractive\u201d when you can say \u201cbeautiful.\u201d If you are confident in your product, really strive to communicate it to your visitors. You\u2019ll find that it will rub off on them and that they will generally have a much more positive first impression if everything on your site is focused on convincing them how great you are.<\/p>\n

Like anything, there is of course a breaking point. Have someone not involved with the site read over your copy to make sure you aren\u2019t pouring on the self-praise so thick that it becomes an annoyance.<\/p>\n

<\/h2>\n

#12: Put Legal Copy in it’s Place<\/h2>\n

\"legal<\/p>\n

This one is small but important. If you\u2019re working for a company big enough to have a legal department, you know that the people in legal departments work really hard to prove that they aren\u2019t worthless. Usually what this means is that you as a designer create something, send it to the legal department and get back a 500 word document full of extra content you are required by law to include. Inevitably, cursing ensues.<\/p>\n

What you do with this content is important. Consider whether or not it\u2019s information that the user actually wants to know or if it\u2019s just an evil necessity that no one will ever read. If it\u2019s the latter, take a page out of Apple\u2019s book (a bite out of the Apple so to speak) and throw it at the very bottom of the page in a small but readable font that doesn\u2019t contrast with the background too much. Your primary goal as an employee should be to make this content accessible, findable and readable. However, your goal as a designer is to make sure it doesn\u2019t screw up your design by filling it with unimportant clutter.<\/p>\n

<\/h2>\n

#13: Comprehensive Footer Site Navigation<\/h2>\n

\"footer<\/p>\n

Check out the footer in the screenshot above. Apple has transformed the bottom of each page into an extremely helpful navigation tool. This is a great way to reduce the difficulty of navigating a large site. Rather than filling their primary navigation with a link to every section on the site, they\u2019ve reserved it for general categories. Within a category, if you scroll down to the bottom of the page you find a much more comprehensive site map in the footer.<\/p>\n

Notice they haven\u2019t gone out of their way to make it stick out. It\u2019s enough that you can spot it if you\u2019re looking for something but subtle enough that you don\u2019t give it a second glance if you don\u2019t need help with navigation.<\/p>\n

<\/h2>\n

#14: Create Beautiful Custom Icons<\/h2>\n

\"icons<\/p>\n

With the introduction of OS X, Apple brought icons into a whole new realm. Since then stunning icon design has flooded operating systems and spilled over onto the web. However, there are a few free icon sets online that have reached such fame that they\u2019ve become clich\u00e9.<\/p>\n

So before you go downloading a set of icons that looks like everything else on the web, give it a go yourself. Fire up Photoshop and\/or Illustrator, dust off those drawing skills and make yourself some great custom icons. In the end they\u2019ll really polish off your site designs. As you master the art of good icon design you\u2019ll notice that you are a lot less dependent on third party art to produce amazing sites (which is a really good thing). If anything, you\u2019ll save those crazies in the legal department from trying to figure out the legal restrictions on all those \u201cfree\u201d icons.<\/p>\n

<\/h2>\n

#15: Interactive & Dynamic Content<\/h2>\n

\"interactive-apple\"<\/p>\n

Nearly every page of Apple\u2019s site contains an automatic slideshow, an animated accordion menu, a video, or an interactive photo gallery. The goal here is to keep the attention of the user. Static content can be a little on the boring side and can cause a user to vacate the site in search of something more interesting. Apple keeps your attention by giving you lots of pages with constantly changing content or bits of interactive features.<\/p>\n

This kind of content should be approached with extreme caution for a number of reasons. First of all, it\u2019s easy to leave over half of your visitors behind if you\u2019re programming in features that require a special plugin. Try to stick to widely supported technologies that work across multiple browsers. Also, it\u2019s really easy to get carried away with dynamic content. There\u2019s an extremely fine line between eye-catching and annoying and you absolutely must learn where that line falls. Otherwise you give visitors a headache in place of the good impression you were going for.<\/p>\n

One More Thing\u2026<\/h2>\n

To sum up, Apple Inc. is pretty much synonymous with classy design. There\u2019s a lot we can learn from observing these great designers at work that goes way beyond just ripping off the cool reflections they put on everything. The tips above are meant to be generally applied to your own work in a unique way. Use them as inspiration to blaze your own path in great site design.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

There is no shortage of companies that follow popular design trends to appeal to a mass market. Much more rare is the breed of company that actually sets design trends. Today we\u2019ll examine the techniques of a company that occupies the top of the design food chain: Apple. Below you\u2019ll find 15 practical ways to […]<\/p>\n","protected":false},"author":3,"featured_media":4524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[39,86,36,31,29,28,52],"tags":[127],"_links":{"self":[{"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/posts\/4523"}],"collection":[{"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/comments?post=4523"}],"version-history":[{"count":0,"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/posts\/4523\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/media\/4524"}],"wp:attachment":[{"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/media?parent=4523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/categories?post=4523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.waterscapetech.com\/wp-json\/wp\/v2\/tags?post=4523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}