Not Signed-In
Which clippings match 'Web Layout' keyword pg.1 of 1
21 OCTOBER 2013

3 Design Layouts: Gutenberg Diagram, Z-Pattern, and F-Pattern

"Several layout patterns are often recommended to take advantage of how people scan or read through a design. 3 of the more common are the Gutenberg diagram, the z–pattern layout, and the f–pattern layout. ... While patterns like the Gutenberg diagram, the z–pattern, and the f–pattern layout suggest that there is a natural path the eye will take through a design, the reality is they refer only to designs dominated by large blocks of text with little to no hierarchy. ... Instead of trying to force your design into one of the patterns described, decide instead what information you want the viewer to see and through a series of focal points and design flow lead their eyes through your hierarchy of information. That's really the only pattern you need to use."

(Steven Bradley, 7 February 2011)

1

2

TAGS

design for the screen • F-layout design • F-pattern • Gutenberg diagram • layoutlayout designlayout patternslayoutspage layoutpage layout designpage layout patternUIviewing experiencevisual communicationvisual screen designweb designweb layoutweb page layoutsweb pages • Z-layout design • Z-pattern

CONTRIBUTOR

Simon Perkins
24 SEPTEMBER 2013

Bootstrap: open-source front-end web design toolkit

"Bootstrap is an open–source front–end toolkit created to help designers and developers quickly and efficiently build awesome stuff online. Our goal is to provide a refined, well–documented, and extensive library of flexible design components built with HTML, CSS, and JavaScript for others to build and innovate on."

(Mark Otto, 17 January 2012, A List Apart)

1

TAGS

2011960 Grid SystemA List ApartBootstrap (toolkit) • collection of tools • component systemCSSdesign for the screendesign template • flexible design components • free collection • front-end developmentGitHubgrid system • Hackweek • HTML • interface components • interface design • Jacob Thornton • JavaScriptlayout • Mark Otto • open sourcepage designpage layoutresponsive design • responsive grid system • software frameworkstyle guidetechnology solutiontoolkittoolsTwittertypographyweb applicationweb designweb developmentweb layoutwebsite

CONTRIBUTOR

Simon Perkins
Sign-In

Sign-In to Folksonomy

Can't access your account?

New to Folksonomy?

Sign-Up or learn more.