1. Design Modeling for Web Applications
Developed by Reneta Barneva, SUNY Fredonia

2. Design Issues for Web Engineering
Design and WebApp Quality
Security
Availability
Scalability
Time-to-Market
Developed by Reneta Barneva, SUNY Fredonia

3. Developed by Reneta Barneva, SUNY Fredonia
Design Goals
Simplicity
Consistency
Identity
Robustness
Navigability
Visual Appeal
Compatability
Developed by Reneta Barneva, SUNY Fredonia

4. Developed by Reneta Barneva, SUNY Fredonia
The Web Design Pyramid
Interface Design
Aesthetic Design
Content Design
Navigation Design
Architecture Design
Component Design
Developed by Reneta Barneva, SUNY Fredonia

5. WebApp Interface Design
Interface Design Principles and Guidelines
Anticipation Communication
Consistency Controlled Autonomy
Efficiency Flexibility
Focus Human Interface Objects
Latency Reduction Metaphors
Maintain Integrity Readability
Track State Visible Navigation
Developed by Reneta Barneva, SUNY Fredonia

6. WebApp Interface Design
Interface Control Mechanisms
Navigation Menus
Graphic Icons
Graphic Images
Developed by Reneta Barneva, SUNY Fredonia

7. Interface Design Workflow Tasks
Review Information contained in the analysis model and refine as required.
Develop a rough sketch of the interface layout.
Map user objectives into specific interface actions.
Define a set of user tasks that are associated with each action
Developed by Reneta Barneva, SUNY Fredonia

8. Developed by Reneta Barneva, SUNY Fredonia
Continued
5. Storyboard screen images for each interface action.
6. Refine interface layout and storyboards using input from aesthetic design.
7. Identify user interface objects that are required to implement the interface.
8. Develop a behavioral representation of the interface.
Developed by Reneta Barneva, SUNY Fredonia

9. Developed by Reneta Barneva, SUNY Fredonia
Continued
10. Describe the interface layout for each state.
11. Refine and review the interface design model.
Developed by Reneta Barneva, SUNY Fredonia

10. Developed by Reneta Barneva, SUNY Fredonia
Aesthetic Design
Layout issues
- Look, Navigation, Events
Graphic Design Issues
- Sizes, Fonts, Typefaces
Developed by Reneta Barneva, SUNY Fredonia

11. Developed by Reneta Barneva, SUNY Fredonia
Architecture Design
Linear Structures
Grid Structure
Hierarchical
Developed by Reneta Barneva, SUNY Fredonia

12. Developed by Reneta Barneva, SUNY Fredonia
Navigation Design
Semantics
Syntax
Developed by Reneta Barneva, SUNY Fredonia

13. Hypermedia Design Patterns
Architectural Patterns
Component constructions patterns
Navigation patterns
Presentation patterns
Behavior/user Interaction Patterns
Developed by Reneta Barneva, SUNY Fredonia

14. Object Oriented Hypermedia Design Method (OOHDM)
Conceptual Design
Navigational Design
Abstract Interface Design
Developed by Reneta Barneva, SUNY Fredonia

15. Design Metrics for WebApps
Does the user interface promote usability?
Are the aesthetics appropriate, pleasing to the user?
Is the content designed in a manner that imparts the most information with the least effort?
Is navigation efficient and straightforward?
Has it been designed to accommodate special goals and objectives?
Are components designed in a manner that reduces complexity and enhances correctness?
Developed by Reneta Barneva, SUNY Fredonia