Understanding Project Requirements

Published on: 22-Jun-2011 | In category: PSD to HTML Conversion Guide | 0 comments

Advertisement

  • Print Friendly and PDF
  • Print Friendly and PDF

In the last article, I covered some commonly used terms, to make you familiar with PSD to HTML conversion (if you are new to this field). This was required to make you familiar with commonly used terms.

Another important aspect before you dive into the code, is to understand the project requirements accurately, and clarifying any doubts before you start writing code.

Sometimes, design files provided by clients are self explanatory, and these include the required additional information that a programmer needs. However some times, programmer needs to clarify certain things from the client. It is always a good idea to educate your client on how to prepare a PSD for HTML, but you need to check the provided design file before continuing to code.

The following checklist covers most common points that needs clarification; however these may vary in design to design.

  1. Page Width: The typically used layout width is 960px or 980px. Sometimes designers create wider layouts, or add some effects like shadow that increases the page width. You must measure the width of layout and if you find that it will generate a horizontal scroll on page, you should update the client and confirm how you should proceed.
  2. Rollovers: The hyperlinks and navigation areas usually require a rollover effect. If it is not provided in the design file, you should ask the client if rollover effect is required.
  3. JavaScript Functionality: If you feel that any particular part requires JavaScript functionality like carousal, tabs, accordion, etc. you must clarify its functionality from client Any changes requested by client later can add to your coding efforts.
  4. Custom form elements: The form elements look different in almost all browsers. These days, designers commonly create custom form designs, so that it matches with design, and look identical in all browsers. But sometimes client want to use default form elements even if they are designed by the designer, because custom designs are sometime confusing for non technical users of website, and are not recommended by usability testers. Discuss it with your client if needed.
  5. Non system fonts: The designers have a tendency to use stylish fonts, to add beauty and creativity in the design. These designer fonts (commonly known as non system fonts) are not supported by browsers by default. There are many methods available to use these fonts in the webpage for example cufon, sifr, google fonts, @font-face, etc. You should inform your client about these options, and agree on a preferred method of implementing such fonts.
  6. Special effects on text or images: Sometime designers add special effect on text like drop shadow, glow, etc. Many of these effects can be created with use of CSS3, but it is not completely supported by browsers till date. As an alternate option, you can use images for such text. Discuss it with your client about both options, and agree on a preferred method to implement it.
  7. Anti-aliasing methods applied on text: Designers normally add anti-aliasing methods like smooth, crisp, etc. on text to make it look nicer in Photoshop. But this effect cannot be achieved by CSS. Discuss it with your client about the same, if required.
  8. Blending mode for layers: sometimes designers use blending modes like multiply, color burn, etc. to achieve a particular effect in Photoshop. If you need to use the layer with blending mode applied as a transparent image, it is normally not possible to achieve the same effect as shown in Photoshop. Discuss it with your client, if any such layer is found in design.
  9. Rasterized layers: Sometimes designers rasterize all layers, including text in Photoshop file. In such case you need to check if you can still use the layers comfortably. If not, you should ask your client for a proper PSD file. Even if everything is fine in PSD, it is obviously a tedious task to re-write all content in the PSD. In this case, you can use dummy text, and update the client about it.
  10. Hidden layers: Sometimes there are hidden layers of layer groups in the PSD files. You should check all layers and find if there are any hidden layers that you need to activate and code. If in doubt, you can obviously ask your client for the same.
  11. Misaligned areas in design: Sometimes new designers do not take care about the alignment of different sections properly. I have seen that even experienced designers leave some areas misaligned by few pixels, though by mistake. You can use guide lines to check the alignment of sections, and if any misaligned sections are found, you can ask the client about the same, to confirm whether it is intentional or a design mistake.
  12. Require use of transparent images in PNG-24 format: The transparent PNG images are not supported by IE6 and older browsers. Even with help of IE specific filter available to add this support, many effects cannot be recreated on web page. You should check the design for need of transparent images and possibilities of their implementation, and inform the client accordingly.
  13. CSS3 feature that is not supported in a browser: As CSS3 is gaining popularity, you still need to use browser specific prefixes to add most of the new properties. Also these new properties are not supported by IE till version 8. If your client wants you to use CSS3, or you suggest him the same to achieve a particular effect, it is a good practice to talk about it with your client.
  14. Non repeatable background image: Sometimes designers create beautiful effects in page backgrounds, but they forgot to ensure that these backgrounds can be repeated if screen resolution is bigger than the background image created. In this case background images look broken, and it impacts the overall beauty of website. If you find such background used in the design, you must ask your client what to do with the background.
  15. Videos, Google Map, Flash banner, etc.: Usually there are places created for Videos, Google Map, and Flash Banner etc. in the designs. Clarify with you client whether you need to add any functionality for these, or just use an placeholder image which can be replaced later.
  16. Any other issues: While checking PSD file, you may find any other issue that is not mentioned in the above list, or you may get confused about how to code a particular part. Make sure about what you are going to ask your client; otherwise you can lose your client’s confidence in you.

I hope you found this list useful; you can keep it as a quick checklist with you if required. If you feel I have missed any point in the list, please let me know so that I can update the list, and it will benefit others too.

© copyright 2011 XHTML-Lab.com, all rights reserved.