UI Design without Prototypes ala Holtzblatt et al ITM 734 Fall 2006 Corritore

2 Rapid CD - Skip prototyping and move to UI design  Teams design components  Sharing session  Wireframe  High fidelity

3 Do like we did visioning Walk the storyboards  Goal – make a simple list of core components and their characteristics and functions Note components that are used by multiple storyboards Start to see best way to structure the system  Core components the guide as well as the vision

4 Next …. Brainstorm how to represent a component  Sketch out multiple alternatives  Evaluate each (+ and -), fix minuses  Choose one (if testing, choose the more radical – get more input from user) Repeat for each component

5 Break it up Can do this in sub-teams  Each subteam completes its’ component using previous methodology  Sharing with entire team Evaluation of each component  Don’t worry about UI standards here  Agree on component designs  * Don’t worry about common components at this stage Existing, common things – don’t need feedback on these Include information content – makes it real

6 Wireframe Graphic representation of UI where  Everything is in final position (elements)  Relative sizes accurate  Read words  No color unless important  Minimal aesthetic appeal  Simple lines for borders, simple shading, limited color

7 High fidelity designs Typically webpages Use color, etc. to test the visual designs of the wireframes