I have seen a lot of layouts performed along with different professional levels while working with markup. What is the finest way to arrange the design files just before they are provided to the developers? A small number of must-follow rules can assist you in saving time, money as well as energy.
1. Inscribe Thy Specs
This would sound like commandment to you! Thing is, if anything is present on your mind you would like to talk about, just share your opinion. The markup developers obviously are not mind-reader; though, a few developers can be more expert than the street magician. If a developer cannot read the mind of people, no chance is there of building career in the webdev. Moreover, only you may know what the block with different behavior options would look like. Thing is, if you do not state this, these functions at the developer’s own discretion would be implemented by the coders. After that this is just like trying luck at roulette. Lack of the specs multiplies number of modification and can cause the project delivery delay.
2. Do not Order the Stuffs
For instance, a lot of clients order the Twitter Bootstrap since they have heard about how overwhelming that is. It is like getting twelve additional buttons on mouse. It doesn’t mean that you could work faster if you have that. You may not begin clicking and pasting as well as scrolling quicker if you carry no information about all those buttons. Similar things may be applied to the CSS frameworks. If you know about the technical feature of the particular tool sets along with their benefits, you will definitely save yourself as well as your developer’s load of time. Still if you want to have it, the cruel truth would be that it will just waste your time and money, in addition to you would surely be frustrated at the end.
3. Explain necessary Links
You need to ensure that examples in the designs should look like what the text links, hover states and buttons. It is significant to mark all these layers and folders in the Photoshop. You should note that a variety of CSS3 effect replace underline on the hover and this is used to be very popular.
4. Send the Font files
Important question is whether you include the custom fonts in the designs or not. You need to send font files for getting them applied with the font-face. Be careful. If fonts are first-class, just send fonts packs licensed for web.
5. State specific Icons
Using icons as the vector graphics is very common these days. For example, when the icons are not positioned in specific sprite.png file, on the other hand these are embedded into custom font and used as SVG file. At first, icons should look grand on the screen. Secondly, page should load quicker since font icon weighs less than the icon stored in the sprite. You just have to design the icons by shapes in the Photoshop and import the vector icon from the Illustrator to Photoshop layout. After that just put these icons into any smart objects.
6. Recognize the Breakpoints
You have to find out that how many breakpoints you really need. No universal answer is there as it mainly depends on the designs and preferences. Thing is, if you use Zurb Foundation or Twitter Bootstrap, you may rely on framework functionality along with several slight adjustments completed by developer. Moreover, the designs for the smartphones (around 320 px) and the tablets (around 768 px) would be enough. Cost- effective and the most time-effective solution would be to give designs for desktop or smartphone. Designing mockups for large amount of screen sizes is needed. Markup developer should follow the design for every breakpoint. It would surely affect time & money.
7. Do save your designs in appropriate Format
A lot of freelancers and top agencies will assure you to have your artwork sliced from JPEG file. But thing is, if you offer your design in PSD, you will surely get the final files as soon as possible. Reason is very plain; files in the PNG and AI format can easily be converted into the PSD just before the coding begins. But if you think about JPEG files, then things will be even worse. The developers would require additional time for picking fonts, cleaning up several elements for avoiding compression artifacts and so on.
8. Be in contact
Developers may have some imperative questions before going on with code. A customer sometimes orders urgent projects and may disappear at just near the deadline. Consequently, something will get done wrong; deadline would be missed as well as the client would be unhappy. On the other hand, it would have gone effortlessly if developer has all the required answers in accurate time.
9. Keep in mind Font Size for the Retina Displays
Mistakes may happen commonly like the following: designer creates layout of 640 px width (two times larger than 320 px), uses standard font size like 12 px. If it is on a smartphone device, everything would be lessened 2 times and font size would be 6 px rather than 12 px. Text would be impracticable to read. The job could even more be complicated if the design would not add regular font size. Consequently, in design for the retina display, the least font size needs to be above 18 ‒ 20 px.
10. Do not choose Per-Page Delivery
Before transferring every page to the client, coder mainly sends that to QA department for testing that on every device as well as in every browser. Rather than fixing the bugs once, QA team runs their tests each day. If any updates are there from the clients after first page gets delivered, work on following pages would be postponed. This takes around 20% extra time to finish a project along with apiece page delivery.
About the Author: The author of the blog is the leader of the html development at psddesigntohtml.com. With more than 7 years of experience in the web development and psd to html conversion, she introduces fresh technologies to improve the site formation process as well as guarantee the finest quality product for every customer.