Total Followers 132,503
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:
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:
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.
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.
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.
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.
Notice how effectively site uses just white and grey colors with light gradients and colored icons to emphasize accents. Beautiful.
Main emphasis here on really great product shots, Mac products are great, why not use beautiful photos and emphasize them with beautiful typography!?!
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.
Completely dark website in the same time using white space,grid, icons and typography very good, excellent studying case as something different.
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).
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.
Just beautiful icons showcasing products in landing page usually is enough! If you are certain about your product why not to show that!?
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.
Stunningly beautiful website with beautiful design and amazing JS animations.
Very simple and minimalist website, for me it was even TOO simple, but it’s freeware so maybe that’s the case here.
Get The Only Freelancer crash course you will ever need to read!
Dainis Graveris is 23 years old blogger and designer, founder of 1stWebDesigner, now more silently managing everything behind the scenes. He usually hangs out in Twitter tweeting design related links and chatting with people. If you have any questions or feedback that's the best place to start! Cheers!
Tuesday, April 24th, 2012 09:24
Very usefull post! I really like the psycology behind the use of icons, which is present in all of the screenshots :-)
Thanks
Tuesday, February 28th, 2012 17:51
Loved your post. I find it a bit odd that the only emphasis you had on text was the navigation and footnotes.
Nothing about the way the content shifts places with product shots to break up the flow. I love that, and many have copied it.
Wednesday, January 25th, 2012 04:46
I’d love if you featured my site here. I just wrote a blog post that explains how to get Apple style gradients, drop shadows, and rounded corners using CSS3. I use it on my site and it looks nice.
Wednesday, August 17th, 2011 09:31
All 60 Apple designs are very nice and can be used as reference.
Friday, June 3rd, 2011 05:56
Excellent Article. Is great for a reference as a UI designer :)
Thursday, May 19th, 2011 17:50
Hello there! This is kind of off topic but I need some help from an established blog. Is it very difficult to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about creating my own but I’m not sure where to begin. Do you have any tips or suggestions? Thanks
Thursday, May 19th, 2011 18:18
Hi there. If you’ll use WordPress for your blog, it won’t take 10 minutes to set it up. It’s very easy to use, kind of intuitive, actually.
Thursday, May 19th, 2011 11:49
Hi there! This is my 1st comment here so I just wanted to give a quick shout out and tell you I really enjoy reading your posts. Can you suggest any other blogs/websites/forums that cover the same topics? Thanks for your time!
Thursday, May 19th, 2011 13:25
SmashingMagazine has a lot of articles like this, I’m sure you’ll love it. :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Barton
Sunday, March 21st, 2010 12:27
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.
Dainis Graveris
Monday, March 22nd, 2010 10:15
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 :)
Patrick
Tuesday, March 23rd, 2010 04:39
MetaLab is a joke.
Squiders
Tuesday, March 23rd, 2010 04:10
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
Bill
Monday, March 22nd, 2010 18:48
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.
tehkemo
Monday, March 22nd, 2010 17:38
Its amazing to see how many websites can be inspired by one design. Thanks for this collection.
Regards,
Tom.
Tim
Tuesday, March 23rd, 2010 06:24
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?
Saad Bassi
Tuesday, March 23rd, 2010 09:57
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
Tim
Tuesday, March 23rd, 2010 18:18
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.
Dainis Graveris
Thursday, April 1st, 2010 18:24
You have interesting opinion, wrote you to e-mail! And my apologies I don’t know why your previous comment didn’t show up.
Dainis Graveris
Tuesday, March 23rd, 2010 08:58
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?
Djoule
Tuesday, March 23rd, 2010 09:57
Congratulation !
The explanation of the Apple design as well as the examples are excellent !
Justin Carroll
Tuesday, March 23rd, 2010 05:37
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.