Live project checklist template

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">

<title>Web Designers Checklist : A Visual Designers Checklist for the Web</title>
    <meta name="description" content="A checklist for visual designers within a team setting where designers will share visual exploration with developers">
    <meta name="robots" content="all">

<link rel="icon" type="image/x-icon" href="/favicon.ico">

<link rel="stylesheet" href="https://roachhd.github.io/webdesignerschecklist/styles/0d5ec878.main.css"/>

<rect x="37.191" y="32.048" width="35.439" height="3.151"/>
              <path d="M26.044,43.288v7.874h7.876v-7.874H26.044z M27.224,49.97v-5.51h5.514v5.51H27.224z" class="cbox"/>
              <rect x="37.191" y="47.012" width="35.439" height="3.15"/>
              <rect x="37.191" y="61.359" width="35.439" height="3.15"/>
              <rect x="37.191" y="75.365" width="35.439" height="3.149"/>
              <path d="M26.044,28.324v7.875h7.876v-7.875H26.044z M27.224,35.006v-5.509h5.514v5.509H27.224z"class="cbox"/>
              <path d="M26.044,57.636v7.874h7.876v-7.874H26.044z M27.224,64.318v-5.511h5.514v5.511H27.224z" class="cbox"/>
              <path d="M26.044,71.641v7.874h7.876v-7.874H26.044z M27.224,78.322v-5.51h5.514v5.51H27.224z" class="cbox"/>
            </g>
          </svg>
        Visual Designers Checklist for the Web</h1>

<div class="scroll-arrow">
          <a href="#content">
            <span aria-hidden="true" class="visuallyhidden">Scroll Down</span>
            <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="icon-arrow" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" aria-labelledby="arrow-title" aria-describedby="arrow-desc" role="img">
              <title id="arrow-title">Down Arrow</title>
              <desc id="arrow-desc">An SVG icon indicating scroll direction.</desc>
              <g>
                <g>
                  <g>
                    <path d="M100,49.999C100,22.43,77.566,0,50,0C22.428,0,0,22.43,0,49.999C0,77.568,22.428,100,50,100     C77.566,100,100,77.568,100,49.999z M5.769,49.999C5.769,25.61,25.611,5.77,50,5.77S94.231,25.61,94.231,49.999     c0,24.39-19.843,44.231-44.231,44.231S5.769,74.389,5.769,49.999z"/>
                  </g>
                </g>
                <g>
                  <g>
                    <path d="M75.493,44.782c1.127-1.127,1.127-2.952,0-4.079c-1.127-1.126-2.952-1.126-4.079,0L50,62.121     L28.58,40.703c-1.126-1.126-2.952-1.126-4.079,0c-0.563,0.563-0.845,1.302-0.845,2.04c0,0.738,0.282,1.476,0.845,2.04     L47.96,68.238c1.127,1.127,2.953,1.127,4.079,0L75.493,44.782z"/>
                  </g>
                </g>
              </g>
            </svg>
          </a>
        </div>
      </header>

<main id="content" role="main">
        <section class="wrap">
          <div class="intro">
            <h2>
              <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="icon-info" x="0px" y="0px" width="99.08px" height="100.002px" viewBox="0 0 99.08 100.002" enable-background="new 0 0 99.08 100.002" xml:space="preserve" aria-labelledby="info-title" aria-describedby="info-desc" role="img">
                <title id="info-title">Information Icon</title>
                <desc id="info-desc">An SVG icon indicating additional information before users begin.</desc>
                <path d="M49.539,0C22.188-0.01,0.018,22.381,0,50.023c0.018,27.601,22.188,49.993,49.539,49.979  c27.344,0.014,49.518-22.378,49.541-49.979C99.057,22.381,76.883-0.01,49.539,0z M49.512,21.634c4.372,0,7.922,3.546,7.922,7.922  s-3.55,7.923-7.922,7.923c-4.38,0-7.927-3.547-7.927-7.923S45.132,21.634,49.512,21.634z M61.117,74.787H38.169v-3.922h3.342  c0.48,0,0.873-0.396,0.873-0.881V44.711c0-0.484-0.389-0.881-0.873-0.881h-3.342v-3.795h18.466v29.567  c0,0.696,0.396,1.263,0.881,1.263h3.602V74.787z"/>
              </svg>
              Before you Start
            </h2>

