It’s About the Design Not the Tools

by Matt Ward

August 10, 2010 in design

I’m guessing that most of you have seen the recent article over on Smashing Magazine, entitled “In Defense of Photoshop,” in which Tom Giannattasio makes a case for the continued use of Photoshop as the primary application for web design. The article makes some interesting points about the creative process, and the even suggests that designing in the browser somehow creates a disconnect between the designer and his work.

I’m not so sure about this second point, though. I understand where Giannattasio is coming from, but I think the argument assumes a singular design methodology. It assumes that the designer needs to actually create the design as one, organic unit, much in the same way that an artist would create a painting. In fact, the article explicitly states that “Great design relies on an open dialogue between the artist and the medium.

Now that is an interesting statement, which really puts the article’s argument in perspective. The assumption that I see here is that effective design is an organic process, which brings the entire visual composition of the site to the forefront.

“So what?” you ask. Isn’t that what design is all about?

No. At least not entirely. Design is about making intentional and purposeful choices for framing content (as discussed here). Obviously, visual treatment plays a huge part in that, and as designers we pay a lot of attention to that part of the job – maybe even too much from time to time. But that’s not the entire purpose of design.

The most beautiful website in the world can fail miserably if it’s inaccessible and difficult to figure out for its users. Good web design makes content easy to understand and presents clear, usable navigation, all on top of being beautiful. By focusing too much on the Photoshop side of things, we are in danger of becoming too focused on the visuals.

Not that I think that this is what Giannattasio is advocating. I’m sure if you talked to him about it, he would agree about the importance of usability in design. I just think that raising Photoshop up as the defacto web design application automatically insinuates (whether intentionally or not) a certain predisposition towards ranking the visuals above the actual usability, and that’s always a dangerous line to walk.

The Tools Debate

The other interesting thing that we see from this article actually comes out most strongly in the comments, where there is a lot of discussion about the appropriateness of Photoshop as a web design application at all. One of the prevailing sentiments seems to be that we should use Fireworks instead. This position certainly has some merit, given that Fireworks was actually developed specifically for the creation of graphics on the web.

But, really, does it even matter in the end?

Personally, I don’t use Fireworks. I’ve played with it a few times but have never really had the time or opportunity needed to become comfortable with it. And honestly, I’m fine with that. So far, I’ve been able to do all of my work just fine using Photoshop for all my raster graphics.

But, that’s really not the point.

The point is that I don’t think it really matter what tools I use. When a client hires me to create a website, they’re not hiring me to make a website in Photoshop or Fireworks or Dreamweaver or Coda or any other application for that matter. They hire me to make the a well designed, usable website that helps them meet their overall objectives online. That’s it. And, as long as I accomplish those objectives within the allotted timeframe and budget, the tools I use are really just a matter of personal preference.

Turning to metaphor, it’s kind of like trucks. I live in a small town and, while I really don’t care for trucks one way or the other, (and hate driving them), many of the people I know love their trucks. I’ve also noticed that they tend to be extremely brand loyal. Some of them drive Fords and hate Chevys. Others drive Chevys and hate Fords.

To me, though, it seems like a pointless debate. When I need the use of a truck (thereby putting me in the role of the client), there are a few basic things that I care about. It needs to have four wheels, be able to haul whatever it is I need to haul, and not breakdown in the process. Beyond that, I really couldn’t care less what kind of truck it is. It just needs to work.

The same is true of our websites. It doesn’t matter how they are made. In the end, all that matters is that they work.

Making it Work

Of course, when I say that a site needs to work, I mean more than it just has to appear pretty in the browser. As already discussed, there are issues of usability to consider, and this has a huge impact on whether a site works properly or not. If it doesn’t, its like a really polished and detailed truck that only had one speed, or which only turns left. It might look nice, but when it comes to fulfilling its primary purpose, it’s totally useless.

Making it work is also a matter of standards and semantics. Building a site for standards is going to make it more cross-browser friendly, and better equipped to stand the test of time. Semantic code adds an increased level of logic to the document structure, and makes it more readable.

