How to Be a Designer that Developers Love
We're going to discuss
Actionable Items to Smooth Design to Development Transition
Provide links to slides and resources
Who is this guy?
- I am a developer
- I am not a designer
Why should I do the developers job?
- We're on the same team
- Improve code quality
- Reduce dev time and money
- Fewer design changes
- Make yourself desirable
Six Items from the Checklist for Design to Development Handoff
Body Copy Style Guide Example
2. Design for a Responsive Grid System
PSDs at the largest breakpoint screen size with grid system guides/overlays
Downloadable Bootstrap Grid System PSD
Bootstrap Grid PSD
3. Be Prepared for Copy to Grow
4. Design for Code Not Images
- Code driven buttons
- Gradient backgrounds
- Use SVGs
- Prepare clients for graceful degradation on older browsers
5. Clean Up Your PSD
- Remove unused layers
- Label layers
- Group layers (header, footer, content, etc.)
6. Use Custom Fonts Wisely
- No more than one custom font
- Make sure you have rights to the font
- Provide a link to the font
Developer Pre-Design Questions
Conferring with developers before beginning design can help avoid problems
Two items to cover:
Grid System and Fonts
Grid System
Do you have a preferred grid system?
I'd like to use this grid system.
Fonts
What fonts do we have available to us?
I'd like to use this font (and include a URL)
You Can Always Go Above and Beyond
Use the developer's preferred grid system
For the record, mine is Bootstrap 3
Provide placeholder images
For each CMS editable image, include a layer that has a placeholder image with the dimensions on it
Color code PSD layers
1. Provide a Style Guide for Body Copy
2. Design for a Responsive Grid System
3. Be Prepared for Copy to Grow
4. Design for Code Not Images
5. Clean Up Your PSD
6. Use Custom Fonts Wisely
