Skip to content

Instantly share code, notes, and snippets.

@roachhd

roachhd/index.html

Created December 12, 2014 07:15
Show Gist options
  • Save roachhd/7d551ec01d761e8567d9 to your computer and use it in GitHub Desktop.
Save roachhd/7d551ec01d761e8567d9 to your computer and use it in GitHub Desktop.
Download ZIP
Live project checklist template
Raw
index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//use.edgefonts.net">
<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">
<meta property="og:title" content="Web Designers Checklist : A Visual Designers Checklist for the Web">
<meta property="og:description" content="A checklist for visual designers within a team setting where designers will share visual exploration with developers">
<meta property="og:type" content="website">
<meta property="og:url" content="http://roachhd.github.io/project-start">
<meta property="og:image" content="http://webdesignerschecklist.com/images/634dff0f.og-logo.png">
<meta name="viewport" content="width=device-width, user-scalable=1, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no">
<!-- http://css-tricks.com/favicon-quiz -->
<!-- Windows Tile Favicons -->
<!-- <meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> -->
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- <link rel="apple-touch-icon" sizes="57x57" href="http://roachhd.github.io/webdesignerschecklist/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://roachhd.github.io/webdesignerschecklist/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://roachhd.github.io/webdesignerschecklist/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://roachhd.github.io/webdesignerschecklist/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://roachhd.github.io/webdesignerschecklist/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://roachhd.github.io/webdesignerschecklist/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://roachhd.github.io/webdesignerschecklist/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://roachhd.github.io/webdesignerschecklist/apple-touch-icon-152x152.png"> -->
<link rel="stylesheet" href="http://roachhd.github.io/webdesignerscheckliststyles/83d1f201.vendor.css"/>
<!--[if IE 8]>
<style>body { max-width:819.311px; margin: 0 auto; }</style>
<![endif]-->
<link rel="stylesheet" href="http://roachhd.github.io/webdesigners/checklistocticons/octicons.css">
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://roachhd.github.io/webdesignerschecklist/styles/0d5ec878.main.css"/>
<!--<![endif]-->
<style>
.fork-ribbon {
position: fixed;
top: 40px;
right: -120px;
z-index: 1;
border: 0;
background: #01CCD7;
width: 350px;
text-align: center;
-webkit-transform: rotate(45deg);
padding: 5px;
color: #160F29 !important;
}
.fork-ribbon:hover {
text-decoration: none;
}
</style>
<script src="//use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9:all.js"></script>
<script src="http://roachhd.github.io/webdesignerschecklist/scripts/vendor/807c6308.modernizr.js"></script>
</head>
<body>
<div class="container">
<header class="masthead">
<h1 class="masthead__title">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="icon-checklist" x="0px" y="0px" width="96px" height="100px" viewBox="0 0 96 100" enable-background="new 0 0 96 100" xml:space="preserve" aria-labelledby="ck-list-title" aria-describedby="ck-list-desc" role="img">
<title id="ck-list-title">Checklist</title>
<desc id="ck-list-desc">An SVG icon depicting a checklist</desc>
<g>
<path d="M81.902,11.084H18.089c-3.478,0-6.288,2.936-6.288,6.561V93.12c0,3.625,2.811,6.562,6.288,6.562h63.813 c3.477,0,6.29-2.938,6.29-6.562V17.645C88.192,14.021,85.379,11.084,81.902,11.084z M82.657,90.093c0,0,0.173,1.517-0.537,2.303 c-0.721,0.8-2.055,0.691-2.055,0.691l-60.709,0.032c0,0-0.856-0.013-1.509-0.762c-0.564-0.646-0.557-2.015-0.557-2.015 l0.022-70.429c0,0,0-1.043,0.611-1.6c0.659-0.602,1.612-0.653,1.612-0.653h60.721c0,0,1.151-0.032,1.689,0.519 c0.732,0.749,0.71,1.536,0.71,1.536V90.093z"/>
<g>
<path d="M55.722,2.298c0,1.392-1.254,2.519-2.799,2.519h-5.596c-1.546,0-2.799-1.127-2.799-2.519l0,0 c0-1.39,1.253-2.518,2.799-2.518h5.596C54.468-0.22,55.722,0.908,55.722,2.298L55.722,2.298z" style="fill: rgb(130, 233, 217);"/>
<path d="M62.113,7.748c0-1.458-0.134-3.888-1.324-3.888H39.243c-1.113,0-1.38,2.44-1.362,3.883L62.113,7.748z" style="fill: rgb(42, 223, 194);"/>
<path d="M67.307,12.798c0-2.084-0.191-5.556-1.891-5.556h-30.78c-1.592,0-1.972,3.488-1.947,5.549L67.307,12.798z" style="fill: rgb(89, 219, 199);"/>
</g>
<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="http://www.w3.org/2000/svg" xmlns:xlink="http://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="http://www.w3.org/2000/svg" xmlns:xlink="http://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="http://caniuse.com/#search=localstorage">localstorage</a> is supported.</p>
</div>
<form action="/" id="wdc-form" data-persist="garlic" data-destroy="false" method="post">
<!-- $File Org -->
<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>
<!-- $Internal File Org -->
<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>
<!-- $Design Practices -->
<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>
<!-- $Filters -->
<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>
<!-- $Type -->
<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>
<!-- $Imagery -->
<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="http://www.smashingmagazine.com/2014/05/12/picturefill-2-0-responsive-images-and-the-perfect-polyfill">Read More about Picturefill</a></em>)</p>
</li>
</ul>
<!-- $Vector -->
<!-- http://filamentgroup.com/lab/artifact-austin-svg-workflow -->
<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="http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc">following these steps</a></em>)</p>
</li>
</ul>
<!-- $Exporting Prep -->
<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>
<!-- $Exporting -->
<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>
<input type="reset" id="cklist-reset" value="Reset">
</form>
</section>
<footer>
<p class="wrap">Thanks to <a href="http://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="http://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>
<script src="http://roachhd.github.io/webdesignerschecklist/scripts/4776dee8.vendor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/garlic.js/1.2.2/garlic.min.js"></script>
<script src="http://roachhd.github.io/webdesignerschecklist/scripts/0b813030.main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment