Building HTML From Illustrator or Photoshop

If graphic designers supply you artwork in Illustrator or Photoshop you need to make these basic checks before writing HTML.

  • Ask for a layout that shows the most irregular layout of content.
    • Very short and very long menu items.
    • When there are lists of items, make some items very long and others very short.
Designers like a clean layout but an ugly layout will actually be more usable
  • Check all fonts are available at Google fonts, Edge fonts or licensed. Licensed fonts needs to come as WOFF and EOT formats.
  • Items that are on top of each other or overlap must be separate layers.
  • All blank space must be transparent.
  • All images that are not square and filled with a fixed colour should be in a Photoshop layer that is transparent.
  • Guidelines should be set up in accordance with standards. We prefer the Foundation grid.

You need to make these checks after writing HTML:

  • Make sure all text in any section had bold, links and bullet points and these are styled correctly.
  • Add images to all sections that could have them covering left indented, right indented and images below. Also define whether there are captions.
  • Make sure a Photoshop overlay has been added over a browser view of the page and items line up correctly.

Making these checks up front will save a lot of time when building HTML.