contrast

Last night I was reading 37Signals’ post Web designers should do their own HTML/CSS, where it was claimed that all designers should get their hands dirty with HTML and CSS rather than handing off their Photoshop mockups to “html monkeys” and expect them to do the coding part. A few days prior to that 37Signals published another post that caused a massive stir — Why we skip Photoshop — where they explained why they skip mockups in Photoshop and from a paper sketch go straight to HTML/CSS.

I can’t say that I absolutely disagree with what Signal vs. Noise had to say about their design process, however I don’t fully concur with them either. For site designs like 37Signals you definitely don’t need Photoshop to do the mockup, although you still need some graphic tool to create that blue gradient image at the top. Yet for other sites with a more elaborate visual design I doubt you can go very far without the initial mockup.

I wonder what is the right definition of a Web designer? (Wikipedia has a definition for Web design, but nothing on a Web designer). 37signals titled the post “Web designers should do their own HTML/CSS”. Of course, web designers should know and code in HTML/CSS, otherwise they can’t be called WEB designers, or can they? After reading their article it looks like Graphic designers who create visual designs for web sites are called Web Designers. To me that doesn’t sound right.

Zeldman once said “Let there be web divisions”, pleading the companies to stop separating the web team members into IT and Marketing departments. I think the same applies to the definition of a Web Designer—it’s a person that designs a web site. And a web site is not a static work of art, it’s an interactive medium. A Web designer must know how to put a web site together, hence must have HTML/CSS skills. To me a Web designer is a link between a Graphic designer and a Web developer.

On the other hand, it doesn’t mean that all Graphic artists who design visual interfaces for web sites should know HTML/CSS. They do have to be provided with a set of guidelines and requirements for the site, they do need to know the Web as a medium to deliver their work for, and recognize that it is very different from Print. However, they do not need to be able to take their design and implement it in HTML/CSS.

Those who do take time to learn and refine their XHTML & CSS skills stop being just Graphic designers and become Web Designers who are highly sought after because they possess a rare combination of being a creative artist and pedantic coder.

Having said that I realize the true question in 37Signals article: who is a better fit for a web site design—a Graphic Designer who doesn’t know HTML/CSS or a Web Designer who designs a site while keeping all the coding challenges in mind?

Most companies I know or worked for always bring a design studio or a Graphic designer on board to design a mockup for the site, which is then delivered to front-end programmers for the actual implementation on the Web.

Now, I have to be honest with you: there were many times when I was getting very frustrated when working with a mockup that was clearly designed by non-Web designers. Once in a while there were design elements that were impossible to duplicate with HTML & CSS, in such cases the mockups were sent back and getting altered to function on the Web. Other times I only thought that I won’t be able to achieve the same effect when in fact I’d eventually get it to work beautifully in all browsers.

Conversely, when designing a web site myself I can’t help but question every design element in my mind against the limited possibilities of HTML/CSS and cross-browser issues: will I end up with too many nested divs, will I be able to get it working in IE. Graphic designers who are not familiar with the coding caveats and are not afraid of breaking the conventional Web layouts, bring fresh unique designs that stand out, and by setting new challenges for Web designers they help to take Web site design to the next step.

Who do you think started questioning the use of HTML tables, frames, popularized Flash? If everyone followed 37signals advice to learn HTML tables and design the sites accordingly, we would’ve still lived in the WebCave Age.

Of course, it’s up to the company or individual to decide whether to hire a Graphic designer to deliver a mockup for the site and then pass it on to a Web designer, or hire a Web designer who’s also an excellent Graphic designer. It also depends on what kind of web sites one favours or needs. Fortunately, you don’t need to be a Photoshop or Illustrator genius to design a beautiful web site (many minimalistic web sites with exquisite typography prove that). Similarly, you don’t need to be an HTML & CSS guru to design a usable and functional web site, just find the right Web designer to collaborate with and put your creative ideas into an elegant code.

Ironically or not, but only a few days after the “learn HTML/CSS” article, 37signals posted a job announcement, looking for a designer
who wants to kick their ass and change their game
. Is it because they now find their in-house Web Designers who skip Photoshop and code directly in HTML&CSS to be a little bit boring? Whatever it is, I think a re-design of 37Signals site is long overdue.

What do you think about all this? What is your definition of a Web designer? What is your approach to Web design?

Recent Bits
Related Bits
Mixing Typefaces Cheat Sheet
What Britney Spears Believes In?
Icon Resources and Tips For Styling Bulleted Lists
Musings on Blogging
Secret Formula To Writing Headlines That Catch Your Eyes
Sources Of Inspiration to The Rescue
A Bit Of Literature – Private Showing
How To Establish A Successful Online Business Presence
Comment Bits