This is all important, and when I say that all that matters is that a site works, I am not pointing to the sort of “it just works” that encompasses poorly coded sites that render without any visual issues, but which are filled with under-the-hood nightmares. I’m talking about a beautiful, usable, well coded site that the designer or developer put together in whatever way works best for them.

A Man of Many Methods

To be quite honest, that approach is not only going to vary from designer to designer. It’s probably going to vary from project to project. Personally, I’ve used all kinds of different techniques and methodologies for the websites I’ve created. Sometimes, I will do exactly the sort of thing that Giannattasio advocates, opening up a new Photoshop document and mocking the whole thing up in a mass of layers, Smart Objects, blending modes, layer styles and so on. This method is always a lot of fun on the font end, though if I don’t watch myself it can turn into a bit of a nightmare when it comes to actually coding.

Other times, I’ll start a bit more organically, with a pencil and paper. I may print off some grids or get a blank sheet and just start sketching out layout idea or concepts. Truthfully, I probably don’t do this as much as I should, but I only really find it useful in certain kinds of situations – or sometimes when I’m struck by an idea but don’t have my computer nearby.

Recently, I’ve also done a few projects where I just skip the whole Photoshop stage and start building the site right in Coda. I’ll start with a basic HTML structure and then just start building and building. The basic structure will develop into a simple grey prototype, full of placeholders. Then, depending on what’s available to me, I’ll start pouring bits of content in or adding in graphical elements like backgrounds or icons.

I’m sure that I’ve used a slightly different methodology for every single site I’ve designed, because every single site is slightly different and requires a slightly different approach or toolset. It all depends on the context.

Choosing the Tools

To show you what I mean, let’s look at some examples. These aren’t my websites, but a really gorgeous and beautiful examples. Here’s how I would approach them.

The first website is for the FoundationSix web design firm.

FoundationSix

For me, this is exactly the kind of design that would start off in Photoshop, for a couple of different reasons that have to do with the graphically rich quality of the site. All the visuals are really integrated. Yes, there are clear and obvious divisions, but the textures, shadows and highlights all really rely upon each other, and so I would want the create the look of the site using the precise pixel control of Photoshop and then just slice things up as necessary.

In this case, the graphically rich nature of the site just lends itself to being built first in Photoshop, then sliced up and expertly coded after the fact.

Now, let’s look at our other example. This design is for a culture site called Executive Edits.

Executive Edits

This is a simple and minimal type of site, with very little in the way of extra graphics. There’s no way that I would mock up a site like this in Photoshop. To my way of thinking, it’s just not worth the effort, because there’s no major component that I could do in Photoshop that I couldn’t do with HTML and CSS while working in Coda. As such, why would I want to go to all the work of making a static, raster mockup, only to have to go back and recreate the entire thing later?

For me, it would be much faster and more efficient to jump right into the code.

Again, it’s all about context, and context can include a number of different things. Earlier this year, I wrote an article entitled “5 Things to Consider Before Designing Your Next Website,” in which I differentiated between mockups (static) and prototypes (interactive) and pointed to five different areas you might want to consider before deciding how to begin a project. These areas include:

  • the client
  • the purpose
  • the graphical requirements
  • the audience
  • yourself

I still think that these are excellent areas to consider, and that doing so can help you to determine which tools might be the best for a given web design project.

Conclusion

So, to wrap it all up, the point that I really want to drive home with this article is right there in the title. As designers, our primary focus needs to be on the design, not on the tools we use to get there. As long as, in the end, we produce beautiful, standards-compliant, usable, semantic websites, isn’t everything else just a matter of taste?

Don’t misunderstand me here, though. I’m not saying that you shouldn’t have passions or convictions about the tools you use. You should. And you should have reasons too. Just using the same old tools because that’s the way you’ve always done it probably isn’t the best way to approach things. Even I, wrapped up in Photoshop, am going to try to find an opportunity to build an entire site using Fireworks over the next few months.

Who knows, maybe once I get comfortable with it, I’ll even make the switch.

I’m also not saying that there’s anything wrong with Giannattasio’s article. I may not agree with it all, but it was a well written piece that certainly made waves in the community and sparked some really interesting discussion. As I noted in my last article, we need more of this kind of thing, so kudos to Giannattasio for having the courage to step out on the subject and defend a tool that he’s clearly passionate about, and with which he creates really beautiful work.

