344 Design Portfolio Website
Stefan G. Bucher is a graphic designer, illustrator, writer and maker of monsters, who works out of his studio in California. You might have come across some of his work at a
bookshop, in a record store, on your iPad, on the TV or at the movies. As a huge fan of his diverse projects and his previous website, I felt a great responsibility to make Stefan look good with the updated one.
new 344 Design website runs on a responsive design which adapts to the different screen sizes of mobile devices and features high resolution images for Retina displays. It’s a place where you can look at the work in great detail, find out more about the man behind it, and get insights into the process. Ultimately, I hope it will attract new clients who are eager to work with an excellent designer.
I met Stefan in Portland, Oregon after he gave a talk, back then when I was studying abroad. By that time, I was already familiar with his book “
All Access” which told the origin stories of 30 graphic designers and I have read everything there was on his website. Twice. This is how much I admired his work and his writing.
We became pen pals and then friends over the years. After I graduated and stared working as a self-employed designer, Stefan wrote me again. This time, he was looking for someone to rework his website and asked, whether I was into such things.
If one of your design heroes asks you to collaborate on such a project, you better step up to it!
We agreed on a viable design quickly. After that, we tested out different typefaces and refined the design, until we were happy and had incorporated most of our ideas.
One of the first attempts featured the concept for the overview in an early stage, but we kept improving.
This is the complete overview. The website features 112 projects as of this writing. Each one is presented in great detail, showcasing the process, and hopefully makes you smile.
Collaborating was challenging, yet rewarding. One can only assume what happens, when two detail-obsessed designers work together on a project which is dear to both of them.
For example, I simply had to manually re-kern the whole Helvetica Neue typeface for the titles. It was a lot of work, but just looking at it gets me in a zen-like state.
I’m grateful for being treated as an equal and a colleague, even though I tested Stefan’s patience when some things took longer to figure out than anticipated. But we were both determined (née stubborn) enough to strive for the best possible outcome at this ginormous breadth and marched on.
Just to give you an idea of the scale at which many projects are presented, here’s the same
project in full. Of course, there are some projects that are less extensive, while others are even more voluminous.
Stefan admitted to the website’s scope:
“It had evolved from a simple update to a quasi‑autobiography.”
We kept an idea from the
previous site we both liked: Every project has it’s own matching color scheme.
I could have picked every single project, but in the end, I had to narrow it down to these four to give you an impression. Please note how the responsive design adapts to each device size.
1/ 100 Days of Monsters
2/ The Matrix
3/ The TEDx Talk
4/ Hybrid Animals
Besides showing you a gallery of preview images, the customized content management system automatically compiles a
list of all projects in text form.
You can sort the projects by title, type, client, location, and year. I love data!
You can filter projects by type, by client, by client location, and by year.
It’s like Wikipedia: Since everything is interconnected and cross-referenced, you can spent hours strolling from one project to the next, satisfying your curiosity.
The description for the “Books by Me” category is one of my favorites.
The website also offers an honest, yet informative
about page with an attached student FAQ page.
We added a company store with purchase links to books, monster merchandise and the Monster Maker App.
These are some of the original sketches and schematics I kept from the beginning of the project. You can see how the concept for the project overview was on my mind early on.
At one point during the development, I toyed with a skeuomorphic bookshelf design for the store. I’m glad we came to our senses before it was too late and discarded that thing.