![Page 1: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/1.jpg)
DesignProduction
SWEN-444
Selected material from The UX Book, Hartson & Pyla
![Page 2: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/2.jpg)
Design Ideation and Sketching
Conceptual Design
Intermediate Design
Detailed Design
Storyboards Theme
Wireframes
Annotated wireframes “Visual comps”
Often overlaps in practice
![Page 3: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/3.jpg)
IntermediateDesign• Transitionfromoneormoreconceptualdesigncandidatesto
onedesignforscreenlayoutandnavigation• Startwiththerepresentationandmanipulationof
informationobjects• Evolvefromlowfidelitytohighfidelitydesign
representations• Annotatedstoryboards• Wireframes• Interactivemockups
![Page 4: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/4.jpg)
The Path To Wireframes
![Page 5: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/5.jpg)
Doing Intermediate Design: Wireframes
• De facto representation medium for interaction design at this stage
• Prototyping • Documenting • Communicating to implementers
• Somewhat abstract schematic diagrams and “sketches” • Lines and outlines
• Define screen content, layout, and navigational flow • Boxes and other shapes to represent emerging design objects • Sequences of wireframes represent navigation • Drawing tools and templates available
![Page 6: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/6.jpg)
WireframesExample–Web-based Photo Organizing And Sharing Application
![Page 7: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/7.jpg)
DesignElaborated
![Page 8: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/8.jpg)
WireframescanShowBehavior–Click“RelatedInformation”
![Page 9: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/9.jpg)
HowAreWireframesUsed?• Designercanmovethroughdeckofwireframes– Oneslideatatime– Simulatingpotentialscenario– Pretendingtoclickoninteractionwidgets
![Page 10: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/10.jpg)
DetailedDesign:“VisualComps”• “Comprehensive” or “composite” layout • Very specific and detailed graphical look and feel • Pixel-perfect mockup of graphical “skin” • Consistent with
• Company branding • Style guides • Best practices in visual design
![Page 11: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/11.jpg)
DetailedDesign• Screen design and layout details • Medium to high fidelity prototypes, refined and
annotated wireframes • Design will be fully specified:
• Look and feel appearance • Behavior • How all workflows, exception cases, and settings will be handled
![Page 12: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/12.jpg)
InteractionDesignSpecification• Designdescriptionwithenoughdetailtodirectsoftware
implementation• Lookandfeel• Behavior
• Nooneformatrecommendation• Perhapshighfidelityprototypesaugmentedwithtextual
descriptions
![Page 13: Design Production - RITswen-444/slides/instructor-specific/ElGlaly/DesignProduction.pdf• Transition from one or more conceptual design candidates to one design for screen layout](https://reader036.vdocument.in/reader036/viewer/2022081617/60455e270906ea560e51beb2/html5/thumbnails/13.jpg)
TeamActivity• Createwireframesforsomeofconceptualdesignsof
yourprojecttodefinescreenlayout,content,andnavigation– Anydrawingorwordprocessingsoftware– Keepitmodular– Buildupusinglayers– Useseparatelayerforeachrepeatingsetofwidgetsonscreen,reuseinsubsequentscreens
• Provideenoughdetailssothatyouhavesomethingtopresenttotheclass