<p class="deck">These are merely suggestions for your workflow. Feel free to contribute on <a href="//github.com/grayghostvisuals/webdesignerschecklist">GitHub</a> 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 (<em>they won't uncheck on refresh</em>) where <a href="https://caniuse.com/#search=localstorage">localstorage</a> is supported.</p>
          </div>

<form action="/" id="wdc-form" data-persist="garlic" data-destroy="false" method="post">
            
            <ul class="design-list">
              <li class="list__head"><h3 class="list__title">External File Organization</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Consolidated Assets
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Named Files Appropriately
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Assets are Relative to Comp File
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  UI Elements Templated
                </label>
              </li>
            </ul>

<ul class="design-list">
              <li class="list__head"><h3 class="list__title">Internal File Organization</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Layers Named Appropriately & Semantically
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Organized Modules within Folders
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Deleted Unwanted Layers
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Globalized Common Elements
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Used Smart Objects (if Allowed)
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Included module states on separate layers and properly labeled
                </label>
                <p>(<em>i.e. Link Hovered, Window Scrolled</em>)</p>
              </li>
            </ul>

<ul class="design-list">
              <li class="list__head"><h3 class="list__title">Design Practices</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Color profile set as RGB
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Comp Contains Whole Pixel Values
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Created a Grid and Included Guides for Grid System
                </label>
                <p>(<em>also consider sharing <a href="//guideguide.me">guideguide</a> settings across teams</em>)</p>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Fallback Interactions for Hover Based Events
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Used Dropshadows Sparingly
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Used Licensed Icons/Photos
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Appropriate Favicons Created
                </label>
                <p>(<em>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</em>)</p>
              </li>
            </ul>

<ul class="design-list">
              <li class="list__head"><h3 class="list__title">Filters</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Overlays Are Appropriate and used Sparingly
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  CSS Support has been considered and researched
                </label>
              </li>
            </ul>

<ul class="design-list">
              <li class="list__head"><h3 class="list__title">Typography</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Web Font Kit &lt; 250k
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Font-sizes smaller than 14-16px render well and are hinted properly for the Web
                </label>
                <p>(<em><a href="//webfontspecimen.com">Web Font Specimen</a></em>)</p>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Licensed Fonts Made Available
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Unchecked Paragraph Hyphenation
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Documentation Outlining Typographic Scale/Styles
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Equivalent Web Fonts Listed
                </label>
                <p>(<em>If comp fonts are not available through a Web Font service</em>.)</p>
              </li>
            </ul>

<ul class="design-list">
              <li class="list__head"><h3 class="list__title">Images</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Shapes Aren't Stretched
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Masks Globalized
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Vectors Processed as Smart Objects
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Created Various Desired Resolutions
                </label>
                <p>(<em><a href="https://www.smashingmagazine.com/2014/05/12/picturefill-2-0-responsive-images-and-the-perfect-polyfill">Read More about Picturefill</a></em>)</p>
              </li>
            </ul>

<ul class="design-list">
              <li class="list__head"><h3 class="list__title">Vector</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Create Separate Artboards
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Combine Paths and Unite with Pathfinder
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Combine Strokes
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Avoided 3D Effects, Blurs, Blend Modes and Drop-
                Shadows
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Small Proportions Make Sense
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Exported and saved as SVG
                </label>
                <p>(<em><a href="https://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc">following these steps</a></em>)</p>
              </li>
            </ul>

<ul class="design-list">
              <li class="list__head"><h3 class="list__title">Before Exporting</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Proofread
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Compare Against Mockups/Wireframes
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Account for All Images
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Verified Browser Compatibility
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Consistency Check
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Packaged fonts as a .zip
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Clean up unused and nested layers
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Packaged comp as a .zip
                </label>
                <p>(<em>lowers the file size for developers to download</em>)</p>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Included Favicons
                </label>
                <p>(<em>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</em>)</p>
              </li>
            </ul>

<ul class="design-list">
              <li class="list__head"><h3 class="list__title">Exporting</h3></li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Save for Web & Devices
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Choose Progressive
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Conserve File Size
                </label>
              </li>
              <li>
                <label class="control checkbox">
                  <input type="checkbox">
                  <span class="control-indicator"></span>
                  Export as RGB Color Profile.
                </label>
              </li>
            </ul>

<footer>
          <p class="wrap">Thanks to <a href="https://photoshopetiquette.com">Dan Rose</a> for the inspiration, <a href="//garlicjs.org">Garlicjs</a> for the persistent checkboxes, <a href="//yeoman.io">Yeoman</a> for the tooling, Jardson A., Aaron Dodson & SuperAtic LABS for icons via <a href="https://thenounproject.com">The Noun Project</a> and <a href="https://edgewebfonts.adobe.com/fonts#/?class=sans-serif&recommendedFor=headings&weight=regular&width=regular&collection=source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9:all">Adobe Edge Webfonts</a> for Source Sans Pro.<br>Contribute on <a href="//github.com/grayghostvisuals/webdesignerschecklist">GitHub</a></p>
        </footer>
      </main>
    </div>

<a href="//github.com/grayghostvisuals/webdesignerschecklist" class="fork-ribbon"><span class="octicon octicon-repo-forked"></span> Fork on GitHub</a>

Modified http://roachhd.github.io/webdesignerschecklist/scripts/vendor/807c6308.modernizr.js to a secure url

Modified http://roachhd.github.io/webdesignerschecklist/scripts/4776dee8.vendor.js to a secure url

Modified http://roachhd.github.io/webdesignerschecklist/scripts/0b813030.main.js to a secure url

https://use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9:all.js

https://roachhd.github.io/webdesignerschecklist/scripts/vendor/807c6308.modernizr.js

https://roachhd.github.io/webdesignerschecklist/scripts/4776dee8.vendor.js

https://cdnjs.cloudflare.com/ajax/libs/garlic.js/1.2.2/garlic.min.js

https://roachhd.github.io/webdesignerschecklist/scripts/0b813030.main.js