Webby Monks

The Blog

Digital agencies' best practices about modern web development, digital and inbound marketing.

A Coder Friendly PSD Preparation the ‘Monica Geller’ Way

Pixel-perfect-psd-fles-creation

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!
PSD-File-Formatting-Checklist

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?

The following two tabs change content below.
Nick Patel
Nick is a Tech Monk working as a Marketing Head at WebbyMonks. He loves to explore cutting edge technology and share his write-ups through this blog. An avid learner, WordPress lover, passionate technology enthusiasts, and interested in everything tech. While not writing for technology you can find him fishing, shooting with camera, and brewing more filter coffee. On a lighter note, he is here to learn, explore, and overcome technology while falling in love with the tiny nonsense of daily life.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get your One time On-Page SEO with Monks

WCAG

Monks are expert in thorough SEO practices. Simply fill up the below form to optimize with us and get maximum results on page performance.

Thank you

We use cookies to improve your online experience and the service we offer. If you continue to use this site, we’ll assume that you’re happy to receive all cookies. Read our privacy and cookie policy