UX Bootcamp Resources

Explore

Design

Wireframe UI Checklist

⁠

View Google Doc⁠

⁠

UI Wireframe Checklist

Use this high-level list to help you tighten up your final designs.

⁠

Page Layout

Spacing and Alignment

Pay close attention to the space around elements like copy, buttons, images, icons, etc.

Ask Yourself

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?

Spacing Includes

Margin

Padding

Line Height - Space Between Lines of Text

Letter Spacing - Space Between Letters

White Space

ADA

Color Contrast

Ensure all color combinations are ADA compliant.

Use a tool like

https://webaim.org/resources/contrastchecker/⁠

⁠

Make sure all text is legible and easy to read.

Common Font Sizes

Headers: 24px - 32px

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”

Use a tool like

https://webaim.org/resources/contrastchecker/⁠

⁠

Add Imagery

Although we may not always have the exact image, Mid-Fi wireframes should have an appropriate placeholder image to give the general context.

Iconography

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.

Check Elements Like

Buttons

Text Sizes

Image Sizes

Border Radius

Spacing

Casing

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.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.