December 16, 2012
The process of making a website used to be like an assembly line. It was a series of hand-offs with each team member contributing his/her part before giving it up to the next person. Like a game of telephone, the same content was passed from person to person, and, at each step, it took a slightly new form. What started as a glimmer in a client’s eye became a sitemap, then a wireframe, then a Photoshop file, and eventually it became code that went to live in its final resting place, the browser.
As a designer in the olden days (three years ago, or 21 in web years), my time to shine came between wireframes and front-end template development. The wireframes I started with were a good representation of what the website would become—like the blueprint of a house you can look at, close your eyes, and imagine walking through. I added colors and fonts and textures to make the content look its best and then handed it off to the front-end developer. That was it. Designers were makeup artists for wireframes.
Of course, these days it’s much more complicated. Due to the great variation of devices and behaviors, wireframes only give a glimpse of what a website will be, so we have replaced this step with prototypes. As my coworker Patrick described in his post about prototyping in the browser, “being able to design page-level interactions in a way that enables immediate trial and reaction is now a must.” The last four sites I have worked on began their lives as prototypes, all of which were built in the browser by a designer. Instead of passing them along to the graphic designers to “prettify,” we design a system to incorporate within them.
On our recent redesign of blackpixel.com, the design phase consisted of moodboards and laying out a couple of pages in Photoshop. That was enough of a visual guide to design the rest of the pages in the browser. Over the course of the project, I wore the following hats: UX designer, graphic designer, illustrator, and front-end developer. This is not to say I did the project by myself, or ever could have. At least three other people also played those roles, all of us working simultaneously and making decisions as we went. By jumping right into the template phase before design was finished, we were able to make all design decisions in the medium they were meant to be in. We could do QA and device testing as we worked. With the help of SASS, it was easy to make changes and incorporate feedback directly in the browser—infinitely faster than it would have been in Photoshop.
Over the last couple of months, some coworkers have taken this process up a notch. They are now using the same code from the original prototype all the way through to the final delivery. Why not, right? In the telephone process of years past, we recreated the same content up to five times, in five different mediums. With this project, every step has been discovery and iteration. In a recent review meeting, someone described the website as a statue. We started with a chunk of granite and are chipping away until it is a statue. We have been refining from the very beginning.
Where does this leave the designer if there is no specific design phase? From what I can tell, everywhere. The three people working on the aforementioned project are all designers. They each have their specialties (user experience design, front-end development, graphic design), but they are all on our design team and all have the title of designer.
Up until recently, I have been on the fence about the “designers need to code” argument. It is probably clear by now that I have teetered over to the “designers definitely need to code” side, but I think it goes further than that. IA, UX, and code aren’t web designer bonus features anymore—they are the job description. As time passes, I predict that multiple page layouts in Photoshop will go the way of the wireframe. I’m not sure yet what this means for my job as a designer, or if designing in the browser is the right answer, but I am looking forward to us figuring it all out. One thing I do know for sure: it’s an exciting time to be a designer.
March 11, 2022
March 4, 2022
August 1, 2018
January 29, 2018