There has been a lot of debate recently in the web design social networks about whether a web designer should be able to code. I didn’t contribute much to the question because the answer is obviously yes, but I did think long and hard about my own practices.
Today Smashing Magazine published a great article by Thomas Giannattasio, “In Defense of Photoshop“. He raises the point that:
Photoshop can be used to create impeccable designs, but after hours of hard work, you end up with a static mock-up that is incapable of emulating the experience one gets when the design is converted to mark-up and viewed in the browser.
And this would be my main point if I were to articulate an argument on why web designers should be able to code. Simply put, if you can’t code and don’t understand HTML and CSS - you are not designing a website.
In the article linked above Giannattasio makes an excellent feature suggestion for Photoshop allowing users to ‘shop semantically closer to the DOM and CSS properties available. I don’t know why Adobe haven’t been innovating features like this for years. It would definitely aid those ‘web designers’ who can’t code. It would simplfy things for pros too but in truth a professional web designer should be able to:
- Keep a running mental visualisation of the DOM as the design evolves.
- Understand the limitations of HTML/CSS and browser quirks.
- Know exactly what mark-up and styling will be needed to create each element.
- Know exactly how raster images will be implemented.
- Know exactly how the page is going to flow and transform at different resolutions.
If you can’t do these things you are not designing a website. Don’t blame the tools. While the CSS idea in Photoshop could be helpful it isn’t necessary (or relevant to the software). You should already know what techniques to use to mimic CSS (hint: blending options, not filters).
There are many comments on Giannattasio’s article suggesting that ‘design’ should be an entirely different step to ‘development’. From the clients point of view this is true but from a production point of view it doesn’t really matter. If you know how to build a website you can design one freely in whatever software suits you.
Understand development and you can realise greater potential with design.
9 Comments
Laura Kalbag
I couldn’t agree with you more!
If you have the HTML and CSS in mind when designing in Photoshop, you’re doing the right thing. If a designer can’t do this they’re not designing a website, they’re designing a *picture* of a website.
It’d be great if Photoshop could add some kind of simple support for multiple states (active, hover etc.) I know this is easy to emulate using layers, but a way of building it in would give us further ways to add some idea of interactivity. It’s the static nature of Photoshop that’s the issue.
Also, making the text look half way like it does in a browser! That Type tool kills me, it’s so awful.
David Bushell
Hi Laura, thanks for the comment and sorry about losing your paragraphs :) The problem is there’s no specific piece of software for website design. Adobe should branch off Photoshop and add features like you suggested. I would kill for easy state-management, and don’t get me started on text rendering!
Kris Noble
Great post, particularly the final wrap-up. The debate over whether designers should learn to code will likely rage on for some time but a designer with no understanding of the web and how it works will find that their designs don’t meet their full potential when put into practise.
As a “full-stack” designer/developer, I do everything from the initial design sketches to the fiddly backend code. As far as the design stage goes, I have on occasion caught myself “self-limiting” a design because I’m not sure how I would implement it in production. It’s quite hard to push yourself past that, but I haven’t yet come up with a design that I couldn’t realise in HTML/CSS. It’s actually quite fun to come up with a “challenging” design and then see how many cups of tea it takes to work out how to represent it faithfully on the page.
Jimmy Tidey
I really notice pages that load quickly; it”s a massive improvement in user experience. One of the benefits of designing a page which can easily be implemented with straight-forward CSS is that they are likely to be much lighter weight.
Although your rounded corners and custom borders only add a few kBs all those extra calls to the server do slow things down – especially before caching has kicked in. Not to mention that massive background image which doesn’t tile in any direction…
Laura
Great article. I wish more people understood this. Designers send me mock-ups all the time where they haven’t thought about what happens outside on the 1024×768 pixels they are designing for (not to mention that within the 1024×768 you have to account for browser elements). They have no concept of browser scaling. The problem is that they have the same frame of mind when designing for the web as they do when designing a print piece. If you think statically with a box (1024×768) when designing for the web, the results are never good.
Ryan Martin
“Simply put, if you can’t code and don’t understand HTML and CSS – you are not designing a website.”
Not true, but I agree – web designers need to be able to do both.
This is like saying if you don’t know how to put up a billboard, you are not designing a billboard.
You can still DESIGN the website, regardless if you know CSS/HTML or not.
Besides you can learn CSS in no time at all, so DO IT! :)
David Bushell
Hey guys thanks for all the comments. In response to the billboard analogy I can see your point, but I think it would be more accurate to say that, if you don’t know the size of a billboard and the way people interact with it, you’re not designing a billboard. You don’t necessarily have to be coding a website or putting up a billboard to be able to design one, but you do need to understand how it works. You just reminded me of http://uptherefilm.com Up There! great video :)
edmund kudzayi
Someone who designs a visual presentation of a website is not a webdesigner, they are an artist. Look at the art students who works with Ferrari or Mercedes. They cannot lay claim to being car engineers. They are simply artists employed to conjure up aesthetically pleasing visuals. The engineers then engineer solutions to make the imagination of the artist a reality.
Mickel
Good points. I think a good understanding of how a web page is built up should be enough for someone working in Photoshop to mock up a fully “doable” website. You won’t necessarily need to have the skills to bend pixel-perfection in CSS, but a good understanding of browser sizes, user interaction and what is possible to achieve in a browser is crucial.
Thanks for the article, I really enjoyed reading it! Flattred and added your blog to my reader as well.
Keep it up :)
Your Comment…