Line25

Beautiful Mac App Web Design Showcase & Trends

Read the full post

Website designs for premium Mac application websites are amongst the most beautiful web designs on the net. Here’s an inspirational showcase of some of the best, along with a look at some common trends and features.

Kaleidocope

View the website

Cockpit

View the website

Transmit

View the website

RapidWeaver

View the website

Delibar

View the website

Versions

View the website

Silverback

View the website

Espionage

View the website

Socialite

View the website

Cornerstone

View the website

Thoughts

View the website

Postbox

View the website

Espresso

View the website

Capo

View the website

Common features

There’s a hand full of design features that tend to appear time and time again in the designs of Mac app websites. Some of these design trends take inspiration directly from Apple, like the well designed features layout – a common trait of an Apple.com webpage – while others are commonly used techniques in the world of website design that are taken a step further, example being the use of icons to reinforce the text with a visual clue, but these icons are much larger in size and include much more detail.

Vibrant colours

Almost every site in the showcase features a mix of vibrant colours, either in the form of an illustration or from the large icons on the page. A dark background colour helps these colours ‘pop’ with a super bright appearance.

Large buttons

Being downloadable applications means a prominent download or buy now link is crucial. Large and chunky buttons have become popular elements across the web design industry, but Mac app websites often feature oversized button graphics with a tactile feel created with subtle shading and highlights.

Features icons

The use of icons to reinforce nearby text is nothing new in web design, but Apple’s own use of large and more detailed icons has led to icon designs becoming bigger in size; more detailed and vibrant; and generally more unique in the type of imagery they depict.

Oversized icons

The icons in OSX are designed at extra large proportions, so the icons for the apps themselves also need to be oversized and therefore include plenty of detail. These icons act as the app’s logo and branding – It’s what people will recognise the app by when its sat in their dock, so it makes sense to use the supersized icon as part of the website design.

Designed layouts

Usually the surrounding interface of a website is designed, then the content is simply inserted and forgotten about. However the Apple website is a great example of how the content itself is designed, as well as the surrounding page. The Mac app websites often take inspiration from this, combining imagery and text into flowing layouts.

Modal windows

Javascript Lightboxes and modal windows have become pretty much standard in today’s web, but this particular style of window appears time and time again in Apple related site designs. These lightbox windows are great for showing off screenshots of the app, or an introductory video.

Crisp & sharp interface design

The OSX interface is razor sharp with tiny pixel bevels and highlights giving a really crisp appearance. This design style has emerged onto the web, particularly in Mac, iPhone and iPad related websites. Soft and subtle shadows, inset text and 1px highlighting lines all add to the theme.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

21 Comments

  1. That seems to sum up not only mac application websites, but iPhone and iPad app websites as well!

    Also, though not directly related to the design of the site, most mac app websites have a download (a trial) button next to a 'buy now' button. Lots of windows applications don't have these trials.

  2. Jonny says:

    Nice post. We have almost finished an iPhone App site. Cant wait to launch it :)

  3. Mohanraj says:

    I liked the design. Thanks for sharing :)

  4. Ibrahim says:

    Hey Chris! Nice post! Thanks for the info!

  5. Josh says:

    All great looking designs, Kaleidocope is my favorite though

  6. Great roundup, I really love app websites!

  7. Martin Lucas says:

    Lovely examples – the common features breakdown is really helpful. Thanks.

  8. Andy Barratt says:

    I'm actually kinda sick of seeing this kind of design trend. It's been around a long time and has long since exceeded being synonymous with mac app site design.

    It's time for something new surely?

  9. steve says:

    You've got some really nice examples there! I'd imagine some of those would be a pain to load on a slow connection though!

  10. Windows applications have not this nice style on there site.

  11. Galen says:

    I think all of Panic's application sites look great and follow everything you mentioned. Marketcircle is also a beautiful site to look at.

    Great article!

  12. Amazing thanks for share ….

  13. All are Amazing design but i like "Espresso" most. Thanks for sharing…

  14. I agree, Espresso is my favourite too!

  15. I love the details on the icon of Socialite. They really make it stand out.

  16. Designmango says:

    Great article thanks.

  17. Sammy says:

    yeah Espresso is the best :)
    thanks for sharing

  18. Albert Che says:

    Yes! It has turn out to be really significant for all the web designers to learn to style a internet site that creates an ever-lasting impact on the psyche of kids see http://www.vimeo.com/13998771. Sawgrass Shack is often a rare collection of talented designers who repeatedly deliver innovative and valuable solutions.

  19. Top Software Company in the IT Industry That Provides professional services in website designing, website development, website maintenance, website redesigning, web promotion, search engine optimization, e-commerce web development, intranet application development, SEO

    Thank you

  20. I love the simplicity of most of the designs. Thanks for sharing!

  21. Tina Ta says:

    Love these colours and layout! My fav!
    Thanks Chris!

Sorry, comments are now closed