Design Trend Alert: That Old Computer Aesthetic

By on Sep 25, 2020 in Design Trends
Design Trend Alert: That Old Computer Aesthetic

The very first graphical user interfaces hit computer screens back in the early 1970s and the impact of their appearance was so huge that we’ve never really moved too far away from the original look that was established in these early versions. The impact that early computer systems had on the landscape of design can still be seen today and as time moves on these systems enter into the realm of nostalgia and they begin to influence modern graphic design once again, but this time to evoke more of a retro vibe.

If you take a look at any classic operating system (OS) from that era you will recognize a very familiar feel regarding how the elements look and things work. A lot of the core system behavior we see in modern operating systems was defined by these very first graphical user interfaces (GUI’s) — and while the visual polish of these elements have since evolved and core features have been added over time, a lot of the good things that early GUI’s got right are still heavily influencing how modern apps, websites and operating systems work and how they look.

This familiarity that early interfaces still have, paired with our inbuilt love of nostalgia has led to many designers using these retro elements in their own designs — sometimes creating work that directly mimics the aesthetic of early computers and operating systems or at least designing work that is meant to invoke a nostalgic vibe of the time or capture the joy of using early computers, software or webpages.

Save
Aesthetik - Retro Computer by Dirtytemp Studio is a perfect example of this.

Today we are going to explore this trend towards retro computer interfaces in more detail with a quick look at the history behind the style, then we will see some examples of how the old computer aesthetic is used today in real design projects and then at the end I’ll share some beautiful design resources that you can use to create a similar look for yourself.

Early Computer Interfaces

For the sake of simplicity, we are going to focus on the more familiar Microsoft and Apple systems. If you do wish to know a more complete historical timeline of graphical user interfaces you might enjoy this useful timeline and guide by ToastieTech.

Neither Apple nor Microsoft invented the idea of a graphical user interface, but they have certainly been the two biggest players when it comes to developing what operating systems are and what they are capable of. The systems that both companies built are used by the majority of computer users around the world so inevitably they have an influence on design trends and pop culture around the world, and as design trends always like to borrow inspiration from the past it is only natural that elements from early computer systems start to pop up in modern graphic designs.

Let’s take a look at the first attempts at a GUI for both Apple and Microsoft as I believe these have influenced the design trend we are exploring today the most.

Apple Macintosh System 1 (1984)

Save
Apple first introduced System 1 (aka System 0.97) as their first Mac operating system, which was released alongside the launch of the Macintosh 128K on January 24, 1984. The first thing that we notice is the fact that the resolution is low and there is no color to the interface, but the structure of what we see on display here already looks familiar and I’m sure we could all navigate around this OS with ease.

Looking closely at the details you can spot familiar features such as the menu bar, with the Apple icon in the top left, the floating windows, the drop-down menus, and the drag and drop desktop icons — it’s incredible to see how much of this survived in some way or another in modern macOS versions.

The simplicity of the visuals with the bold outlines, pixel graphics, and chunky text makes it very pleasant to look at even today, and while the appearance does lack some much-needed contrast there is still definitely a lot to admire about what is packed into this early OS. This same style pretty much stayed with early Apple operating systems until they introduced their color interface in 1991 with the release of System 7.

Apple Macintosh System 7 (1991)

Save

System 7.0 was first released for the Apple Macintosh in 1991 and it introduced color for the first time on an Apple operating system, this is celebrated with the colorful Apple menu icon in the top left. This release was one of Apple’s longest-running operating systems for a while, until OSX came around. Once again the core visuals on display are very similar to what we saw in Version 1, with a little sprinkle of color, but that same recognizable structure and workflow are there.

Windows 1.0 (1985)

Save

Development of Windows 1.0 started in 1983 and it was Microsoft’s first graphical user interface built on top MSDOS with the final release coming to market in November, 1985. By all accounts, this was not a well-received first attempt from Microsoft, with criticism around the over-reliance on a mouse input and performance issues holding it back from wider popularity, but as a first attempt it gave Microsoft the platform to build upon and we all know how well that went in the end.

Interestingly, this version of the OS didn’t allow users to overlap different windows and this led to more side-by-side layouts or programs opening full screen instead of the floating windows that we saw above in Apple’s System 1.0. Navigation around the file system was more list-based too, instead of having clickable icons.

There is still a recognizable feel to the structure of the overall system, with the menus, buttons, and interface elements looking somewhat similar to what we see in the early Apple system too — but the one thing with Windows 1.0 that really jumps out is the heavy use of bold vibrant colors in the interface. From what I understand the screens available at the time would have dulled these colors quite a bit, but either way, I appreciate the attempt to inject some fun and color into their interface at such an early stage.

A similar visual style stayed in place for Windows 2.0.

Windows 3.0 (1990)

Save
Windows 3.0 was released in 1990 and moved Microsoft firmly into the more icon-based point and click system, instead of the list based navigations used in version 1.0. By all accounts, this was Window’s first commercial success and it sold 10 million copies before 1992. Visually this version introduced a more ‘’3D” style to buttons etc in the attempt to add some depth and contrast, and the ability to customize the overall theme color and set colorful backgrounds meant that all early versions of Windows featured color quite strongly when compared to Apple.

Later versions of both Windows and Apple operating systems slowly started to move away from these early aesthetics that they established between the early 80’s to early 90’s, but it is this period of designs that I want to focus on as I believe these are responsible for influencing this trend of the ‘old computer aesthetic’ in some modern designs that I’ve seen.

Creative Examples of the ‘Old Computer Aesthetic’

