UI Wireframe Checklist
Use this high-level list to help you tighten up your final designs.
Page Layout
Pay close attention to the space around elements like copy, buttons, images, icons, etc. Is there even spacing around elements? Are all elements properly aligned? Is there enough space between elements? Do I need more to account for finger taps? Will a finger tap accidentally activate two elements? Is the spacing consistent from screen to screen? Line Height - Space Between Lines of Text Letter Spacing - Space Between Letters
ADA
Ensure all color combinations are ADA compliant.
Make sure all text is legible and easy to read. Body Copy, Form Text, Links, Button Text: 14px - 16px No Font Smaller than 12px Avoid Using All Caps for increased speed to comprehension. Content
Verify All CTAs (Call to Action) Are Clear For Example: Use “Sign Up”, Instead of “Click Here” Although we may not always have the exact image, Mid-Fi wireframes should have an appropriate placeholder image to give the general context. When choosing icons pay close attention to the style. For instance, whether the icon is a fill or outline. Choosing the same style will help your design look more buttoned up. Avoid the following. Choose Icons with similar shape structure to increase design consistency. For instance, sharp vs rounded corners. Ensure all icons are intuitive and can be easily described if no text accompanies it.
Consistency
Verify that all screens are using the same UI patterns, shapes, and sizes. Ensure the overall goal of the user can be completely understood from screen to screen.
Note: Don’t forget to organize your design files by properly naming your layers and group elements that make sense.
Wireframe UI Checklist
