1stwebdesigner

Posted by | Posted on 18:17

1stwebdesigner


60 Apple Inspired Websites – Why Apple Design Works?

Posted: 21 Mar 2010 03:00 AM PDT

Title-apple-inspired-website-designsApple 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

Subtle-gradients-apple-inspired-website-designs

  • Effectively used white space

White-space-apple-inspired-website-designs

  • Clearly expressed typography

Typography-apple-inspired-website-designs

  • Beautiful product shots

Product-shots-mac-apple-inspired-website-designs

  • Widely used icons to emphasize text meaning

Quality-icons-apple-inspired-website-designs

  • Very clear grid system

Clear-grid-apple-inspired-website-designs

  • Clear and user friendly navigation

Navigation-apple-inspired-website-designs

  • Product based features always supplemented with great shots, videos and typography

Slideshow-apple-inspired-website-designs

  • Small text size, but comfortable readability

Small-text-apple-inspired-website-designs

  • Contrasts to gain attention to specific spots

Contrasts-apple-inspired-website-designs

  • Easy step by step guides and support

Step-by-step-apple-inspired-website-designs

  • No Flash – wide use of Javascript to decrease page loading time

Javascript-used-apple-inspired-website-designs

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

Developer-apple-inspired-website-designs

Apple Store

Store-apple-inspired-website-designs

Apple Mac

Mac-apple-inspired-website-designs

Apple iPhone

Iphone-apple-inspired-website-designs

Apple Support

Support-apple-inspired-website-designs

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.

Panic-coda-apple-inspired-website-designs

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.

Atebits-apple-inspired-website-designs

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.

Cultured-code-apple-inspired-website-designs

4. Mac Rabbit

Notice how effectively site uses just white and grey colors with light gradients and colored icons to emphasize accents. Beautiful.

Mac-rabbit-apple-inspired-website-designs

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!?!

Twelve-south-apple-inspired-website-designs

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.

Metalab-apple-inspired-website-designs

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.

Version-app-apple-inspired-website-designs

8. IconDock

Icon-dock-apple-inspired-website-designs

9. Acrylic Apps

Acrylic-apple-inspired-website-designs

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).

Billings-app-apple-inspired-website-designs

11. Postage

Postage-apple-inspired-website-designs

12. Bohemian Coding

Bohemian-coding-apple-inspired-website-designs

13. Checkout App

Checkout-app-apple-inspired-website-designs

14. Nprinting

Nprinting-apple-inspired-website-designs

15. PostBox Inc

Postbox-apple-inspired-website-designs

16. Symphony CMS

Symphonyr-apple-inspired-website-designs

17. Invoice Machine

Invoice-machinge-apple-inspired-website-designs

18. Icon Designer

Icon-designer-apple-inspired-website-designs

19. Transmission Apps

Transmissions-apple-inspired-website-designs

20. 280 Slides

280-slides-apple-inspired-website-designs

21. Ware House App

Warehouse-app-apple-inspired-website-designs

22. PixelMator

Pixelmator-apple-inspired-website-designs

23. SnowTape

Snowtape-apple-inspired-website-designs

24. Mac Themes

Mac-themes-apple-inspired-website-designs

25. Small Transport

Small-transport-apple-inspired-website-designs

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.

Tea-round-apple-inspired-website-designs

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!?

Tapbots-robots-apple-inspired-website-designs

Tapbots-apple-inspired-website-designs

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.

Agile-web-solutions-apple-inspired-website-designs

29. Araelium Group

Araelium-group-apple-inspired-website-designs

30. Midnight Apps

Midnight-apps-apple-inspired-website-designs

31. Real Mac Software

Real-mac-software-apple-inspired-website-designs

32. Cocoa Dev Central

Cocoa-dev-central-apple-inspired-website-designs

33. Potion Factory

Stunningly beautiful website with beautiful design and amazing JS animations.

Potion-factory-apple-inspired-website-designs

34. Tao Effect

Tao-effect-apple-inspired-website-designs

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.

Task-mate-apple-inspired-website-designs

36. Vibealicious Notify 2

Vibealicious-apple-inspired-website-designs

37. Sequel Pro

Sequel-pro-apple-inspired-website-designs

38. Tapulous

Tapulous-apple-inspired-website-designs

39. OrbiCule

Orbicule-apple-inspired-website-designs

40. Pzizz

Pzizz-apple-inspired-website-designs

41. Roo Switch

Roo-switch-apple-inspired-website-designs

42. Mint

Mint-apple-inspired-website-designs

43. Stunt Software

Stunt-software-apple-inspired-website-designs

44. Font Explorer X

Font-explorer-x-apple-inspired-website-designs

45. Server SkineServer-skine-apple-inspired-website-designs

46. Source Bits

Sourcebits-apple-inspired-website-designs

47. Suki

Suki-apple-inspired-website-designs

48. Using Mac

Using-mac-apple-inspired-website-designs

49. App Zapper

App-zapper-apple-inspired-website-designs

50. Plex App

Plex-app-apple-inspired-website-designs

51. Machine Codex

Machine-codex-apple-inspired-website-designs

52. Vuu Media

Vuu-media-apple-inspired-website-designs

53. OmniGroup

Omni-group-apple-inspired-website-designs

54. Project Wizards

Project-wizards-apple-inspired-website-designs

55. Acqualia

Acqualia-apple-inspired-website-designs

56. Zenna Ware

Zenna-ware-apple-inspired-website-designs

57. Busy Mac

Busy-mac-apple-inspired-website-designs

58. Tim Van Damme

Tim-van-damme-apple-inspired-website-designs

59. Cellar App

Cellar-apple-inspired-website-designs

60. AppBodega

Appbodega-apple-inspired-website-designs

Comments (0)

Post a Comment