In all the years of PSD to HTML/CSS & CMS Implementations we have found ourselves entangled in some serious back & forths.
Therefore, we have decided to compile a little guide on how you should submit assets for your project with us. Some things outlined in here may sound familiar and some of other not, but this is in the spirit of making things smoother for both you and us. Ultimately this will contribute to a better project experience in whole.
Assets we need from you
- PSD File / Illustrator File / Sketch File / Fireworks PNG for all the pages
- Any 3rd part paid script or plugin to be used
- Fonts to be used (or link to, or embed code)
- Specifications document (PDF/DOC/TXT/Notes above an JPG Export of each screen)
- UI Kit Layered file
The layered files
Before submitting your Layered File (PSD/PNG/Sketch/YouNameIt), we encourage you to get rid of any elements you do not want included in the final result for your HTML/CSS/JS code. If we found Hidden layers without an explanation whether they should be implemented or not we won't code them since they are not visible. We encourage all designers and clients to follow the basic rules from Ps Etiquette which help a lot to organise the layers and folders inside each PSD File. These are for Photoshop files but the philosophy can be applied to others as well.
If your layered files contain nasty elements, hidden unused layers that will need to be coded, 10x layers with "Layer 540 Copy 3" naming styles this will only make our review work harder and our coding process harder which will result in more extra hours of work that may also result in delays to your project delivery.
Third party scripts
We use one or two sliders, one or two accordions by default. If you, for any reason, want a particular third party script with a certain behaviour or which could be different from our standard plugins for each feature (paid or free) please indicate which plugin should we use. If you don't let us know beforehand that we should use a particular plugin to craft a behaviour we will use whichever we use as standard and this may not be want you wanted. In the spirit of economising back & forth, just let us know beforehand. In the case you don't include a link or reference and after we implemented a script you remind that you wanted other script this might cause additional fees to be applied to your project because of out of the original scope requests.
Fonts used in the design
In order to include the same fonts you used to craft your headings, paragraphs and other typographic element in your design we will need you to provide the Font Files for us to generate the proper assets to be loaded in all the browsers. If you are using a web font such as Google Fonts or TypeKit we will need you to provide access credentials or the link to the font that we should use. In the case you use TypeKit please include both "localhost" and "http://demos.pixel2html.com" (without quotes) domains as authorised and provide the script using a text file attached in the project or using a secret gist.
In case of CMS Implementations, it's always useful to have a document or notes above a jpeg export on which parts of the site would need to be managed using the CMS Backend functionalities and what's expected to be editable using the CMS. Remember that if you don't include a specification we will understand that is not part of the work we need to do and if this comes up later as a request it might be billed as an extra.
Any request not stated in the Notes area or in a specifications document won't be considered part of the scope of work for any project therefore will not be a valid point of claim. Therefore the importance of outlining the full scope of your request written in text to serve as a proof of request.
What's an UI Kit? It consists of a layered editable file containing all the active, hover, normal, and pressed states of the elements in your design. A great example of this is the Flat UI Kit combo, in here you can find a set of assets. You may be asking yourself, why is this so important? While crafting the CSS if you reuse one item a lot of times it's better to have them all in one place with all their states needed in order to properly code them as you present it on that UI Kit and be aware of the different CSS transformations they should have if interacted with by the user.
And that's all we need from you! It might look like a lot of information to process the first time but it will ensure that the project has all the details we need to code it properly.
Additional useful notes
Retina Assets: If you select the "Optimised for Retina Display" option within our order form, you should provide us with HighDPI assets in order to slice this. What's the best what do do this? You could either use SVG Elements or double the pixel density of your assets if they are bitmap generated. There are a lot of awesome articles around on how to design for Retina Displays out there. To learn more about this, you can check this articles: Designing for Retina Part 1 & Part 2.
Do you have any doubts before submitting your project? Just contact us, we will be delighted to answer and clarify any questions you might have.