How DO you Annotate Wireframes for YOUR Development Teams. HOW TO 101

“Creating EASY annotations for your Design and Development Teams to Understand

These rules are in place for a few reasons.

1. Allows us to establish a defining language of how instructions on a UI are to work and behave.
2. Allows multiple creatives to access the same file during the build to review, work, ask questions, in case some of the team is absent, remote or away.
   Note: These are my safe guideline to allow us to work cohesively and are up for refining. These help me with getting down all the details of a particular UI before a hand off to a creative design team member or development for build.

A Wireframe consists of 3 EASY rules created to help assist a designer and developer through the wireframe and allow them to complete their part of the hand off.

1. Static - A static element is an image, copy text, an area with NO interaction or movement.

For a Designer - This is usually something to call out to a designer as needed. ie Lifestyle Image, or copy text "Title of Article", A sub heading, a hex color if needed to color match a brand guide.
For a Developer - This may be a call out for SEO ie "Title of Article is the H1. When elements that are objects or copy are needed to be called out, or if development requests the copy to exist on the wireframe for easy copy/paste into their build it goes here. A hex color call out here as well may assist the developer.

2. Dynamic - A dynamic element is an action that is occuring without the user interaction guiding it.

For a Designer - This is more for informative purposes of how elements work.
For a Developer - These elements can be an action. ie A shopping cart icon displays a number associated with items in a cart, default states in panel drop downs, When a number is associated with a category identifying to a user how many elements are associated with that category, any kind of default states on radio buttons, check boxes, grey outs of buttons,

3. Interactive - An interactive element is an action that the user explicitly does within the UI.

For a Designer - This is more for informative purposes of how elements work.
For a Developer - These elements are a direct interaction. ie A Call-to-Action Button or CTA Button, A drop down, a roll out panel, most navigation elements, a selected state, a CTA Video, A social media widget, Expand / Collapse menus etc. These are elements that create the interaction between a user and the UI.
Below is an example of how some of these elements are labeled and behave based on the rules we have established.