Information Icon An SVG icon indicating additional information before users begin. Before you Start

These are merely suggestions for your workflow. Feel free to contribute on GitHub or make a fork and create your own unique workflow checklist. This list is meant for visual designers working within a team setting where visual comps and exploration will be shared with a developer. Checkboxes are persistent (they won't uncheck on refresh) where localstorage is supported.

  • External File Organization

  • Internal File Organization

  • (i.e. Link Hovered, Window Scrolled)

  • Design Practices

  • (also consider sharing guideguide settings across teams)

  • (Favicons appear in the tab of your browser in order to help identify. Favicons render in the browser tab at 16 x 16 and as large as 144 x 144 for apple icons)

  • Filters

  • Typography

  • (Web Font Specimen)

  • (If comp fonts are not available through a Web Font service.)

  • Images

  • (Read More about Picturefill)

  • Vector

  • (following these steps)

  • Before Exporting

  • (lowers the file size for developers to download)

  • (Favicons appear in the tab of your browser in order to help identify and add a touch of flare to a site. Favicons render in the browser tab at 16 x 16 and as large as 144 x 144 for apple icons)

  • Exporting