Tips and Tricks

Take some inspiration from Apple.com

Let’s face it, Apple.com is a gorgeous web-site. Even if you don’t, unlike me, spend hours drooling over the latest bit of Apple kit you will have visited it at least once. We are using their computers and applications to make our iWeb sites so why not take inspiration from their site too. In this post I want to highlight some of the elements that go into making the Apple web-site what it is and how you can bring those elements to your iWeb site.

I am not saying you should copy Apple.com outright, far from it, however putting your own personal slant on their design elements will bring you a lovely looking site.

Let’s take a look at how Apple get their site looking as lovely as they do, and which elements we can bring to our iWeb sites.

White-space

Take a look at the screenshot below. There’s loads of white-space. The page is uncluttered and each of the individual elements are ‘allowed to breathe’.

Great Support

Apple offer support in a variety of manners, be it downloads of guides and manuals, video lessons for the majority of its applications or the ever popular forums. This is one of the key things to get visitors to return to your site.

Clear text

No matter what it is, you can read the text on the Apple site. No fancy, swirly fonts here, just modern, crisp typography.

Fine Lines

Helping to border, and therefore differentiate each specific element but not so much as they leap out the page at you, Apple uses subtle lines in between various sections of its pages.

Navigation

Let’s face it, Apple’s navigation is simple to use. No drop-down menus at the top of the page, just 8 clear buttons and a search bar. When you visit a page you get a sub-menu; easy. Notice as well, the contrasting ‘call-to-action Buy Now’ button.

Sub Navigation

How does Apple get around the no drop-down menu? It uses a variety of text-based links at the bottom of its pages to take you to all the places you might want to go.

Icons

Using common and yet subtle icons throughout the site helps navigation. If your looking for support rather than read a long line of text a spanner and screwdriver may catch your eye.

Great product images

And they are aren’t they? Not only are the Apple products gorgeous but the images presented on the site of the said products are gorgeous too and show them off well.

Gradients and shadows

To give a web page more lift and look less flat, Apple uses subtle gradients and shadows in and around elements giving the illusion of depth.

Do you use any of these elements in your iWeb site? or will you start to use some now? Leave us a comment and let us know.

You may also like

6 Comments

  1. I have looked a lot at apple.com, when i made my site skyttes.dk (danish). But in this post i found a few new things, i haven’t discovered myself… Back to work!
    Thank you 😉

  2. I like to use subtle shadows on my square glossy images to make them ‘pop’ out a little more. There’s three on my homepage for the latest news which kind of act as ‘call to action’ buttons.

  3. hey,
    I used the theme i had before and changed it alitle to look like the apple website and it has a darker background but is still really good. so every one can see just go to guiks-pt.tk and check it out!
    thanks, Gui

  4. Love the tips! You should check out my site… http://www.GlowWebsiteDesign.com. I made it entirely in iWeb! And used HTML snippets for all of the mouseover effects and shadows.

  5. I was inspired by their navigation bar and used that to create a custom navigation bar for my website http://www.fairbrother.net

    But how do I edit or preferably disable the “tooltips”?

    Cheers

    N

  6. How do you create a rating/write a review in iWeb, I like Apple’s format with the blue stars, which allows the customer to rate on a numeric scale the products being sold and to write a review.

Leave a Reply to Josh Cancel reply

Your email address will not be published. Required fields are marked *