Wanna Look like a Mac Apple?
A while ago, I mentioned in a call the trendsetting web designs of Apple, and we discussed the possibility to skin XO with an Apple Peel. When I saw Banca Gubalke’s post where she drew a project on that base, I thought it may be encouraging to just quickly peel the Apple myself.
The Apple Design Elements
What makes the Apple site attractive? It’s porbably the clean and simple looking design, the functionality and usability as well as the color scheme which is in support of the content.
Our Apple Peel must clone the following:
- Menu bar
- Large Banner
- News Ticker
- Multi column Content underneath
- Fonts: Myriad Pro and Lucida
- Colors in the grays
The XO 2011 Apple Peel
The Navigation Menu
The menu consists of a home tab with the XO 2011 logo and thereafter with Apple style tabs where I have added small icons. For the above screen-shot I hovered over the XO 2011 Showcase tab to demonstrate the Apple like hover effect.
The Banner
Apple uses a single picture. To vary I use an image flipper:
When hovering over an image, it flips and text can be on display as well as a link will lead to the target page:
A Lightbox effect could be included as well, whereas the image would show in original size in an overlay. The purpose here is to either target a post talking about the designor a demo site.
Of course you could easily use a large banner as does Apple by using one of the components discussed in earlier posts.
The News Ticker
The News Ticker used here imports the latest headlines from my blog at yorgonestoridis.com and links back to the original articles.
Apple like styling with a light background and dark fonts is a detail.
Featured Posts
It’s no problem with XO: just do only display one of the lower home page sections and you are all set. You still have the possibility to use the image gallery and the footer widgets to add more items as Apple does on inner pages.
Note
The Apple Peel is typically a custom built skin, since it requires quite some hand designing and coding. There are so to speak no variables which can be loaded from the dashboard besides the background color. Therefore it needs careful planning and then an execution in function of the customer’s needs and desires.
Have a look at the demo site at http://custom.xo2011.com.
Your comments are appreciated.
Related posts:
