Hey ya’ll photoshop-/color-/typo-addicted designers out there! Have you just finished that brand new awesome web design and just shipped it off to the web agency that will convert it into a website? Are you stoked on how awesome your design will look in a browser when you press the big green go-live button? (I’ve always wanted one of those buttons) Have you built up your customer’s expectations through the roof and said something like “Huell yeah! This will be the most awesome website of the entire Universe!!!”?
Do you want to know how the web developer will grade your work and how you can improve the end-result of the entire project and cut costs? Read on.
Background
As many of you know, when you convert a design into a web site, the developer needs to be able to separate almost everything in your design into pieces. Like show and hide things, merge stuff there and here and so on. This has to be done to be able to extract the graphical elements that the web developer will use in the markup/css. This is, for instance, one of the main reasons why web developers don’t like to get the design as .jpegs. Stop sending us .jpegs!
If the .psd (or whatever it is you’ve made your design in) is logically divided into grouped layers with descriptive names (such as header, footer, search form, btn-background) etc where you easily can show and hide groups and layers and swap between your two-column and one-column layout with just a click or two this can make a huge impact on the final result.
What can happen if i fail?
If you don’t succeed with this it can, for example, lead to the following unwanted things:
a) When most developers budget their work they reckon that the design is easy to work with. If you’ve made a poor job the developer will need to spend more time on converting your design which will increase the total cost of your project. If you’re on a tight schedule (which you most often are) the launch of the website will be postponed. Which in turn will lead to a disappointed customer.
b) The end result. How your design actually will look and behave like in a browser. If the end result differs to much from your design the customer will be disappointed.
c) Your reputation as web designer amongst web agencies. If web agencies think you know how to design for the web they’ll want to continue working with you. If not, they might seek help elsewhere. Every webdesigner should have common knowledge of how to build a website. If not you’re just guessing how to do things and people will start screaming “Fake! He’s a fake!” when they meet you out on the town on a friday-night.
I’ve come across a wide variety of designs and there’s a lot of examples of what you shouldn’t do.
Example #1
Sometimes you get a .psd where the layers has no structure or logic whatsoever. All layers have been named Layer 1, Layer 2 and so on and they haven’t even been placed in layered comps. That is just crazy and the web developer will rip his/her hair off trying to figure out where to find what and say “WTF? Has the designer gone bonkers?!”
Example #2
One other example is when you get this .psd with a lot of layered comps but the actual structure of the layers is all spread out. You can swap between different views by using the layered comps but as soon as you need to hide a layer or something you have no idea of where to look. This is also crazy. Don’t do this!
What should I do?
So we’ve talked a lot about how you shouldn’t do but you might say, “Well, how should I do?”
My personal opinion is that you should use your common sense. Ask yourself the question “How should I do this to make it easy to understand and easy to work with for others?” If you structure your layers into logical sections you won’t need layered comps. I don’t say you shouldn’t use them, there are a situations where they come-in-handy, but think of them as a supplement.
It should be mentioned that many designers does a great job and has great skills when it comes to do this.
If you have any other ideas or think I’m crazy, please comment!
/Simon
