Copy That ©️ 12 — Designing like it’s 1999

This is issue 12 of the Copy That newsletter. Each week, I share 3 great bits of design inspiration for you to copy in order to improve your front-end skills.


👋,

After reading this great article on the history of web design, I’ve been digging into a tonne of retro designs.

This week is all about looking at the past, seeing what worked (and what didn’t) and using all of that to help you make better things for the future.

Happy copying! ©️

James

@mulholio


Interesting Things of the Week

  • Twiverse — Find diverse people to follow on Twitter who are into design, technology and more.
  • Isometric Love — Cute, 8-bit style 3D assets for free.
  • ModalzModalzModalz — A website entirely dedicated to reducing the use of modals (and some 10/10 design)

1 — Vintage Amazon

Unfortunately, this is a free newsletter, so no Black Friday deals for you. Luckily, you do get to enjoy this crazy old-school Amazon page instead.

Before you have a go at me for posting something so ghastly on a newsletter about good web-design, I wanted to point a couple of things out about the design.

First of all, where is the design obviously bad? I often find that seeing bad design, often makes me appreciate good design so what is wrong here that you could learn from?

That ‘Best of a Century’ icon looks like it was taken from Clip Art; if you’re on a phone, your links are going to be tiny and un-clickable; and the countless boxes around the edge are definitely cluttering the page.

But more interestingly, what’s bad now yet wouldn’t have been in 1999? One thing I noticed was that the ‘More…’ buttons looked atrocious. Then I realised why: I was viewing it with a monitor that was at least double the width of what was available in the 90s and it just wouldn’t have been necessary to make a site that accommodates screens that wide.

In the world of web design, we often talk about backwards compatibility for our users (I’m looking at you, Internet Explorer), yet we often forget to think about forwards compatibility. What could we do to our designs to make them more resilient to the future?

Source: Web Archive

Why not try… Using thoughts about this page to be super future proof?


2 — Skeuomorphic iBooks

If you ever used an early iPhone, you’ve probably encountered plenty of skeuomorphism: making design look like the real world in order to make it easier to understand.

Skeuomorphism is largely dying out now due to most users knowing their way around a computer or phone. But back when phones were new and tiny, I like the idea that the skeuomorphic flick of a virtual page was what you needed to make an ebook as comforting to read as a real one.

Seeing old designs like this do make me wonder what we could be made easier through metaphor, even if flat design currently rules supreme.

For now though, go mad with adding some PhotoShop textures and try recreating this wooden bookshelf.

Source: Cult of Mac

Why not try… Re-designing one of your favourite apps skeuomorphically?


3 — Airtable Save ‘Button’

Save buttons are my new favourite thing. Before I sound like I’ve been getting a bit *too* much into design, let me explain.

After digging into some skeuomorphism history, I was introduced to the crazy thought that some people only know the save icon (a floppy disk) as an icon, without knowing what the original object it was meant to denote is.

Admittedly, I’m only just old enough to remember seeing a floppy disk, but I still thought it was incredible that something that used to be an everyday object now exists only as an intangible icon.

I thought I’d try and celebrate the anachronistic save icon by sharing an interesting example of its use. But after looking through a few of my favourite apps and sites, I found the task strangely difficult.

This is where I noticed a weird trend: save buttons don’t seem to be necessary anymore. With real-time collaboration and fast connections, your data is being uploaded instantly to a server anyway. Now there’s simply no need for a button.

Before any designers out there get too excited about not having to design as much anymore, I wanted to share this example from Airtable to show how even if the button is gone, it might still be a good idea to provide some user feedback.

Source: Airtable

Why not try… Thinking up your own skeuomorphic icon?


If you enjoyed reading this edition of Copy That, why not head over to CopyThat.io and subscribe?