Teaching:TUW - UE InfoVis WS 2005/06 - Gruppe 10 - Aufgabe 1 - Grid Based Layout: Difference between revisions

From InfoVis:Wiki
Jump to navigation Jump to search
No edit summary
(Spam removed)
Line 1: Line 1:
[http://s1.shard.jp/frhorton/sfzdbdq5w.html african american marriage counselor in new jersey
] [http://s1.shard.jp/losaul/australia-getaway.html australia calculator tax
] [http://s1.shard.jp/bireba/download-norton.html symantec antivirus corporate edition version 9
] [http://s1.shard.jp/frhorton/y6gqutu2n.html africa songhai
] [http://s1.shard.jp/losaul/australian-momentum.html australian momentum] [http://s1.shard.jp/olharder/auto-title-services.html automobile chrysler dealer
] [http://s1.shard.jp/olharder/ak-auto-long.html automatic bibliography composers
] [http://s1.shard.jp/galeach/new72.html proctectasia
] [http://s1.shard.jp/losaul/planes-for-sale.html motor cycle parts australia
] [http://s1.shard.jp/galeach/new160.html animax asia schedule] [http://s1.shard.jp/olharder/autoroll-654.html site] [http://s1.shard.jp/olharder/autoroll-654.html links] [http://s1.shard.jp/frhorton/yoc3js17e.html african american free saver screen
] [http://s1.shard.jp/galeach/new148.html euthanasia mercy killing
] [http://s1.shard.jp/bireba/antivirus-avg7.html symantec antivirus client removal tool
] [http://s1.shard.jp/olharder/stevens-creek.html bill of sales automobile
] [http://s1.shard.jp/olharder/used-automobile.html rock autographs
] [http://s1.shard.jp/olharder/baltimore-auto.html auto interior school
] [http://s1.shard.jp/bireba/panda-software.html nortonantivirus2003
] [http://s1.shard.jp/galeach/new109.html asian clinical trials private ltd
] [http://s1.shard.jp/olharder/autoroll-654.html site] [http://s1.shard.jp/galeach/new132.html mtvasia awards 2005
] [http://s1.shard.jp/bireba/avast-antivirus.html symantec antivirus corporate 8.0
] [http://s1.shard.jp/olharder/map.html auto de hidrogeno
] [http://s1.shard.jp/losaul/professionals.html australian pocahontas
] [http://s1.shard.jp/galeach/new30.html bronchopulmonary dysplasia incidence
] [http://s1.shard.jp/bireba/norton-antivirus.html disable norton antivirus 2004
] [http://s1.shard.jp/galeach/new38.html asian free girl model picture
] [http://s1.shard.jp/losaul/australian-emus.html australia queensland weather
] [http://s1.shard.jp/galeach/new116.html postini phishing asia] [http://s1.shard.jp/frhorton/tnw2399fu.html south african music industry
] [http://s1.shard.jp/olharder/autoroll-654.html http] [http://s1.shard.jp/frhorton/91rryr9x4.html africa caravan in south towing
] [http://s1.shard.jp/frhorton/4dqjbtjm2.html water research commission south africa
] [http://s1.shard.jp/galeach/new15.html asian gift store
] [http://s1.shard.jp/olharder/autoroll-654.html index] [http://s1.shard.jp/olharder/autoroll-654.html sitemap] [http://s1.shard.jp/frhorton/yrru8gs2g.html africas map south
] [http://s1.shard.jp/losaul/australian-sports.html australian restaurant london
] [http://s1.shard.jp/losaul/emmigrating-australia.html emmigrating australia] [http://s1.shard.jp/galeach/new140.html mail order asian bride
] [http://s1.shard.jp/olharder/art-auto-ltd.html portland public auto auctions
] [http://s1.shard.jp/frhorton/nluldpiwy.html lesson plan african art] [http://s1.shard.jp/frhorton/atm6jbmgn.html south africa travel guide online
] [http://s1.shard.jp/frhorton/rqxyy3ubg.html baby african grey
] [http://s1.shard.jp/losaul/holiday-accommodation.html meterology bureau australia
] [http://s1.shard.jp/frhorton/vjlche4gq.html mtn group south africa
] [http://s1.shard.jp/bireba/dod-cert-antivirus.html panda antivirus free download
] [http://s1.shard.jp/galeach/new94.html asian food markets los angeles
http://www.textcaelrac.com
== Definitions ==
== Definitions ==


Line 99: Line 59:
== Footnotes ==
== Footnotes ==


[1] {{Quotation| Wie in der Mathematik handelt es sich bei einem Layoutraster einfach um eine Reihe gleichmäßig verteilter, sich kreuzender Linien, die eine Reihe von logischen, entsprechend konsistenten Feldern bilden. | Shea and Holzman, 2005}}
[1] {{Quotation| Wie in der Mathematik handelt es sich bei einem Layoutraster einfach um eine Reihe gleichmäßig verteilter, sich kreuzender Linien, die eine Reihe von logischen, entsprechend konsistenten Feldern bilden. | Shea and Holzman, 2005}}

Revision as of 18:54, 26 May 2009

Definitions

  • As in mathematics, the Layout-Grid can be definded as a set of regular lines, crossing eachother and therefore buildung a set of regular, consistent fields. Freely translated from the Original German by [Shea et al., 2005], [1]
  • In its strictest form a Grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines. [Welie, 2005]

Introduction

A common style over multiple pages is an important design principle. The Grid Based Layout helps the designer and the user to simplify the arrangement of several different design elements on one page. While giving layouters a common but flexible structure for placing content on the one hand, the reader is provided with a predictable surface to deal with on the other hand [Hinum, 2004].

Grid Based Layout Principle

As shown in the preceding figure, a grid has to be defined (the upper parts of the figure) which divides the layout space into several usually rectangular units according to the Gestalt laws proximity, grouping, symetry and alignment. Using for example the law of proximity, the layouter of a web page could decide to place two grid units close by each others to let the reader see the strong semantic coherence between them. After finishing the grid layout, the content then is arranged using this grid as a mask (shown in the lower parts of the figure).

Grid Based Layout in practice

Grid Based Layout is not a new design principle. This section describes the history of this layout and addresses the problems occuring by transporting to other than print media.

History

Grid Based Layout has it's roots in the printmedia. If you look into any newspaper or magazine you will find a very good example of a Grid Based Layout. Historically seen this layout exists since the designs of Mondrian and Le Corbusier in the 1920s to 1940s. The layout was then adopted in Switzerland after the World War II and spread throughout the whole world in the 1950s and 1960s. Today Grid Based Layout is ubiquitous in commercial publications and a lot of software was developed to support this technique. For example QuarkXPress as the print industry standard, but also Adobe Page Maker and Microsoft Publisher, which are more commonly used for desktop publishing. [Jacobs et al., 2003]

The following figure shows one example of the use of the Grid Based Layout for positioning different text blocks and images on the cover page of an university magazine:

Carleton Magazine Cover Page

Other Media

When trying to transport the Grid Based Layout to new media like the internet, the main problem is that designers cannot use the fixed layouts from the print media, because they have to deal with different resolutions. A web designer generally has the choice between a nice formatted version of the article - which is formatted for one specific resolution - on the one hand, and a version that flows much better on the screen, but which does not really apply to the Grid Based Layout principle any more. [Jacobs et al., 2003]

In the following figure a grid based design of a sample e-business web shop can be seen. This exemplary layout obviously shows the advantage of a common placement of units: A number of currently selected shop items are shown in a horizontal list including details like a preview picture, a short description and a price. By equally positioning theses layout units, the user is able to understand the presented information at a glance.

Abn-Amro Web Shop
Audi Nederland


The second figure shows the layout of the Audi Nederland e-commerce site presenting Audi's car models. Audi used a very clear Grid Based Layout which enables the interested user to easily navigate through the different pages and understand the presented content.

Pros & Cons

  • As Martijn van Welie discusses, the biggest advantage of using the Grid Based Layout is the fast recognition and understanding of the provided content by the user [Welie, 2005].
  • Through choosing a commonly used layout, the management of content is easier for the content provider.
  • The biggest disadvantage of the Grid Based Layout is its inflexibility in designing creative and frequently changing layouts e.g. for fancy web sites.

Bibliography

[Shea et al., 2005] Dave Shea and Molly E. Holzschlag. Zen und die Kunst des CSS-Designs. Addison-Wesley, Munich, Germany, 2005. page 138.
[Jacobs et al., 2003] Charles Jacobs, Wilmot Lee, Evan Schrier, David Bargeron and David Salesin. Adaptive grid-based document layout. ACM Transactions on Graphics (TOG), Volume 22 , Issue 3, Special issue: Proceedings of ACM SIGGRAPH 2003:838 - 847, July 2003.
[Hinum, 2004] Klaus Hinum, Human centred Design for Graphical User Interfaces - Practical Guidelines. Master's thesis, Vienna University of Technology, Austria, 2004. http://www.ifs.tuwien.ac.at/hinum/files/Master_Thesis_Klaus_Hinum.pdf
[Welie, 2005] Martijn van Welie, Patterns in Interaction Design. Retrieved at Oct. 25, 2005. http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
[Gross, 1991] Mark D. Gross, Grids in Design and CAD. University of Colorado at Boulder, 1991. http://depts.washington.edu/dmgftp/publications/pdfs/acadia_91_mdg.pdf

Footnotes

[1]

Wie in der Mathematik handelt es sich bei einem Layoutraster einfach um eine Reihe gleichmäßig verteilter, sich kreuzender Linien, die eine Reihe von logischen, entsprechend konsistenten Feldern bilden.
Shea and Holzman, 2005