Have you ever been delivered a website coded from your design that stood nowhere close to what you were expecting?
If yes, Welcome to the gang and if no, well! Prevention is always better than Cure.
We all have a case of OCD when it comes to getting our PSD developed precisely the way we had thought of. But then, what goes wrong?
And before we get around to playing the blame game, we need to ensure that everything is correct at our end. Now, when it comes to doing everything the right way, there couldn’t be a better person to look up to other than Monica Geller from Friends.
Were she to slip into your shoes, here’s what she’d do: Make a checklist of everything that is important and then keep ticking off the list while cross-checking it with the PSD file.
So… let’s begin!
And here’s what she’d know about everything mentioned in the checklist.
1.Fonts
- Browser Compatible – The font format used everywhere in the design must be browser compatible. You can conduct a compatibility test using Fontsquirrel or Transfonter.
- Editable Text – Every piece of text on the website should be editable so that it’s easier for CSS developers to apply CSS properties.
- Font Sizing – Font sizing should be done using pixel and not points.
- Font Files Submission – The font files should be submitted along with the design files if they are paid.
2. Layers
- Separation of layers – The layers of all elements should be shown separately in the PSD so that the elements are used for development without the need for modification.
But an element with more than one interactive component should have all layers of that element separately in the PSD file i.e. hover effect as well as click functionality on same element.
- Merging of layers – Do not merge different component layer into a single one if they need to be developed separately. Layers that won’t require further modification/usage from the developer end should be merged.
- Appropriate naming of layers – Layers must be named in accordance to what they are going to be developed into, i.e. a layer for a slider must be named as ‘Slider’ instead of 1,2,3…
It would be better if it is kept in a separate folder if possible so that it is easy to surf through subfolders over one single folder containing every layer named numerically instead of the right names.
- Remove hidden layers – There are instances when the developer implements unwanted components on the website that weren’t mandatory in the first place and this is majorly because there were hidden layers or components in the PSD that weren’t removed first.
3. Layout Structure
- Framework friendly design – If the website requires a CSS framework compatibility like Bootstrap, then it must be ensured that the components fit well into the CSS grid. When the components aren’t well fit into the grid, then the developers would have to make changes to the design.
- Retina ready graphics – Most websites are being prepared retina ready nowadays and so when a design is created, the images need to be smart objects that do not pixelate when expanded more on different retina devices
- Mandatory Guides – The extra guides that are provided for the smaller components must be removed since they don’t particularly require a guide for smaller components.
- Responsive design – If there’s a need for responsive design then that must be submitted with the instructions in a different design file.
- Optimized images – Images must be optimized beforehand since they provide the size and speed of the page eventually affecting the quality of the delivered website.
On that note, the next thing that you could learn from Monica is that while she thrives to be organized, she would also look for the most convenient way to stay organized.
So, to use the most convenient way to put your ideas crystal clear across to the developers, you should make use of Zeplin collaboration tool.
Zeplin
- No messing up of layers
- Guideline page with all colors and fonts
- Automatic adjustment of assets according to platform
- Slack Integration
How convenient is that!
Conclusion:
Now, getting a web design coded the way you wanted, isn’t a child’s game. However, ticking off the above checklist will ensure that there aren’t any mistakes from your end that might confuse the developer.
The easier you make the design understandable for the developer, the lesser would be the scope for disappointment.
So, are you all set to Monica your way through preparing a coder friendly PSD?
Latest posts by Nick Patel (see all)
- WooCommerce 3.3 & The Main Highlights to Watch - January 31, 2024
- ReactJS and The Future of Web Development - December 12, 2023
- This X’mas- Don’t Work, Get Your Work Done - First 20 Quality Projects - November 30, 2023