My Breakthrough: Get to Code Faster

Breakthroughs From a Digital Agency (a Series)
We have a small, close-knit team here at Brolik. We’ve experienced solid growth year over year since our inception in 2004, but 2013 felt different from the rest. The company celebrates 10 years in business on January 14th, 2014. But, it’s not just this milestone we’re celebrating… this year the company reached a level of maturity that we can be proud of. As a small agency, cash flow challenges, production bottlenecks, inefficient processes and peaks and valleys in new business are common. This year our talent, experience and execution aligned better than ever before. To put a cap on the year, and to put this somewhat vague concept of “maturity” into more tangible terms, each of our team members will present their personal breakthroughs over the last year. In the process, we hope you’ll get to know the people who make up Brolik a little better.

I started at Brolik in 2008 as an intern. Over the last six years, I’ve had a large role in shaping our creative process. And through countless projects and many lessons learned, our process has evolved. Until recently, we have focused on gathering information through an extensive discovery process and then delivering a sitemap, wireframes, and full visual design before we type a single line of code.

During the visual design step in this process, I’d spend hours in Photoshop pushing pixels around, copy and pasting “Lorem Ipsum,” and designing button rollovers and submenu dropdowns. This process has resulted in some great projects, but I never stopped to realize how inefficient the visual design step was.

I love working in Photoshop. I’ve been using it for over a decade now. It allows me to think outside of the box. I don’t get caught up in the limitations of code, which I believe is severely restricting to the creative process. The problem is, the website I’m designing isn’t going to live in Photoshop. It’s an artificial representation of the final product.

At Brolik we’ve become very good at recreating the flat design from Photoshop with code on the web. I’ve always compared it to a puzzle; we design it, slice it apart, and put it back together with code. But, the users aren’t going to be experiencing the site in Photoshop. So I had to ask myself the question: Why am I spending so much time working in Photoshop?

My breakthrough was getting to code faster.

Over the last few months we have begun to alter our process in order to get every project to code faster. The website is a fish out of water in Photoshop. But as soon as the code begins flowing, the website comes to life. You can interact with it, click on buttons, see how each font is rendering. How does it respond to mobile? Does it load slowly? These questions are hypothetical while the website still lies flat in Photoshop.

Now as I said, I love Photoshop and it is still an integral part of my design process. I don’t want to completely remove it; I just want to be smarter about how I use it. Since my breakthrough, we’ve begun to make some changes at Brolik. We focus on creating a site-wide system for our websites through a User Interface Kit. We create the look and feel of all major elements within the site (such as typography, menus, inputs, buttons, and icons) as opposed to designing every last page.

We still pay attention to edge-cases, and we will design unique pages that are important. It’s a somewhat scary transition, because we’ve spent the last several years developing this process, and it has worked well for us. However, getting to code faster is going to speed up our process, allowing us to cut down the time that it takes us to create a website. Ultimately, this will make our clients and the higher-ups happier while still delivering an exceptional product.