Save
Art Star, RIP MS Paint by Kyle Letendre.

Save
Boldare Boards — online collaboration app for remote teams.

Save
Figma — Where teams design together.

Save
Poolside.fm — A continuous flow of upbeat tracks and a place to hang out online with a retro vibe.

Save
Lemonstreet Brewing Co. — Craft brewing in Jacksonville Florida.

Save
App'n'roll — Services Illustrations by Dominik Korolczuk

Save
Flowmingo.co — Webflow training & templates.

Save
SignsForScience — Sign ideas for the ‘march for science’.

Save
MediaMonks project by New Romantics on Behance.

Save
Dailus — Game Play Identity by Nicole Bustamante

Save
Young Creative Korea 2016 project on Behance.

Save
Stripe Hackathon Poster — by Mercedes Bazan on Behance.

Save
CometChat Go — Pricing by Ana Moreno

Save
Design Event Landing Page by Ivan Ivanov

Save
Social Media Templates by Meg Lewis

Save
Zach.dev — Personal portfolio and homepage of software engineer Zach Caceres.

Save
Eeerik.com — Homepage of creative Erik Bernacchi.

Save
Clothing Shop Website Concept by Ivan Ivanov

Save
Paolo Meola — personal website of digital entrepreneur Paolo Meola.

Save
Project by Nicelab Studio on Behance.

Save
Ecosystem of Gadgets by Dan Boy

Save
Computer Error Animation by Pablo Marín

Characteristics of the ‘Old Computer Aesthetic’

If we dissect the building blocks of this style we can find a few patterns that connect most of these pieces together, so if you were looking to build something in this style yourself where should you start? Let's break the characteristics of this aesthetic down into a few key categories:

Bold Frames & Grids
One common trait in this trend is the willingness to embrace bold, minimalistic grids and frames reminiscent of those that we see in the early Apple Mac System 1, and Windows 1.0 screenshots. Often in other styles frames tend to be subtle, soft, or even not seen at all — but I’m a big fan of how this trend breaks that idea apart and makes a feature of the frames and grids themselves.

Geometric Shapes
Bold geometric shapes can be seen throughout many of these pieces. Sometimes 3D inspired shapes, other times bold abstract outlines. These shapes can show themselves as prominent hero graphics throughout a number of the works we’ve looked at, but sometimes they can be used in more subtle ways, popping up as background patterns or decorations.

Retro Style Pairings
I think it is fair to say that there are a number of other influences present in this aesthetic and it pairs nicely with other popular design styles which also help evoke the nostalgia of the era, such as Brutalism, Futurism, Vaporwave (https://creativemarket.com/tags/vaporwave), and Memphis style. I think any 70’s / 80's / 90’s inspired graphics prove to be a great fit for the old computer aesthetic too.

Bold / Vibrant Pastel Colors
The colors we see could best be described as bold, vibrant pastel tones. It is almost as if you start off with a delicate pastel color and then just crank up the saturation as high as it will go. We see lots of blues, greens, pinks, and yellows being used. These colors are obviously inspired by design trends of the time of these early computer systems, but more specifically I think the very early Windows 1.0 interface has inspired a lot of the colors we see in this aesthetic.

Pixel Fonts and Graphics
Although it is not necessary to include pixels style graphics to pull off the old computer look successfully, those designs which try to stay more true to the original 1970 GUI’s do tend to make use of Pixel Fonts or Pixel Icons in order to fully embrace the retro 16-bit vibe.

Faux 3D / Stacks
We’ve already talked about the bold frames, but another trait of this style is a faux-3D style created by extending borders at an angle to give the impression of 3D, or even stacking elements at a 45degree angle to create stacks of frames and to give the impression of depth without using shadows. This is something that we can see in Apple System 1.0 where a slightly thicker bolder outline is used on the bottom and right side border in order to give the appearance of a shadow at a time where layer opacity wasn’t possible.

Retro Computer Inspired Design Products on Creative Market

If you’ve enjoyed exploring this trend and want to take bring this style into your own projects you’ll be pleased to know that Creative Market is brimming with beautiful products that also act as great examples of the aesthetic of old retro computers interfaces. I’ve picked out some of the most fitting examples that I found to showcase the look further, but there’s an extensive collection of over 60 items that I have put together that share a similar vibe, the link for this can be found at the very end of this post.

Save
NEORD-Social Media Brand Templates By Invasi Studio.

Save
Ellograph CF Charming Monospace Font By Connary Fagen

Save
Cygnito Mono by ATK® Studio

Save
Bitmap - 8-Bit Effect Actions by Studio 2am

Save
PLUSE! MediaKit PowerPoint Templates by Invasi Studio

Save
Argent Pixel CF Bitmap Serif Font by Connary Fagen

Save
Balgin Font Family by Studio Sun

Save
Old Computer Insta Template Ps + Canva by Marie T

Collection of Retro Computer Aesthetic Products

If you enjoyed these product suggestions and are looking for more in this same style, I have put together a growing Collection of over 60 products from here on Creative Market that fit this old computer aesthetic. There is a range of products in the collection, everything from social media templates and fonts to Photoshop actions and vector shapes. I’ll be sure to keep adding to this collection too to keep it up to date with new products in this style.

Over To You — Please let me know what other examples you have of this style in action, or if you have any product recommendations from here on Creative Market that fit this aesthetic.


Products Seen In This Post:

Free Challenge Calendar


Download it here

img

Download it here

Find your design style in 30 days

Having a hard time finding your unique design style? This creativity challenge will get you on the right track.

7 Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →