Thursday, June 16, 2016

UI Feature Checklist

The UI feature Checklist provides a list of functionality that may be added to a site or application. This checklist is great to review during a project to determine if any key features where missed and get ideas for future enhancements.

Feature Example
Setup
Create a beta site and production site
Review the UI/UX Checklist http://www.desaraev.com/2016/06/uiux-checklist.html#top
Pattern Library
Sitemap
Content Management System
Blogger
Wordpress
Magento
Joomla
Drupal
Liferay
Framework
Polymer
Bootstrap
99Lime
Vaadin
CMS Assets
Pre-processor
SASS/SCSS Tools: Prepros/Compass
HAML/LESS
HTML5 Layout
<header>
<nav >
<section >
<article >
self-contained article
<aside >
<footer >
<details >
additional details
<summary >
Defines a heading for the details
HTML5 Elements
<figcaption >
Figure Caption
<figure >
<main >
main content
<mark >
marked or highlighted text
<time >
Media
Video
Audio
Transcript
Animations
eBook
APIs
Geolocation
Drag and Drop
Local storage
Messages
<noscript>Sorry, your browser does not support JavaScript!</noscript>
Warning
Success
JavaScript Notifications Before leaving a page
Error
Information
Responsive message
Elements
<abbr>
Abbreviations
<address>
</address>
Address
<cite>
citation
Characters
© © Copyright
Attributes
Sprites Can be automated with SASS
Create variables Great for colors that may change
html lang="en-US" Important for accessibility/search engines
img alt="" Important for accessibility/search engines
Tags
hr Separate content

Meta Data

Meta data is in the head of html and is not displayed.

title title of page
keywords
description
author
character
<meta charset="UTF-8">
Microformats/Microdata
Resource Microformats
Schema
Navigation
Primary Navigation Top/Left/Right
Dropdowns DO NOT USE jQuery or Hover ONLY
Secondary Aside, sidebar, under a horizontal nav, toggle from side nav
Pagination
Back to Top
Keyboard only cheatsheet
Breadcrumbs
Bookmark
<h2 id="tips"><a href="#tips">
Lists
Add type attribute (numbers) type="1"
Add type attribute (uppercase letters) type="A"
Add type attribute (lowercase letters) type="a"
Add type attribute (uppercase roman numbers) type="I"
Add type attribute (lowercase roman numbers) type="i"
desclist Description lists
<dl>  <dt> term <dd> description
Remove list style
Tool tips
Help documentation
Form descriptions
Title tags
Hover/focus help text
Fonts
Web Fonts
Glyphicons
Font Awesome
Google Fonts
Background/ BG Images
Backstretch (JS)
CSS3 Bg Image stretch
Colors
Adobe Kuler
Noise Texture Generator
Subtle Patterns
Paletton
Social Media Sharing
Facebook
Twitter
Reddit
Pinterest
Dzone
Auto posting
Delicious
Repost to a blogger/tumblr/wordpress page
IFTTT integration
Comments
Gravatar Integration
Disquis
RSS
Email Subscription
Feedly
Feedburner
Email Newsletter
Link
MailChimp
Constant Contact
MyEmma
Affiliates
Links
Alternate Stylesheets
Extra Themes
Projection
Print
Responsive
Tables
Responsive
Final Review
Clean up excess or hidden code Can be done with preprocessors
Minify Code/Create Sprites out of common icons/images Can be done with preprocessors
Responsive testing
Browser Testing
Mobile testing
Integrate Analytics
Test Readability
Eye Tracking Study
GTmetrix Speed test
W3C Validator
Resources for Inspiration
GitHub
Codepen
Breadcrumbs
Smashing Magazine
w3 Accessibility

Note: This checklist only includes elements that I might overlook and tasks that I am capable of on my own. It is not a comprehensive checklist for application development.

My Photo
Senior UI/UX web designer. Adventurist and certified Yoga / Barre Instructor. Love aviation, books, and travel. More: References About

No comments: