We know that wireframes are more than lorem ipsums and placeholders. To ensure a seamless handoff to our visual design colleagues, we devised a checklist of to-do’s.
We thought you might want to take a peek.
GETTING STARTED
- Make sure requirements are clearly prioritized
- List out the hierarchy of information
- Determine all necessary screen resolutions
- Define the number of breakpoints
DOING THE WORK
- Stick with grayscale, outside of links
- Use primary buttons vs. links consistently
- Be consistent in use of sentence and title cases
- Apply realistic text and image sizes
- Design with likely content, not placeholders
- Solve for all breakpoints
- Align and distribute objects
- Use states, prototypes or comments to indicate interactions
- Proof out “edge” cases to verify solutions
- Provide clear direction on which icons and images are expected
- Don’t neglect error states
HANDING OFF
- Confirm that all requirements are addressed
- Proofread
- Label and order layers and artboards
- Store wireframes in a logical, accessible location
- Provide links to websites or apps that were inspirational
- Walk through the wires in person with the designer
Did we miss anything? We strive for efficiency in our work. This checklist is just one of the many we have set up to refine our processes and bolster creativity.