tailieunhanh - Web Application Design Patterns- P14

Web Application Design Patterns- P14: This is the type of book you’ll want to read with your entire team and a fl ip chart because every page will produce a list of actionable changes for the applications you’re developing. Pawan Vora has produced an amazing catalogue of the essential patterns for designing today’s web-based applications. | 376 CHAPTER 12 Visual Design ALIGN PAGE ELEMENTS ALONG GRID LINES Align page elements along grid lines and with each other either vertically or horizontally. The objective is not only to create a minimal number of invisible grids on the page but also to do it in a way that reveals the structure of the page visually and makes it easy for users to understand and find different page elements. Creating effective alignment also helps lead a person through the design by associating related elements on the page see the VISUAL HIERARCHY pattern that follows . Using alignment consistently on all pages within the web application improves the predictability of page elements within the design. CREATE REUSABLE TEMPLATES Once pages are laid out they should be sliced into one or more page templates depending on the number of page types and used throughout the application. This ensures that designs work for the entire application and therefore prevents any guesswork on the developer s part as to how individual pages within the application should be designed. Related design patterns One of the important reasons for using the GRID STRUCTURE pattern is to ensure that the resulting design leads to a logical and predictable organization improves comprehension and makes it easy for users to find desired information VISUAL HIERARCHY . VISUAL HIERARCHY Problem Users need to make sense of information presented on web pages so that they can attend to the most important information first before moving to information of less importance. Solution Design pages such that the visual hierarchy is obvious to users. That is use visual cues so as to clearly indicate grouping and the order of elements on a web page and help guide users through the page so that they understand the page s purpose comprehend its organization and correctly assign importance to various page elements Figure . As Lynch and Horton 1999 stated Graphic design is visual information management using the tools of page layout