From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
Lately I’ve noticed some great discussions in web design forums, on Linkedin and Twitter about the role of a web designer and what skills a web designer should have. The question that keeps getting brought up time and time again is whether it is necessary for web designers to have the ability to develop designs: should designers code?
I believe for the most part web designers should be expected to at least understand how to reconstruct their designs in HTML and CSS if only so they can understand the limitations and complications of programming. Once a designer understands how a site has to be coded and they see what’s under the hood, then the designer can better design for the platform, make development easier and make themselves more valuable. It’s just like print design right? If a print designer doesn’t understand the limitations and constraints of the printing process than that print designer will constantly struggle.
I originally wanted to be a graphic designer and so naturally I studied visual art and design, but after I took my web design class, where I saw that you could actually design not just in Photoshop, but in HTML and CSS, I was hooked. Listening to interviews with Dan Cederholm and others — who design in the browser and occasionally open Photoshop or Illustrator to edit images — I soon realized that web design was much bigger and broader than just the Adobe suite.
Web design gave me the ability to be creative as well as technical. It gave me the ability to not only design neato, cool looking graphics, but it also gave me the ability to bring those graphics to life and allow them to interact with people in a way that static design couldn’t ever do before. Design itself is great, but honestly the highlights of my career have been when one of my designs is brought to life as a living entity for the world to see. That’s the moment that I feel truly satisfied with my design. It’s not after I complete the psd and ship it off to some developer to hack up and spit out, it’s when I see my design up and running. It’s when I see how people interact with it that gets me excited to be a designer.
Now, I get to live in both worlds. I get to spend time figuring out awesome new ways to create reflections, discover new color schemes and layouts, and worry about descenders, aperture and kerning. But then I get to turn around and play with new CSS rules, worry about how my buttons fade in and out between mouse over states, find ways to optimize my code, and try to find the most elegant way to develop the design without bloating up my site.
The tools of the web have changed the game for web designers. Even just a few years ago a really great web designer just used the Adobe suite and maybe a text editor to do some very simple HTML mockups. But with the advent of HTML5, jQuery, WordPress, Expression Engine and whole host of other CMS’s, coding libraries and languages, the internet is forcing designers to learn code.
HTML5 and CSS3 offer the designer so much more freedom to design more dynamic and better web sites beyond the static psd file. With new CSS properties like gradients, shadows and transformations the designer can finally quit relying on large, sliced up background images to present the design. Instead, just a few lines of CSS can create almost anything that can be created in Photoshop. HTML5 canvas also gives designers another great tool for creating animations and rendering video.
WordPress is the gateway CMS for pretty much every designer. It’s pretty much how I am learning PHP. Web designers – mostly freelancers – need some sort of platform to build their websites on and allow their clients to manage them and WordPress has offer the best, designer oriented CMS on the planet. WordPress has allowed a simple way in which they can build a website quickly without having to hunt down some Rails or PHP developer to do it for them.
Expression Engine is the bigger, beefier version of WordPress (at least in my mind) and is a CMS that is built with the designer in mind. EE allows the design full CMS capabilities while still keeping the the back end coding relatively simple.
If you work for a large corporation where the design team and the development team are separated by a wall or even buildings, you may never be required to code a single line. Large companies are generally organized and built upon systems to maximize efficiency and most of the time this type of organization requires a hard separation between the design and development teams. Small companies on the other hand generally don’t have the ability to hire designers who only design and developers who only write code, so they would rather find that perfect person who can design fantastic sites as well as build them.
A new trend emerging in large and small companies all over is a sort of a third, hybrid team of designer/developers. With web applications becoming more popular, the need to have developers who understand design principles or designers who can code, is quickly becoming important. Companies are starting to realize the importance of having people who can bring a static design to life. More and more workplaces are staring to create “front end development” departments to fill this need.
The Design Mindset
There is a very distinct difference between designer and developer, but lines are starting to be crossed more and more. Many fights and arguments have been fought based upon this difference. For many years designers created these elaborate designs, then handed the psd files off to the developer where they promptly destroyed them, and for many years designers have been designing sites that were completely impossible to code.
Designers have a very particular mindset, they care about things like fonts, pixels, drop shadows, lines, composition – you know, all those things that the developer could give a rats ass about. How many times have you the designer argued with a developer or project manager about button placement or a slight difference in a color? And they just look at you like you are some spoiled little kid who is just trying to make their job harder. It happens everyday, in fact, its probably happening somewhere right now.
But for designers, learning how to code can be a huge time saver and “designer” saver. When a designer takes control of the coding, even just the front end HTML/CSS/JS, they not only protect their designs from the evil fingers of the developer (read that very sarcastically please) but they also make themselves a thousand times more valuable.
I guess my take on the debate can be summed up like this: Should designers code? Yes they should. The fine line of designer and developer is becoming more and more blurred and if a web designer isn’t building their programming portfolio, I’m pretty sure they will find them self designing business cards for their Aunt’s mobile pet grooming business… not that there’s anything wrong with that.