The personal disquiet of

Mark Boulton

June 5th, 2008

Design isn’t about tools

The other day, 37Signals wrote about Why they skip Pho­toshop. Fine. I think that suits them and their work­flow, con­sid­er­ing they don’t do cli­ent work and have an estab­lished UI style on which to draw. Jeff does a much bet­ter job of sum­mar­ising my thoughts on the sub­ject that I could. As does Jon

So, yes­ter­day, we see this post on SVN, pre­sum­ably as a fol­low up. Is it an inflam­mat­ory post? Or, do they have a point? 

Horses for courses

As Jeff poin­ted out, and many of the com­menters on the first post, choos­ing to use Pho­toshop is really a work­flow thing. If you find it doesn’t suit your work­flow, and you have an estab­lished UI then feel free to ditch it. When I worked at the BBC, I did that for a while as well. It works very well for a lot of the mod­u­lar, micro-design tasks needed within a design that is already agreed. How­ever, when a new design was required, I often needed Pho­toshop to give me the hol­istic design view. As Jon points out in his post, it’s much quicker to do that in an image editor, than using HTML/CSS. 

Now mat­ter how hard I tried, HTML and CSS could not give me that over­view that Pho­toshop could. The subtle inter­play of typo­graphy, col­our, tex­ture and whitespace is dif­fi­cult to eval­u­ate with HTML when you throw browser quirks in the mix. 

Do print design­ers need to know how to build a press?

I think David’s post on SVN holds true to some degree. Yes, if you’re design­ing for the web you need to know the tools of your craft. But that’s the thing, Design is not about tools. Pho­toshop is a tool, as are HTML and CSS. Design is about solv­ing prob­lems, not about soft­ware. Some people choose to do that with Pho­toshop, and some with HTML and CSS. Neither route is the cor­rect way of doing it and it’s a mis­take to pre­sume it is. 

You can also argue that know­ing how to build things in HTML/CSS lim­its your cre­ativ­ity. You work within your own boundries. If you’ve always had a stick­ing point with flex­ible lay­outs, then chances are, if you have to build the thing, you’re pref­er­ence would be to avoid them. This is one of the dis­ad­vant­ages of know­ing your way around HTML/CSS as a designer — it’s hard to break free of those constraints.

Tools, tools, tools

I’ve always liked to abstract my design pro­cess from the tools I use. Pho­toshop, Fire­works, HTML/CSS, Pen and paper, HTML Wire­frames using Blue­print, Omnigraffle—It doesn’t really mat­ter. You use what’s best for your work­flow at the time. These are all tools in the same way that a pen­cil is a tool.

They are imple­ments to real­ise a solu­tion to a problem. 

You say tomato and I say toe-may-toe.

