Process & Workflow

Consider all viewport sizes, not just “mobile, tablet, desktop” (aka iPhone, iPad, iMac) Learn More Begin designs by thinking about users on smaller screen first Learn More Involve the development team in the design process Learn More Create and follow a performance budget Learn More Avoid one-off design solutions Learn More

Animation & Effects

Ensure that animations improve the user experience by providing meaning to the user Learn More Effects that are triggered during the scroll event consider the needs of the user first and foremost Learn More

Fonts

Don’t exceed a total of three custom web fonts Learn More Ensure custom web fonts have been optimized for web use Learn More Ensure the proper font formats have been created for development, including WOFF 2.0 format Learn More Have web safe fallback fonts for each custom web font in use Learn More

Images

Use images sparingly and for maximum impact Learn More Ensure that image formats are appropriate for how they are being used Learn More Generate the correct image sizes have been created for each image Learn More Save images for web Learn More Optimize images Learn More

SVG

Use SVGs in place of images whenever appropriate Learn More Consider browser support Learn More Ensure SVGs don’t contain extraneous layers Learn More Simplify SVG paths during creation process Learn More Optimize SVGs Learn More

Perceived Performance

Provide instant feedback to the user where appropriate Learn More Use placeholder content to populate the page when no content is available Learn More