Adam howitt o Consulter 7/720061223PM sign Work from a mockup you can doodle on. Draw on the mockup to identify discreet sections of the applications and label them. Do panels interact or are they isolated? If there is a relationship between an interaction in one panel and the display of information draw it with arrows and callouts. This helps to communicate the logical breakdown of the application with other developers. An example marked up mockup for the Chicago Park District program browser application might look like this chicago park district home events grams in the news parks facilites Program Registration Summer 2006 Session June 19-August 27 Online registration is now open! Walk in registration opens 04/22/2006 9: 00 AM Find Programs Program Groups pI Clubs and Game Program Search Results Wishlist 891011:127 Why create D Only show programs available for online registration(highlighted Aquatic Exercise- Ages: 60 8 Ove estriction: None Sign in to your account (Il 0619 747,6001 ender: Co-Rec Create one now 19/2006·8/27/2006 skill Level: open to All Available slots: I w Shopping Cart anticipant Firstname Lastname (Add to Cart D)(cancel Your cart is empty ase Fee!丰0.00 In the example I have numbered the interactions on the mockup for the sake of space but these correspond to the following interactions 1. selectltem(panel 3. selectltem(panel) 4. selectltem(panel) /8Adam Howitt Duo Consulting 7/7/2006 12:23 PM Design Work from a mockup you can doodle on. Draw on the mockup to identify discreet sections of the applications and label them. Do panels interact or are they isolated? If there is a relationship between an interaction in one panel and the display of information, draw it with arrows and callouts. This helps to communicate the logical breakdown of the application with other developers. An example marked up mockup for the Chicago Park District program browser application might look like this: 5 1 11 12 9 8 6 7 2 4 3 10 In the example I have numbered the interactions on the mockup for the sake of space but these correspond to the following interactions: 1. selectItem(panel) 2. selectItem(panel) 3. selectItem(panel) 4. selectItem(panel) 2/8