Advertisment
Apple has always been showing what beautiful design means in all their designs, products, icons, websites. But what really make Apple design stand out from the crowd? Why it receives so big attention, so many awards, what’s so special in it?
I wanted to find it out so that’s why I created this Apple type inspirational post showcasing all the best Apple inspired website designs and in the meantime I also analyzed Apple website as well trying to drop down important points and explain why their design and approach works. It was very interesting study for myself and also I got reason to put all this stuff in easy to read and transparent way.
Let’s start with own Apple designed website sections to see original style:
Throughout whole site they are using white,grey and blue color schemes, keeping designs very light and easy for eye to scan. To emphasize different sections typography, icons and photographs are used very effectively. Sometimes text-size seems to be even too small, but in that way Apple is conveying huge amounts of products, information, links which in other way wouldn’t be possible – interesting solution. In this way we don’t need to make many clicks to find what we need, we can find right section almost in index page – it’s very important from usability point of view.
Also everything is built on grid system, all text, icons, navigation, links are perfectly aligned, making website very easy to read, scan and seem professional.
Right, but now let’s drop it down into list for clear vision:
- Light color scheme, subtle gradients
- Effectively used white space
- Clearly expressed typography
- Beautiful product shots
- Widely used icons to emphasize text meaning
- Very clear grid system
- Clear and user friendly navigation
- Product based features always supplemented with great shots, videos and typography
- Small text size, but comfortable readability
- Contrasts to gain attention to specific spots
- Easy step by step guides and support
- No Flash – wide use of Javascript to decrease page loading time
Can you add some more sections here? Those are just my few dropped down things I found to be very important in Apple design style success.
Ok, now we will just showcase few huge sections of Apple to get their style from a little bit wider point of view:
Apple Developer
Apple Store
Apple Mac
Apple iPhone
Apple Support
Another sites, definitely Apple style inspired:
Now to the main point, it’s very interesting to watch how other sites are using and taking the best Apple techniques and implement them in their own sites from their point of view and own personalized approach. Often you will find many similarities with Apple design, but sometimes sites even evolve Apple type of style bringing it to the next level and discovering something amazing and something new. For me those sites were excellent learning exercise and hopefully it will bring some good emotions to you as well. Design is indeed beautiful.
1. Panic Coda
Very popular coding editor for Mac and website using the best practises – what makes it Apple inspired? From my point of view it’s harmonic grid, making whole website easy to scan just in few seconds. Other than that – small, good-looking icons, effectively used white space just emphasize focus on necessary parts of website – logo, 3 navigation section and after that sleek sliding feature descriptions.
2. AteBits
Keep it simple, stupid! If you analyze just starting page you will notice many small things making it look amazing together – dark lines, background, text shadows, letterpress effects and light mouseovers.
3. Cultured Code
Beautiful icons and typography working together give really good impression throughout whole website – that’s all what’s needed! Analyze site deeper to see also how they display information and text in good way.
4. Mac Rabbit
Notice how effectively site uses just white and grey colors with light gradients and colored icons to emphasize accents. Beautiful.
5. Twelve South
Main emphasis here on really great product shots, Mac products are great, why not use beautiful photos and emphasize them with beautiful typography!?!
6. Metalabs
Some may disagree, because this website is a little bit away from Apple style? Why?
I think it’s because of color and usually Apple type websites use just white/grey colors, big icons and white space on “above the fold” section.
But design is amazing, beautiful featured slideshow and many little emphasis throughout whole website.
7. Version App
Completely dark website in the same time using white space,grid, icons and typography very good, excellent studying case as something different.
8. IconDock
9. Acrylic Apps
10. Billings App
Huge product shots make this design part someway unique but in the meantime similar in good way with Apple style. Why?
Small text size, used background and text colors (white,grey,blue).
11. Postage
12. Bohemian Coding
13. Checkout App
14. Nprinting
15. PostBox Inc
16. Symphony CMS
17. Invoice Machine
18. Icon Designer
19. Transmission Apps
20. 280 Slides
21. Ware House App
22. PixelMator
23. SnowTape
24. Mac Themes
25. Small Transport
26. Tea Round
Iphone app sites are a little bit different since the main aspect is on iPhone product and icon, but still the same quality features – more icons, typography and effective whitespace.
27. Tap Bots
Just beautiful icons showcasing products in landing page usually is enough! If you are certain about your product why not to show that!?
28. Agile Web Solutions
We are going deeper in showcasing a little bit different sites. In my opinion gradients, dark colors are used too much making design look not so professional as it should be, but I found a lot of interesting features and good design uses here as well, that’s why I decided to include this design.
Navigate through other pages to understand my point.
29. Araelium Group
30. Midnight Apps
31. Real Mac Software
32. Cocoa Dev Central
33. Potion Factory
Stunningly beautiful website with beautiful design and amazing JS animations.
34. Tao Effect
35. Task Mate
Very simple and minimalist website, for me it was even TOO simple, but it’s freeware so maybe that’s the case here.
36. Vibealicious Notify 2
37. Sequel Pro
38. Tapulous
39. OrbiCule
40. Pzizz
41. Roo Switch
42. Mint
43. Stunt Software
44. Font Explorer X
45. Server Skine
46. Source Bits
47. Suki
48. Using Mac
49. App Zapper
50. Plex App
51. Machine Codex
52. Vuu Media
53. OmniGroup
54. Project Wizards
55. Acqualia
56. Zenna Ware
57. Busy Mac
58. Tim Van Damme
59. Cellar App
60. AppBodega
Clean and easy to navigate, I find it hard to not be inspired by apple given their success. A great example of an ecommerce site.
wow, its so cool..
thanks!!!
.-= Irfan´s last blog ..Download Gratis Nero Multimedia Suite 10 + Serial =-.
All beautiful minimalist web design. Gorgeous to look at!
[...] Why Apple Design Works? [...]
basically every creature in this earth both living and non living one has own design…
very interesting info…. thank you
Yes,very good !
[...] – Why Apple Design Works? March 25, 2010 chakwithu Leave a comment Go to comments Apple design work Possibly related posts: (automatically generated)35 High Quality Apple Inspired [...]
Fantastic collection, great!
Nice page collection.
Btw. i don’t think load time is the reason why apple don’t use flash, in fact well designed flash elements can load much faster than set of graphics/videos/javascript
You may be right, though always when i see flash I feel slow load times, but I am not 100% sure about load times though.
[...] 60 Apple Inspired Websites – Why Apple Design Works? (tags: apple webdesign inspiration design web mac websites cool article ui css gallery showcase) [...]
[...] 60 Apple Inspired Websites – Why Apple Design Works? (tags: apple webdesign inspiration) [...]
wrong link, snowtape.com.
.-= Mohammad Jeprie´s last blog ..Master of Digital Art-Randis Albion =-.
oh, snap! thank you – fixed!
Congratulation !
The explanation of the Apple design as well as the examples are excellent !
.-= Djoule´s last blog ..Les outils de l’agent de voyages 2.0 =-.
Looks like Dainis doesn’t like the fact that I found a post from over a year ago on another site containing basically the same information and posted it here, so I’ve been censored?
Hmm. Very nice Dainis. Did you ever think that people might be interested in reading that article on the other site as well?
Congratulations on your amazing searching skills. Previous comment got in spam list automatically since it’s just plain link with no comment at all, not censoring good critiques and advices how to evolve this site, but I don’t appreciate your words, where you don’t see the work I’ve done for you.
Main thing I don’t ask anything in return, but here you are screaming about injustice and corruption.
What’s your point?
Well Tim, if you will search for an article “Apple inspired design” you will have 100’s article in the same way written up. You will even find a dedicated gallery which only showcase apple designs. I don’t think so that Dainis didn’t do hard work. Just see how he pointed out basics of apple design. And I think it takes time while you scan a design. Moreover you also need to read the following article by CEO of Mashable for CNN. Read the end. You will find something useful there to change your thinking.
http://www.cnn.com/2010/TECH/03/18/cashmore.digg/index.html
I submitted a previous link with text as well and that never showed up. So, sorry if the last one was just a link. Posts like this really annoy me, though.
What’s the point of writing about something when it’s already been written about many many many times? Other than to get search hits.
You might want to take a “different” approach and tell why Apple’s site is not as good as everyone thinks it is?
The navigation is terrible. How do I find movie trailers? I used to be able to find them very easily on their old website. They are now hidden away somewhere. How do I download a 10.6.x software update from their site?
A nice layout means nothing if you can’t find what you’re looking for.
You have interesting opinion, wrote you to e-mail! And my apologies I don’t know why your previous comment didn’t show up.
Am I the only one that see’s this as possibly a bad thing? I know people/agencies in our industry that only design like Apple. I mean, really? I know there’s good in drawing from what makes Apple’s design successful, but if we’re honest with ourselves I think there’s a line there and it’s not as blurry as some think.
.-= Justin Carroll´s last blog ..Fearnet =-.
MetaLab is a joke.
Dear Dainis, I’m sorry for my off-topic message, but don’t you mind to hold an opinion poll about this new effect with image appearance? It is interesting when there are 3-4 images, but when there are more then 10 (and yours collections are always more) each image appearance makes me nervous =)
But if I’m the only one, it doesn’t matter. I just thought may be I am not )
.-= Nastia´s last blog ..No name =-.
Ah, I am receiving a lot of e-mails asking about how I got this “cool” effect :)
Never received bad experiences though – that new effect is because I want to decrease our bandwidth by not loading images which are not being viewed at all.
Hope you will get used to this new way of image appearance :)
Love Apple designs although there are a few too many clones out there for my liking.. hell they have it easy when they can use excellent photography of such beautifully designed objects
I like the concept of the article, but you may want to work on your English a bit. Or at least get someone fluent in English to proofread your work before publishing. It was so frustrating to read that I didn’t make it past the first paragraph.
Sorry to hear that..I am slowly searching for someone who would do proofreading and article management in the same time – we will improve in this field I promise. I am not native speaking English and trying my best :)
http://www.webdesignerdepot.com/2009/02/22-website-designs-inspired-by-applecom/
Absolutely agree that the Apple website design is effective and easy to navigate/digest.
Some of these sites are influenced by Apple’s website, but I gotta say that for the most part it seemed like there was confusion between being influenced by the Apple web design and just being a website that sells OSX software.
For example the Plex app is just an OSX app, not really any Apple website influence here. Nothing really Apple specific about the design.
Your article was fantastic but the shitty thing is that this Chinese site just ripped off all your hard work and content like little pieces of shit and even posted it on Delicious.
http://www.cnbeta.com/articles/106823.htm
sorry for that. cnbeta is a website that anyone can post articles about I.T. anytime in anywhere.
I think is hard for the administrator to find out which article is free to quote and which one has copyright.
ah, right thank you for informing. I wasn’t too upset since original source is shown too, but he copied also images and is using my server bandwidth..and it’s not good thing..
Its amazing to see how many websites can be inspired by one design. Thanks for this collection.
Regards,
Tom.
.-= tehkemo´s last blog ..Alta Moda Marbella =-.
I actually had a client recently that asked me to “copy apple’s web site without anyone noticing”. I chuckled and then did my best for him.
.-= Preston D Lee´s last blog ..Make your design career a reality through the power of passion =-.
There is so much good, you can find in apple it is many times a starting point in my inspirada for my web development. And the beginning of this post shows a lot of reasons why its just so good, I will be referencing this quit a bit in the near future.
The samples are awesome as well, the only issue I have is the few that is so similar it looks like the only thing that was changed was the name.
I believe in mimicking a successful website, so you can learn how to make your own designs better but there really isn’t much to learn if you don’t add anything to the design…
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
.-= Noel Wiggins´s last blog ..Website design resources =-.
help ful collection…thanks for sharing
Wrong link “16. Symphony CMS”
thank you a lot! fixed :)
[...] 60 Apple Inspired Websites – Why Apple Design Works? | Graphic and Web Design Blog [...]
[...] 60 Apple Inspired Websites – Why Apple Design Works? | Graphic and Web Design Blog [...]
Great collection. Thanks.
.-= Slobodan Kustrimovic´s last blog ..WordPress Admin Panel Trick: Adding ID Field To The Pages Listing =-.
[...] 60 Apple Inspired Websites – Why Apple Design Works? [...]
Cool stuff… you beat me into publishing this article….. Great work!!
I may have to alter mine a bit.. :D
.-= Richie´s last blog ..50 Photoshop Disasters that will make you say OMG! =-.
I suggest to watch the movie Objectified or visit the British Design Museum in London. There’s a Dieter Rams (designer of Braun) exhibition now.. I guess you will find the answer for the success of apple design.
great suggestions, I will search for those movies, you’re right I am sure there are a lot of great video, audio discussions about Apple trend! Thanks for showing where to look :)
Excellent collection. Huge fan of Apple inspired design.
Thank you!
.-= Logobird Designs´s last blog ..Beyond the Brief – Undertanding a Logo Design Client =-.