Interactive prototype checklist Screens Interactivity Code deduplication Screens Every screen the app needs should be navigable. All screens should be responsive for all devices. One example of each screen should be designed & functional. Implements a consistent brand & style. Uses consistently designed patterns & components. All text free from spelling and grammar errors. There’s no placeholder text or images on the website. Content has been placed consistently. Navigation is consistently placed. Shared page elements don’t shift from page to page. Interactivity Each possible interaction should perceptibly function. Everything that looks interactive should do something. Effectively uses Advanced CSS-only interactions or JavaScript to simulate functionality. Usability testing confirms all functionality exists & makes sense to users. Has appropriate visual feedback for all interactions. All buttons & links go to the expected screen. All forms are completely interactive and perform the expected behavior. All form fields perform as expected, including validation & error messages. Code deduplication Separates HTML chunks into reusable patterns. Uses modular CSS effectively. Effectively uses CSS classes to avoid CSS duplication. Effectively uses CSS variables to help maintainability. Separates CSS styles into reusable patterns. Separates CSS styles into different files for maintainability. Effectively uses Jekyll. Uses layouts, includes, loops, etc. to avoid writing the same code more than once. Effectively makes use of a pattern library. Each code piece is documented to help developers.
