.svg)
Eras of the Mac is an interactive microsite, designed for an experimental university project brief. The site presents the 40-year history of the Apple Mac line in the format of six distinctive design eras, in the context of a Mac operating system UI from each relevant era.
Focusing on experimental practice, this brief presented the opportunity to explore new technologies in the form of a microsite.
I had complete creative freedom over the design and content of the microsite, and the format I chose to present it in.
Although I already some ideas in mind, I began with researching different microsite structures and content layouts to hopefully inspire some ideas for how to present mine. I also discovered an old Mac software emulator, which turned out to be very useful for referencing.
Microsites are typically a fun, engaging and interactive format used to present specific, focused content that may serve an educational or playful purpose.
I explored a few initial ideas, but quickly settled on the concept of exploring the eras of the Mac. This concept allowed significant room for experimentation, as I had a few different potential ideas for how to display my content.
Next I focused on planning how the site could be divided into distinct eras. Looking through a list of all Mac models with images, I noted the most significant and the point at which the physical design language shifted.
I brainstormed potential ways to characterise eras based on this, and chose corresponding OS versions which marked significant changes.
Translating my wireframe sketches into Figma was helpful to begin to imagine the journey a user might take through the site, enhanced by animations and interactions.
These wireframes helped narrow down the core interactions of the experience and determine a rough content layout.
To help inform each era’s design styles, I looked into several key Mac UI design stages over time and pulled out key defining features - such as the interaction of colour, the transition the glossy, translucent water-inspired design language known as ‘Aqua’ and the eventual flatter, minimalistic style takeover.
Apple’s ‘Stickies’ app was one small detail I referenced throughout, having the advantage of being present in every OS version since circa 1990. I used them as intended, to display small snippets of text on the desktop.
I was also able to identify the main system font for each era’s relevant OS, and find accurate files for each. Once sourced, I imported these to Webflow and assigned styles to each.
My idea for how the user would move between eras went through several iterations - I started with the idea of the interaction mimicking Apple’s ‘Time Machine’ feature to take users back or forward in time, in the form of upgrade windows or buttons.
I decided to go with a simpler route of a timeline positioned at the edge of the screen, with each era date and its logo.
At this stage I had a fairly clear idea of how I wanted each era to look, and created a simple low fidelity design of the first era in Figma. This included a first idea for the time machine/timeline bar, as well as the correct font of the era.
Designing the first era was the most experimental stage of the project, teaching myself Webflow alongside deciding how closely to mimic the original System 1.0 OS and where to draw the line and accept design differences.
Initially I created the desktop background as a plain JPEG, before discovering how to tile images in Webflow – which reduced both file size and load times.
For the welcome screen I was imagining, I wanted the frame of an original Macintosh 128k with the infamous ‘Hello’ text on the screen. I found a community made SVG of the model frame in Figma, and an animated Lottie of the ‘Hello’ text. I exported both of these to layer together in Rive.
I imported the Mac frame SVG and Hello Lottie and layered them on top of each other, and set the animation to loop continuously. Using Webflow’s native Rive support, I imported this file to my home page and set to auto-play.
To contrast the vintage Macintosh 128k frame, I wanted to place it against a background of swirling colours, somewhat similar to the device setup experience on new modern Apple devices (see to the right for reference).
I created a short, looping video animation in After Effects with swirling colours that would autoplay in the background. I followed a tutorial using motion tile and turbulent displace effects on a 4 colour gradient, of which I key-framed the points to move across the animation duration.
To make the experience feel more convincingly like a real Mac, I made content windows draggable using a JavaScript library called interact.js.
I added the necessary code to the head and body section of every era, and linked the functionality to a ‘draggable’ class, which I attached as a combo class to each draggable window.
Due to the difficulty of extracting or finding the original graphic assets from the loading screens of old Mac OS versions, I chose to create my own that closely replicated the originals to make the experience feel as authentic as possible. The Mac OS 8 bar was made directly in Rive, and animated to fill when played.
The OS X 10.0 bar was more complicated, so I created each element in Figma, against reference screenshots. This was quite difficult to get accurate, but I am very happy with the likeness I achieved with blurs, gradients and shadows.
Towards the end of the project it became evident that the product icons would look much more authentic if positioned accurately on the right hand side. This clashed with the timeline though - the reason behind not doing it initially.
So, five eras in, I decided to redesign it and move the timeline to the bottom. Testing and feedback also confirmed that it improved ease of navigation, too. This change fit much better, and also allows the desktop to span the full horizontal browser width, creating a more authentic experience.
