DEV Community

Cover image for Learning from the Masters of Design
Mads Stoumann
Mads Stoumann

Posted on

Learning from the Masters of Design

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

History of Graphic Design

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:

Blue Columns

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Five blue columns

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:

Finished Blue Columns

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:

No Way Out

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:

Red Circle

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%;
}
Enter fullscreen mode Exit fullscreen mode

Red Circle CSS

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.

Discussion (6)

Collapse
exceedgroup profile image
Exceed Team

This is lovely! Thanks for sharing your expertise ツ

Collapse
madsstoumann profile image
Mads Stoumann Author

Thank you!

Collapse
jasondavis_2 profile image
Jason Davis

Great work! Thanks for sharing these cool design ideas. It will help me to complete my magazine cover design project at Monster Logo Design.

Collapse
madsstoumann profile image
Mads Stoumann Author

Thank you! Good luck with your project!

Collapse
carlosds profile image
Karel De Smet

Great work, thanks for sharing! Definitely triggers me to get more practice with css and creating custom lay-outs.

Collapse
madsstoumann profile image
Mads Stoumann Author

Thanks! Please share whatever you come up with!