ifoh designs: Information Foragers Of Hyperlinks & Designs

Just the other day I read an article that the good folks over at 37signals wrote about their lack of Photoshop use for designing sites. I’ll just let them explain this article for you to get up you up to speed:

When designing a UI we usually go right from a quick paper sketch to HTML/CSS. We skip the static Photoshop mockup.
- Taken from http://www.37signals.com/svn/posts/1061-why-we-skip-photoshop

It was a great article, one though I did not agree with completely, but insightful none the less, definitely worth a read.

If it’s on your screen it should work.

I am not exactly sure what “work” means in this case. The point of a mockup is to share a visual representation of the forthcoming project, without having to exhaust yourself with actual work. A blueprint, if you will. They are referencing how you cannot click a Photoshop mockup, and they are entirely right. The minute they start clicking, that is where you run into trouble. That is called the functionality behind your design, which can take a lot of time to develop, and can change quite drastically once user testing has begun (that of course assumes you are user testing).

Now, perhaps they are much more skilled in this trade than I, but I would like to think for a moment that I know a little. Most of their designs follow the same type of look and feel, which is absolutely acceptable, however for the everyday designer this not always the case. We are presented with completely new clients, with unique visions, and expectations at the start of a new project.

What if the client does not know what they want?

It would be great if we could avoid this type all together, but the fact of the matter is, we need to pay our bills. I find that it is much easier to work within this life cycle:

1. Receive Content
2. Thumbnail Sketch Layout
3. Design Layout in PS
4. HTML/CSS

We don’t always get the content immediately from the clients. You can work for the top design firm in the Nation, but you cannot tell me honestly that a client has never said:

We are still working on the content…

This is absolutely frustrating, and if you are in a comfortable enough position, you should rethink taking on this client. But alas, we do not have this luxury most of the time. Why am I going to write styles for content I am not sure even exists?

What is your role?

Sometimes clients need to have their hand held, and that is totally acceptable, when becoming new to the web. They might not know exactly what works, and what doesn’t, and that is where you come in to save the day! Taking charge and showing the client a design that really “wows” will set a nice precedent and enforce their confidence in your. It is also much easier to say to a client, “you will get x amount of comps, with x amount of reviews”. This type of approach will help you cover your bases in that you can always say “hey here is the email with your approval for this exact design”. When you are jumping straight into the markup, you almost lose that security factor, as if you are making changes every 2 minutes and asking for approval right after, which version was that again?

Once you have a solid comp decided upon, you can now sit down with the client after you have some initial markup done to go over functionality and more content specific concerns. By letting the client decide where every single element goes, you are setting yourself up for disaster. After all, who is the professional again?

Double Work…

They talk about a Photoshop mockup taking 3 days. Really? 24 hours to come up with a design for a client (if you are working 8 hour days)? I would certainly like to have a client like this, with endless pockets. In most cases 8 hours, including in that revisions, should suffice.

Your design looks a little…flat?

A commenter brought up a great point, about adding depth to your designs. This is done very easily in Photoshop with some gradients, or opacity effects and the same amount of effort is needed to turn that into CSS rules. Depending on the client and the project, a solid color based design can work quite nicely. Sometimes the, to borrow a phrase, “elegant simplicity” of a basic color blocked layout enhances the message. I happen to be a fan of their work, and think it works nicely for their brand, but I do not think it is the end-all-be-all answer to all my prayers, holy grail design!

Turn back, I think we’ve gone too far

What if every time Nike came up with a shoe design, instead of coming up with a comp, or model of it, they just went straight to the scissors and faux suede? How nice of a shoe do you think that would be? Whoops! Forgot to put the lace holes in there, let me just put them in then show it to you again. Whoops! Forgot the gel-inserts this time. Don’t worry, I will get it right this time.

A Photoshop comp helps with the discovery phase of new projects. It helps work out the kinks. Let the clients ask the questions based on the comp, before you dig yourself a hole.

Why I would skip Photoshop

I do have a few concerns with Photoshop, where content is concerned. One cannot easily create realistic content flow patterns like the HTML/CSS can. It would be nice if it could, and I think I read somewhere that they are working towards that in upcoming versions. It would be nice if they offered some simple HTML elements to replicate, but for now it is not of great concern for me.

If this method sounds like something you work well with, all the more power to you. I just can’t give it up just yet. It works for me, it works for my clients, so I guess Photoshop does actually work.

What do you think about their article? What about my opinion? Agree? Disagree? I am curious to find out your work flows and reasons for such.

• Posted at 11:55 am in web design
• Leave a comment