Web Design Memory Lane

One day, out of the blue, my best friend showed me 2Advanced's website. We were both blown away. We didn't really know what we were looking at or what 2Advanced was, but we knew it was cool as hell. It was a web site that turned you into Ethan Hunt, just by looking at it. It blinked, faded, flashed and everything else that Flash could possibly do at the time.

I wanted to make stuff like this.

ezgif-4-d42233b82f.gif

I spent a lot of time making animations and UIs in Flash, but eventually got tired of it and moved on to HTML and CSS. Bartelme Design, a design studio run by Wolfgang Bartelme, became my new design obsession. Every little detail was in the right place. The colors were crisp and punchy. It had gradients and reflections that gave the web site life. It had cool, photorealistic elements like bubbles and grass. It was pixel-pushed to perfection.

bartelme.at.png

Imitating Wolfgangs work taught me the ins and outs of Photoshop — especially the Shapes tool and the Layer Effects window. I learned to work with light sources and reflections and to imitate different materials. 


Soon thereafter, I discovered 31Three, a one-man digital studio run by Jesse Bennet-Chamberlain. Jesse created beautiful web sites that balanced typography, layout and visual effects perfectly. It had a level of sophistication that I had never encountered before on the web.

31Three-2007.png

One my favorite items i Jesse's portfolio was this design for Campaign Monitor. After discovering it, I was unable to unsee it. This was good design, period. For the longest time, everything I did was blue and green, had a MacBook Pro in the splash and featured a punchy sans serif headline with an italic ampersand as the last character in the first line. You're welcome, clients.

2a_large.jpg

Unlike me at the at the time, Jesse was really good at tailoring his designs to his clients' brands. I was amazed that the same person who created the cool all-caps-gotham buttons for Campaign Monitor were also able to design this elegant design for piano maker Steinway & Sons.

SteinwaySons-Final.jpg

Jesse's designs taught me that web design was about more than just making cool buttons — it was about understanding that each client is different and that each site should communicate the client's brand, not the designer's personal style. I desperately needed that lesson.

Jesse also knew how to bring energy into a design. I would constantly revisit his design for Fitbit and marvel at Jesse's mix of turquoise and pink. This was before color theory was a big thing in web design circles so the color decisions in his designs seemed like black magic to me.

d02e9f49f733003d88983d86c2fed9a7.jpg

Later, while devouring typography books, I discovered Jason Santa Maria's work. Jason drew a lot of inspiration from print design. In this lecture, he talks about how disappointed he was to see imaginative print layouts become boring, default-layout articles when published online.

To prove his point, Jason created a series of articles on his web site, all with unique layouts, each tailored to the content and theme of the article. I have a large folder in my Dropbox with half finished, over-designed imitations of these.


jsm-chocolate-is-for-girls.jpg
jsm-scenes-from-brimfield.jpg
jsm-candy.png
jsm-chunky.png

When starting my own web agency in 2011, I dreamt of creating a Scandinavian Happy Cog. To me, they represented what web design should be like. They knew the rules of typography, layout and color so well that they could break them and still look good while doing it. Their designs broke out the traditional 960 grid and their headlines mixed fonts and sizes in creative ways.

VP-hero-1600x1032.png

posse.png

The rest, as they say, is (modern) history. Responsive, mobile-first, atomic, flat…

Today, as I — and the rest of the design community — talk product design and design systems, I can I can find traces of all of these early designs in my work. All the stuff that I've stolen, refined and made my own is still very much present in my Sketch, Figma and Framer files. Thanks for the inspiration everyone.

(Ps. Please steal this blog post idea and share the stuff that shaped you as a designer.)