In web design, it can be tricky to decide how to present your layout to a client. There are some designers who believe you should skip Photoshop and go straight to coding. I disagree. At the very least you should sketch out your ideas with a pencil and pad before ever opening up a text editor. For me, my workflow is: sketch / Photoshop / code.
Simply because I’m really comfortable with the program. You could also use Fireworks, Illustrator, etc. It’s really whatever you find works the best for you. Regardless, here are some of the reasons I wouldn’t skip straight from sketch to code:
- Creative Flow - When I’m designing, I want the process to be as free-flowing as possible. There is nothing worse than trying to design, while at the same time fighting with CSS elements. This is why free-writing exercises were so popular amongst your English teachers growing up.
- Less Time Wasted - If you have to show a client a proof, and he/she doesn’t like it, then it’s back to the drawing board. If you’ve invested extra time to code everything, and you have to redesign all the CSS, that’s a bunch of time lost. Most of the time, your first proof will have to be tweaked, sometimes completely overhauled. Your much better off making those kinds of changes within a design program.
- Can’t Build A House Without A Foundation - You don’t see home builders putting up a house without a blueprint, do you? Why, then do web designers sometimes feel like they can skip most of the planning? The more preparation you do at the beginning of a project, the better the final result will be.
How To Present Your Design
About a month ago, Jacob Cass of Just Creative Design wrote a very nice article on the subject. With the help of the design community, he described 9 ways to broach the problem. The way that I presented to him is the use of layer comps to produce a PDF slideshow presentation. This tutorial will aim to show you how to create these presentations. It’s a fairly elegant solution to a common design problem.
How Layer Comps Work
Basically, layer comps act as a way to capture your design in different states, based on what layers you have visible. You can then capture these states, in different “layer comps” and export them as a PDF slideshow to present all your designs to your client. Be careful though, keep your options to a minimum. Often times, the more options you show, the more confusing you make things for the client. I always try to keep the options between 2-4.
I recently finished a website for the Chalet Fondue restaurant. I figured the design would make a perfect reference for this article.
The key to a good design mock-up with layer comps, is well-organized layers. Notice in the image below how everything is tucked away neatly in layer groups. This allows you to toggle on and off the visibility of the design elements quickly and easily.
First off, below are the three designs I’ll be using to make the slideshow.
They are only slightly different, but they should do the trick in helping to explain how to create a simple presentation slideshow. If you’d like to follow along, using the same PSD file, you can download it here.
Toggle on/off only the layer groups that you want to keep visible.
Open up the Layer Comps window, if it’s not already open, click Window-Layer Comps. Click on the small icon in that window that creates a New Layer Comp (circled in the image below. Rename the comp something applicable and make sure Visibility is checked.
Prepare your image for an alternate layer comp by toggling on/off the visibility of the layers you want to show. If you are following along, your layer palette would look like the one below.
Make a Layer Comp for your new visible layers, just like you did in step 2.
Repeat these steps, until you have three variations within your Layer Comp window. Below is the visible layers I used for comp 3, and the 3 comps within the Layer Comp window.
Now that we have our 3 variations on different layer comps, we are ready to make our slideshow. The good news is, this is made tremendously easy through one of Photoshop’s scripts. Click File-Scripts-Layer Comps to PDF. Choose a destination to save the file to, that is easy for you to remember. I almost always save things to the desktop first, and then file things later. Just makes my workflow simplier. You can play with the duration of the images and if you want the show to loop. When you have the settings in order, click Run.
That’s it, the slideshow has been created for you by the script! Now, you just need to find where you saved it, and give it a test run to make sure everything looks ok. Then it’s time to show the client. You can email it, upload it to a server, or show them it in person. This will give them a chance to pick and choose which elements they like and dislike. Then you can go back in, make some more tweaks, then begin coding. I love this approach, it makes a lot of sense to me!
Of course, their are many ways to present your design to your client. This is merely a suggestion, and how I often go about it. As with most things in the design field, you need to find what works best for you. What are your ideas? What have your experiences been?