Just remember – the design comes first and the tools come second.

Powered by Shutterstock

About Matt Ward

  • Harry Ford

    Aug 10th

    Great article, I agree with you wholeheartedly here:

    “As long as, in the end, we produce beautiful, standards-compliant, usable, semantic websites, isn’t everything else just a matter of taste?”

    If I argued Photoshops corner every time somebody asked me why I use it I would never get any work done.

  • Ryan

    Aug 10th

    Both these articles make several valid points, but they also both ignore the situations of designers who work as part of a team. I work with flash developers, web developers, user experience architects, as well as other designers (who all work from PSDs). Such a team effort, with the lengthy approval process that comes with it, necessarily lends itself to a less flexible workflow. Although I am ultimately responsible for the outcome, there is a division of labor here that would make designing in the browser, or even in Illustrator, unnecessarily complicated. I definitely do agree in a more general sense though, that the tools are not as important as the concept and execution, but in my case using anything but Photoshop would require overhauling the habits of at least 10 other professionals. I have a hard time believing that Photoshop is going anywhere as a mock-up tool for web designers.

  • Ben Stephan

    Aug 10th

    It’s great to hear another opinion to the “In Defense of Photoshop” article Smashing Magazine wrote. When I read their article I felt as though I wasn’t getting both side of the story but, this article really compliments theirs.

    Another point this article makes is that while mocking up a design in photoshop, designers may become more focused on the components, aka pretty things, and not the overall goal of the website. Again, I agree but even more so, I think designer’s concentrate on the components more often than anything else and that’s why some of their designs fail. I am guilty of this too.

    Anyways, good article. Happy to see Photoshop standing the test of time.

  • TIM

    Aug 10th

    I agree with you some of my design start in photoshop and some start right in dreamweaver.

    For our clients I build prototypes and never provide a graphic mockup as I find it’s easier to go through the process with them able to see how functions and browsers affect the design.

    Nice article we are definitely like minded.

  • Ricardo Graça

    Aug 10th

    Nice article. I agree that in the end it doesn’t matter what tool you use, as long as the design meets its goals. Nowadays it seems designers only have one choice when it comes to computer tools, and that choice is some piece of software that comes out of adobe, preferabily running on top of apple hardware. This kind of market dominance is dangerous. I know what I’m talking about since I’m an architect and for a very long time Autocad has been the only tool you can seriously use for drafting. Even other software alternatives are products of autodesk, so they can charge whatever they want, and they charge a lot for software that is very unreliable and buggy. We need to have a choice, even if it means taking the time to learn something new.

  • Cavell

    Aug 10th

    I think part of the argument about which graphics program to use is a beginners one. Like you say it is better to use a program like Fireworks because it is made for web layouts. So if you are starting to build sites and are learning a graphics package Fireworks would be the best to invest time and effort into.
    Because I learnt print artworking/design before web design I can use a variety of programs. I use Illustrator for web design because I find it faster for drawing shapes and it has better control over text.
    But people these days are using everything from InDesign to Keynote and designing in the browser. I agree that it’s the end product that matters.

  • Jennifer Kyrnin

    Aug 10th

    What a great article. I did enjoy the Photoshop article on SM, but couldn’t put my finger on what bothered me about it. You hit it.

    I design sites in Photoshop, on paper, in Dreamweaver, and in straight HTML in Komodo Edit. As you said, it depends on the site.

    One thing I would argue is that sites that are “beautiful” but confusing or hard to use are NOT well designed. Websites are not art for art’s sake. There is a purpose behind them, and a good design makes that purpose accessible. The most beautiful sites are ones that are beautiful AND functional.

    Thanks again for a great article.

  • Vanderwolff

    Aug 11th

    The very fact that two such provocative, well-tempered and yes, useful-out-of-the-box articles could appear on this one site explains why Smashing Magazine is my default site when any design conundrums strike. Great perspectives; no filler.

  • crusher machine

    Aug 11th

    Yes, I have seen the recent article over on Smashing Magazine.

  • Andy Piddock

    Aug 11th

    Spot on.

    What’s important is not how we do it but what the customer wants and gets.

    They way I design depends on the job.

    If it’s a small simple static site I go straight to HTML and CSS.

    If the design is really visual I do a Photoshop mockup supplied as jpeg then tweak this with the client to get the look and feel right. Then cut and slice and build the markup.

    I also use Sitegrinder for the really complex layouts, again getting this right with the client in Photoshop then letting Sitegrinder do it’s magic. I then amend the outputed markup as required.

    I have in the past had graphic designers do the psd mockup but this always led to problems as they did not work through the process of converting the design to layout in their heads… so now I do all of the PSD design work myself thinking about how this will be converted to layout at every stage.

    At the end of the day it comes down to using the tools that you feel comfortable with to get the job done to the client’s satisfaction, on time and on budget.

  • grinding mill

    Aug 11th

    Photoshop is magical.

  • Rich

    Aug 11th

    I think an interesting point is where you showcase the Executive Edits site. You say that there is no way you would mock that up in Photoshop by virtue of it’s sparse design, and whereas that’s perfectly doable I think this brings up the crux of the “In Defense of Photoshop” article (for how I read the article). regardless of how the design of a site is structured, whether it’s packed to the rafters with bells and whistles or minimal to the point of being abstract, it ultimately does still need to be designed at some stage, and for this there really isn’t a better tool than Photoshop.

  • Jenn

    Aug 11th

    Agreed. Everyone has their own preferred method or perhaps are only able to use certain tools (e.g. budget, company policies, etc etc etc).

  • web design manchester

    Aug 11th

    Yep, it is all about the design, not about the tools. Budget and company policies are the most ones that affect a company’s way of doing things online.

  • Jeremy Carlson

    Aug 11th

    Excellent. I’ve been saying this to people for years. I wonder though if people who hire for development positions think this way. Do they see a resume that says Dreamweaver on it, something they might know of because that is what some people at the hiring company uses, and go “Hey, Dreamweaver!” Or do they look for HTML. I ask because the person filtering through resumes, online apps and such, doesn’t know a heck of a lot.

    Now, personally, I use NetBeans, Aptana, Dreamweaver…whatever the hell is handy on the computer I’m working on, so I just put HTML. But what about listing Photoshop? Would you put the program name or say something ridiculous like “Manipulates images for web” or something?

    In the point you are making, I agree 100%. But let’s say now the company is hiring a designer/developer and they have 2 resumes in front of them. One says Fireworks, and one says Photoshop. Everything else is equal. I have a feeling that they choose the Photoshop person because from my experience, that is what companies use. I actually only know of people using Fireworks from reading about them, not from actual colleagues. So, in that case, it might actually matter in what you say, not what you really use.

    Any thoughts on that?

  • breadwild

    Aug 13th

    Ever since PageMaker arrived on the scene in the mid 80′s, designers have been tempted to start with the tool and not their heads. As I have told my designers over the years, computers and software don’t design, any more than having a Steinway makes you a pianist. Computers just count from 0 to 1 really fast. We have a rule in our shop: approved pencil sketches before going anywhere near the computer.

    That said, when you do have your great idea fleshed out, great tools are key. A chef can’t work better with an inferior knife. However, one chef may prefer one brand and another chef the other brand. Point is, they are both good tools. But, they already knew what they were going to make.

  • Paul Biedermann

    Aug 13th

    Coming from a broad-based design background, I have long advocated that all design problems are fundamentally the same: bringing order and clarity to messages so the end-user can easily find the information they need and act on it. Basic communication.

    I don’t consider myself a “traditional” web designer, but I believe that the benefits of my traditional design experiences together with my strategic business skills have far greater impact on my clients’ projects than the software-flavor-of-the-day.

  • Michel

    Aug 13th

    I partly agree with you, and partly disagree…

    Actually, the discussion at the Smashing Mag article was very interesting to follow! Does it really matter what you tools you use? Is there a difference if you use Photoshop for web design, or Illustrator, or Fireworks?

    Web Designer Depot just published an article which brings the Fireworks vs. Photoshop topic, again — the tools that we use for the web graphic design, daily. And the tools we use do matter, indeed.

    Designers (most of them, it appears) are inclined towards the idea of using Photoshop for all tasks — web design, design for screen and for print, photo retouch, vector work, etc.

    If you are comfortable in Photoshop and can use it effectively for everything, that’s probably the best tool for you. However, Ps is often (mis)used just because “everyone uses Photoshop”, and not because it’s the right tool for a particular task.

    If you work for screen/web, it’s possible that you could do your work twice as fast in Fireworks (or even Illustrator), instead of Ps! Why? Fireworks is more flexible, it has powerful vector tools (something that Photoshop still lacks), good bitmap tools, live styles, superior gradients (extremely easy-to-edit), Pages and Master Pages (imagine sharing your header, nav, and footer graphic in 10 or 50 pages, in one file! hours of work saved!), it can export to PNG8+alpha/index (Ps cannot), better handling of objects — you don’t even need to open the Layer panel in Fireworks, when working, better compression/quality ratio when exporting, flexible rounded rectangles and other autoshapes that are scalable and easy-to-edit (and remain all-vector), ability to quickly export a clickable, “live” web prototype for approval/testing (Ps, being a more photo-editing oriented app, still cannot export such prototypes), etc.

    Of course, if your task is to create a high-res poster for print, your tool of choice will be probably Illustrator or Photoshop (or InDesign); if you plan a complex, large vector illustration, you’ll go with Illustrator; if you need to retouch/edit some big digital photos, you’ll go with Photoshop. And so on.

    For every task, there’s the right tool. And, IMHO, Fireworks is the best for web and screen output.

    Actually, today we do not have the perfect tool for Web design, but Fireworks is close. Illustrator (even if being more print-oriented app) is quite good, too. And I’d put Ps at the end of the list, even if Adobe thinks otherwise… :)

    One other thing — reader Jeremy Carlson brings another valid point — suppose you will be hiring a designer. Two candidates — one shows you a beautiful portfolio of sites, designed entirely in Fireworks; the other shows you another beautiful portfolio, but everything was designed in Photoshop. Which designer will you hire? Probably, most companies will hire the Photoshopper, because “that’s the industry standard” and “that’s what everyone uses” and “we are used to PSDs” — even if in some cases, the Ps is the wrong tool for the right job!

    So the tools do matter.

    My point is that there’s nothing wrong to discuss the tools of the industry! And to start outgrowing this “Photoshop is for design, Photoshop is for everything, PSD is the standard” statement, because this often limits us in our choices! There are other tools beside Photoshop. Some prefer Illustrator, other prefer Fireworks; some even design sites in InDesign!

    Fireworks might be “lurking in the shadows” a bit, so bringing some more light towards it might be the good thing to do. Or so I think…

  • Deborah Wood

    Aug 13th

    You left out one thing on your list, the BRAND of the client. What other marketing efforts does the site need to work with/compliment? A web site is an important component of the overall brand picture, it shouldn’t
    be something independent of all other marketing efforts. And good old fashioned sketching/planning BEFORE implementing any design whether you use Photoshop or not is crucial to the process also.

  • Lauren

    Aug 13th

    I’ve been using (believe it or not) Paint Shop Pro 7 for so many years now. I’ve never had access to Photoshop, but I am able to produce the same results without it.

  • Modularworkstations chennai

    Aug 13th

    Very clearly and useful explanation about designs and all..verynice i like it

  • Ayush Kumar

    Aug 14th

    Very valid points you made here!

    I havn’t started with web-designing yet but this article gives me the right direction to move in to make websites. Thank you!

  • nigeljohnwade

    Aug 14th

    Excellent points well made, I felt the Smashing article followed a little too close to the release of thier book about designing websites with photoshop for me not to take it with a pinch of marketing salt.

  • Skyrocket Labs

    Aug 14th

    Very excellent points. Personally, I prefer to build in the browser and can do so in tandem with designing the visuals in Fireworks. It’s a pretty efficient process for me. I prefer more minimalist approaches to web site design so I often spend little time creating images or even mock ups and sometimes just do it all in the Notepad++. Depends on the project.

    I always get a chuckle from those who argue Photoshop vs. Fireworks, Windows vs. Apple, Dreamweaver vs. Notepad++. Who cares? Use the tools that work for you to get the job done and follow the right standards for the end result.

  • Deko Web

    Aug 15th

    thank you for sharing, nice..

  • vuitton

    Aug 15th

    Agreed. Everyone has their own preferred method or perhaps are only able to use certain tools

  • Machin Web Design

    Aug 16th

    I just read a similar article over at webtuts too. Where has this debate sparked from? For years now I’ve had both Fireworks AND Photoshop open side by side, complimenting each other brilliantly. Why has it got to be one or the other?

  • Cool and cozy bathtubs

    Aug 17th

    Very Valid Points are said here..I agree with with..its a very wonderful post to secure lot of knowledge..Thanks for sharing..

  • novaabue

    Aug 17th

    i agree on this.its not always the tools but the design.it makes it more catchy and productive.take a look at this site and try it.it would be useful

    http://www.coachgc.com/graphics

  • Adlan Khalidi

    Aug 18th

    Yep. I agree with you. Apparently I’ve been using Illustrator for most of my mockup design. Even for my blog, I just sketch the layout and directly do the coding without focusing much on Photoshop.

  • crusher

    Sep 1st

    yeah, the design is best!

  • Jon Huot

    Sep 1st

    I totally agree with your point of view. I believe that, in order to create a unique and professional piece of work, designers must focus on the creative process only, without worrying about the tools they use or about the back end development side of things. I think that doing a great design and then worrying about transforming it in W3C valid, cross browser compatible, SEO optimized manual markup is very time consuming. This is why a designer should do what he/she knows best – create, and let other people worry about coding. Good article!

  • Discount Timberland uk

    Sep 4th

    the design is best! I are actually lurking and examining the feedback avidly so just desired to express my thanks for offering me with some quite very good examining materials.

  • Office Chairs Chennai

    Oct 3rd

    Its a nice article…Its quite interesting..Thanks for sharing

  • Carlton Barnette

    Apr 9th

    I agree completely, though on a different tip. When I first started I didn’t have fancy hardware or software like Photoshop for our design projects. But we did just fine. Whenever someone in the industry asked what we use, there was always a bit of awkwardness because we didn’t use the “industry standard” and we felt we’d be looked down on for that. It shouldn’t have mattered, because the end design and how it functions for the client is what matters (or should matter) most.

    Now I actually prefer Illustrator and occasionally Fireworks. We don’t really have a need for Dreamweaver or similar programs. We just consider the design and its goals to determine which software to work in or which tools to use. And of course, if the client needs specific file formats that goes into consideration as well.

    But even though it shouldn’t matter, it does. I’ve seen so many job postings and ads for clients needing a designer who is proficient in Dreamweaver or Photoshop. It’s not that the client has a website currently designed in one of those tools because most that I’ve seen doesn’t even have a website yet. But I think that clients hear the names of certain software and assume that they won’t get a good website if it’s not designed with these tools. That couldn’t be further from the truth, but try to tell them that and they’ll just assume you’re taking that position because you don’t have the level of skill that they’re looking for.

    Perhaps it’s client education we need to help others understand that the tools aren’t really what matters as long as the outcome of the design is spot on. Whether it’s Photoshop, Fireworks or something else not considered “industry standard,” the design should beat all.

  • Kole Calchera

    May 3rd

    I dugg some of you post as I cerebrated they were very helpful handy – Better to remain silent and be thought a fool than to speak out and remove all doubt. Abraham Lincoln 1809 1865

  • Web Design Manchester

    May 7th

    Hello there. Great examples and tips. I really loved them. Actually, the examples were the best ones that i have seen in a while. Thanks.

  • Debate popular-Julio

    Jul 27th

    In fact the tools are a supplement that has to do with the ease of use of the designer. Obviously the design mostly should not be thought by the designer but by what the customer needs and what the user intends for the site.

  • Leave a Comment

    Your email address will not be published. Required fields are marked *