If you’re coding PSD to HTML/CSS, you know that there’s often a disconnect between the person creating the designs and the development team coding them. With well organized and labeled files you can avoid many of the worst web development pitfalls.
By following these simple steps you can hand your PSD designs off to a good PSD to HTML team and they will come in back pixel-perfect, just like you imagined. This makes PSD to HTML easy for both you and the development team.
Some basic rules to follow:
1. One PSD file per page template or folders for each page in a single PSD file. What is a PSD?
2. Label all folders with the section of content on the page they refer to (Top navigation, Content, Footer, etc) Example
3. Separate folders for “on” and “off” states. Make sure to separate your on/off states into different folders so the development team can easily identify the different states in the design.
4. Provide a text file or .pdf that clearly outlines all functionality for the individual pages (this includes things like animations, slide transitions, etc.)
5. Be sure to design all animation states, javascript validation, button states (click, hover, off), modals and anything else you can think of. If you don’t see it in the design, we can’t see it to code it!
PSD to HTML Example
This is an example of a PSD single page with well organized folders for the content of the page. The organization of this is is clear and easy to follow.There are subfolders for each portion, clearly labeled.
Within the folder structure each page has its own subfolders that are all appropriately named. The elements for each group are within the subfolder and vector images are imported to the file when necessary (logos or other images). Make sure to show different on / off states. Rather than show multiple flat files for each state, they should be organized and named within the PSD in a way that the development team can understand.
Below is a good example of how files should be organized when you hand them off to your development team. You will see that there is 1 PSD per page with all of the necessary states for web development included in each PSD file.
Photoshop (PSD) File Structure
If you hand us well organize and labeled PSD files, our team will code the HTML/CSS and hand you back pixel perfect, markup!
Final Markup (HTML, CSS, JavaScript)
If you have questions about the process we would love to hear your thoughts in the comments!