Guide to Annotating Low-Fidelity Mobile App Wireframes
Wireframe annotation is the process of adding clear, concise notes to wireframes to communicate key information about the design, such as component names, dimensions, behaviors, and relationships. Effective annotations reduce misunderstandings and help developers quickly grasp the design intent.
Essential Elements to Include
When annotating low-fidelity wireframes for a social media mobile app, be sure to include:
- Component names (e.g. "Profile Icon", "News Feed", "Post Comment Button")
- Component dimensions (e.g. "44px H", "16px padding")
- Tap/swipe behaviors (e.g. "Tapping profile icon opens side menu")
- Navigation and screen flow (e.g. "Clicking Post button opens New Post screen")
- Placeholder text (e.g. "Username", "Add a comment...")
- Error states and validation (e.g. "Display error if post is empty")
- Edge cases and conditional logic (e.g. "If user has no friends, display 'Add Friends' CTA")
Examples of Effective Annotation Text
Aim to write annotation text that is brief, specific and action-oriented. Some examples:
- Instead of "Button for creating new post", write "Tap 'New Post' button to open New Post screen"
- Instead of "User's profile picture", write "'Profile Image', 44px diameter, opens Profile screen on tap"
- Instead of "Form where user adds a comment", write "'Add a Comment' input field, 200 char limit, 'Post' button disabled until text is entered"
Visual Design Best Practices
To make your wireframe annotations scannable and easy to understand:
- Use a consistent color scheme (e.g. blue for interactive components, green for annotations)
- Place annotations close to the relevant components
- Use arrows and lines to associate annotations with components
- Highlight or box important components that need development attention
- Use a readable font in a legible size
- Organize annotations vertically along the sides of the wireframe
Tips for Collaborating with Developers
Wireframe annotations are a key communication tool between designers and developers. To facilitate smooth collaboration:
- Get early feedback from developers on your annotation approach
- Use annotations to specify what should happen, not how to code it
- Be open to implementation suggestions and technical constraints
- Agree on annotation standards and stick to them across the project
- Schedule a hand-off meeting to walk through the annotations together
- Make it easy for developers to ask questions and get clarification
By following these wireframe annotation guidelines and best practices, you'll be able to create a clear blueprint of your social media app design that enables developers to hit the ground running. Happy annotating!
