Design to Code Conversion Workflow

Posted on 12. Dec, 2008 by Rick in Blog

After doing so many design conversion to XHTML / CSS, the workflow has gotten pretty systematic. Here you’ll find the overall structure on how this workflow goes for me and the guys.

1. Setup
   - Setup folder structure (as according to the standard structure for all sites we do. See the XiD CSS Framework article for more info)
   - Slice the layout comp and store in the images folder
   - Re-save the sliced PSD as a new version in VersionCue
2. Conversion
   - Setup HTML structure
   - Create the CSS structure and styles
3. Test in Browsers
4. Miscellaneous, site wide features
   - Necessary javascript if needed
   - Additional Features of project
5. IF JOOMLA
   - Convert template
   - Install in system (testing server usually)
   - Style core Joomla output
6. Final Review
   - Analyze final output
   - Check for validity (w3c HTML and CSS check)
   - Test in Browsers

Tags: code conversion