17 February 2010
5 Good Reasons Why Designers Should Code
Earlier today Elliot Jay Stocks commented on Twitter
I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs.
His comment created a great little debate on Twitter.
Personally, I agree with Elliot. I think it’s odd that some Web Designers can’t code their own designs, but only three years ago I was one of those designers. I had been a Graphic Designer for ten years before I ever typed a line of code. Finally learning HTML and CSS in order to code my own designs was the best decision I ever made. Here are five good reasons why I think designers should code.
Reason 1
The combination of a designing in Photoshop (or whatever software you use) along with HTML & CSS is greater than the sum of their parts. Many people view code as a restriction to a designer but when I learnt to code I found it liberating. Far from being a restriction, it opened up a whole new realm of creative possibilities. Basically, learning code made me a much better Web Designer.
Reason 2
Your designs will be executed in exactly the way you want them too. If you completely split the duties of designing and coding there inevitably comes a point in a project where the coder ends up doing bits of design, at which point the design can start to degrade. This isn’t the fault of the coder; it’s just real life. It’s just not practical to go back to the designer for a Photoshop mock-up every time a new section of the site needs to be designed/added.
Reason 3
The bridge between designing in Photoshop and code is relatively small. It’s even arguable that HTML & CSS is more a designer’s tool than developer’s. I know some people will say thing like “but you don’t see architects building their designs” etc etc, but in their case it’s far more obvious why.
For example, an architect who wished to build their house after designing it would then have to learn how to drive a JCB, lay bricks, be a carpenter etc. Comparing an Architect and a Web Designer just doesn’t make any sense in this context.
However, when I design a website, after designing the homepage in photoshop I’ll often carry on designing in HTML & CSS. It’s at this point where designing and building almost become one and the same. This is something quite unique to Web and Graphic Design. It just can’t happen when your designing products, cars or buildings.
So, if you’re a designer who doesn’t code it might seem like a daunting task to learn, I know, I’ve been there… but it’s not that hard. Learn it, you won’t regret it.
Reason 4
It’s massively time saving to be able to both design and code. Like I said in my last point, once you reach the point in a project where you feel comfortable designing in the browser you instantly cut out all those Photoshop mock-ups you would have handed over to a coder, only to re-do in code what you’ve already done in Photoshop.
Reason 5
If you’re a designer who can’t code, learning code opens up a whole new world of job opportunities, whether you’re looking for freelance gigs or permanent employment. One of the main reasons I learnt to code was because I was so frustrated by the lack of opportunities for designers who can’t code.
In Conclusion
Obviously there are times when it’s just not practical or the best use of a designer’s time to be forever updating a website, especially with larger projects but on the whole if you care about how the content on your site is presented I think you get the best results with a designer that knows how to code.
What do you guys reckon?
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
chopeh
# February 17, 2010 - 4:12 pm
It never even occurred to me before that a web designer would not be able to code their own design?! Sounds pretty outrageous to me.
Good article. I’ve yet to come across anyone who actually *couldn’t* code their design.. but If I do I’ll hand them a link to this post.
David Malcolm
# February 20, 2010 - 8:23 pm
I agree that an initial layered design in Photoshop/Illustrator with a follow up using (X)HTML/CSS is a must for web designers. Building a series of alternative templates in Adobe avoids the temptation of lazily reusing code and can generally be a quicker route to presentation of initial ideas.
Laura Kalbag
# February 17, 2010 - 4:12 pm
“However, when I design a website, after designing the homepage in photoshop I’ll often carry on designing in HTML & CSS. It’s at this point where designing and building almost become one and the same.”
I’m pleased I’m not the only one that does that! It really saves time but I’m still not quite quick enough at writing CSS compared to Photoshop to do the whole lot in the browser.
In fact, would love to know your thoughts on designing a whole site in browser?
Mark Sorsa-Leslie
# February 17, 2010 - 6:20 pm
That’s something that we have been working hard to accomplish by building a new browser-based visual coding approach that is aimed at designers. The system allows the complete design process to happen using a visual component editor in an online application. Not so much WYSIWYG, but somewhere between coding and designing. We are rolling it out in the next two months and we are excited to see how it is received by both those that can code and those that can’t.
jack
# February 17, 2010 - 7:22 pm
agree! depending on deadlines, I sometimes let the client know we can continue trying things out in the templates stage. although I am very careful and only do it if the item is non-critical and or if improvement can be made that is obvious.
but, yeah – once it is in the browser, i’m still trying to make it more awesome
Ali
# February 17, 2010 - 4:15 pm
I think it just depends on what path you take. I can imagine that in your situation it was quite a big step to decide to start learning to code your designs. Especially if you were predominantly doing print work and branching out into website design (I’m speculating here :])
My interest in design was sparked by animation so I started off doing flash sites, then coding html & css, all the time learning how to use photoshop, illustrator etc.
Regardless of the journey you take it’s important that you don’t stop believin.
Chris Mahon
# February 17, 2010 - 4:16 pm
If you deal in any type of interface design I think it is a MUST to be able to know not only how to code in basic HTML / CSS but also in Javascript. jQuery is ridiculously easy to pick up and it makes such a differences, to me anyway, knowing what is and isn’t possible in the browser before I even start sketching out my designs.
Stuart Witts
# February 17, 2010 - 4:26 pm
Chris, you beat me to it ;)
I wouldn’t necessarily expect a designer to be able to code all of the whizzy jQuery (other whizzy toolkits are available), but as you say. Without knowledge of what is actually possible you won’t be able to incorporate it into your designs.
Aside from that, I agree with everything that has been said. I would go as far as to say, being able to code your own designs should be a requirement. It always has been when I’ve been hiring.
Mohammad Koubeissi
# February 17, 2010 - 4:18 pm
Every designer in my agency doesn’t know HTML/CSS (except for me of course) and a developer who uses tables :(
Agree with everything you said.
Michael Wales
# February 18, 2010 - 6:22 pm
What agency is this? I don’t ever want to make the mistake of contracting your company out to do something…
Amy Mahon
# February 17, 2010 - 4:18 pm
Wholeheartedly agree – especially reasons 2 & 3!
Steven Hylands
# February 17, 2010 - 4:22 pm
Well Said! I have a background in design & development, in the last year or two I stopped developing html & css to focus on interface design. But I have come to realise that the extra layer of ‘design in the browser’ is a vital part of my web design process.
Sreeraman M.G
# February 17, 2010 - 4:22 pm
A website layout and a website are two different things. A person who can only design a website layout is a Graphic Designer. A person who creates a website layout and makes it to work like a website is a Web Designer.
tracedinchalk
# February 17, 2010 - 4:26 pm
I started out as a designer, you really nailed this article.
Design was my stepping stone into coding and theming, now I work as a technical director where I still get the opportunity to code and design but on a much larger scale.
I think you could just as easily write a post titled “5 Good Reasons Developers Should Understand Design”
Lots of developers out there still building solid frameworks, plugins and tools for us, but lacking fundamental design elements and conventions.
I think being a developer these days implies that you have a strong skill-set and understanding of design and development.
In turn, I’m finding that more and more designers I work with are capable and happy to provide stubbed out html layouts and CSS styles.
Andy R
# February 17, 2010 - 5:35 pm
“5 Good Reasons Developers Should Understand Design”
I 2nd that idea.
Web Graphic Designer
# February 17, 2010 - 4:28 pm
Speaking personally, I’m a designer and my brain works in a different way to that of a programmer, let’s keep the divisions separate shall we :-) I do agree that we should be able to recognize certain bits of code, I tend to speed things up by designing in code sometimes when I have to duplicate procedures etc. Always hate the back-end stuff. :-)
Jón Grétar
# February 17, 2010 - 4:57 pm
Speaking as a developer I find HTML and CSS especially more in the area of designer. CSS is not code in any way but a text description of graphics. I think it’s far easier for a designer to learn CSS than for a programmer to learn CSS exactly because of this difference in brain usage you mention. You are trained to envision the graphical outcome and use your tools to accomplish the task. A programmer finds it harder to envision the outcome and is less equipped to deal with the ui changes that inevitably need to be made when translating a design from static to interactive.
Jimmy
# February 18, 2010 - 4:11 am
Stop being lazy and making excuses.
Learn your trade, or find something you actually care about.
Just sayin…
Rick Nunn
# February 19, 2010 - 9:35 am
Well said, I like your style.
Oscar Barber
# February 17, 2010 - 4:28 pm
Hi, I’m a freelance web designer and frontend developer.
I’m agree with this post. On my opinion a web designer should know how to code xhtml/css. This is best starting point to code their designs and give them the best look on the browser.
It’s not necessary to be an experiencied coder to know how to code xhtml/css.
But is not necessary to code all your projects. If you need help or you are designing a big project you can hire a professional coder/progammer for backend and frontend.
Regards!
Arjun Phlox
# February 17, 2010 - 4:29 pm
Whoa! Inspires me to do more. I also agree with Chris Mahon, jQuery is just as easy if we’re gonna go for coding in interface design along with HTML/CSS. :)
Kean
# February 17, 2010 - 4:32 pm
I’va always coded my own designs. There’s simply too much stuff to design that you wouldn’t put in Photoshop such as user interactions. Coding your own designs allows you to not only recreate your design as intended but also design the missing peices of a photoshop mock-up such as hover effects and popups.
I couldn’t ever imagine being a designer without knowing HTML and CSS
Suzanne
# February 18, 2010 - 5:53 pm
Making the switch myself… have coded the last few designs I created now and makes me feel a lot better about what I’m doing…. something that I started doing that might help is get firebug for your browser. When you see something interesting or something that makes you wonder how they did that, check it out! :)
TerryR
# February 20, 2010 - 9:51 pm
Good advise, Suzanne — a good way to learn is to look under the hood.
I won’t admit how old I am, or how long I’ve been a “graphic” designer, but I’ve been debating getting update training, or hanging it up for good. Truth is, Mike is right. Us oldsters need to give in, or get out. Learn to code!
Garett Mayfield
# February 17, 2010 - 4:32 pm
I completely agree with this article. I, however, am that designer who is making the transition from print to web and needs to learn code. Any books to recommend to me (as a designer) that would get me going?
Andy
# February 17, 2010 - 4:58 pm
I too made that print-to-web transition.
The book that helped me crack CSS was:
‘CSS – The Missing Manual’
By David Sawyer McFarland
Along with the best video tutorials on the planet – from Chris Coyier at http://css-tricks.com
I started off trying to read the code that Dreamweaver spat out, but now I’m hand-coding more or less evrything from the ground up (but only as far as html and css with a bit of JS thrown in!)
Good luck – you’ll love it ! ;)
legolandbridge
# February 17, 2010 - 5:12 pm
Good place to get going is the W3 tutorials:
http://www.w3schools.com/
Also http://htmldog.com/
Start with HTML for marking your content, then CSS for layout.
Then some javascript/jquery will serve you well for animations and effects.
Good luck.
Shane Guymon
# February 17, 2010 - 5:14 pm
here’s some http://www.shaneguymon.com/recommended.html
I also just finished reading this book which was very beneficial! http://handcraftedcss.com/
Laura Kalbag
# February 17, 2010 - 7:53 pm
For books, I’d recommend Web Standards Solutions: The Markup and Style Handbook, 2nd Edition and Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS as I learnt the basics that I know from them.
I’ve heard HTML Dog is good for simple online tutorials.
Ian Lloyd
# February 17, 2010 - 8:15 pm
If I may be so bold as to self-promote …
If you are an *absolute beginner* where code and markup is concerned, my book (see url) would be ideal. No nasty habits that you can pick up from mine (but it’s not going to take you to expert level – see previous commenter for some more advanced books).
Good luck
Craig
# February 18, 2010 - 10:36 am
Make sure you hit the ground running and have a gander at HTML Dog.
http://htmldog.com
Suzanne
# February 18, 2010 - 5:54 pm
accidentally replied to the wrong comment… see above. :)
Oreana
# February 17, 2010 - 4:33 pm
This is something that bugs me because I see lots the popular ‘web designs’ on DeviantArt are nightmares to code and the designer never intends to make them into actual functioning sites.
The way I learned to design websites was by first using HTML, and then adding graphics, until I had such an overview of how they worked together that I could design and code pretty much anything I pictured. Kind of what you’re talking about but the other way around. :)
Olly Killick
# February 17, 2010 - 4:33 pm
Absolutely. If a designer can’t code then they shouldn’t call themselves a web designer. Maybe a ‘designer for the screen’ would be more appropriate. HTML/CSS is just a really simplified version of english that web browsers can understand (except IE #fail).
As for the architect argument (pun intended) most architects I know can do their own virtual 3D models, which is just as technical if not more so that coding a site. As websites are practically virtual entities anyway, I think the web designer/architect analogy is fair but as for building their own designs in the physical world, don’t be silly… Do print designers have to operate their own presses?
Gary Aston
# February 17, 2010 - 4:34 pm
Couldn’t agree more. For those starting out, apps like CSSEdit and Coda can help to bridge the gap between the GUI of things like InDesign/Quark and getting your hands dirty with lines of code.
Also–and REALLY importantly–once you learn how to code, you start looking at the web more and in a different way, and it feeds back more in terms of inspiration/ideas.
Justin
# February 17, 2010 - 4:34 pm
I kinda agree. But with wyswyg editors getting more advanced (creating W3C validated code, CSS, import anything well sort the backend etc) – I think those days are numbered (learning code). Does anyone here remember coding to lasor printers to get them to print? But yes until the wyswyg editors can produce perfect code then its still time to type.
Dave Aldrich
# February 17, 2010 - 4:36 pm
I know enough about HTML to be dangerous it seems. I’ve been a print designer for years but can and have designed simple sites such as my own with the help of the Photoshop “plug-in,” SiteGrinder. It’s great that it creates all the code and files in the background while I can focus on the designing the front end, but it’s a pain to have to make simple revisions.
This is where I knowing understanding the code and being able to work with it would give me much needed control (and peace of mind). However, there’s part of me that freaks when thinking of learning code. Talk about stretching the left side of my brain.
Any recommendations to good (and easy) resources/tutorials for learning code would be appreciated!
Thank for this post and to Brian Hoff for pointing me to it from Twitter.
Sharat
# February 18, 2010 - 4:03 am
Dave
I am currently in the process of teaching myself, and have been for the last two years. For starters, to get you, inspired by the idea of web standards and css’s capabilities, I would recommend Designing for Web Standards by Jeffrey Zeldman, and CSS Zen Garden by Dave Shea and Molly Holzschlag.
Then for serious education, I would pick up Web Standards Solutions: The Markup and Style Guide and Bulletproof Web Design by Dan Cederholm. Handcrafted CSS by Dan Cederholm and Ethan Marcotte is one I want to read, but haven’t. HTML you can pick up from various bits of w3schools.com, just viewing source of some great web designers’ personal blogs. Although i haven’t read it, i’m basing my recommendation of Build Your Own Website the Right Way off of reviews, summaries, and Ian Lloyd’s nice appearance on the SitePoint podcast a few weeks ago.
After having read, and implemented lessons in those books, you’re super well-off, but keep your ear to the ground and constantly search out articles on blogs such as Think Vitamin, Zeldman’s, Andy Clarke’s, and Elliot Jay Stocks’. There are many more, but there’s my humble opinion…
Will
# February 17, 2010 - 4:38 pm
I think as a designer its a must to be able to code your designs in XHTML and CSS. I can’t imagine creating a layout in Photoshop without an idea of how I might put it together.
Also as you said Mike, it will open up some many more opportunities if you can design and do front-end development. I’d certainly think twice about hiring a designer who couldn’t code.
Plus its a nice mix I find. One moment I can be designing away and being creative, and then I find myself tinkering with some code. I like to think its giving both sides of my brain a good workout!
Ian P. Hines
# February 17, 2010 - 4:38 pm
I can hardly imagine not knowing how to at least use rudimentary HTML/CSS. How limiting that would be…
Russell Poulter
# February 17, 2010 - 4:39 pm
Great post! I defiantly agree. Learning to code your own designs improves you as a designer & makes you much more employable! You have to keep pushing yourself & learning new things otherwise you get left behind.
Stephen Fairbanks
# February 17, 2010 - 4:42 pm
I agree that HTML / CSS / jQuery is an extension of your design skills. I’d get very upset if I slaved away long and hard at a design and not be able to give the site the coding / functionality I think it needs.
Also, it’s not always possible to give all the information a ‘coder’ would need in static designs.
In short, Web Designers should really code as much as they can themselves as it will inevitably inform the designer of coding / layout requirements more so than just looking at websites and copying the required elements.
prisca
# February 17, 2010 - 4:43 pm
Mike
great article ~ and I agree… I used to think that I would never manage to learn coding, or even design for the web, for that matter; all seems so technical and complicated ~ seemingly drawing you away from design. Learning coding is a pretty daunting task ~ especially if you’re learning it all yourself. But once you do make the leap – you’ll never look back :)
I agree that it will make you better designer — and you will take inspiration from code aspects and end up creating site you otherwise would not have thought of. So ~ to anyone still considering the jump :) just go for it – you’ll get there and you’ll love it ;)
GavChap
# February 17, 2010 - 4:44 pm
I used to work in an agency with Web Designers who knew nothing about coding, I was the coder. The amount of arguments between us about what would and wouldn’t work was amazing. Almost 50% of my time was spent arguing about what was possible in HTML at the time (this was about 4 years ago).
Personally I end up designing in Photoshop and HTML/CSS at the same time, just building elements of the design in Photoshop, that way you end up with an end product that’s easy to code and looks good.
Dennis
# February 17, 2010 - 4:44 pm
I agree with your points, Mike. It’s also worth noting that for every web designer who can’t code, there is another who can…but who knows less about using color, type and other elements of design. Ultimately it all comes down to knowing how to design with the tools and building blocks of the web. The more you know, the better off you’ll be.
Nikki Jeske
# February 17, 2010 - 4:47 pm
There’s also the added benefit of understanding just how much can go into a really good polished website – there’s the beauty and then there’s the function, and being able to do both and combined them with ease makes you both a good designer and good developer. I think it’s important for designers to be able to code, as well as developers having an understanding of good design. It’s a two way street.
Great article and very good points.
April
# February 17, 2010 - 4:48 pm
I agree completely, and sadly this is too often not the case (in my experience).
So as a project manager, my job too often becomes to bridge that gap (which means that I have to know my way around both design and code and be able to communicate across these two areas to resolve constant conflicts and improve the design to make room for improved functionality via directing design changes).
Maybe I just need to finish the transition and become a full-on web designer since it seems I’m already halfway there anyway :D Taught myself everything I know already, might as well work on refining my skills and make the leap huh?
Great post!
Shanna
# February 17, 2010 - 4:50 pm
Totally agree Mike. I am to the point now where if I am in a rush, and hire someone to do a little coding, I end up going back and fixing/changing a bunch of their code anyways. In the end, I have not really saved any time anyway.
Knowing how to code really helps me when I am creating the design side of things… It makes me think about how to best implement the design.
Tony Mosley
# February 17, 2010 - 4:54 pm
I recall one chap who insisted his sales team knew how to hand code… makes a big difference to how they sell, and value the end product.
Coding your own work means you enter into the arena of wrestling with grids… at what point do you subconsciously design to achieve an easier transition to the web, and does it degrade the visual language of the end product.
I’ll state that any designer should have the ability to code there own pages, preferably by hand (notepad app) as it means you won’t be unemployed in 10 years.
Jason Holland
# February 17, 2010 - 5:04 pm
I agree it’s a great asset to have as a designer, but in reality, a designer (unless freelancing or working for a very small agency) wouldn’t do the coding as they would never get any designing done (and run the risk of being a jack of all trades and master of none).
I can code, but I don’t expect my designers to be like me – that being said, part of the experience here is learning how to design with an intent of how it would be built, and more importantly, how it will behave with things like different amounts of content (so many sites break when you increase the font size – stretch points anyone?). It’s also great that the designer can indicate where ‘live’ text is going to be, rather than filling a page with graphic content for no reason.
An alternative to designers coding, is making sure the ‘creative department’ includes the coders too (like we do here) which means there’s a huge amount of cross-fertilisation and understanding of each other’s methods.
Drew Stauffer
# February 17, 2010 - 5:08 pm
I learned how to write HTML and CSS in school while also learning design principals. Honestly I honed my HTML and CSS skills because the particular developers I was using didn’t pay as much attention to my 1px here and 3px there detail.
I do feel that learning markup has made me a better designer.
Ben Hernandez
# February 17, 2010 - 5:09 pm
Great thoughts here, and great argument for designers learning code, I code my own work outside of my day job, but there I have to work with developers on most things. Which at first involved a ton of back and forth until a site looked something CLOSE to what I designed it to look like.
Then I got smart and started giving direction in terms of css and html to the devs, it sped up the process immensely. Even not doing the mark-up myself it’s been invaluable to be able to speak the same language so to speak as the developer world.
Shane Guymon
# February 17, 2010 - 5:10 pm
I totally agree. The look of a website is only one small part of a website. A photoshop mockup is static, yet a website is interactive and living. Each browser will interpret the code differently.
Just as there is more than one way to “Skin a cat” there is also more than one way to code the same design. So part of web design is finding the best possible solution for that particular design. For instance do you use CSS for the text shadows? Do you use CSS for the rounded corners? And so forth.
There is so much more than aesthetics when it comes to designing a website. Even in architecture the more the architecture knows about actually building a building the better the building will be in my opinion. So the better you understand HTML and CSS the better your websites become.
Beau
# February 17, 2010 - 5:12 pm
I would argue that if you cannot code (HTML/CSS), then you are not really a web designer.
Paddy
# February 18, 2010 - 7:18 am
Agreed. Plus, when did simple display languages, html and css, become “coding”; so you had to “code” your old myspace page? You can’t really say you are designing by making a pretty picture. If you just want to make pretty pictures, stay with print. Or, at least learn to use dreamweaver or some other wysiwyg.
James Stiff
# February 17, 2010 - 5:13 pm
Graduating from a graphic design degree in the mid-late 90s and facing a severe lack of opportunities, I picked up some HTML manuals and started designing and building websites. Finally in 2000, I landed my dream job and became the bridge between an Art Director (with little web experience) and the development team. Unfortunately the company structure and workload made me pretty hands-off when it came to code but I kept up with developments as best I could and had the benefit of a great team of developers. Now that I’m co-director of a small agency, I still have very little time to code. I agree that HTML and CSS knowledge is pretty much mandatory when it comes to designing websites and you can easily spot a site that’s been designed by someone without code awareness, however I often find that I’ll design quite differently if I’m expecting to write the code myself – probably because my skills aren’t as developed as I would like. Knowing that someone better skilled (and much quicker) will be doing the development allows me to focus on the design, safe in the knowledge that the site will get built on time and to budget. Yes, there are compromises – most often a lack of attention to design detail. I must admit that I find myself more and more inclined towards ditching Photoshop in favour of HTML prototypes just to be able to get things pixel perfect.
Simon Meek
# February 19, 2010 - 5:28 pm
I hear that James. While I can do CSS/HTML pretty well, I do find that when I know I’m going to be building the front-end for something I think subconciously I’m making it more simple than it could be. Conversely, when I know someone else is going to do it, who I know to be really good, I’ll allow myself more detail and difficulty in the design.
There’s also a commercial imperative. If I have to do everything, the build had better go pretty smoothly in order to make it all pay for itself, and I can’t do much else in the way of designing until that build is done.
I think the important thing is to be good enough at the HTML/CSS side to know what’s achievable within given timeframes.
Simon
AtiKuSDesign
# February 17, 2010 - 5:14 pm
I couldn’t agree more Mike.
Someone already mentioned that you shouldn’t call yourself a web designer if you can’t build your designs. You are effectively a graphic designer without solid code knowledge.
Being able to build your own designs helps massively on the jobs when time is the issue because knowing in the back of your mind how you are going to build something means you can start thinking about that right away.
I hate being asked to build a designs that have come from someone who doesn’t understand the build because those jobs always take sooooo much longer and they very rarely have much interaction or UX consideration.
legolandbridge
# February 17, 2010 - 5:17 pm
Also,
I find that when I start organizing my HTML markup and javascript functionality, it often helps dictate the layout. Certainly makes things a bit cleaner for me.
Michal Kozak
# February 17, 2010 - 5:20 pm
I can’t understand that there are designer who don’t know even BASIC things about html/css.
It results in designs that are just great visually, but they’re not user-friendly – and hard to code later, most of the time.
Jens Nikolaus
# February 17, 2010 - 5:27 pm
Agreed. Touched on that last week at our user group.
Daniel Howells
# February 17, 2010 - 5:27 pm
Hi Mike,
I agree and disagree. I always encourage the purely print designs that often work with to at least try and have a play with CSS and so on, even if it is in Dreamweaver using tables, but the fact is that so many superb print designers can design for the web and rely on good front-end devs to do the heavy lifting for them. (Which keeps us lot in jobs…!)
The best designer I work with is purely print, but she’s got an incredible sense of what can work on the web. I think it’d be a shame if she lost her enthusiasm for web design by learning to code (since the learning curve is pretty steep and frustrating for non-tech guys), rather than keep churning out awesome designs.
Secondary to this, print designers can often throw some pretty exciting curve-balls. Because they don’t know the limitations of CSS and cross-browser support, they can often really challenge and push good front-end devs to further their game. I know I have learnt a lot recently from some designs that I would never even consider doing myself because on paper they’d be “hard to do”.
Mike Kus
# February 17, 2010 - 9:18 pm
Hi mate :)
I totally understand where you’re coming from. There are so many amazing print designers out there. I just think they could bring so much to the web if they learnt to code. I’d love to see that.
Like I said in my article, I’m a print designer who recently learnt code and I found it so exciting having the power to create the web myself.
On another note… enjoying your site loads as ever. Some great work popping up :)
Robin
# February 18, 2010 - 9:37 am
I agree to that point that it’s helps for a designer to at least know the basics and even that the coders should know some of the basics in design.
“Your designs will be executed in exactly the way you want them too. If you completely split the duties of designing and coding there inevitably comes a point in a project where the coder ends up doing bits of design, at which point the design can start to degrade. This isn’t the fault of the coder; it’s just real life. It’s just not practical to go back to the designer for a Photoshop mock-up every time a new section of the site needs to be designed/added.”
If this happes I guess the project was poorly managed, or the lack of a strong brief.
Actually, I would at least like to throw in a Interaction Designer into the picture ;)
A good website need to function on a various type of web browsers and screen sizes (smartphone’s). That’s why I rather make the communication with a developer perfect ;)
I’m ashamed over that my own css/html knowledge isn’t better than it is. But I would much rather understand the basics in javascript than improving my skills in css/html. That would probably improve my conceptual thinking in the same way as learning the basics in css/html did.
Thanks for an interesting opinion!
John Faulds
# February 18, 2010 - 1:20 am
In my experience most of the purely print designers I’ve worked with always insist on the sort of fixed content area size and pixel perfection that just doesn’t work on the web. You’re probably working with better print designers than I am because I also don’t usually find their designs particularly inspiring or envelope-pushing.
Joe
# February 17, 2010 - 5:29 pm
Does anyone have suggestions on how a designer might best approach learning HTML/CSS?
Mike Kus
# February 17, 2010 - 9:20 pm
Just get a friend who does code to teach you. That’s how I learnt. I paid my mate for 13hours teaching and that was enough to get me going :)
James Stiff
# February 17, 2010 - 10:53 pm
There are plenty of great resources and forums on the web but if you’re just starting out it can be a bit daunting. Nobody I knew was into web design and online tutorials were few and far between (in the late 90s) so I invested in a couple of great beginner books on HTML and JavaScript by Sams Publishing. I found them invaluable and still refer to them over a decade later. Something like this would be a good place to start: http://bit.ly/9utrC9 Good luck!
James Stiff
# February 17, 2010 - 11:37 pm
Also, check out Webmonkey: http://www.webmonkey.com
Andy R
# February 17, 2010 - 5:31 pm
As a designer who codes myself, I would say another huge advantage is what you can bring to the table in client meetings. Being able to field questions on functionality and back it up with know-how is way more impressive than “I’ll have to check with my developer…”.
Eric G
# February 17, 2010 - 5:35 pm
@Atikusdesign, if you were asked to build a design from someone who can build HTML (but won’t), is that OK then? I think the angst is working with people who can’t empathize .
Agree wholeheartedly with @Jason and well, @Tony, even tho our designers can code, they’re not concerned about ‘being out of a job’ because most of the programmers we work with don’t know design (re: @mohammed’s quote about his developers still using tables), or the programmers rather worry about making things work and leave the UI to the designers.
Kris
# February 17, 2010 - 5:38 pm
Devil’s advocate:
A) I work in a huge corporation where there are 25 engineers to every designer. The fact is, our designers simply have too much work on their plates to code at all. So let’s make a distinction between “should code” and “can code.” Context, work load, official divisions of labor, etc., matter.
B) “Your designs will be executed in exactly the way you want them too.” This is true if you have mastered all that is needed to execute the designs. But lets assume for a second that most of us are somewhat deficient in at least one area (for me its scripting). What ends up happening is that we design we can execute rather than what constitutes the best experience. So rather than make that cool AJAXy thing happen without a page refresh, I just put it on a separate page. Rather than validate fields inline, I don’t validate at all. Rather than use semantic, standards-based markup, I lay things out in tables and optimize for IE8 and hope for the best. Those of who can do all that is required equally well are definitely highly employable, but is it realistic?
C) And isn’t this line of thinking a slippery slope? Pretty soon we’ll all be required to write PHP or ASP.NET or Ruby. But what the iPhone? Maybe some Objective C, too. And don’t forget Flash. And Silverlight. And of course, we should all be perfect marketers and copywriters, content strategists, business analysts and SEO experts, business development and product managers, and we should all have the insight to conduct rigorous usability studies, market research, user research, card sorts, create personas, task flows, taxonomies, onotologies, thesauri, and metadata schemas. And we should all know the ins and out of Final Cut and video encoding. Hell, why not Mason while we’re at it?
Hyperbolic, yes. And I agree that everyone working on the web should have a basic fluency in HTML, CSS, Content Management Systems, and even the principles of Information Architecture. But there are reasons why successful agencies and many corporations have divisions of labor that separate design from front end development from back end engineering: a jack of all trades is a master of none.
Amy
# February 17, 2010 - 5:44 pm
While designers coding their designs might be the ideal, the approach doesn’t always work. In my company, designers are so booked that they have to hand off completed mockups to a coder (like me) so they can start a new design project straightaway.
It doesn’t have to be a one-way street, though. Coders can be proactive and ask advice from the designer–I regularly do this because I care about the integrity of the designs I’m coding and a PSD file doesn’t always tell the whole story. I also have designers consulting me to see if something they are designing is feasible.
Would it help if designers knew some HTML & CSS? Sure. I suspect that their designs would be quite different if that was the case. But I’m not holding the choice to specialize in design against them. And I expect that they won’t criticize my choice to focus primarily on front-end coding rather than design.
In the world of Freelancing, I can see a lot more of a reason for a designer to learn code. Why outsource something you are perfectly capable of doing yourself? But not everybody freelances. Not everyone in the web field even WANTS to freelance.
Paulo Canabarro
# February 17, 2010 - 5:44 pm
I totally agree with the subject. I recently started learning about HTML and CSS (that I used to outsource the work) and it opened up my eyes for a whole other world of web designing and it actually earned me a nice job.
I encourage everyone to learn, it’s not that hard. I’ve learned from 0 by reading books and some online resources, and I’m still trying to learn more and more to get the best quality out of my designs.
Mike – would be good if you could share some ways you used to learn, some advices, and how you manage to stay updated on this field.
Thanks,
Matt Kircher
# February 17, 2010 - 5:45 pm
My two (or three) cents:
As both a developer and a designer I’ve learned each side of the craft quite well, and I pride myself on being able to articulate an idea into a comp and then being able to envision the underlying structure. My thoughts on these five point would be this:
- IMHO: Learn Fireworks. It gives designers a sense of what HTML does, what CSS can be applied to, and preserves a more editable/usable file. Use Photoshop for graphic-intensive images, optimize those images in FW.
- Yes, learning semantic HTML and the CSS that lays it out is not excruciatingly hard. It just takes some thought after you learn the syntax. The line that proves a great designer or developer for me is drawn at the degree of how *semantic* the markup is and how well it is crafted. If I receive a sloppy markup file, or a redundant CSS file, I’m going to rewrite it. Learning web design (in particular) is partly recognizing what is the design and what is the content. Learning front-end ‘code’ is about recognizing what goes where and how to create meaning for it.
- Like architects, web designers should be aware of how something can be built. Even if they themselves don’t create the work, an understanding of what’s involved should be acknowledged and appreciated. Future work on the development side should have been carefully thought out by the designer so as to ensure the integrity of a given design. If not, as cited, the developer has to work with what they have and must generate the rest. Frank Gehry isn’t completely oblivious to construction, just more aware of what is possible given the tools others use to create his projects.
Steph
# February 17, 2010 - 5:46 pm
My business is successful mainly because I can do both design and code at the same time – I normally find myself switching back and forth between Photoshop and my text editor while building a site.
Having both skill sets keeps my prices down, gives my customers the one-stop resource they want and guarantees that they’ll get a site that looks good AND works. This seems like a no-brainer to most of us, but I pick up a lot of new customers who have nicely-designed websites that lack the basics – most often meta tags and other obvious and simple things any coder should know about. These customers come to me because the site looks nice but isn’t fulfilling its purpose – to make them money, something a site can’t do unless it contains all the necessary code elements.
I’d argue that some knowledge of online marketing is essential too – not only does the site have to look good and function, but a company venturing out into the online world needs a good launch and ongoing positioning.
Amber Weinberg
# February 17, 2010 - 5:58 pm
I agree – to an extent. I believe designers should understand basic CSS/HTML, otherwise their designs end up being a PIA to code. However I don’t believe designers should have to code – otherwise people like me wouldn’t be in business :)
I started as a coder – then became a design – and am now back into only doing HTML/CSS WordPress, some PHP and jQuery. I would hate it if someone tried to tell me it’s “easy” (if CSS and HTML is “easy” why are there so many bad developers??) and that need to take designing and coding together. No matter how much HTML is a “designer’s tool” it’s still code, and many people simply can’t wrap their heads around a non-visual visual tool.
And like I said before, I’m glad of that because it keeps me doing what I love to do – code.
Amadeus
# February 17, 2010 - 6:11 pm
A couple thoughts from some random guy on the innernets. :)
First off I think the architect argument is very valid and here’s why. A good architect may not know how to physically BUILD the wall, but he will understand how walls are built. He will understand the types of finishes required, and the types of materials used in order to create the mood, feeling, etc required. In fact, I would continue and say the more the architect knows about the materials used, how to exploit their advantages, etc will be a superior architect to someone who doesn’t. Said another way, analogously, a designer who doesn’t understand HTML, CSS AND Javascript (yes, I said Javascript :) ) can’t fully take advantage of the technology. Period.
The analogy of an architect doesn’t know how to build the walls to his house, I would argue is the same as a front end developer not understanding how a browser actually renders the HTML (Physically speaking, drawing, calculating, etc). A front end developer simply understands the tools/materials (code) required to make the browser perform its job.
For the people saying they have never met designers who can’t code; it’s very common in the agency world.
Also, I am noticing a lot of people here in the comments are collapsing ‘can code’ with ‘is coding’. A designer doesn’t have to write all the code, but they should know how to write it. In fact, I encourage all the designers I know who can’t code, to at least learn the basics that can work in a standards compliant browser like Firefox/Safari. They don’t need to muddle themselves with IE and the problems it presents.
Finally, I want to say that I also think there is often a collapse of visual design and interaction design. I would reckon, 99% of the designers who can’t code, also can’t think interactively. They can layout a page beautifully, sure, but they can’t process how to get from A to B. I see this all the time in the agency world, especially in some very large and influential design agencies serving some of the biggest companies in the world.
In the end, the explanation is simple. The more you understand about your subject matter, the more creative you can be.
Robin
# February 18, 2010 - 9:44 am
Word!
If I had red your comment before I started to make my own, I would have saved some time ;)
Gary Stanton
# February 17, 2010 - 6:12 pm
I couldn’t possibly agree more – as I keep telling the lovely guy I outsource my design work to (Yeah, you know who you are… and I know you’re reading this!!!).
Learning to code makes you a better web designer. There are things that can be done with CSS trickery that you simply can’t replicate accurately in photoshop – and without knowledge of CSS you’re limited in what you can imagine/create.
Also, designers who don’t know how to code are more likely to produce designs that are difficult to code elegantly… Just sayin’. ;)
Jasper
# February 17, 2010 - 6:16 pm
I’m always banging on about this. As a backend developer primarily I, more frequently than I care to, occasionally end up rendering the designs of someone who’s clearly never even seen an HTML tag, much less put together a coherent document and it’s hugely frustrating.
Even if you don’t plan to offer it as a service, it’s inexcusable to just not know all about it before you even open photoshop/your browser to design/whatever.
Scott
# February 17, 2010 - 6:19 pm
Whew! I bet you’re gonna catch some shit for this. I was in the exact same boat as you were at about the same time. I couldn’t agree with you more. I don’t understand why a “web” designer wouldn’t want to learn to code for the job opportunities alone.
Great post, Mike. Look forward to the next podcast and many more in the future. Keep up the great work.
Tom Muller
# February 17, 2010 - 6:23 pm
I’ve been designing websites for more than a decade now and all I know is front end HTML and CSS (with a bit of JQuery) and thats as far as my coding knowledge goes. Everything else is handled by developers. I do however understand what PHP etc can do. I think both Mike and Elliot have a very valid point that as a ‘web designer’ you should have some coding skills, but the most important thing is an understanding of whats possible. I have worked a lot with designers who have no HTML knowledge that design websites, but they are aware of what is possible (and we can always tell them whats not).
Its never good to be too much of an all-rounder because otherwise you might end up stretching yourself too thin.
andi sakab
# February 17, 2010 - 6:24 pm
this post make me wakeup and give me spirit. maybe my position already happen to you. :)
Mark Sorsa-Leslie
# February 17, 2010 - 6:31 pm
I think this article raises a really great point. It reminds me of a great paper that Forrester published a couple of years ago on Web2.0 technologies and the changing role of the web designer into the web “devigner” – a hybrid who mixes uses new tools to build great services and apps where the user experience takes the front seat. I guess step one on that path is understanding how to build in HTML/CSS, but to move beyond interface to interaction needs a deeper understanding, or better tools that do some of the heavy lifting.
Carlos
# February 17, 2010 - 6:32 pm
I can see this is an old discussion. I know 37signals guys have say it, and a lot of good designers have say it as well: A good web designer should code. I found a really nice article about how to mock up just in the browser here http://24ways.org/2009/make-your-mockup-in-markup. It’s very inspirational, and it leads you as a web designer to go further and “kill” photoshop to represent something that is going to look different anyway.
I’m a graphic designer, and an illustrator. For me it wasn’t that easy to learn HTML/CSS by my own. But after a few lessons, and a lot practice and even more interest in the code, I managed to become really good at it, and, to be honest, I simply love it. My advice to all designers is: Learn how to code; it will chage your life. Totally agree with everyword written in this article. Good job!
Ahmed Yearwood
# February 17, 2010 - 6:53 pm
Excellent article. In our studio, web designers also code. This is for all the great points mentioned in your blog, but also because most designers who don’t code are unaware of and therefore unsympathetic to any constraints that may arise when converting a PSD file into HTML/CSS. To your point about architects, it’s true that an architect may not actually build their designs BUT they do know if their design is structurally sound (translation: ensuring that the roof is supported enough to prevent it collapsing onto it’s inhabitants!) Designers who code would understand these constraints. Designers who don’t, don’t.
What I frustratingly come across most frequently, which falls into this category, are Flash animators who can only create Flash sites, but cannot create an HTML/CSS site.
Josh Betz
# February 17, 2010 - 7:17 pm
I guess I never thought about a designer who couldn’t code their design. I agree that CSS and HTML are more a designer’s language than a developer’s. I’ve never looked at CSS as a developer’s language. CSS is all about the design. Developer’s languages are PHP or Ruby or Perl, not HTML or CSS. As a web designer, you should at least be able to get a design into the HTML and CSS and if you have to hand it off to a developer after that to do the real magic I guess that’s fine, but even PHP is becoming more of a designer’s tool with CMS’s like WordPress.
Also, I think jQuery can be used on both sides. There are definitely some pure design things that come out of jQuery, but there can be some cool functionality too.
All in all, if you’re a freelancer you pretty much have to be able to do both — at least the basics.
Rob
# February 17, 2010 - 7:32 pm
I’m in this prediciment at the moment myself, I’ve been designing and writing HTML/CSS for about 4 years now and I’m slowly finding myself focusing too
much on the development side ( as per the agencies needs )
– I’m digging into JavaScript and Jquery and .Net and when I finally get a moment for myself to get to designing I draw a blank because of the amount of technical mumbo jumbo I’ve filled my head with! It all depends where you are and wether your skills are needed, I want to do more design to keep up my own skills and I’m fearing that I’m going to have to pitch myself as a developer soon as that’s what I’ll be experienced in and that’s what the jobs out there look for – like others have said, jack of all trades, master of none!
Tim McElwee
# February 17, 2010 - 8:02 pm
Well said. I think there should be a 6th point on your list. Learning to code your own designs in HTML & CSS will give you a better of what’s problematic and which battles to choose. This goes for both self-produced code and for code produced by others from your designs.
Ian Lloyd
# February 17, 2010 - 8:16 pm
As far as I’m concerned, a ‘web designer’ who isn’t able to code (to some degree or another) his/her own designs?
I just call that person ‘a designer’.
Phil Sherry
# February 18, 2010 - 12:11 am
Exactly: they’re a designer; they draw pictures of web sites. Someone who designs web pages and is then interested enough in the “wiring under the board” to take the time to learn some basic HTML and CSS and start building them: they’re a web designer.
Chrissie Brodigan
# February 17, 2010 - 8:32 pm
Gosh Mike, as much as I agree, I also find myself balking a bit, because it’s a slippery slope. I work with some fabulous frontend coders, who couldn’t design to save their lives, but who rock markup harder than Gaga rocks fishnet and feathers.
I believe that interaction designers must implicitly understand the possibilities of what code can create – to take their designs further, but also not create a mess where they dream too big and where stakeholders don’t understand why their interfaces aren’t producing live unicorns.
That said, best designers I’ve worked with understood and worked in both worlds when time permits. It would be remiss to not say though that some of the best coders out there are more skilled at coding and innovating when they have a kickass designer who gets it just enough, but leaves them room to leverage their own creativity in the markup.
Awesome post today!
bottleHeD
# February 17, 2010 - 8:35 pm
When I started out, I used to code my own web designs. But as I expanded into flash, print, and logo+identity, it became way too time consuming to code a complete site, and furthermore, check it against every browser for compatibility issues.
So nowadays, I hand off all my mock-ups to my friend, who’s a whiz at coding, and does it in half the time I would take. And since I know and understand how html, css, and basic javascripts work, I’ve never had an issue with him sending back a design saying it can’t be done.
Works out best for everyone involved.
Alex
# February 17, 2010 - 8:35 pm
I agree with the all encompassing argument of designers should learn how to code. Specifically front end development, such as HTML and CSS, and maybe even getting acquainted with something like JQuery. Asides from that, anything more evolved is way out of scope of what they should be dealing with. As for the in code designing, i totally disagree with that. Design, if possible should happen on paper or at the very least photoshop before you start adding a stitch of code. Coding and designing at the same time could actually add much more time to your over all project, that is why using something like an ADDIE work flow process is very helpful. Additionally, creating quick iterations of design are much quicker and more effective outside of code. For example moving a block from the right to the left is much more difficult then just dragging it over in photoshop. Once the UX and aesthetic design is complete, moving onto coding it yourself is an added bonus. Lastly, in respect with workflow, you shouldn’t even start designing till the Information Architecture is planned out via wire framing. If a someone could do all that, then more power to them, if not then there are bound to stumble along the way.
Timothy
# February 17, 2010 - 8:41 pm
I design and develop. One problem. We must make a defining label for such people.
Deseloper?
Devigner?
Hmm…
Dani McDaniel
# February 17, 2010 - 8:43 pm
Couldn’t agree more… when I first started communicating with the tons of designers on twitter it was very disheartening to me to learn that so many of them had no clue how to code… i just assumed that everyone who called themselves a web designer knew how to code… because if all u can do is design then really aren’t u just a “designer”? Excellent article, thank you!! :D
Erik Ford
# February 17, 2010 - 9:06 pm
I am glad someone has stepped out and written a concise bullet point explanation as to why this is so important. When I was still a freelancer, I did some work for a web design agency that actually separated the designers from the front end coders, which I found to be counter productive. As a designer, I am not certain why you want to relinquish control over the presentation of your work to another party who would have to interpret your thought process.
For me, being both a designer and a front end coder gives me a better understanding of the process and has helped me grow in both directions. As our little agency continues to grow, we are going to want to bring on more talented designers to help round out our vision. But, those designers will also have to know how to code up the HTML and CSS of their work.
Jeremy Mandle
# February 17, 2010 - 9:08 pm
Meagan Fisher quotes Andy Clarke in her excellent 24ways article => http://mandl.in/s/r
“We aren’t designing copies of web pages, we’re designing web pages.”
-Andy Clarke, via http://quotesondesign.com/andy-clarke/
Without the understanding, knowledge, & ability to put together a working product (website) how can a web designer truly be effective.
In that statement I’m placing emphasis on understanding & knowledge of HTML & CSS, with a serious hat tip to ability and real experience using the structural builing blocks of of a website.
A sculptor that does not understand the structural building blocks and intrinsic characteristics of the materials they use to create their art is at a sad disadvantage. It would be like knowing how to fly a plane without understanding the basic principles of gravity and being able to demonstrate them simply.
Matt Evans
# February 17, 2010 - 9:53 pm
Superb Article.
Thanks.
simon r jones
# February 17, 2010 - 10:13 pm
I think the single biggest reason to learn HTML/CSS as a designer is that by doing so you gain an essential understanding of the medium. I don’t think it’s strictly necessary to build all pages you design, as Mark says that depends on the situation, but without a good working knowledge of the code behind web pages I think designers miss the point and can’t create effective designs.
Dan
# February 17, 2010 - 10:27 pm
Designing for the web without understanding code (HTML/CSS/JS) is like designing for print without understanding how your work is going to be translated into a printed piece. You can probably get by but you’re not going to produce outstanding work without understanding the entire process.
Conrad Muan
# February 17, 2010 - 10:35 pm
I’ve had this argument plenty of times with developers, especially when it comes to complex web applications.
A dev’s argument as to why a designer _shouldn’t_ code is that a designer normally wouldn’t have knowledge or training on good coding practices and data architecture. Ie: separating content from function from visual presentation.
I usually like to point out that if a developer knew how to design and if a designer knew how to code, then hours upon hours of conflict between the UX team and the Dev team could be saved.
Imagine how easy it would be for a designer to explain to their developer why some design elements are so important to a website if the developer knew, say, basic type theory. Imagine how much easier it would be if the designer took into consideration how the same design element would be coded. It would be pure bliss!
Unfortunately, it’s hard to find design + developer combos
Blain Smith
# February 17, 2010 - 10:38 pm
I definitely agree with this.
I also read another article that it helps to code while you design so that your clients have something to click and interact with instead of just a image. Also, once you have the final sign off on the design you are part of the way to the finish product since the basic skeleton and CSS are already completed.
Leonard - AtomWorks
# February 17, 2010 - 10:42 pm
As a (albeit a bit green still) freelance web designer I learnt how to code long before I could design and I’m glad I did. It frustrates me to see a designer who can’t code because you miss out on so much and so man ideas. I find a lot of stylish and usable ideas come from having a bit of development skill.
My feelings on the matter are that you do not need to know how to code an entire site (although I would encourage it) but you should know enough html/css and jQuery so you can at least create a mock-up with all the most important non static design features functional. That way you can present the designs to clients in a far more in depth way rather then making them use their imagination!
Andre
# February 17, 2010 - 10:55 pm
What do you call someone that can design, markup, style, script and develop?
Iain Broome
# February 17, 2010 - 11:06 pm
I’m a content manager for a design agency, which includes copywriting, usability and IA work. I’m no developer and I’m certainly no designer, but I’ve made a point of learning enough about both to be able to understand their possibilities and limitations. Because it affects what I can do too, of course.
I’m forever amazed at the number of people in our industry who work quite separately from each other, despite how intertwined their disciplines are.
Smashing post, by the way. As in British for lovely stuff.
Colleen
# February 17, 2010 - 11:29 pm
You are talking CSS HTML code. I agree that designers should understand how their designs get rendered. There are so many tools to generate CSS/HTML from PSD’s it shouldn’t be so hard to make the transition. What is hard for people with design backgrounds is to transition from the print idea of a passive picture to something that interacts with the user and has a persistent data store. I.E. from being to DOING.
This is the fundamental error in the way websites are still built today. The DOING should come first. It should not be the designer hands off the mocks to the developer. It should be the developer develops a bunch of innards and hands off bare bones functional layouts to the designer. Then the designer can superimpose CSS and whatever polish he/she wants. This is how houses are built. You don’t start with the curtains and then work the plumbing in after the curtains and paint are already done.
I think the problem historically is that most people tend to communicate better visually, dev’s tend to be poor communicators that nobody lets near actual clients, and also the system of the prettiest looking bid usually wins and nobody even thinks about the behind the scenes stuff that can make or break a company’s online biz.
Adrian (Zeberdee)
# February 18, 2010 - 2:23 am
This is actually quite similar to what was being discussed (there was SOME good conversation) during Boag World’s 200th show. I was arguing that a computer science degree is useful for anyone in IT (design included) as it gives a better comprehension of what is possible. Another example is me in my role as a graduate Business Analyst. My degree was in Software Engineering, and although I’m not directly using the techniques taught in my degree, it has given me an appreciation of the foundation necessary for any IT project.
I think that designers need to know how computers/code works in order to have a holistic view of the product they’re delivering.
Michael Locke
# February 18, 2010 - 2:26 am
“Your designs will be executed in exactly the way you want them too.”
Preach!
Chris Olbekson
# February 18, 2010 - 3:14 am
I happened to be around this morning when Elliot spoke about it and I agreed with his take that web designers need to know how to code. I was also surprised by the fact that he outsources a lot of his coding, but it makes sense when working on large projects. The important thing is that you know and understand it.
In order to effectively design for the web you have to understand how the interface works and understand the medium. HTML and CSS is an integral part of that medium.
I was also very surprised at the comments @rachelandrew and @drewm made about often they work with designers that have no idea how the code and web interface works and can understand the frustrations they face when doing so.
I am not an expert like these guys but I try and learn from them and know how important it is to be a good coder before you can be a good designer.
Danielle Kellogg
# February 18, 2010 - 4:05 am
I agree that web designers should code. Design has no limit anymore. To stay in the 2 dimensional of visual only makes no sense to me. I started as a designer. Learning to code HTML/CSS/JS and intimately understand the experience of using the designs, helped me to move from 2 dimensional design into other elements like time and space, which also should be considered by the designer. The web is much more like the building an architect designs than a painting, and they DO prototype their designs.
Data
# February 18, 2010 - 4:38 am
My two cents.
Front End Developers should…
1) Cut PSD’s into functional front end web apps.
2) Make minor design edits to design comps when needed
3) Should not change how it functions unless they have been part of the UX exercise and have gained team approval.
Designers should…
1) Push design and coding of that design to it’s limit.
2) Should have a basic understanding of how XHTML / CSS work.
3) Should always have check points throughout the design to see what is possible between the two.
In my 10 years of consulting and working with great talent I rarely see an award winning designer code their own work. I didn’t say never it’s just rare given the hyper specific interests between a true designer and true front end guru.
For me I would never expect a heart surgeon and a brain surgeon to be used interchangably even though both share a great knowledge of the human body.
So good post but I’m not sure it works for top tier angency work.
Again my two cents.
Michael Slater
# February 18, 2010 - 5:05 am
We work with a lot of designers across the entire spectrum, and I think it is safe to say that the best sites are designed by designers who can deal with the code at least at some level. I think the strongest reason for this is that it is the only way to be able to iterate quickly.
When designing in Photoshop, you are typically using only a tiny fraction of the site’s content, if you are using real content at all, and often looking at only some of the page variations. Once the site is populated with real content, things are different, and iteration is important.
Then there is the critical nature of interaction design, which really depends on JavaScript. A designer who works only in Photoshop generally misses many of the opportunities to improve the user experience through interactive behaviors.
That said, information architecture, interaction design, visual design, html/css coding, and javascript coding are all distinct skills. Becoming excellent at all of them, while ideal, is hard, and it is not the only viable path to a great web site.
Especially when starting to make the transition to the web, coding an entire site from scratch can be a big hurdle. It is a perfectly reasonable approach to have a partner or contractor who does the initial coding. But the designer should be able to understand and modify the design, and should be working toward being able to create new sites independently (perhaps by drawing on previous designs that someone else coded).
One exception to this is in a large agency doing a $100K+ web site project, in which case it is possible to do a great site with a different person in each of the roles listed above. It is far from the most efficient way to build sites, however.
Back-end coding is an entirely different story. For most front-end designers, getting involved with back-end code is painful, and it is hard to learn to do it well. It is a radically different skill set than front-end coding, especially if done to professional standards. This is where content management systems, especially those that are hosted (SaaS), can be a big help.
Mosses Akizian (@monocat)
# February 18, 2010 - 5:15 am
I’m a graphic designer by trade, but found coding to have it’s own form of art. Matt Mullenweg of Wordpress says it best; code is poetry.
Due to lack of resources (money), the ecommerce site that I launched recently (a week ago) was all designed and coded by me. If you’re not a programmer- I don’t consider myself as one- then the task ahead will be difficult, but hopefully the rewards will outweigh them.
There’s few good software out there that can help you in the process. I personally use Coda and CSSEdit. They work wonders for me.
THEPURPLEKNIGHT
# February 18, 2010 - 6:09 am
I wouldn’t really even respect an architect who couldn’t build a house they designed. That’s what you do before you’re allowed to _design_ a house.
You, designing without knowing really even what you’re designing, are soccer mom watching HGTV to an architect.
Martin Tajur
# February 18, 2010 - 7:22 am
As for those people who ask me: “As a designer, which comes first for you – form or function?” – I always say design IS function. The same goes for web design. For me, a mockup in Photoshop isn’t web design — it’s just a nice picture. It will become web design when it actually becomes working HTML, CSS, Javascript (or the model, view and controller of the web front-end as we know it today). It will be web design when it looks, reacts, talks… well, works. So ‘web designers’ who can’t code their own web design are simply good at drawing stuff.
Maverick
# February 18, 2010 - 7:54 am
wow, this is a really good post and highlights some really interesting points.
Ray M
# February 18, 2010 - 8:43 am
I quite strongly disagree it even matters, and this comes from the point of view that I was a print designer who moved into web an taught myself code to put my designs out there. Now having those skills helped me in some design situations but I have also learnt to know that you have to sit back and take each role from an objective viewpoint.
As a designer you have to pushthe coder in you to deliver maybe something that is technically challenging to gain the results you want as a designer. There are many instances where I see coders be lazy about wanting easy solutions to build and they forget to push themselves or their creative. I now purely code within the agency environment and I do believe my design background is an asset when doing this but as for either being an essential I am not sure, splitting your focus means without ten years behind you then you won’t achieve cutting edge levels in your work rather just regurgitate that which we see a lot done by everyone else. When people know limits f technoften they forget to push back so rather than a prerequisite I think actually it’s adangerous thing unless that person can be objective enough to question what they are doing and nit put up roadblocks for example getting scared something might be harder to code up and instead falling back to a halfway house.
Saying that the essential ingredient I believe is a knowledge of interaction design itself, whether you know code or not it’s far more important for me that designers and front end devs understand interface ideas and people and how they can best use systems. There is a need for understanding products and howthey interact with people and questioning throughout the design phase whether you can cut down the complexity of the interaction and make it more ubiqutious. Visual asthetics are an essential ingredient to this and I think knowing interaction and people is far more valuble than being able to use css.
matt
# February 18, 2010 - 9:29 am
I have a designer friend who insists on calling html and css “mark-up”, with anything beyond that falling into the realm of coding. In other words anything with logic at it’s core is code, anything else is mearly mark-up.
That being the case I reckon mark-up skills are a pretty basic requirement for a someone who wants to call themselves a web designer. At the very least it shows a basic understanding of the best way to get things done, after all an architect may not build the house he designs, but he understands exactly how each bit of it will be built, otherwise he’s just drawing houses (and my three year old nephew can do that).
So I guess my point is do you to be a web designer, or someone who draws websites (and my three old nephew can do that too)?
Tony Crockford
# February 18, 2010 - 9:30 am
HTML & CSS are markup languages, not code. Design isn’t just creating a visual. It takes more than markup to build a website.
“designers” that learn to code (including a server side language and Javascript) will be in much demand, but I think it makes much more sense to be expert in one field than spread yourself too thinly across several.
Ryan Carson
# February 18, 2010 - 9:44 am
Thanks for all the amazing thoughts and comments guys :)
Kari Pätilä
# February 18, 2010 - 10:04 am
Way too many programmers have trouble with JavaScript as it is. The web doesn’t really need any more copy/paste programmers. Understanding the limitations of HTML, CSS and JavaScript is, in my opinion, far more useful than being able to code your own design.
irf
# February 18, 2010 - 10:12 am
I also feel ‘coders’ should grasp solid design principles. By following certain principles and with a little practice those pesky back-end coders can come up with something great. If a designer can ‘learn’ HTML/CSS then a coder can grasp some principles and brush up on photoshop/illustrator. Too many people have excuses for themselves. “No my brain works this way…” At the end of the day if you believe in yourself and apply then you shall overcome.
Matt Berridge
# February 18, 2010 - 10:38 am
Stick to what you’re best at and if you think more skills will make you better, learn them.
Andreagam
# February 18, 2010 - 10:53 am
I completely agree with Mike since I started as a graphic designer and ended up as a developer too.
Instead of the architect metaphore, I would rather use the painter metaphore, when he prepares his canvas and deals with wood and burlap and gesso to make a perfect surface for him to paint on…
Nazim Jamil
# February 18, 2010 - 11:00 am
Too fudgin’ right Mike!
Stephen Reeves
# February 18, 2010 - 11:02 am
I’ve not read everyones comments and if I’ve mirrored what anyone has said, apologies in advance.
Firstly I agree with the fact that designers should understand html and css as it allows them to design better.
However, I feel this not needed if your a businessman/woman first and foremost. If I went back to coding my sites that would reduce my time I could spend on generating more business or working on more business. With outsourcing coding I can now closed 5 projects a week as I am totally focussed on scoping, designing,etc.
Guess it all depends if your working for yourself or someone else or where you want to focus your skills on.
Cheers
sr
matt
# February 18, 2010 - 11:33 am
If you’re happy to extend your skills beyond the markup stage with a bit of javascript, why not go a little further?
Too many designers are scared by server side languages, despite being perfectly happy with knocking out a bit of jquery and the likes. It is not a dark art, it is not difficult, it does not require a complete lack of social skills, and it can be fun and challenging.
There’s a bit too much of a gap between designers and techies (as I am frequently referred to in my place of work) and everyone should take the time to learn a bit about all aspects of the process. All you need is a willingness to break something, and there’s not a lot you can break that can’t be fixed, despite what your “you-wouldn’t-understand-if-i-told-you” systems guy/gal might say to the contrary.
You don’t have to be a jack of all trades (master of none), but you can be fully rounded web-person with a speciality. And the strongest quality you can have a designer/developer is the willingness to give something a try and learn something new, things change too fast not too.
Mike Bailey
# February 18, 2010 - 11:59 am
Sorry if its been mentioned above but I also think its important that anyone designing a website should also be aware of accessibility issues and standards.
Just because you can design a pretty webpage does not make you a web designer – there are countless issues you need to take into account, from varying browser/platforms to end-user capabilities and restrictions.
Being able to use XHML, CSS etc is important but its equally important to know *why* you’re using them – what the end-user gains from you using HTML over graphics in certain places – and if you’re using graphics *why* you’ve used them – what purpose do they serve? – are they simply to enhance a page or is important information contained within the graphic that cannot be accessed when the graphics are turned off in the browser.
Knowing *how* to use the correct tools is one thing, but knowing *why* you’re using them is equally important.
matt
# February 18, 2010 - 12:05 pm
Oh, and I reckon your best of starting in html, and designing iteratively in the browser (because that’s where it will finally live). But that’s just my opinion. Too much time is wasted (both in building and in browsing) making a flat psd work because that’s what’s been sold to the client.
Psd’s are good for selling a concept and for fufilling requirements that begin with “it needs to look really cool”, but they are often counter-productive to the process if you need to go a little deeper than that. If there’s a real business need that needs addressing first, then address that need first, not “how cool it looks”. For that you need to know a bit more than photoshop.
Eric Marden
# February 18, 2010 - 12:20 pm
100% Agree. I started in this industry 12 years ago with a basic understanding of HTML and eye for design. Eventually, I was seduced by the code and like a werewolf with a constant full moon above I slowly turned into a full out multi-language programmer (php, python, ruby, et al) with a fierce Sys Admin streak. As I was going through the early stages of this transformation, I realized pretty quickly that I was not going to master Photoshop anytime soon and gave into the creative writing exercise we call code. I was one of the first in my company to adopt CSS and DHTML (what you kids lump in with Asynchronous Server Requests and call AJAX ;) and still kept a foot in the gutter (get it?) of the humble *.psd.
I eventually switched out Photoshop for Fireworks (v2), and what I quickly learned was that it was much more productive to start in the graphics app and to quickly export elements out and start to position them in the real medium that they were intended to live — the browser. Slicing became a thing of the past and the mock-ups my clients saw were delivered with HTTP. However, if you’re going to call yourself a web designer but can’t bake fresh internets in the editor of your choice, then you are a graphic designer with a narrowing choice of gigs and a decaying skillset.
Currently, we’ll bring on graphic designers and illustrators for a project because we’re seeking a specific style, but my Creative Director, a fierce front-end coder and designer in his own right, always has to adjust their designs to meet the reality of clean CSS code and the platform/framework the site is being built with (which won’t compromise your design vision, I promise!)
If you haven’t seen the 24ways article by Meagan Fisher about “Making Mockups in Markup”, its a must read and ties in with Mike’s Reason #4 above. You can find that here: http://j.mp/cGlgP1
Craig Reville
# February 18, 2010 - 1:15 pm
I like wire framing first, then coding the basic template before using photoshop, this way i know how the basic layout is going to look i a browser and then i can adjust the graphics more easily in photoshop.
Each to their own but I feel its the standard these days to be able to code your own designs.
There is a lot of older design business’s around my area and they use the old habits of designing everything in photoshop, then using php, html and flash to carry out the design, no separate css in sight, instead css in the html and lots of php to load 1 image which means it doesn’t validate.
As of late they have been asking me to code their psd files, meaning they are unable to code their own designs, so its not unheard of but certainly unusual.
Regards
Craig Reville
Roshan
# February 18, 2010 - 1:41 pm
makes sense but not necessary. being a good graphic designer/illustrator is something different than a web designer. but who says you shouldn’t learn. go learn programming and SEO as well if you want to.
Noel Wiggins
# February 18, 2010 - 1:52 pm
I agree that being able to put that mock up online is a tremendous asset and can’t really understand the resistance by any designer to learn it. I would venture out to say learn some php and back end programming as well, the more you know the connecting parts the better your designs/process will be.
I love your idea of moving into the html/css directly after the home page.
I have previously mocked up the all the pages for the website design in illustrator (not photoshop) then cut it up and coded it after the client signed off of the design.
But I am beginning to realize there is a bit of double work with that process, and I think if I jump into html/css sooner I will be more efficient.
I think that is the process I will try with my current project…
–
Thanks and Regards
Noel for Nopun.com
professional graphics design
Zel
# February 18, 2010 - 4:02 pm
I do agree on the point that a web designer should know how to translate their designs to HTML/ CSS. It makes your life easier because you know and understand how your design will expand according to your client’s demands. Because at the end of the day, HTML and css dictates how will your website will look like. It’s just like learning InDesign after you mock up your page in Photoshop. However, I find it really really frustrating when I see employers asking for a 1 one man band.
I always see job postings here in my country asking for a web designer who is also proficient in JavaScript, php, jsp, as3, asp, and the list goes on. I just think that this stretches the line too much. As a designer, I find it hard to wrap my head around programming languages.
Mike Kus
# February 18, 2010 - 8:08 pm
Thanks for all the great responses everyone. It’s been great fun reading lots of very interesting opinions :)
Allan
# February 18, 2010 - 9:16 pm
I couldn’t agree more. I was trained in design and jumped on the internet bandwagon back in 1997. I’ve never had to worry about being employed and I’ve recently started my own company offering design for any type of media including high-level Flash programming. Just haven’t had much time to do my own website yet, which is likely good :)
Eric Peacock
# February 18, 2010 - 9:25 pm
I totally agree that you cannot design a good site unless you know how it works under-the-hood or better yet, can build it yourself.
To touch on the architecture analogy in a different way: a good architect knows certain rules about how people interact with their environments, otherwise their output isn’t going to make sense, be up to building codes, etc. That knowledge is critical, but as far as being an “architect” it stops at construction and building skills and that’s OK. That is no different than web design where you don’t need to be a PHP, .NET, JSP, etc. guy to be a web designer. If you can build a clean semantic template a database developer can turn it into a nice CMS.
It’s also OK if you’re transitioning from print to web design and don’t know how to code yet, just be aware that projects take much longer when design isn’t well tailored for the medium and your peers are going to be frustrated when trying to implement your work. Make the effort to learn the medium and yes, it will take years to master just like everything else you do.
Print designers have done interactive design already; A print brochure is physically interactive, but not as complex as a web site and the rules are less strict. I’ve seen a graphic designer with no production experience design a brochure that couldn’t be made to work well. So again, know how to build what you design if you want to create good work.
And in all professional mediums I really do think that one should know the rules before they choose to break them.
Craig S. Cottingham
# February 18, 2010 - 11:14 pm
“It’s at this point where designing and building almost become one and the same. This is something quite unique to Web and Graphic Design. It just can’t happen when your designing products, cars or buildings.”
It’s not unique to Web and graphic design. Woodworkers who specialize in custom furniture and cabinetry, like the recently-passed Sam Maloof, tend to be both designer and manufacturer.
Addy Osmani
# February 19, 2010 - 12:36 am
I think that this article is bang on. Coding genuinely doesn’t take *that* much effort to learn the basics of and I don’t think a traditional graphics or web designer would find it that difficult making the shift to at the very least being able to convert their PSD’s into functional HTML/CSS templates (if not fully interactive demos with JavaScript and the works – but that may be going off on a tangent).
Over the past few years I’ve found myself actually going in the reverse direction – I’ve always been a Web Developer, but in recent years I’ve found clients increasingly frustrated of “web designers” who don’t know how to elegantly implement their concepts or visions. What leaves is a gaping hole of work that needs to be tidied up by a regular coder, so instead, I made the decision to learn all I could about graphics design and media production. Today, on top of being a really competent web-dev, I’m also good at designing graphics and user interfaces, but more importantly, being able to put them all together.
Good article, Carson.
Adrian V
# February 19, 2010 - 6:05 am
I really enjoyed reading your post and I whole-heartedly agree with all of your reasons. I myself am a Computer Science student and I make a living building web applications for the university and can honestly say that I enjoy working with the designers at my lab who understand the underlying markup of the web. Recently one of them made the big leap and joined the Flash dev team and gained a new appreciation for the challenges that developers face implementing the designers vision.
I would also like to add that in addition to understanding the markup, a designer should also keep accessibility in mind. The developer sometimes has to compromise feature set, functionality, and the bells and whistles for the higher goal of accessibility and if the original design didn’t allow for easy access from the keyboard or the colors don’t offer enough contrast etc. then the finished work may not reflect what the designer envisioned.
Jenna
# February 19, 2010 - 10:26 am
Nooooooooooo! That’s one of the things that’s helped me stand out from the crowd when I’ve gone for interviews in the past… if you’re all doing it then I won’t be as special *tear* haha.
Just joshing with ya ;) I couldn’t agree more, especially with Reason 2!
Another thing to add… Sometimes I’ll tone down a design feature if I feel the way it was would create too big an impact on performance or would mean adding heaps of unnecessary markup to create the effect, so understanding the code really helps there.
Sascha
# February 19, 2010 - 12:00 pm
+1, even if we could argue about calling XHTML & CSS code ;)
Actually, it’s stating the obvious when you ask professionals to take a look around them and adopt surrounding skills. I don’t think its neccessary for a designer to be a XHTML/CSS guru — however a web designer should be the definition of such a guru!
On the other hand, programmers or more technical people should also take a look around to understand how and why for instance designers work the way they do. And it can only help if them if they pick up a bit Photoshop along the way.
stella
# February 19, 2010 - 12:13 pm
well I’m a designer who finds it’s much slower to mock things up in a graphics program and finds it disturbing that anyone who can’t do html and css calls themselves a web designer. The only reason people will think these are ‘different types of people’ and that designers won’t have an aptitude for markup is that sooooo many of you are so young you don’t remember a world where desktop graphics applications didn’t exist. Windows didn’t even exist when I was at school! Even if I had a graphic design degree, there would have been no computer element to it at the time.
I’m just relieved to hear it’s not actually obligatory to mockup in photoshop, seriously! But the article highlights many reasons I’m nervous about turning psd into websites, as there is so much potential for a mess – with the original designer nowhere in sight to take the blame (when separately contracted).
therod
# February 19, 2010 - 2:17 pm
People, writing HTML/CSS is not coding. Claiming you’re a “coder” solely because you stack together some markup and CSS is balls. Writing markup isn’t programming!
Jenna
# February 20, 2010 - 12:32 am
Thanks for your pedanticism but everyone knows what we mean, including you ;)
vladfr
# February 19, 2010 - 4:00 pm
@Jenna I think we can still stand out a bit. I’ve been using this html/css thing over and over, it’s a strong selling point for a lot of crowds (even more so for techies).
I’d even go further, and say that a good designer needs to know how to write basic php as well (i’d suggest smarty or a similar template engine, but I hate those).
It helps when editing a template that’s been already coded.
@therod – yes, html is not code. It’s markup. Everyone should learn this distinction.
robomalo
# February 19, 2010 - 4:27 pm
I have been making this argument for SO long. It falls on deaf ears and drives me crazy.
Chris Designer
# February 20, 2010 - 5:15 pm
I don’t think there is any clear answer to this debate. I think a bit of knowledge goes a long way.
Long Nguyen
# February 20, 2010 - 6:27 pm
Wow! So many comments to go through. Maybe there’s someone else like me out there. Someone who doesn’t start with Photoshop at all and designs through code.
I might sketch on paper with lines all over the place, but after that, I’m pretty much writing code. I find it’s easier and less time-consuming to make changes. It also combines looks and functionality so that clients have a better sense of how their website will work rather than have static images.
So a web designer who can’t code isn’t really a designer to me.
seutje
# February 21, 2010 - 2:13 am
Thanks, now I can just link here instead of repeat myself once again