the photoshop code

May 13 | 2014

for me as a communication designer, web design is one of many areas I deal with on a regular basis. Even though I have a bit of a geeky side in me, I would not consider myself as an extraordinary web coder/developer. I am capable to get things done in order keep my own site up and running and I also know what a coder is/should be capable of. That said, I’d like to focus on usability and design and let someone else do the coding work. Many designers use their favorite Adobe application such as Photoshop to create their web site mockups. Complaints about the web sites usually come from clients who don’t understand how the web works, but such things however are explicable and most will understand the matter. One would never expect such lack of knowledge from a coder, but as unbelievable as it sounds, it does happen. Because many designers aren’t tech savvy, it won’t ring any alarm bells, as they assume the coder knows what he/she’s doing. That said, it’s quite important that a designer knows enough so they can find clues early enough before getting screwed over. It should be assumed that a coder is able to create a CSS layout roughly based on the JPG/PNG mockup he/she got from the designer, using sliced and optimized graphics to be implemented. Whether it’s coded from scratch or tweaking an existing template doesn’t matter as long as the site serves its purpose and fulfills the quality standards of clean code, good usability and professional design.

If a designer is told to keep making endless layout changes, replacing placeholder content with real content in Photoshop and asked to hand over the source file, it indicates that the so called “coder” is generating HTML/CSS from the file itself with just one click. Apart from the fact that the Photoshop-generated code is nasty, the designer could easily have done it themselves, yet the “coder” being paid the same or more to click those few buttons. If  there are any minor layout changes to be made , it has to be done within the CSS file itself, not in Photoshop. The reason for this is simple: Graphic software and each browser render images, font sizes and colors differently, so no matter how accurate the photoshop file, the actual web site will never be 1:1. Also, one must keep in mind that your layout and the content are two separate things. The web layout (if coded properly) is kept as a template on a server, affecting the the design globally, while content management system allows the client, or whoever in charge to fill the web site with actual content such as images, text etc… It is not the designers job to do such things in Photoshop.

web design and photoshop | design by pxlgirl

no new insights yet

share yours...

* required | ** required and kept in secret, promise!