Old Dog, New Trick
Today we launched a new Teehan+Lax site. It’s different in many ways and I’m excited to see how it evolves, but during the process of its redesign, something else evolved.
I’m 38 years old. I’ve been designing digital stuff for long time. I’ve spent the majority of those years, as many of our designers have, in Photoshop; Pushing pixels around to try and achieve some level of perfection. Typically, one of two things happened once these flat PSDs got translated into code:
1) They didn’t look like the PSD
2) Using the site revealed a flaw in the design
I’d argue neither of these are a problem created by the developers implementing the designs. This a skill-set issue on the part of the designer.
We started this redesign at the beginning of the year after coming off of the Medium project. We had a core team of three designers, one of whom was me, and a single developer (see note). None of the designers could code. We understood relatively little, which I find incredibly embarrassing to admit here, but what the hell, I’m just an old designer.
Our company had been using Treehouse last year in an effort to ramp up designers who couldn’t code. I think that helped a great deal for some of them. When it came to designing teehanlax.com we figured it was a low-risk opportunity to see if we would sink or swim.
Resistance to Change
Like many designers who primarily work outside of code, I doubted the effort and benefit of trying to turn someone who was good at what they did in Photoshop, into something they resisted and would likely suck at. To me, we already had this figured out: Hire experts that focussed on one thing - there was no need to seek out unicorns. If I’m brutally honest, this was partially me not thinking it through and partially me not wanting to be a hypocrite. If I wanted other designers to learn how to code, then I needed to do so as well. Learning code always scared the shit out of me.
Here’s where my head is at today. Not all designers need to be coding pages from scratch or learning JS. I think the baseline is as simple as knowing how to manipulate the work of other developers. Tweaking margins, fonts, colours and a multitude of other things that can make a world of difference and takes almost no time to learn. More complicated stuff will be learned through these experiences.
Nelson sums up the type of stuff designers did during our redesign in this Branch discussion:
Chris built out the framework and all major pages. We started with minor tweaks here and there — mostly margin, padding, type size, numbers stuff. Growing more comfortable, we pushed to slightly more complex elements. Chris was immensely helpful and patient while we stumbled our way through the process. Thoughts on the experience? It was empowering. Spotting an issue, making a fix and then immediately seeing it working is a great feeling.
The real benefit isn’t better looking pages
I think getting to pixel perfection is a necessity, and having designers working with code will certainly help get you there. But, there is a bigger, less talked about benefit to this: It gets designers using their designs sooner. They’ll begin catching issues that were in their designs all along that were impossible to see. The issues are invisible. They need to be felt. At first, designers new to this may not have the skill to fix them, but they’ll have the ability to identify them. That’s worth the price of admission alone.
Two lessons for the price of one
Aside from learning a little bit about marking up front-end stuff, the most important thing I learned here was to let go of my fear of sucking at something. Don’t get me wrong, I still know relatively little about writing good code. I’m certainly never going to have the skills of my esteemed colleagues, but it was liberating to learn how to do something rather than just know about it.
Special thanks to those involved in the redesign go to: Chris, Nelson, Matt, Stu, Pierre, Peter, Mike, Jon, Dave, Jer, Brendan, Euge, Eric, Kim, Harjit, Kyra, Kate, Adam and the rest of the T+L crew for holding down the fort.
