What I Wish I Had Known When I Graduated College
Better Stakeholder Interviews
Ready. Launch. Update!
Take a Break!
Cognition
Times, They Are A-changin’
- @sophshepherd
- Designer
- Sophie’s articles Feed
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.
21 Responses
Why does @sophshepherd think *right now* is such an amazing time to be a designer? Read Cognition to find out: http://t.co/8mJ2AKqG #fb
Thu, December 06, 2012 11:48:00
This week in Cognition I wrote about how changes in our process are redefining what it means to be a designer. Enjoy! http://t.co/ZMV17h11
Thu, December 06, 2012 11:57:15
Old: wires (UX’r) > PS (designer) > code (FE dev) New: coded UX prototype (designer) > coded design (designer) http://t.co/ICRIhQoC
Thu, December 06, 2012 12:57:16
Really terrific article from @sophshepherd on @happycog's Cognition examining what it means to be a web designer today:
Thu, December 06, 2012 12:59:40
Yes, yes, yes. "Where does this leave the designer if there is no specific design phase? ... everywhere."
Fri, December 07, 2012 5:36:38
"IA, UX, and code aren’t web designer bonus features anymore—they are the job description…" Markup over mockup
Fri, December 07, 2012 5:45:08
That @sophshepherd gets it. "Where does this leave the designer if there is no specific design phase? ... everywhere." http://t.co/odqXBFmC
Fri, December 07, 2012 9:37:00
Design phase? We don't need no freaking design phase.
Fri, December 07, 2012 6:51:24
@jrazza Good article. http://t.co/w2Wlwdve
Fri, December 07, 2012 9:28:03
Happy Cog on designing in the browser http://t.co/DlG3yKk1
Sun, December 09, 2012 2:11:17
Designers need to change. Our projects have increasingly been taking this same approach. http://t.co/NkfCesYE
Tue, December 11, 2012 10:07:47
“@lukebrooker: Designers need to change. Our projects have increasingly been taking this same approach. http://t.co/CF8zl5HT” /interesting
Tue, December 11, 2012 11:03:43
Yes, we are living exciting times. http://t.co/r2ONTY9E
Fri, December 14, 2012 12:53:17
Change is good thing. Especially when it comes to design interaction.
Mon, December 17, 2012 3:05:42
An accurate description of a web designer in 2013.
Sat, March 09, 2013 10:07:59
For crafting multichannel experiences “IA, UX, and code aren't designer bonus features anymore”
Sat, March 09, 2013 10:40:01
"it’s an exciting time to be a designer" by @sophshepherd http://t.co/FQiAqahG0C It sure is, good that I know design, code and UX. :)
Sat, March 09, 2013 1:53:31
Design different. “IA, UX, and code aren’t web designer bonus features anymore—they are the job description.” http://t.co/kwYkkcD07q
Tue, March 12, 2013 8:24:25
Times a A-changing http://t.co/z1mmHemFcN
Fri, March 15, 2013 4:35:37
Times, They Are A-changin’ - http://t.co/rUIc8tkUQa
Wed, April 10, 2013 6:03:01
I'm wondering about the same things, and share the conclusion — an exciting time to be a designer!
Thu, April 18, 2013 10:57:03