I Design Pictures of Websites

I'm talking about a Photoshop document: layers both hidden and visible, smart objects, poorly rendered text and images. 

More often than not, the first thing that the client sees is an image of a website, framed inside of a browser to help along the idea that this image could one day be an actual website, but not yet. What we're at looking is made up of a bunch of pixels, not HTML or CSS. Interaction is limited. I can create a click-through as a trick illusion that by mimicks the functionality of the site. But pull back the door of the Aztec Tomb and it's just a predetermined set of images.

This whole magic show is almost entirely to appease clients and to get sign off on a design direction. When I'm working on my own projects I'm able to completely skip this step.

The browser, a true WISIWYG editor

If I'm working on a side project, I take a different approach. After sketching up some ideas or wireframes, I'll hop into Photoshop to make sure that the layout I have in mind will work. I'll quickly jump into markup and CSS and start playing with type. Setting the body text and headlines in code is great. It allows me to see what the type will actually look like on the site as well as use webfonts without needing to buy a desktop license.

Sure it's scrappy, and a little bit unpredictable, but it's been working well for me so far. The polished design doesn't come until the end of the process, but the site slowly begins to take shape over time.

Enter clients

So how does this work for clients? When I'm working on my own projects, I don't need sign off on designs, I am able to just jump into code after the design is realized. From there I can make and changes to the structure and layout as I go. When working with clients they will often want to see a few design directions and give feedback (which is also a really valuable part of the design process), but large structural changes are much harder to make once the site has been coded . 

Is this just where we are right now? I have a process that works for me, but is the issue about handling client expectations? How can we make this process work for clients? I've read many articles about doing your designs in code, but I never hear any mention of getting sign off from clients.

I know the model of photoshop → client approval → code is busted. I'm just not sure how to fix it. 

Does the client need to just trust us? 

This post isn't as much of a statement as it is a question. I'm really curious to hear what others have been doing and how people are adapting to new approaches. 

Comments

Ryan Munger November 03, 2011

I really like the idea of coming up with a semi high fidelity wireframe (something like this: http://imgur.com/Hyro2) with basic typography and layout in mind.

Once I have the homepage and possibly a few internal page templates, I will string them all together in the browser as a set of images that the client can click through to see how the site “works”.

After they have approved the layout and structure of this “wireframe prototype”, I will usually “design” (colors, graphics, etc) the wireframe a bit a Photoshop, then code out the rest/make final tweaks in the code.

For me the sign-off bit really comes in during the initial “wireframe prototype” stage where the client can get a really good feel for the way the content is presented through the layout.

Try to imagine it this way:

You are building a house for a couple. Do you show them the floor plan/build stages/etc? Or do you take a couple of requirements from them and show them the finished product after 3 months of hard work?

I think the former approach (keeping the client involved as much through the design/build process as possible) would be much less painless.

Just my 2 cents smile

Dave November 04, 2011

Thanks for your comment, Ryan!

I really like the idea of having the wireframe being approved and then keeping the client involved throughout the process. I’m used to having a wireframe approved and then the client not seeing anything until there’s a polished homepage design. Your process seems much more fluid.

One question:
Once you start coding, do you find it difficult to put together multiple design directions?

I find once I have the markup, I can style the site, but the design directions end up looking a bit similar because it’s the same HTML. I do appreciate being designing in Photoshop without thinking about the technical restrictions of what I’m creating.

Rick Kilgore November 30, 2011

I have been trying to find my phone for about 45 minutes and you service is not working.I even went as far as to buy you a 25 dollar cup of coffee. I rely on your service as i am a real ditz when it comes to loosing my phone. Please helpme, get the service back up, or tell me what the hell I amd doing wrong or no more coffee from me!

lindsey January 07, 2012

Once again, I lost my phone in my house. I have an old MAC and the app won’t work so I googled “find my phone” and there you were! Thanks a MILLION, you saved me time and money today.
Let me know if you’re ever coming to Seattle and I’ll give you a sweet deal on a room at my Pensione:)

Commenting is not available in this content type entry.