Living a Dual Life – A View on the Coding Designers Debate

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?
featured_image_2

From our sponsor: Try Mailchimp today.

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.

My Experience

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

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.

jQuery isn’t just a great Javascript library used to make HTTP requests or pass objects to the DOM. It’s an awesome library that ads a huge dynamic design appeal. With jQuery, designers can now create really great image galleries, navigation menus and animated elements without having to program a bunch of if/else statements. For usability focused designers, jQuery offers solutions to problems that have existed for years. But the best part of jQuery is that it’s pretty simple to learn and designers don’t even really need to know Javascript well in order to accomplish what they want.

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.

The Workplace

The answer to the question of “Should designers code?” may also be answered by where the designer works, who the designer works for, what web product is being designed and even the audience of the project. Sometimes workplace culture and protocol will dictate whether a designer is required to code or not. I have worked for companies that only wanted to see Photoshop open on a designers desktop and others that wanted the designer to design the page and code the entire front end from HTML to Javascript.

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.

Tagged with:

Patrick Cox

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

http://patrick-cox.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 21

Comments are closed.
  1. I transitioned from the design dept to front end in a medium size company.

    Another advantage of knowing design is that I care for pixel perfect pages (as much as possible, IE6 etc etc)

  2. Great article. I had a similar path, i began playing with Photoshop / Illustrator and then made the transition towards html / css . I love being a developer with a graphic background !!

  3. I’d say that a web designer who can’t do at least some rudimentary programming is like a painter who can’t lift a paintbrush. You have to know what’s possible, what’s easy, and what’s very difficult if you’re going to have an intelligent discussion about how involved a project will be.

    One caveat, of course, is that the designer should know their limits and stick to them. Playing around with code to feed content to a webpage is one thing. Leaving the site open to hackers through amateur and insecure code is quite another. If it’s to do with money or data protection, I would side with the professional programmer / off-shelf guaranteed products…

    … least then there’s someone to blame!

  4. I have had so many people tell me that I cannot be a designer and a developer. I call myself a graphic designer and a front-end web developer. I do also have experience with WordPress and PHP so generally to not confuse normal folk I call myself a web developer. I love the creative side and the technical side, so whenever I hear that I cannot be both, I go out and prove them wrong by designing a great site, then coding it as well.

  5. I am definitely more about choosing the term “Front-end developer” over “Web developer”. I have found that using “Web developer” has put me in an awkward feeling hole a few times at my current job. The title “assumes” that you know everything there is to know about websites – front and back. Programming applications, making databases, etc. I don’t know any of those things. I quickly resorted to “Web designer and Front-end developer” and my work-life has flowed nicely ever since. Unfortunately, shifting my title around has landing me the lovely job of doing content-updates and other misc chores….but at least I’m not pulling my hair-out trying to learn stuff I could care-less about learning. 🙂

  6. I totally agree with you on this one. I started as an artist, moved from paint to digital around 1996, and then discovered that I could meld art with code in 1997.

    Back then you /had/ to be both Designer and Dev (and programmer and SEO) and it boggles my mind sometimes to meet Web Designers who only ever work in PS and don’t know a lick of code.

    To be, say, a Fabric Designer, you have to know at least /something/ about how the tailor is going to use the cloth … same applies to the Web.

  7. Nice article. I certainly believe that web designers need to know how to code. There’s nothing worse than getting a PSD file of a web design only to discover it’s going to take lots of un-semantic markup to make it happen.
    Across the board, being able to code your designs will affect everything you do. As for Expression Engine CMS, I’ve used it and it’s not all it’s cracked up to be. While it may have been built for the designer, what you really need is a CMS built for the client AND designer. A CMS is no good if you have to give your client a manual on how to update with it. It has to be simple. I recommend Concrete5. Built for geeks but made for editors. It does everything you need w/ the easy of use you expect on the iPhone. Love it. Check it out.
    http://www.concrete5.org/r/-/6614

  8. A designer who can code is far more useful than a coder who can use photoshop.

  9. I would consider myself a coding designer. I would say that having the ability to code HTML, CSS, jQuery and PHP whilst having a strong design side has gotten me all 3 of my ‘Web Designer’ jobs so far. I see no reason why people cant be both sides of the coin.

  10. Nice Article! First I’m a Web Designer later on because of the necessity i already know the front end development from HTML,CSS and Jquery up to server side programming PHP,MySQL and even .NET C# and now im slowly learning using ruby on rails. There is a big advantage as a Web Designer if you know how to code because wen you designing you will able to know what are the part that was easy and hard to make..
    It is fun to learn both.. Im a living testimony that both are can be made.

  11. i think designer should have the basic knowledge of coding! maybe not very fancy but i myself like to do my own coding when i try to create wordpress themes, or customize existing wordpress themes… it would be nice however to have someone more experienced than me with the coding part, but there are lots of great tutorials available on the internet to ease up my job…

  12. For me, coding has always be part of the design process. The web is our canvas and as artists we need to be able to prime that canvas to properly present our art. I’m not saying that we need to be back end developers, but with more and more browser support for HTML5 and CSS3, we will soon be able to achieve some of the things in the browser that we used to do in Photoshop and Flash. BTW, I am one of those designers who designs in the browser and occasionally opens Photoshop. Even when working on a graphic site my first thought is about the framework or code needed to present the graphics…

  13. I’ve been struggling with this question for a long time myself, and at the moment I’m actually thinking wether web-developers! (back-end) should code HTML and CSS.

    Being a front-end developer myself, I have recently started doing most of my ‘design’ work in the browser, only using Photoshop or Illustrator to do the occasional heavy duty graphics. For me, all web-designers and front-end developers should not only know how to code, – it should be their primary task. Web-developers should stick with PHP (which, I personally, think should not be a designer’s task), Javascript (except for jQuery here and there), ASP, mySQL, ASP, Ruby…

    HTML and CSS, like the blueprints or mock-ups that are done with Photoshop, are all about visual communication and layout. Programming languages like ASP deal with completely different issues. That’s my take on it anyway.

  14. Thanks for the article – very interesting. I would say that web designers need to know coding to a good level alongside having the creative skills. The both go together, but it does depend on the size of business – if you can afford to get someone else to turn any design into a web page with code, then you can know a lot less than if you need to follow a web site design through to completion. Either way, having an understanding of coding and how the internet ‘works’ generally, I think, is more likely to help than hinder in the context of good web design. I’d probably sum up the same as Jackson Browne, who commented above: ‘A designer who can code is far more useful than a coder who can use photoshop.’ – I tend to agree 🙂

  15. Thanks for the post, was a good read. In my opinion I think it is essential that a designer knows how to code. A designer who can code understands the limitations of what can be done on the web today, a strong knowledge of HTML and CSS is a must for me, regardless of the company size. I also believe designers should have a good understanding of open source platforms. Why limit yourself to just simply designing, this really is just the start of the journey your website will undergo.

  16. There’s slicing and “coding” a site design with HTML/CSS and maybe a bit of JS/jQuery and then there’s “programming” the backend functionality of a complex site, and those two things aren’t the same at all. I would expect a designer to be able to do the slicing and HTML part, maybe even better than a back end programmer, but I dont expect them to be able to program the bulk of the back end functionality. I would expect a programmer to be able to do the HTML/CSS too, but not design. Though I’ve met a small handful of people that can do it all, it’s rare to find someone that can do everything exceptionally well.

  17. Its great if you all can code, but I have met quite a few web designers who thought they code. The ones I have met all had js errors on their page, had 10 external css and js files included on their pages. Also, once a file was complete, you could not properly read the code as div’s would be misaligned, the javascript files would also just be aligned to the left of the page.

    That being said, I know that is not all web designers. To me, as long as you know what your doing (or ask for help) its cool though.

    Some tips for designers who wish to code – try to properly align your code (especially if your in a team of people), also research performance – its great that a page looks nice but not everyone has the same connection speed or computer specs as you – performance is an issue. Properly research the technologies you use as well, and if you do not understand the research, how can you know how things work?

    *disclaimer – I am a web developer both client and server side, and have some web design skills – if I am given a psd file I can code the actual html and css (xhtml strict standards and css2), but I would need assistance creating a beautiful psd image of a landing page or site.

  18. I completely agree that it depends on where you are working – definitely advantages and disadvantages to being a web designer and a coder … thanks for the great read!

    //Taylor @ the Phoenix Web Design