Apple stole my whitespace.


I often meet up with a co-worker (Michael Bach, Product Manger & Designer for Microsoft.com/Web) and we talk all things design. As it for us is therapy given we are constantly surrounded by engineers within Microsoft 🙂

One insight Michael came up with the other night is that Apple own white. It got me thinking and the more we looked at how other sites are designed, the more we both agreed that in the end its very hard today to come up with a site design that uses a big picture and is done in white without someone saying “dude, that’s so apple”.

I’ve done some design mockups for microsoft.com/silverlight that i want to pitch to the team, but am very annoyed as the more i look at them the more i can see them being labeled “that’s so apple”.

Another insight is that we noticed these days a lot of the brightest and best website designs seem to evolve around a central image, in that photography is playing a vital role in the way sites are designed.

A big vibrant picture can actually hide a lot of “meh” in a design.

Example:

http://sethsaid.com/

With a big vibrant image, i found my initial reaction to this site to be well designed.

image

Now without.

image

It just seems flat? and very monochrome. You can find more at (Web Creme Web design inspiration) and have a look at BIG Image vs SMALL Image.

Now lets take a throw-away design I was tinkering with for Microsoft.com/Silverlight.

image

The design is ok, but the image for me lacks life in that without the image, the design would look very basic.

Now lets see what happens if I add some other elements that i got from another site (as it struck me as a great concept to mood-board together from).

image

The two look completely different imho, and it sort of brings new energy levels to the design – even though its a very very basic design in the first place.

Damn you Apple, damn you and your white space designs.

image

Scott Out.

Comments (5)

  1. A large image serves to ground and provide context and focus a message.  Large images can lead to simple designs simple, but do they tell a story?

    In first example, the human face attempts a social connection. A similar-sized yellow happy face { 🙂 } would keep balance in the design, but totally change the mood and message. Both images fail to guide my eye to the lower frame. Once our focus is on the lower frame, does the large image provide value?

    In second case, the global background (gives me a feel of a broadcast new channel).  To me the variation (with headline graphics) is a bit busy. Adding a few gaps (open space) and/or doubling a couple headline boxes will allow our eyes to pick a point of interest. As you suggest, building on lesson from photography, having one, or couple points on interest focuses the message. Moving from one point of interest to another can tell a story.

    Apple’s main site design does look simple by using one large and a few smaller (3, or 5) images to convey emotion.  (Notice: comparative size of fonts to size of images.)  It’s interesting that Apple’s large image is a sequence of smaller images that guides the eye into the page. The smaller images pick up on key features. Together we see a few connections to the main image, which tell part of a story. Are we interested enough to (click somewhere and) hear more of the story?  

    –Brian

  2. Garry Trinder says:

    Brian,

    The Seth Godin page is basically a homage to the man himself, so it makes sense to use his portrait. I’d say the target audience for that site is Seth fans, so it makes sense he becomes the prominent profile there.

    The montage in secondary is an example, ie its just a concept quickly thrown together without any rationale thinking but to highlight that an image in the middle can go from blending in to completely taking over (for good or for worse.

  3. Sawyer says:

    Your Silverlight design reminds me of the JQuery homepage. Specifically, the navigation.

    However, there’s not much that’s new under the sun, so just make it look pretty, functional, and run with it!

  4. Grant says:

    The thing that strikes me about both of your Silverlight moodboards is the apparent absense of a message. Apple use images to reinforce a message, bring it to life and make it tangible. How can you hope to come up with a design without (at least an example of) a message you’re trying to communicate?

  5. Garry Trinder says:

    Grant,

    Agreed 🙂 the above design is never going to be used, it was to highlight the shift in design from the focal point, in this case the message you want to convey –

    so agreed! 🙂