WebApp Design Patterns

WebApp Design Patterns

• There are two dimensions in WebApp Design Patterns:
• The design focus of the pattern and its level of granularity.
• Design focus identifies which aspect of the design model is relevant (e.g., information architecture, navigation, interaction).
• Granularity identifies the level of abstraction that is being considered (e.g., does the pattern apply to the entire WebApp, to a single Web page, to a subsystem, or an individual WebApp component?).

• Design Focus 
• WebApp patterns can be categorized using the following levels of design focus
• Information architecture patterns relate to the overall structure of the information space, and the ways in which users will interact with the information. 
• Navigation patterns define navigation link structures, such as hierarchies, rings, tours, and so on. 
• Interaction patterns contribute to the design of the user interface.
• Presentation patterns assist in the presentation of content as it is presented to the user via the interface.
• Functional patterns define the workflows, behaviors, processing, communication, and other algorithmic elements within a WebApp.

• Design Granularity: When a problem involves “big picture” issues, you should attempt to develop solutions (and use relevant patterns) that focus on the big picture. 
• In terms of the level of granularity, patterns can be described at the following levels. 
• Architectural patterns. This level of abstraction will typically relate to patterns that define the overall structure of the WebApp, indicate the relationships among different components. 
• Design patterns. These address a specific element of the design such as an aggregation of components to solve some design problem, relationships among elements on a page, or the mechanisms for effecting component-to-component communication. 
• Component patterns. This level of abstraction relates to individual small-scale elements of a WebApp.