Learning from the Masters of Design

#html #css #design #webdev

I recently bought two huge books on the history of graphic design from Taschen – here's volume one:

As each book weighs more than 4 kg, I can only read for about half an hour, or I'll lose the blood-circulation in my legs!

I find it very inspirational to look at beautiful designs from these masters of design.

One thing I tend to do, and can highly recommend, is trying to recreate a classic design to something you can use on the web.

Take a look at this simple example:

How would you do this in HTML and CSS?

There's no right or wrong answer – and you can probably think of many ways of accomplishing it. And that's the beauty of it: You can chose to do it in a known and familiar way – or chose to challenge yourself, going into unknown territory.

Either way, I guarentee you'll learn something. I always do.

Now, back to the blue columns. Notice how each blue column is half the size of the previous column? In CSS Grid, with the smallest column being 1fr, it's:

.columns {
  display: grid;
  grid-template-columns: 16fr 8fr 4fr 2fr 1fr;
}

Adding five <div>s inside a wrapper with class="columns", we get this:

Now, it's only a matter of translateY()'ing columns 2-4, adding aspect-ratio: 1/1.75 to the first column, and we have the initial version:

How can we “webify” this? That's up to your imagination! For me, the columns look a bit like books on a shelf, so I'll add some dynamic font-sizing using clamp() and set the writing-mode to vertical-lr:

Let's look at another example from the book – a beautiful, old movie-poster:

For me, this screams “clip-path” – so that's what I did, a bunch of layered clip-paths:

I also figured this could work as a custom header for an article – so I wrote a small piece on the “imposter syndrome” (something I have to deal with from time to time).

One final example

There are hundreds of beautiful designs in the Taschen-books – currently, I've fallen in love with this:

I've started to create the red circle, using a radial-gradient:

.circle {
  aspect-ratio: 1;
  background-image: radial-gradient(circle, 
    hsl(3deg 94% 28%) 50%, 
    #FFF 0 52%, 
    hsl(3deg 94% 28%) 0 57%,
    #FFF 0 59%, 
    hsl(3deg 94% 28%) 0 64%,
    #FFF 0 66%, 
    hsl(3deg 94% 28%) 0 100%
  );
  border-radius: 50%;
}

But then again, I might switch to svg, animate the indivdual rings, add text-on-a-path etc.

Maybe you might find this whole “recreate classic designs in CSS” silly or a waste of time – but believe me: it's fun, challenging, and always a great way to learn new stuff!

If you've become inspired to do something similar, or already have done, please share links to your work in the comments.