Write Design QA rubric / checklist

cassiemc commented 9 years ago

Discussed this with Ricardo. He is going to create a checklist by Friday, which we will be able to document in issue #8 .

I know @iamjessklein had the start of this at one point but we were unable to dig it out from the depths of Github...

iamjessklein commented 9 years ago

Sounds good. @vazquez This blogpost on Design QA might be helpful - I wrote it after we did the QA a few heartbeats back.

vazquez commented 9 years ago

UI QA Checklist

Cross-Browser

Displays & functions correctly in IE10
Displays & functions correctly in Firefox (latest 2)
Displays & functions correctly in Chrome (latest 2)
Displays & functions correctly in Safari (7+)
Displays & functions correctly on Mobile Safari (7+)
Displays & functions correctly on Mobile Chrome (latest)
Displays & functions correctly on Mobile Firefox (latest)

Content and Typography

The use of H1, H2, and H3 headings is appropriate
There are no outlier fonts
All screen prompts are specified in the correct screen font
All text is properly aligned
All text free from spelling and punctuation errors
Content has been placed consistently
Content is marked-up semantically
List styles are consistent
There are no broken links
Line height is appropriate
Letter-spacing is appropriate
Ensure all the content for respective words to be in lower and upper case
Copy is clear, concise, and meaningful

Images

Are all graphics properly aligned?
Are graphics being used the most efficient use of file size?
Are graphics optimized for quick downloads?
Does text wrap properly around pictures/graphics?
Is it visually consistent even without graphics?
Images have appropriate alt text
SVG assets are being used where possible
Favicon has been created and displays correctly

Forms and Instructions

Are all error messages text spelt correctly?
Are all micro-help text (i.e tooltip) spelt correctly?
Do forms have placeholder information?
Do forms have success states?
Are labels properly aligned?
Form elements span full width when in mobile layouts

Other UI Elements

Buttons contain border-radius
Buttons contain box-shadow
Buttons contain inset box-shadow
Button text is properly aligned
Buttons have a hover state
Buttons have an active state
Links have a hover state

cassiemc commented 9 years ago

Rewriting / ordering a bit of what Ricardo did above and adding checklist boxes so this can become a functional list in our process.

However, I suspect content here needs an update. @vazquez could you take a pass on this list to make it more accessible for all projects? So when you and @lovegushwa look at the brand elements template, you might revisit "other UI elements" as it pertains to Teach, Webmaker, Advocacy, etc.