It’s About the Design Not the Tools

by Matt Ward

on 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