Tim Lauter, Front-End Developer

Turning on the “Awesome Mode” for Tim’s personal website & blog

Project Details

Done for

Tim Lauter

Time

May 2015

Main Collaborators

  • Developer: Tim Lauter

tim_lauter-hero

We channeled the ’80s, surfing, a bit of Herb Lubalin, and a healthy amount of pizza into a website that is anything but ordinary.

Tim Lauter was building himself a new blog and felt it was overly clinical and boring. When I asked, “What would you want visitors to think about you, when they first see it?” Tim said “I want people to see this and think ‘This guy loves the ’80s.’”

So, we made it happen.

The story

Who is Tim?

Tim Lauter is a front-end developer I sat next to at IBM Design for about 9 months. There, he taught me a lot of great lessons about DevOps, WordPress, and JavaScript. When he was building himself a new blog, he told me that, even though his website was working well, it felt overly clinical and boring. When I asked, “What would you want visitors to think about you, when they first see it?” Tim said “I want people to see this and think This guy loves the ’80s.” That wasn’t what I expected, but it suddenly made the task of helping Tim find his brand impossible to resist.

The Process

When I asked Tim about some of his favorite things from the ’80s, I learned that he loves posters like the one for The Endless Summer and album art for bands like the Ramones. I dug a little deeper into surf brands and punk rock colors from the ’80s, then began to sketch how Tim’s name might be set in this spirit. I started from “LAUTER” set in Helvetica and gradually incorporated ideas from the curves and ligatures of Avante Garde. Next, I repeatedly brushed the word “Tim” with ink on paper, to get the perfect script to work from. I digitized my favorite instance and combined into the logo.

lauter-logo-process

I started from “LAUTER” set in Helvetica, and gradually incorporated ideas from the curves and ligatures of Avante Garde.

tim_lauter-hand-brush-used

I used a calligraphy brush and ink to create several versions of “Tim,” scanned the best specimen, and then live-traced it in Illustrator to allow it to work in a vector logo.

lauter-background-02

The first repeat pattern I created for Tim was inspired from perusing Pinterest

lauter-background-pizza-03

I soon realized that the pattern could contain even more personality – the triangles were turned in to slices of pizza, and the rectangles were turned into squiggles of bacon.

Once we got going, Tim and I finished the ’80s overhaul of his site in just over a day – it was one of the most fun things I’ve done this whole year. In addition to making the logo, I created a pizza-and-bacon repeat pattern and selected colors and typographic styles that felt straight out of the ’80s. Originally, we had agreed that an “Awesome Switch” might be a good idea – letting the original, very-clean look greet people and then allowing them to toggle on the ’80s. Tim would have little difficulty adding that feature, but he still hasn’t. I think maybe he’s just happy letting his site be awesome all the time.

Before

tim_lauter-screenshots_0000_Layer 3 copy

The original homepage

tim_lauter-screenshots_0001_Layer 2 copy

The original menu

After

tim_lauter-screenshots_0002_Layer 1

The new homepage

tim_lauter-screenshots_0003_Layer 0

The new menu, most significant for a surprising green-on-pink hover state

Outcomes

Impact

The bad news: Tim found another job, so I no longer work with him. The good news: it was a big move up for him – he’s now a senior developer at Urban Outfitters. He’s entirely qualified for the job and totally deserves it, but I like to think that the ’80s identity we created (pizza-bacon pattern included) gave him a bit of an edge at Urban, a company with a famously irreverent and creative ethos.

What I learned

It is so much fun working on small projects in person, when everyone involved is good at what they do and is able to play off of one another’s contributions in a “Yes, and” manner.