View Full Version : Designing With Vintage Apples...

12th October 2013, 10:39 PM
Recently I decided to issue myself a challenge. While I love Vintage Apple machines, I've always found the communities surrounding them to be a bit lacking at times, often in terms of content, but more-so in terms of design. So many of them haven't been updated in eons, with some of them still displaying the designs they had when they ceased being updated and were frozen in time.

So I wanted to create something that doesn't feel like it was optimised for Netscape 4. Trying to create something modern that has the spirit and feel of the products of the past isn't what I would consider easy. I wanted to integrate the vintage machines and their iconic designs into the visual elements of the site somehow, without restoring to a clichéd tactic like designing it to look like Mac OS 9, or giving it lashings of classic Mac OS icons.

I've experimented with no less than 10 designs so far. At the moment I'm messing around with an idea inspired by those sites that are supposed to simulate a desk, complete with keyboard, mouse and even coffee mug rings framing the main content, but employing the vintage hardware we've all come to love. So, before I can sketch this up and get a feeling for how it would look, I need to create the items that will be scattered around the virtual desk.

I thought I'd post up some of my work as I complete it, bit by bit.

I started tonight with a Macintosh 128k Keyboard. It's not a 100% accurate representation of the keyboard, but it comes fairly close and it's more than suitable for use as a footer or header graphic.

Type 1


Type 2


Cheers :D
~ Mic.

12th October 2013, 11:12 PM
Thats so awesome :)

13th October 2013, 05:20 AM
Another couple. This time it's the Macintosh 128k Mouse. Click to enlarge.

http://s7.postimg.org/rlh3h73fb/Mac_Mouse.jpg (http://s7.postimg.org/xmese9q1n/Mac_Mouse.jpg)

Also a couple of examples of how these graphics may be integrated into a website design.

http://s14.postimg.org/6ho5l52sd/Site_Design1.jpg (http://s14.postimg.org/rrbrvzj35/Site_Design1.jpg) http://s14.postimg.org/909ultoil/Site_Design2.jpg (http://s14.postimg.org/vc7nf7nmp/Site_Design2.jpg)

With some CSS, it should also be capable of variable width. I'm not sure if I'm entirely sold on the woodgrain design as it does look fairly busy, and the grey version could be subtly tuned up to make it look a little better. However this could clash with the whole "desktop" motif. Perhaps a black woodgrain? I'll have to work on it later.

17th October 2013, 08:04 AM
Love it so far.
I'd imagine you've trawled different Apple related sites for background images but what about some of the advertising posters from the past. They have some pretty impressive graphics and maybe some of the backgrounds could be useable?


17th October 2013, 01:24 PM
I haven't actually, may have to look into it.

At the moment I'm thinking about changing it ever so slightly as the header images are quite large, and I want to avoid having to make the readers scroll just to get to the navigation or content. I haven't had the chance to work on it these past few days, but hopefully I'll be able to look into it a little more tonight or tomorrow.