Photoshop Practices for Responsive Design and Rapid Development
This post reviews general guidelines for graphic designers when setting up Photoshop files to hand off to web developers. Use these guidelines on your next web project to ensure responsive web design and a fast development process.
- Provide style guides for the elements used throughout your designs.
- Colors (with hex codes)
- Fonts
- Styles for headings, body copy, and bulleted lists
- Link and button styles
- Photoshop file organization
- Organize layers into groups with names that describe the element of the design.
- Create larger groups to organize smaller groups by section (Example: Header, Hero, Main Content, Footer).
- Represent hover states, rollover states, and/or interactions in the Photoshop file.
- Show grid columns with guidelines.
- Settings
- So font sizes can be matched exactly, use pixels instead of points when defining size.
- Resolution should be 72 PPI.
- Make the dimensions of your Photoshop document match the desired maximum width on a desktop display. Of course, this is constantly changing, but somewhere between 1200px to 1400px is a safe average.
- Make the dimensions of your mobile designs match the smallest mobile breakpoint desired. This is also constantly changing, but if you design for the smaller end of mobile devices rather than the larger, layouts will not break when developers use the dimensions and spacing from your designs.
- Images
- Place all images as smart objects.
- Place the full resolution images so developers can optimize images from the originals – this is especially important for JPEG files.
- Animations
- Use GIF files for animations, if possible.
- In order to give the developers access to linked assets (fonts, images), package the assets when you send designs.
Ready to start a project?
