- December 12, 2013
Coding is Believing
- @katiekovalcin
- Designer
There’s something that’s hard for some of us web designers to just flat out admit:
we stubbornly hate to code. I’m a designer, dammit. I live and breathe Creative Suite. Give me Photoshop or give me death. My former coding knowledge included two things: what a div is, and how to stylize my MySpace page (circa 2004).
And without even realizing it, my attitude has changed, seemingly overnight.
Within the past month, I have learned to build responsive, HTML wireframes using Foundation and Compass. The initial setup was enough to make me want to run away and join the circus. With the added confusion at first, it seemed like everything broke if I merely looked at my code the wrong way. But, with patience, coaching, and helpful documentation, it soon clicked—and with only a few tears shed along the way.
Encouraging designers to learn to code is something that has been thrown around every which way on the internet a thousand times over. And rightfully so. The more educated we are about how our medium works, the better our designs will be and the better we can communicate with our teammates. All along, I knew I should have been more familiar with code, but I’ve been fortunate enough to always be surrounded by talented developers that I never had to learn it.
With my current project team’s structure of two designers and two developers, I have now witnessed how much more collaborative our process has become when we can all speak the same language, or quite literally are working within the same lines of code. Prototyping is an excellent excuse to learn enough to understand the code your team writes, without feeling like you have to know how to build a production-ready website.
Still not convinced why you should learn to code? Consider these points, coming from a gal who took awhile to see the light:
- We’re inevitably reworking content with the client in the early stages of a site. HTML wireframes have allowed me to easily make copy adjustments. I can reuse modules with Codekit’s kit files, update one bitty line of code in just one file, and BAM! all 5–10+ pages that use that module update simultaneously. This is what dreams are made of.
- I don’t need to resize and drag each module’s box manually. My layouts automatically move, resize, and shift themselves when I make changes.
- HTML prototyping has forced me to think responsively earlier. Of course, I made responsive considerations with traditional static wireframes as well, but when I am actually writing and editing the behavior myself in real time, I can make more informed decisions earlier on.
- Using a framework has been delightfully freeing for my mind. For a prototype, it’s distracting to override default type styles or colors. I truly get to spend most of my time focusing on layout, content, and functionality—a refreshing break from my usual process.
- Developers’ workflows are kind of amazing, and it makes me weep knowing how much longer minor edits take in our design programs. I’ve learned about nifty Emmet for Sublime Text which makes me feel like I’m updating content in the Matrix. Seriously though, did you know you can use infinite cursors to edit infinite lines of code all at the same time?!
- Teammates love empathy. I learned very quickly that a lot of things in my designs that (I thought) were quick and easy implementations were actually kind of a pain. Sticky sidebars, anyone?
- It’s much better to show a client the behavior rather than annotate a document to death. What I get out of my head and show the client is much truer to what my design intentions are, minimizing misalignment in the future.
While I never thought I’d come around, I actually like to prototype with code now. Nay, I love it. Of course, I still feel most at home in a good ol’ Illustrator document, but I also see the extreme benefits in expanding my process outside of my comfort zone. If you’re like me, a stubborn web designer who isn’t code-savvy, I feel for you. But, if you try building your next wireframe using code, you won’t want to go back. Trust me, it’s not as daunting as you think!