20 Insightful Bits in response to “Contrasting Approaches To Web Design”

  1. There are certainly many great graphic-designers turned web-designers that produce beautiful and usable sites and tone down the graphics to a tasteful level, but my personal experience attempting to collaborate with graphic designers has been pretty poor.

    * produced site mockups with multiple megabytes worth of image files per page
    * visual effects that would be extremely difficult to pull off even with tons of images on the site.
    * designed content that would be impossible to dynamically update
    * making text so small or without contrast (tiny gray text on a slightly lighter gray background) so it remains completely illegible to anybody without 20/20 vision. Yeah it’s elegant looking but if 3 people can easily read it who cares.

    I actually want to go in an even more minimalist direction with my sites with even fewer images and more of a focus on typography and layout. I’ve been reading alot about psychology lately and thinking about how it applies to the web. I’ve been thinking about how even tiny increases in download speed make a difference in how people choose to interact with sites.

    This was an article that made me think about stuff a little bit. I look forward to seeing comments here.

    PS: Just for the record, I do the sketch thing instead of the photoshop thing too. It’s more fun, it’s easier to focus on the broad layout instead of tiny details, etc.

  2. I agree that their site could do with a bit of a re-work, too many different colours and just a bit ho-hum, in my opinion.

    Anyway, beyond that, I don’t think any of their points are particularly wrong, until they get to

    What form elements to use. What font sizes. What composition. What flow. Those decisions are poorly made at an arm’s length.

    They assume that a designer who doesn’t code doesn’t understand those things. If the designer can’t see the size and flow in Photoshop, then I think you’ve picked the wrong designer. Someone who spends a lot of time on the internet and is working as a designer (i.e. someone who solves visual communication problems) should be able to interpret those kind of things conceptually, even if they don’t know HTML and CSS.

    So, I guess in the end I agree with you Vivien?

    That said, I was only introduced to the concept of PS-only web designers recently. I thought a web designer was someone who thought up the visuals, made them and coded them… I guess because that’s what I love doing… coding and making things work is three quarters of the fun.

  3. I have an understanding of HTML and CSS and that has helped me collaborate to great success with coding gurus. I loved working with my old workmate, who did all the database design and the page coding, while I did the mockups and site logic with him and then we collaborated on the CSS.

    I love collaborating so much, I wish more people could work that way. I have encountered people who are such control freaks that they will not surrender tasks to people who have skills in that area… The projects resulting from such methods usually sucked hard.

    The thing about working collaboratively is that you have to do some deep reflection and appraisal of what you’re good and what you’re not so skilled at. I know that I hate coding and I’m not good at databases or languages. I do know that I have good visual literacy and love to work through things logically! In conclusion, collaboration is the bomb :D

  4. You make a good point Natalie (or remind me of a point): it’s true that good web designers don’t have to be artists, but sometimes a website needs more than an ability to lay something out well… I wonder if it’s unreasonable to expect that a web designer needs to be an expert in graphics and several web languages. A shared knowledge of each would help, but expert collaboration could be more valuable than a jack-of-all-trades.

  5. I think that in order to be a good designer in a particular medium, you need to have a good understanding of that medium – simple as that. But that doesn’t necessarily mean that a designer must be a CSS/HTML expert; it means that they should have been briefed in the principles of how CSS structures a page, how images affect a page (especially very large images) and one other aspect which hasn’t been mentioned yet: the expectations that site visitors have about how the information (especially navigation) will be laid out on the page (I’m thinking of the F-pattern that heatmaps / eye-tracking have revealed about the way people “read” a web page).
    I always begin with a mockup – not always in Photoshop, sometimes in Illustrator because I work faster in Illustrator. I’m more likely to use PS if there are elements to the design which can only really be achieved in PS.
    I have to say, I often see ads listed on the online jobs boards for web designers where the expectation is that the designer will submit a PS mockup to be handed over to coders, and I always feel a pang of disappointment because I enjoy turning the mockup into “reality” with CSS – I like the whole package!

  6. Well since HTML and CSS isn’t rocket science then I think that graphic designer should be able too code their own HTML and CSS, or at least have a feeling for how it works. It will make drawing mockups much easier and less time consuming.

  7. Chris, I certainly do agree with you on the problems you had when working with graphic designers’ mockups for your sites. However, nothing there indicates their lack of HTML&CSS knowledge, it’s a common knowledge of the WEB medium, that any designer must be aware of. That’s why I specified that as long as graphic designers are given a list of site requirements, information architecture, as long as they are aware of Type limitations for Web, image sizes, etc, they should be able to design a mockup that would be a joy to work with. Web/Screen is a very different medium, no doubt about it, and designers should learn how to adapt their designs for screen, but it doesn’t mean they must learn HTML&CSS. They can, if they want to, and in some cases it’s better if they do, but it’s not a must have skill, in my opinion.

    Kristarella, I thought of exactly the same thing when I read that paragraph on 37signals. Font sizes, composition, flow have nothing to do with the knowledge of HTML & CSS. I found their arguments pro-HTML&CSS for Graphic designers very weak.
    When I was teaching programming to 2nd year Interactive Design students, I found that even they create bloated web sites, with poor contrasts between text and background, small font sizes, and they all have learned HTML&CSS during their first year of studies. Just like in any field there are great graphic designers who can design for any medium, including Web, and there are poor designers who can’t even turn in a decent business card. Same applies to Web designers—some take time and learn the intricacies of a beautiful design and create usable web sites, others create sites that hurt your eyes with a horrible colour combination, dreadful choice of typography or too many design clichés.

    Natalie, successful collaboration of Designers and Programmers is the best thing that can happen when building web sites. I’ve seen many beautiful web sites where designers credit other designers/programmers/writers for helping them to put their site together.

    Tracey, I can totally relate to your disappointment for having to deliver your mockups to coders. I’ve been on the other side—wanting to design a site myself, not just code it from someone’s else mockup. That’s why I chose freelancing, now I can do anything I like: design and code :)

    Esben, HTML & CSS is not a rocket science, but believe me I’ve seen and taught many designers who just couldn’t grasp anything that had to do with some code, including HTML&CSS. They felt miserable and frustrated when having to code, but they were amazing with PS and AI.

  8. ben

    Tracey Grady’s first sentence sums it up. You need to know the medium you’re working in. That doesn’t necessarily mean being able to code websites yourself (in much the same way that being a good print designer doesn’t necessarily mean being able to operate a 10 colour off-set litho perfector yourself), although it definitely helps even if you can just do the basics and rely on a more focused coder to work on the code side of bigger sites. At the very least, a web designer needs to know how websites are structured.

    The problem with a lot of designers when they try to create mock-ups for websites is that they simply don’t fully understand the medium. Typically, they wouldn’t even consider trying to create an animation or storyboard a short movie because those mediums are clearly outside of their scope. But websites look deceptively like printed design, it all seems so elementary similar – pictures, text, columns – surely print design skills will transfer seamlessly to web design?

    But of course they don’t. Yes, if you consider design simply as a process of making something look aesthetically pleasing, print designers are fully qualified to bash out website templates. But that isn’t the sole job of a web designer (and nor should it be the sole job of a print designer). There are so many other issues at play, intuitive interface design, design that can be optimised to download quickly, designs that can be coded to degrade gracefully in non-standard web browsers, designs that are flexible enough to not fall apart when the user resizes the window or scales up the text – not to mention the actual purpose of the website’s existence which is rarely ever simply ‘to look good’.

    Of course, lots of print designers have similar problems even when designing for print – they don’t understand the technology, they don’t know how to supply print ready artwork, they don’t know how to optimise a design to make most efficient use of the paper size, they don’t know how to manage a proper colour workflow, they ignore the business objectives of the design etc. Some designers are simply bad designers. Any good designer, whether they come from a print, web or animation background, will take the time to properly research the peculiarities of a new medium when they start to design for it. All designers have general transferable skills that apply to any type of design project, but they also need to be prepared to learn the specifics of any new medium they choose to work in.

  9. Personally I think that if a designer can create absolutely fantastic visuals but doesn’t have even the slightest grasp of HTML and CSS then there is a big problem and they probably shouldn’t be working on web.

    This is one of the issues I’m struggling with in my new job – cobbling together sites based on flat visuals than invariably need to be ‘botched’ together to ensure they look how the designer intended.

    Don’t get me wrong, I’m not an accessibility evangelist but it’s the client that loses out. They may think they have a great looking site but that is only because they are ignorant to the issues of accessibility. If you showed them how easy it is to break their great looking site by doing something like changing the text size, I’m sure they’d not be so pleased with their great looking site.

  10. I like the general sound of the comments here and it’s along the same lines as my thinking. Yes, it would be ideal if you had an amazing designer and a coding guru all wrapped up in one person, but most of the time that’s not realistic.

    If a graphic designer is going to design for any medium s/he has to understand how it works and, more importantly, how people will use it (even talking about print here). Design is about communication. If the message is lost because the graphics take over for whatever reason, it becomes art, not design.

    Example: my recent redesign. I understand HTML/CSS, but I can’t code from scratch. I know most of the limitations of the medium, but I don’t let that stop me from dreaming in my initial comps, which pushes the generally accepted edge. If the design has to be modified to fit the medium, ok, done. My husband on the other hand, coded the design. He found ways to use the code creatively to incorporate 98% of my original design done in Photoshop.

    Interesting discussion, Vivien! It’s along a simliar vein of style/art vs. design, only on the other end. I don’t think anyone will ever agree 100% but it’s interesting how this relatively new medium (the Web) is creating new roles that we never could’ve imagined! Now we’re struggling to define those roles, but that’s all part of the fun :)

  11. I think there was some real confusion coming out of those 37signals posts because they didn’t distinguish enough between demo’ing an ‘interface/experience’ and demo’ing a ‘design’ in the sense most of us know. They probably could have framed the discussion better.

    As so many others have said, 37signals’ products are very specific and unique, so it’s not surprising their process is too.

  12. I think that it is very important to have 2 persons in the process: The designer and the coder.
    I am a coder myself and i know the tendency to create designs that are easy to do in HTML/CSS. Thats the death of any creative design. We often get interesting challanges from designers because they do not think with the problems of HTML in their mind. They just let their creativity flow and that brings new ideas.
    Of course then they have to work closely with the designer to check what is really possible.
    Whats more important for the designer is a profound knowledge of User Interface design and information architecture. Thats much more important than HTML skills.

  13. Ben, thanks for elaborating more on the point in my post — designers should know the medium they design for inside and out. In the case of Web, it doesn’t necessarily mean that they need to know HTML/CSS.

    Aaron, I agree that designers should be aware of how their designs will look on Web when different kind of users are accessing it, but I’m not convinced that a slight grasp of HTML/CSS will help them to design something that doesn’t break when readers increase/decrease the font size.

    Lauren, your recent re-design is certainly a proof on how a designer and programmer can effectively work with each other. I still don’t really know though if someone who doesn’t know HTML/CSS can be called a Web Designer. Would you call yourself a Web Designer, or a Graphic Designer?

    Darren, I agree. That’s why I said that I neither agree nor disagree with 37signals. They found something that works for them, their products, but that doesn’t mean that everyone else should follow the same path.

    Warenwirtschaft, glad to see that you too think the knowledge of HTML/CSS tend to limit designer’s creativity. I think like in everything there will always be advantages and disadvantages in any workflow. We just need to find out what works the best for us, our projects, and yes, we need to know the medium we create for.

    There are also some very interesting comments over at Mark Boulton’s blog where he epxressed his thoughts on the recent 37 signals’ posts.

  14. Yeah… as much as I would love to call myself a web designer, I wouldn’t. That is a really good way to gauge how I think about it! I never thought of that before.

    I don’t call myself a web designer because a majority of my projects are print and I can’t code (but the reason is more due to the former). But I think someone who primarily (maybe 70%+) designed websites could be considered a web designer, even if they didn’t know the coding side. Though as many have mentioned, understanding the medium and being able to converse about it is necessary.

    I think of database designers (my mom is one, so I know a little about the profession): they know how he DB works, what they want it to do and what it should do, but would never be able to create the complex joins and interdependent links between systems. They can tell a programmer what needs to be done, but couldn’t do it themselves.

    But I think if I were designing sites more, I would want to learn the coding, too, so I could do most of the site myself and break off into freelancing. Of course, more complex DB driven sites and ecommerce security stuff would require a programmer, but for basics it would be good to know.

  15. I have never properly learned CSS nor any kind of code. What I know is what I taught myself. I am still able to code my own templates however and end up with a complaint final result.

  16. It’s great that you taught yourself CSS, seo blog. I’ve been working with it since its inception, but I constantly find something new to learn in CSS. It would be great though and very helpful if all browsers supported CSS2 and CSS3.

  17. Many graphic designers are web designers too. I love to design logos, pages, and so on, and I love to make websites. By the way web designer could do their own HTML and CSS, but what does a web designer without graphics? I can’t believe that a web designer buys graphics or search them in google or somewhere else, would they? That would make no sense, i think.

  18. Warenwirtschaft, what kind of graphics are you talking about? I don’t see anything wrong with a web designer using stock photography or vectors to save a little time and money, while they concentrate their efforts on making a functional and attractive layout.

  19. Warenwirtschaft, there are many web sites nowadays with little or almost no graphics, but those sites look as stunning and at times more elegant than the ones filled with gorgeous illustrations. After all design is not only about beautiful graphics, and I think web design is more than any other field of design is about communication and friendly user experience.

    So in that sense, I have to agree with Kristarella. And especially with the price that many clients are willing to pay for the site design it makes no sense to spend days on creating from scratch every piece of graphics. Plus, don’t some Graphic Designers use stock images in their work?

Pingbacks and Trackbacks

  1. One thing blog designers must have : Tracey Grady Design | Hobart, Tasmania, Australia

    [...] good web designer should also have a working knowledge of XHTML and CSS, the fundamentals for quality, standards-based web design. Additionally, it’s expected that [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on