Coding Your Website

Once your home page and inner pages designs are approved and finalized as Individual graphic elements (PSD files), they are transferred to the web development team that will code the design into live and functional multi-device web pages.

Transitioning from Web Design to Coding

After completing the graphic design phase of a new website, the design files created need to be coded. There are two primary languages used by browsers and search engines to be able to understand and properly present your pages: CSS and HTML. Other languages may be used for specific functionalities. JavaScript and Ajax are two common additional languages. “PSD to HTML” refers to the process of converting design files created in Adobe Photoshop to code, whether CSS, HTML, JavaScript or another language. Any other image editing software may be used instead of Photoshop, and the process would remain the same. When Photoshop is used, these design files are PSD files, hence “PSD to HTML.” There are four steps to this process:

  1. Designing the website in Photoshop, so that it looks exactly how the finished site should look
  2. Dividing the imagery in these PSD files with the slice tool
  3. Optimizing and exporting the sliced images for publication online
  4. Writing CSS and HTML that will properly display the images into the page layout

Designing your website in Photoshop initially, prior to coding, makes it easy to experiment and find the perfect design for your site.

Designing a website for mobile users? Read up on responsive web design.

Whats next?


Please enter your comment!
Please enter your name here