PART 1: TOP 10 REASONS WHY DEVELOPERS HATE YOUR DESIGNER GUTS.04 Dec 2010
It’s no secret designers and developers have been at each other since the distinction between the 2 was formed. It is time to put an end to this battle for pixel perfection vs. getting this site actually working in IE. If we are all shooting for the same goal lets stop acting like we’re on different teams.
Here are a few tips for you designers to make the developers life a little easier. I promise they’ll appreciate it and in return won’t ignore your request to “just shift it over 1 or 2 more pixels”
REASON 1: UNORGANISED FOLDER STRUCTURE AND FINAL_FINAL_V3 FILE NAMING
Your folders and files are the first impression a developer will get from the project. Having a whole bunch of folders named ‘final_v1’ through to ‘final_final_v12’ is a BIG no no! I understand the importance of keeping your work to refer back to so here is the best solution.
SAVE YOUR FILES IN FOLDERS LIKE THIS
- ASSETS: Use this folder for things like swatches, palettes and fonts
- CONCEPTS: Do whatever you like here (developers hate the word concept and will avoid it)
- DESIGN FILES: Only save files here that have been signed off!
- PREVIEW: Save JPEG previews of the files saved in your ‘Design Files’ folder
REASON 2: BAD FILE NAMING
Don’t make the poor developer have to open all your Photoshop files trying to figure out what’s what. Name your files in order of the main navigation. For example 01_home, 02a_aboutUs_aboutUs, 02b_aboutUs_meetTheTeam, and 03_contact.
REASON 3: MESSY LAYER STRUCTURE
Opening a design file with a million unorganised layers is the worst! Put your named layers into named folders and if you want to get really fancy start colour coding them. Also make sure you delete all unused layers so you don’t confuse anyone.
When designing a site to be styled using CSS, the basics start with typography, colours and spacing. The more accurate your design is the more accurate the build will be
REASON 4: INCONSISTENT TYPOGRAPHY
Select and stick to 1 body copy size and at the most 6 heading sizes (W3C specification only goes as far as H6). Make sure your type is set to pixels by going to Preferences > Units & Rulers and under the ‘Units’ heading change the ‘type’ drop down to pixels.
REASON 5: INCONSISTENT COLOURS
Create a colour swatch palette and stick to it. If you use a several different blues no one is going to know which is the correct one. I recommend saving your swatch pallet in your ‘assets’ folder for other people to load. When using Photoshop make good use of your preset manager, which is accessed through clicking the menu arrow in the top right of the swatches pallet. This will allow you to organise your pallet much more effectively than the normal window your swatches are found in.
REASON 6: INCONSISTENT SPACING AND POSITIONING
A common issue designers have with developers is elements not being in the right position. In the defence of developers sometimes designs jump around a bit too. You should be able to flick through you’re your design previews and notice that the only thing changing is the content and main navigation on states. If you are noticing elements shifting position you might want to review the design before giving it to the developer.
REASON 7: EXPECTING THE DEVELOPER TO READ YOUR MIND
Giving a developer an unfinished design and expecting them to be able to fill in the blanks or figure out the bits you missed is pretty slack. Be as thorough you can in providing everything they need. Leave no layer unturned. No button state undersigned.
REASON 8: NOT KNOWING WHAT YOU’RE TALKING ABOUT
In order to effectively communicate your designs you need to know how to speak ‘developer’. If you don’t know how to code you should at least learn what does what and how it does it. You know what its like when someone asks you for an animated JPEG, well developers find it equally frustrating (and sometimes funny) when you starting asking questions like “can this be done with an AJAX?”
REASON 9: CHANGING DESIGNS AFTER BUILD
The poor developer just spent their morning on your design and now you want to change it “just slightly”. A tiny change in Photoshop could be a big change in development so if it must be changed I recommend approaching the developer with caution (and a coffee/chocolate)
REASON 10: LOSING YOUR $#!+ WHEN IT DOESN’T LOOK RIGHT
You spent many long days and late nights getting your design to be pixel perfect and the first look you get makes you want rip your hair out. Take a deep breath because its not over, its just the start. You probably have a better eye for detail and will obviously notice things that they wont. Be positive about it and if anything is wrong or out of place calmly and politely run them through some things you’d like them to look at. This tool www.markup.io is awesome during the review process. Avoid long winded emails, face to face is always much better.
Designers are all about the front and developers are all about the back. Lets all meet in the middle.