Web Page Mockup Recommendations

When creating web page mockups in Adobe Illustrator for delivery to the web team, please keep the following requests in mind. These will aid in the conversion process to HTML/CSS.

  • Leave all guides or grid lines in the Illustrator file. These help the web team know where to place things and to see the margins and padding that you intend the page to have.
  • Flatten transparency where possible.
  • Limit the number of grays in the design. When the number of grays proliferates, it’s hard to know which one to use when styling something that’s not in the design — like borders for table cells, for example, or lines that separate items in a sidebar.
  • Flatten layered background images where possible.
  • Include rollover and focus states for links, buttons and menus. This can be done by creating a layer that you can toggle on and off to show the rollover states. Be sure to clearly label your layers.

Published on May 31, 2017 at 1:26:48 pm CDT. Last modified on May 04, 2018 at 1:34:12 pm CDT.