68 Responses to “Design isn’t about tools”

  1. Elliot Jay Stocks said on: June 6th, 2008 at 5:01 am

    So well said, Mark. 

    I take real excep­tion to one thing in par­tic­u­lar that David says: “Design­ers who work dir­ectly with the mater­i­als rather than through sim­u­lated envir­on­ments like Pho­toshop are at a dis­tinct advant­age for mak­ing that hap­pen.” Ok, I do actu­ally agree with what he’s say­ing — and I am one of those design­ers whose know­ledge of Pho­toshop is equally matched by my know­ledge of XHTML / CSS — but “sim­u­lated envir­on­ments” has some­thing of a derog­at­ory nature about it. Sure, Pho­toshop is not as ‘real’ as XHTML / CSS, but like­wise XHTML / CSS is often cre­at­ively restrict­ing, as you, Jeff, and Jon all rightly put.

    I also strongly dis­agree with David that “the graph­ical prowess of a com­pletely blank can­vas” is a “niche”. Maybe for 37signals; not for the rest of the world.

  2. Peter Holloway said on: June 6th, 2008 at 5:08 am

    That’s the best com­ment yet on the sub­ject, Mark! It is all about choos­ing the right tool or method for you to do the par­tic­u­lar job in hand, and, as sev­eral people have poin­ted out ‘web design’ is too broad a church to pre­scribe one method or tool for every pro­ject. Much as I admire SVN’s products, I think theirs is a nar­row stream in the broad river of web design. Vari­ety is the spice of life (and web design). 

    Peter

  3. Tom said on: June 6th, 2008 at 6:07 am

    Def­in­itely horses for courses. 

    I used to work from paper-based designs and then start with the html/css but it was a sod to change any­thing because the markup had to be spot-on oth­er­wise it looked crap. 

    Design­ing in photoshop/fireworks is far bet­ter for me. I feel more cre­at­ive and less constrained.

  4. Wolf said on: June 6th, 2008 at 6:15 am

    About the head­line “Do print design­ers need to know how to build a press?”: I think it would be bet­ter to say: Do print design­ers need to do their own prints. This like say­ing: Should a web designer build his own browser (or even computer). 

    I don’t believe you can design suc­cess­fully for the web if you don’t know HTML and CSS. How­ever, web design is com­posed of so many dis­cip­lines some of the design parts can be done by someone without an intim­ate knowledge.

  5. David Airey said on: June 6th, 2008 at 6:29 am

    You say what I was sub­con­sciously think­ing, yet couldn’t elab­or­ate on. Very well put.

  6. Nathan Rutman said on: June 6th, 2008 at 6:45 am

    Here’s the base of their argu­ment on design­ers and HTML/CSS:

    I’ve worked with many web design­ers in the past who only did abstrac­tions and then handed over pic­tures to be chopped and imple­men­ted by “HTML mon­keys”. It never really gelled well. The things that got strong atten­tion were all the things that Pho­toshop did well. Imagery, curvy lines, and the frame. All the around stuff, never the it stuff. 

    That’s why all the design­ers at 37signals work dir­ectly with HTML and CSS…

    He’s mak­ing a case for good web design instead of doing poor graphic design and try­ing to port it to the web.  For some reason, they seem to con­fuse that with design­ers need­ing to markup HTML/CSS.  It’s ok if they want to run their shop that way, but it isn’t a neces­sary implic­a­tion.  You just need a tal­en­ted web designer, and who cares who does the code from there?

    For the record, I do markup my own HTML/CSS, so I’m not arguing against it in any way.  :-)

  7. Cristiano Rastelli said on: June 6th, 2008 at 7:19 am

    I agree with you and with Jeff Croft, but at the same time I agree with Jason Fried and Jon Hicks. Pho­toshop, Fire­works, HTML/CSS: they are all tools. And a web-designer must (should) know how to use them. But maybe what makes a good web-designer is know­ing how to use all of them. Mas­ter­ing floats and divs does’t mean how to build a press, but how the press works.

  8. Mubashar Iqbal said on: June 6th, 2008 at 8:12 am

    I totally agree with point on cre­ativ­ity.  Design­ers should know how HTML/CSS works, but I find that those that do, are often hold­ing them­selves back in terms of the designs they create. 

    “This will be too hard to code in HTML/CSS” is some­thing that I say often but not some­thing that a designer should be think­ing when work­ing on page.  

    Yes, the designer should know what is pos­sible and what isn’t, but we’re work­ing in a digital world and what is and is not pos­sible changes every day.  

    If the designer can­not keep up with with is and what is not pos­sible they shouldn’t be shackled by it either.

  9. Heather said on: June 6th, 2008 at 8:55 am

    This post and the art­icle that is ref­er­enced really chal­lenged my think­ing on this issue.  I agree on a lot of the reas­ons stated for how work­ing dir­ectly in HTML/CSS can save a lot of time and give a “real time” abil­ity to see changes, updates, etc.  I myself con­sist­ently find design­ers talk­ing about how it really is the way to go.  But I also take to the side that this post has stated that the best thing to do is to use the tools that enable you to be the best designer for you, whatever those may be.  I don’t think you should limit your cre­ativ­ity in any way as well.  I think there can be a com­bin­a­tion use of both approaches.  Again, the import­ant thing is to util­ize a pro­cess that best reflects your design quality.

    http://www.ethos3.com

  10. Jim Jeffers said on: June 6th, 2008 at 11:32 am

    I agree with you on the aspect of Pho­toshop being a work­flow issue.  You have to do what works for you best.  I’ve done both approaches in the past and the best path for me has been pen­cil sketch, pho­toshop, html/css. 

    I think there is a logical point in the mockup pro­cess where you need to jump into HTML/CSS.  I’ve noticed a lot of design cent­ric organ­iz­a­tions do not do this.  For instance once you start imple­ment­ing mockups for inter­ac­tions that require sev­eral steps — it becomes harder to por­tray and more time con­sum­ing to do in pho­toshop.  But yes skip­ping pho­toshop or some design pack­age for cre­at­ing 90% of the ini­tial UI is not effect­ive for most of my work.

    Now, relat­ing to your thought’s on David’s approach.  I am very aligned to David’s point of view as opposed to your own.  I think that CSS is the web designer’s ink, the html their can­vas.  Without know­ledge of these tools I don’t see how you can be an effect­ive designer.  I learned this the hard way.  After my designs wouldn’t look the way I wanted them to — I had to learn how to do the imple­ment­a­tion myself.  This is often a more reward­ing exper­i­ence than design­ing the site in a graph­ics pro­gram but the mind­set is not quite the same once you reach this point in the process.

  11. Robert said on: June 6th, 2008 at 6:07 pm

    Design just needs an open mind with a cre­at­ive brain. This is the real com­pet­ence someone gets credit for.

    But without the know­ledge of power­full tools it is just like a great idea. In my opin­ion every tool is power­full, when You know how to use it. Okay, Paint…

  12. Sean said on: June 6th, 2008 at 9:08 pm

    I’m new to the web design busi­ness and found this post and all the links in it very use­ful. I hadn’t con­sidered that some people might be opposed to use pho­toshop in the design process. 

    I am actu­ally still dis­cov­er­ing my work­flow and recently built my first site using photoshop/css/xhtml by myself. It was def­in­itely a learn­ing experience.

  13. Toronto Lofts said on: June 8th, 2008 at 2:01 am

    I used to work from paper-based designs and then start with the html/css but it was a sod to change any­thing because the markup had to be spot-on oth­er­wise it looked crap.

  14. Bernie Russell said on: June 9th, 2008 at 12:07 pm

    I’m a journ­al­ism lec­turer ands this is a help­ful debate. Isn’t it lead­ing to the only valid model: go with what works until it doesn’t?

    I encour­age my stu­dents to use whatever tools they are famil­iar with (pen­cil and paper, Word, Quark, Pho­toshop any­thing) to mock up a design, and then try and make that design work for the web. This means they can start work on the design more or less as soon as they’ve decided on con­tent, audi­ence, etc.

    The res­ults are fas­cin­at­ing. Some will go through hell and high water to get exactly what they want; some accept the lim­it­a­tions of the tools, and of their know­ledge and com­prom­ise on their ori­ginal design. Either way, of course, is OK if the final res­ult is OK.

    (Jim Jef­fers is quite right, incid­ent­ally, in say­ing that “there is a logical point in the mockup pro­cess where you need to jump into HTML/CSS”. What is inter­est­ing is see­ing when dif­fer­ent groups of stu­dents arrive at that point.)

  15. Tim said on: June 9th, 2008 at 3:53 pm

    As someone with a print back­ground, now work­ing within a cor­por­ate web team, I have found the mockup to be an indis­pens­able asset. It is abso­lutely impossible to com­mu­nic­ate cre­at­ive ideas to large groups of stake­hold­ers without fol­low­ing the wire­frame, graph­ical mockup, html tem­plate workflow. 

    Much like cre­at­ing an edit­or­ial lay­out for print, using InDes­ign to first build wire­frames serves as a scal­able back bone for the pro­ject. Build­ing out graph­ical and pho­to­graphic ele­ments in Pho­toshop and Illus­trator also serves the dual role of put­ting in place the final application’s image lib­rary. Mul­tiple pages/interactions can be quickly cre­ated, once styles are setup in InDesign. 

    Hav­ing a chance to set up styles in advance of actual css has another advant­age. It leads you to poten­tial prob­lems in your hier­archy before they are com­mit­ted to code. I have also found that I tend to write­cleaner html/css when I have had a chance to think about their markup in advance. 

    How­ever, if I were charged with the task of knock­ing out a quick tem­plate in a couple hours, I would go the dir­ect css/xhtml route. 

    Over­all, I think the folks over at 37 Sig­nals, and prag­matic developers in gen­eral, are more inter­ested in an iter­at­ive approach to devel­op­ment. Cre­at­ing mockups just goes against their DRY principles.

  16. Alex said on: June 10th, 2008 at 2:50 am

    “Tools” aren’t (just) about tools

  17. Chris Jensen said on: June 10th, 2008 at 7:22 am

    Inter­est­ing post (yet again Mark).  How­ever here is my take as a developer with a keen interest in usab­il­ity and good design. 

    “Know­ledge of ‘HTML/CSS lim­its your cre­ativ­ity” Yes there are con­straints with the web but they are only the equi­val­ent of the con­straints you see with all design medi­ums.  For example the size of a prin­ted page, A sheet of paper is only two dimen­sional, the affect grav­ity will have on a build­ing, etc.  As with all art and design it is the con­straints that define it.  It is the hand­ling of these con­straints that pro­duces the quality.

    I would say that an in-depth under­stand­ing of HTML/CSS and not least script­ing allows you to be MORE cre­at­ive.  To pick one of many examples; the know­ledge of the use of remote script­ing (or AJAX if you’re trendy) to cre­ate truly fluid and dynamic con­tent is hav­ing a pro­found affect on web design and a Pho­toshop screen­shot is not going to cut the mus­tard in try­ing to con­vey what is pos­sible in this medium.

  18. Tim said on: June 10th, 2008 at 10:29 am

    Yes Chris, couldn’t agree more. The devel­op­ment team I work with uses the .EXT JS lib­rary. We have cre­ated many mockups of modal win­dows etc. How­ever, it is just not pos­sible to begin to con­vey the rich­ness of most effects with a mockup. 

    This whole con­ver­sa­tion reminds me of the old musician’s argu­ment where they say “the greats never learned to read sheet music”. I have played with musi­cians that don’t read and writ­ten web apps with a designer that didn’t know the web. Each time I felt constrained.

  19. Tom said on: June 11th, 2008 at 1:00 pm

    I have twice been rejec­ted from web design jobs for being too much of a designer, when all they were look­ing for was a code mon­key. For me, the term web designer implies a syn­ergy between the tech­nical and the artistic. I find a lot of print design­ers don’t “get me” as a res­ult of this dicho­tomy. But the tech­nical facet is inex­or­ably linked to the design com­pon­ent and vice versa. 

    It’s silly, to me, to try to divide up the tasks by put­ting them on either side of some ima­gin­ary fence, and that’s why I won’t work in an envir­on­ment where I’m not respons­ible for everything visual. I’m not say­ing I wouldn’t respect the work of someone who builds great web designs solely in Pho­toshop, or is a whiz at CSS cod­ing, but can’t work their way around choos­ing the appro­pri­ate fonts, col­ors, etc. I am say­ing I have more respect for someone who isn’t a one-trick pony…

  20. Mark Boulton said on: June 11th, 2008 at 3:13 pm

    @Chris Jensen: Agreed. I think con­straints within a medium are really import­ant — how else do you be creative? 

    To pick one of many examples; the know­ledge of the use of remote script­ing (or AJAX if you’re trendy) to cre­ate truly fluid and dynamic con­tent is hav­ing a pro­found affect on web design and a Pho­toshop screen­shot is not going to cut the mus­tard in try­ing to con­vey what is pos­sible in this medium.

    Agreed. In this instance, I’d use another tool to com­mu­nic­ate those inter­ac­tions: HTML pro­to­types for example, or a PDF gen­er­ated from Omni­graffle. How­ever, it’s ques­tion­able if you can cre­ate a hol­istic design view using just one tool alone. At some point in the pro­cess, Pho­toshop, or a sim­ilar image editor, is going to make an appearance. 

    @Tim: Agreed. A designer work­ing on the web has to know the medium. But that is not the same as know­ing how to write­HTML or CSS at all. A designer can be very aware of the medium, and design­ing for it, without know­ing how to hand­code in either markup language.

  21. dave said on: June 12th, 2008 at 5:33 am

    It should be the oppos­ite if you ask me. If you know how CSS/html works all the more reason why you can design in pho­toshop surely– know­ing what is pos­sible and not pos­sible as you go. That is cer­tainly how it works for me. 

    But to ‘design’ and visu­al­ize using the tools of pro­duc­tion makes no sense to me, unless you don’t have to show a cli­ent the iter­a­tions and work, and it is just your own pro­ject, and the design is quite basic. Most typeface choices, pat­terns, tex­tures, images etc., can only really be visu­al­ized quickly in the likes of pho­toshop, no mat­ter how fast you are at cod­ing. Either way you still have to use pho­toshop to cre­ate the images. And if a grid is import­ant to you you can shift around under­ly­ing struc­tural design choices easier in pho­toshop in my opinion. 

    Sounds to me like it’s just a case of developers (pro­gram­mers) seek­ing to exclude design­ers from the web dev pro­cess for no other reason that some kind of ner­d­ish showmanship.

  22. yarn said on: June 12th, 2008 at 7:28 am

    This post that is ref­er­enced really chal­lenged my think­ing on this issue.  I agree on a lot of the reas­ons stated for how work­ing dir­ectly in HTML/CSS can save a lot of time and give a “real time” abil­ity to see changes, updates, etc.

  23. James said on: June 12th, 2008 at 4:58 pm

    Does any­one think that 37 Sig­nals is just drum­ming up traffic to their blog? It seems like they’re the pop­u­lar hot chick in high school that talks badly about the poor kids. Except, I doubt they have a nice rack.

  24. inspirationbit said on: June 13th, 2008 at 12:00 pm

    It’s nice to see other design­ers stand up to SVN and point out what are the import­ant issues when it comes to design­ing any­thing, be it for web or print. All design­ers should know the medium they cre­ate for, and be aware of the lim­it­a­tions that the medium presents.

  25. Yorkali Walters said on: June 13th, 2008 at 2:18 pm

    I love the guys at 37 Sig­nals. No truly I do. But like the Lakers last night vs the Celt­ics after being so far ahead, they star­ted to believe the hubris and are drink­ing their own Kool-Aid. There are coders that can design, and design­ers that can code. There are archi­tects like Zaha Hadid and Frank Gehry that know how exactly their designs will be built. Does that mean they have to go out and build the darn thing?!?!?!!? I don’t think so! 

    The crew at 37 Sig­nals are prob­ably the best “mas­ter­build­ers” of our era but I do not believe it is always neces­sary for the designer to have to build/code. Pho­toshop, in their art­icle, I believe is being a bit over-maligned as some sort of hocus-pocus concept builder that does noth­ing but present no ends of prob­lems to the “engin­eers on site”. After gradu­at­ing from the hal­lowed halls of archi­tec­ture, this much I know. There have always been con­flicts between the draughts­man and the builder, the archi­tect and the engin­eer and now the designer and the coder, this has led to the mer­ging of func­tions in web devel­op­ment. This is what 37 Sig­nals has and it has served them incred­ibly well. But UI design, site archi­tec­ture and all the rest is as import­ant as the pixel per­fect craft­ing of a design in Pho­toshop. This kind of argu­ment leads to see­ing the use of Pho­toshop or the other aspects of design as mere…decoration. The fluff after the heavy lift­ing has been done. 

    This ticks me off a bit. 

    Design, UI devel­op­ment and cod­ing MUST go hand in hand from the get go. Beauty exists in code but it is not design! 

    For me cod­ing is a high craft but my dear friends..it is not design. Design is more than aes­thet­ics just as how code is more than integers and let­ters on a screen. Design is mean­ing. Mean­ing, believe it or not adds value. It height­ens the exper­i­ence (ever picked up an iPhone?) Also, design is more than mean­ing, it is the expres­sion of the “one-ness” of a that which is cre­ated. There is no “fusion” of form and func­tion. BULL!

    They are the same. 

    Form is func­tion and func­tion is form. 

    When you listen to how Jonathan Ive describes in such suc­cinct prose the cre­ation of the iPhone or iPod from a man­u­fac­tur­ing point of view then weaves in the user exper­i­ence then how the whole is expressed with such elo­quence in the res­ult­ing form you begin to under­stand just how design works. 

    There has always been a back­lash from hard core coders that can design against all things WYSIWYG. In some regards it is deserved because there are many Pho­toshop jock­eys that don’t under­stand how a site con­cocted in Pho­toshop will be built but on the other hand don’t whip the tool because the mas­ter abuses it. All tools have their place. TextEdit, CSS Editor BBEdit , Pho­toshop even the “lowly” iWeb — all have a place depend­ing on the pro­duc­tion work­flow needed to get a spe­cific site done. We as design­ers, developers and every­one in between just need to know how best and when to use them as needs be. THAT is what makes us pro­fes­sion­als. Time to quit my ram­bling. Now…lets get back to work.

  26. Ben Dawkins said on: June 14th, 2008 at 8:09 am

    A very inter­est­ing point of view. Itis true that many design­ers get restric­ted by the tools they use, and as they are creatures of habit they are unable to go bey­ond such lim­it­a­tions. Luck­ily I’m rather flex­ible and often shift between Pho­toshop, HTML/CSS and other tools to achieve the best work­flow and res­ult. In some cases I even start a pro­ject with a simple sheet of paper and a pen­cil, as it isn’t very restrict­ive, and then I go for a tool that seems to suit me best in this par­tic­u­lar job.

  27. Leon P said on: June 15th, 2008 at 12:20 am

    I agree with 37 sig­nals (although I should pre­fix that with ‘I have no real large-project exper­i­ence, edu­ca­tion in the sub­ject etc. etc.’) 

    I don’t under­stand why web design­ers would know how to use pho­toshop before know­ing how to HTML and CSS: it’s not as if they’re dif­fi­cult tech­no­lo­gies, and web pages are HTML doc­u­ments rather than images.  Is it because design­ers are com­ing from a print back­ground and then try­ing to apply these skills to the web, rather than accept­ing it’s a dif­fer­ent media which requires dif­fer­ent skills and a stricter set of rules to follow?

  28. Yorkali Walters said on: June 15th, 2008 at 7:10 am

    In response to Leon’s com­ment: Lay­out is lay­out, the prin­ciples that gov­erns the lay­out of a site’s design can be executed with pen­cil and paper, HTML/CSS, Pho­toshop, etc, ect, etc. Some print design­ers as they trans­ition to web design of course are more com­fort­able with a tool that many have been using for quite a long time so you can see why these PSD slice and dice sites online are so pop­u­lar. Let’s remem­ber the theme of the blog post we are com­ment­ing on…tools. 

    Tools are like art media. Char­coal, guach, water paint, oils. There are cer­tain works of art that can only be expressed in one media or the other. There are oth­ers where the media does not mat­ter. Web devel­op­ment is some­what like that. No mat­ter the site Pho­toshop can be used for it’s lay­out BUT it can’t code the site. HTML/CSS can code almost any site but it’s not prob­ably the best tool to design/lay out a site. 

    Design isn’t about tools, neither is devel­op­ment. I stand by that.

  29. Yorkali Walters said on: June 15th, 2008 at 11:42 am

    One more thing. Jacob Cass put it suucintly on a recent post on his site: 

    –“Want to know how to design? Then you should learn the basics of design. The basic ele­ments of design include col­our, line, shape, scale, space, tex­ture and value and these are the fun­da­mental pieces that make up any piece of work. If you ever start a design course this will be the very first thing that you are taught, guaranteed.”— 

    Pho­toshop can­not teach that, HTML or CSS can­not teach these base prin­ciples. The tool only executes the design within the bound­ar­ies of the afore­men­tioned ele­ments. There are many sites as we all know whose “design­ers” have no idea how these ele­ments work much less how they work together. This is what we should be berat­ing. NOT the use­ful­ness or lack thereof of the tool used to cre­ate it.

  30. Root said on: June 15th, 2008 at 12:02 pm

    How on earth can html / css be *cre­at­ively restrict­ing* per com­ment #1? Those are not restric­tions. Those are the con­straints and the real­ity of the medium. A web site only needs two files: index.php and style.css. Both are writ­ten in text. Did I men­tion pho­toshop anywhere?

  31. Yorkali Walters said on: June 15th, 2008 at 2:39 pm

    You see Root therein lies the rub. Of course a web­site only needs two files. But what are you express­ing, selling, com­mu­nic­at­ing. Not all sites can get by on just two files.

  32. Root said on: June 15th, 2008 at 10:16 pm

    It doesn’t mat­ter how many files there are. They are all text. Except the con­tent which might in some instances be digital. You will be telling us next that you block out your pho­toshop love­li­ness with latin text. For heav­ens sake.

  33. Yorkali Walters said on: June 15th, 2008 at 10:54 pm

    Root,

    What about the image files?

  34. Root said on: June 17th, 2008 at 12:00 pm

    Inter­est­ingly enough there has just been an art­icle at alistapart pro­pos­ing mov­ing straight to what they call pro­to­types ie work­ing coded mod­els. I have been doing it for years. Like Malar­key if I need an image I do a screen­shot. LOL. Using a style switcher I can present half a dozen vari­ations at a cli­ent present­a­tion in moments. Still graph­ics simply do not cap­ture the power of CSS and nor can they be used to illus­trate interactivity.

  35. Yorkali said on: June 17th, 2008 at 12:51 pm

    Maybe we should cla­rify the func­tion of graph­ics at the dif­fer­ent stages of the devel­op­mental cycle. Usu­ally that first sketch or the first stack of lines of code to flesh out an idea are cru­cial. But Dif­fer­ent people think and develop their ideas in dis­tinctly dif­fer­ent ways. For me some­times I sketch, other times I go straight to screen. For most people more adept at cod­ing and not so much sketch­ing they will of course jump in to that to flesh out a spark of an idea. We are all as dif­fer­ent as the tools we use. The bot­tom line is as always get­ting it done…right for that spe­cific pro­ject, for that spe­cific cli­ent. And get­ting it done on time.

  36. Root said on: June 17th, 2008 at 1:34 pm

    Well hope­fully the days of a young buck straight out of col­lege hand­ing his pho­toshop mess to highly exper­i­enced coders with the words *thats my design that is the way I want it * are draw­ing to a close but I doubt it.

  37. Yorkali said on: June 17th, 2008 at 1:36 pm

    You got that right!

  38. Brad said on: June 17th, 2008 at 4:29 pm

    You can also argue that know­ing how to build things in HTML/CSS lim­its your cre­ativ­ity. If you’ve always had a stick­ing point with flex­ible lay­outs, then chances are, if you have to build the thing, you’re pref­er­ence would be to avoid them.

    And going to Pho­toshop first avoids this prob­lem how? 

    The straw man in this argu­ment is obvi­ous.  A designer that can’t build flex­ible lay­outs is not a designer that knows how to build in HTML/CSS.

  39. Root said on: June 17th, 2008 at 10:37 pm

    And even if our pho­toshop genius can under­stand flex­ible lay­outs how can he draw / paint them ? It can’t be done.

    A com­plete fail­ure to under­stand width, height and scale at dif­fer­ent screen resolutions/platforms is endemic in graphic design­ers on the web. The com­ments about try­ing *dif­fer­ent fonts quickly* in PS is farcical.

  40. Yorkali said on: June 17th, 2008 at 11:56 pm

    I think it can be argued that work flow pat­terns can vary from pro­ject to pro­ject. Where one pro­ject may require using Pho­toshop for quickly flesh­ing out a spark of an idea there are other times when a sig­ni­fic­ant part of pro­duc­tion time involves lottsa face time with psd files. As I said before, yes there are Pho­toshop jock­ies that only know how to push pixels and have no idea how the site will be built. Regard­less, don’t beat the tool for the short­com­ings of the pixel-pusher.

  41. Leon P said on: June 18th, 2008 at 2:09 am

    one pro­ject may require using Pho­toshop for quickly flesh­ing out a spark of an idea

    Is this how people think about design­ing web sites?  Surely decisions about inform­a­tion struc­ture should be made first. ‘How do I organ­ise the inform­a­tion I wish to con­vey to my read­ers?’ should come before ‘I want to use brown text on a black back­ground and three columns, one of which has a back­ground image of the Empire State Building’.

    Let’s say the inform­a­tion struc­ture has been decided on and the designer moves on to think­ing about how this will be presen­ted.  I still don’t under­stand why you’d use PS at this stage: why not HTML and CSS the design?

  42. Yorkali said on: June 18th, 2008 at 7:08 am

    Okay, it’s time to speak for myself…alone. In response to Leon’s com­ment. Site struc­ture and page struc­ture design are of course cru­cial steps in any pro­ject. But every site’s work­flow is not the same. For some developers that focus on just cer­tain types of sites the work­flow becomes quite the same. Oth­ers just stick to what is com­fort­able for them regard­less of the work­flow. Let’s remem­ber what the post is about. 

    Design is not about tools. 

    Site archi­tec­ture, page struc­ture, form, line, rhythm, har­mony, bal­ance, AJAX, con­ver­sions, etc. There is more to this than tools, there is effi­cient work­flow. Whatever it takes to get the job done…right.

  43. Root said on: June 18th, 2008 at 8:57 am

    But that is the issue. Pho­toshop and other soft­ware of sim­ilar ilk does not *get the job done*. Or even con­trib­ute to it. If you need to write­text, and apply markup and CSS what use is a graph­ics applic­a­tion apart from the inline graph­ics for the CSS?  Please do not answer. It is no use at all. In our agency the amount of money that is wasted in man hours on this type of non­sense is dread­ful. And the *print* off our dodgy printer is the favour­ite ploy of these guys before *meet­ings*. Jeez.

  44. Mark Boulton said on: June 18th, 2008 at 9:11 am

    @root: As much as I’m enjoy­ing this lively debate with @Yorkali, I feel you are miss­ing the point of the ori­ginal post. It also sounds like your hav­ing a dread­ful time with some bad design­ers. Can I sug­gest you hire some good ones? 

    It is my opin­ion that, in my own prac­tice, noth­ing else but Pho­toshop *gets the job done*. It is pain­fully obvi­ous that this is not the case for you, which is fine. This post was to make a point that design is not about tools. Yet your argu­ment seems to be all about tools.

    If you need to write­text, and apply markup and CSS what use is a graph­ics applic­a­tion apart from the inline graph­ics for the CSS? 

    Again, can I refer you to the ori­ginal post. 

    Now mat­ter how hard I tried, HTML and CSS could not give me that over­view that Pho­toshop could. The subtle inter­play of typo­graphy, col­our, tex­ture and whitespace is dif­fi­cult to eval­u­ate with HTML when you throw browser quirks in the mix.

    Design­ing for the web is not just about lines of code, or the soft­ware you use to real­ise your solu­tions. It may be for some, but not for all of us. 

    If only my view of the web was as black and white.

  45. Yorkali said on: June 18th, 2008 at 9:23 am

    Hey Root, lov­ing this debate too. Part of the reason I was on the tools bit is to some­what get it out of the way so we could focus on the design. Lotta good that did :) Any­way, my secret is. I love Pho­toshop, it is the core of my design work flow no mat­ter what media I am in. But here I go again on the tools focus :)

  46. Root said on: June 18th, 2008 at 9:38 am

    OK Mark fair com­ment. But for my 2c there is no point in approv­ing any type of design without *throw­ing in the browser quirks*. It is the browser quirks and the vari­ations in the user agents which dis­tin­guish us as web design­ers. Any way I dont need to tell you this. I love your work. I am now back on my best beha­vior.

    I am just in the pro­cess of embed­ding a 400k flash graphic header into a site. Oh. There are 5 of them.

    On one page. And I am a stand­ards developer. Never mind new design­ers. I need a new job. LOL.

  47. website design said on: June 18th, 2008 at 11:47 am

    people who skip pho­toshop either are real hitech or dont know any­thing about design. i cant think of doing any design or graph­ics edit­ing without photoshop

  48. Root said on: June 18th, 2008 at 1:48 pm

    People who skip PS are not *hi tech*. They are web developers.

  49. Yorkali said on: June 18th, 2008 at 1:54 pm

    Hey guys, it’s not about the toooools :)

  50. Root said on: June 18th, 2008 at 1:58 pm

    Two thirds of the guys in this thread do not seem to under­stand Gravatars. LOL.

  51. Evan Skuthorpe said on: June 19th, 2008 at 9:47 am

    It’s very import­ant for a web designer to know how ‘it works’ (CSS, XHTML) in order to be able to design for the web, regard­less of the method they use. Those who don’t know are called graphic designers.

  52. James said on: June 20th, 2008 at 8:04 am

    Hear hear!

    Although it’s import­ant for design­ers to under­stand web­sites, they don’t have to make work­ing pro­to­types in favour of actu­ally get­ting creative. 

    The only reason I can think of for using the tools is in situ­ations where you can’t mock-up things as effect­ively as you’d like — say, if you’re plan­ning an snazzy AJAX or javas­cript­popup / tool.

  53. Yorkali said on: June 20th, 2008 at 8:33 am

    Well said James!

  54. Celina Buy said on: June 20th, 2008 at 7:08 pm

    I am slowly get­ting to grips with Pho­toshop for our site. I don’t see how any­one could get res­ults without it or a sim­ilar pack­age. To design, I think you need a lot of time and con­stant visu­als. Switch­ing between your editor and a browser does not give this.

  55. Root said on: June 21st, 2008 at 1:23 am

    That is the point Celina. There is no such thing as *design* for a web site. It is all con­tent, markup, CSS and scripts. ie text. Not to men­tion php and RoR or AJAX. Con­sequently to pro­duce such a thing you need a text editor. And a proper CSS styl­ist who under­stands browsers, stand­ards, access­ib­il­ity, usab­il­ity and a lot of other stuff. But he is going to be writ­ing CSS. Not futz­ing about pro­du­cing one dimen­sional pretty pic­tures which are func­tion­ally use­less. What no one in this thread has men­tioned is semantic markup. And where design­ers reign, semantic markup is the first cas­u­alty invari­ably. And when the semantic markup is com­prom­ised everything else starts to fall apart. The whole planet is sat­ur­ated with print *design­ers* mas­quer­ad­ing as web developers. And that is why most of the web sucks and it is also why the largest and richest cor­por­a­tion in soft­ware con­sist­ently pro­duces the crap­pi­est browsers.

    And please do not get me star­ted on *sliced* images.

  56. Yorkali said on: June 21st, 2008 at 7:14 am

    Root,

    I could not dis­agree with you more. It is appar­ent that you and I are locked into a cer­tain mod­al­ity of think­ing that I think will not break any­time soon. After ALL the points for and against that were made above this is quite apparent. 

    When any­one who devel­ops sites say “there is no such thing as *design* for a web­site I am con­vinced there is no con­vin­cing you.

  57. Root said on: June 21st, 2008 at 10:52 am

    What I meant — and I may not have expressed it well — is that the only way design can be imple­men­ted in a web site is in the CSS. So it seems a good place to start. I prefer to use the proper term which is style. Site styles or themes/skins are inter­change­able. And they need to be applied to one or more pages of con­tent. That con­tent may be in one or more tem­plates or lay­outs. And those lay­outs may also change or develop over time to reflect growing/evolving or addi­tional con­tent.

    And that con­tent is driven by the need to engage/inform the user com­munity in a way that is appro­pri­ate to the site and is struc­tured by the info and seo archi­tects and writ­ten by the hyper­text copy­writers. Er did I men­tion pho­toshop yet? 

    You are quite right. You will never con­vince me to go ass back­wards again. I did it once on a cor­por­ate build at the client’s demand nearly 10 years ago. Never again. 

    You have only got to look at a blog plat­form like Word­Press to see what I mean. Or visit the Zen Garden.

  58. Michael Web said on: June 21st, 2008 at 9:37 pm

    Really well said James!

  59. Alejandra Seo said on: June 21st, 2008 at 9:40 pm

    I am also slowly get­ting to grips with Pho­toshop for my site. I don’t see how any­one could get res­ults without it or a sim­ilar pack­age. I agree to you.

  60. Magda said on: June 22nd, 2008 at 8:36 am

    I’m still learn­ing pho­toshop, and I’m not sure whether I’ll ever be able to say that I know it well.

  61. James said on: June 23rd, 2008 at 3:38 am

    Root — you say the only way to impli­ment the design is to use CSS.  That’s fine, but it doesn’t mean you have to start there.

    There’s a whole design pro­cess that should take place before you even think about jump­ing into the CSS. 

    How do you think sites like Web Designer Wall or the shiny ‘Web 2.0’ stuff came about?  That’s all Photoshop’s influence.

  62. Yorkali said on: June 23rd, 2008 at 8:31 am

    very well said James, very well said. 

    To add to that. I think alot of developers/coders/designers includ­ing me at times, make the mis­take of using the pro­duc­tion tool (Photoshop,CSS,XHTML,etc) as the main, if not, the only place where the concept is visualized. 

    This leads to a lot of wasted cycles in the design pro­cess. I think we should focus more on sketch­ing with simple paper and pen­cil BEFORE we sat in front of the com­puter, or before we run to the myriad of web inspir­a­tion sites. 

    Ser­i­ously think­ing through what we want to communicate/sell for ourselves or our cli­ents using trusty “ana­log” paper would greatly reduce the time we spent futz­ing with our mice. I don’t know, just a thought.

  63. Ty said on: June 23rd, 2008 at 2:08 pm

    I read the ori­ginal post/article with some dis­in­terest…

    If you aren’t using Pho­toshop or a vec­tor design pro­gram you are a UI designer rather than a graphic or web lay­out designer.

    It’s com­par­ing apples tech­niques to oranges tech­niques I think.

    Just hack it out with a type­writer maybe, that’s as prim­it­ive as a lead #2. :)

  64. Rick said on: June 24th, 2008 at 5:38 am

    Root’s com­ment that CSS is the only way to imple­ment design is, of course, true… just as the only way to imple­ment the con­struc­tion of a build­ing is via bricks, mor­tar, and other such mater­i­als. But I think that it misses the point that before the build­ers arrive on-site they expect to know what they are sup­posed to be build­ing. They need to have the architect’s draw­ings to refer to. Sim­il­arly, before I start typ­ing out css I like to know what it is I’m aim­ing for. I want to have a design in mind, and that means that I have already done a good deal of design work before the CSS is applied. CSS is not a design tool.

    (Ah, the ‘T’ word again) 

    Inform­a­tion archi­tec­ture, for me, nor­mally begins as a series of lists in a sketch­book, before mov­ing to some­thing like Omni Out­liner; wire­frames start the same way (sketch­book), gen­er­ally pro­gress­ing to some­thing like Omni Graffle. All this is design work; it’s not graphic design, cer­tainly, but it’s vital pre­par­at­ory design. By the time I get to the xhtml that prep work means that I have the site’s IA skel­eton firmly in mind and the code will bet­ter for it. It also means that when I step into pho­toshop I’ll be fully aware of what jobs those graph­ics should be doing. 

    My point (and I’m start­ing to ramble a bit, so I’ll shut up in a sec) is that design for the web comes in many forms, even within a single pro­ject. IA is one form of design. Graph­ics is another. These are skills that come from dif­fer­ent dir­ec­tions but meet and need to com­ple­ment each other.*

    I see IA/wireframing as the prep work for (x)html, and graph­ics work as the prep work for CSS. Each provides an invalu­able blue­print for the next stage. Yes, you can prob­ably save your­self some time by skip­ping some of the design work before you jump into imple­ment­a­tion, but I think that it will come at the expense of some­thing… prob­ably either inform­a­tion clar­ity or visual elegance. 

    *I’d cer­tainly argue that the former is more import­ant than the later—but the lat­ter, if done well, can some­times help over­come the fail­ings of the former).

  65. Yorkali said on: June 24th, 2008 at 6:20 am

    Rick,

    that was p r i c e l e s s.…thank you. It could not have been bet­ter said.

  66. Yorkali said on: June 24th, 2008 at 8:53 am

    One more thing.…a former com­menter was dis­tilling web design, as I under­stand it, 

    Con­tent with Style applied. 

    “I prefer to use the proper term which is style. Site styles or themes/skins are inter­change­able. And they need to be applied to one or more pages of con­tent. That con­tent may be in one or more tem­plates or lay­outs. And those lay­outs may also change or develop over time to reflect growing/evolving or addi­tional con­tent.”

    Then today I saw this job post­ing from 37signals soli­cit­ing job applic­a­tions for a new role cre­ated on their team. Please read below: 

    We’re look­ing for a spe­cial designer who wants to come in and change our game. We’re look­ing to be rein­ven­ted visually. 

    The job would include com­pletely redesign­ing our pub­lic facing mar­ket­ing sites and being in charge of con­stantly evolving that pub­lic image. Help us bet­ter com­mu­nic­ate the bene­fits of

    our products. Think simple, but also think visual beauty. More imagery, more graph­ical, less plain text. 

    In many ways this is a creative/art dir­ector role, but also a “you’ll do the work too” role. So whatever you dream up you’ll also be design­ing and execut­ing. It’s a high pro­file pos­i­tion for us with lots of influ­ence across our com­pany and the industry. 

    More imagery, more graph­ical, less plain text.

    love that :)

  67. Root said on: June 24th, 2008 at 9:58 am

    LOL. You can bet the farm that the new 37 sig­nals designer is going to have to work within the frame­work of semantic markup. Eg he is going to be styl­ing con­tent. And pho­toshop jock­eys obvi­ously need not apply.

  68. BK said on: June 25th, 2008 at 12:34 pm

    Hm. Agree that there is no Messiah-tool, but aren’t we really talk­ing about design, not graphic design as in lim­it­ing creativity? 

    A web page has a pur­pose — the aes­thet­ics & looks of this is only a tiny part of the big picture. 

    Design without pur­pose is art. 

    (I loathe Adobe products. Corel does it just as nice, and way faster for me.)

  • Me

    Hello. My name is Mark Boulton. I’m a designer, an author, a speaker and I run a small design agency where we work with lovely cli­ents and pub­lish books as we go. This is my blog.

  • More of me

  • Publications

    Design­ing for the Web
    Start­ing from £19 + VAT for a PDF Down­load. £29 for a full col­our paperback.
  • Where I work

    Mark Boulton Design
    A small design stu­dio doing good things for nice clients.
    Five Simple Steps
    Pub­lish­ing easy to read design books.
  • See me speak

    Access­ib­il­ity 2.0
    Septem­ber 22nd, London.
    Drupal­con, Paris
    Septem­ber 1st — 5th, Paris.
    Web Dir­ec­tions South
    Octo­ber 6th, Sydney
    Build Con­fer­ence
    Novem­ber 5th, Belfast.
    Cam­bridge Geek Day
    Novem­ber 21st, Cambridge.
    Design­ing for the Web work­shops: Lon­don, Manchester & Glasgow
    Novem­ber & Decem­ber 2009
  • Copyright © 1999–2009 Mark Boulton. Made with an Apple Mac in Wales. Powered by WordPress and hosted by Media Temple.