Tuesday, May 15, 2012

Grid Layouts in Modern Web Design

Consistency and predictability are essential attributes of any well-designed information system. The design grids that underlie most well-designed paper publications are equally necessary in designing electronic documents and online publications, where the spatial relations among on-screen elements are constantly shifting in response to the user’s input and system activity. When used inappropriately or inconsistently, the typographic controls and graphics of web pages can create a confusing visual jumble, without apparent hierarchy of importance. Haphazardly mixed graphics and text decrease usability and legibility, just as they do in paper pages. A balanced and consistently implemented design scheme will increase users’ confidence in your site (see below).

For ThanksGiving, I am offering 5 exclusive website templates for just $3.99. Purchase Here.


Even when the page grid is solid, good design depends on creating a hierarchy of contrast and viewer attention, so that a few focal areas of the page become entry points and the other page materials are clearly secondary. Without contrast management the design can look like many random elements competing for the reader’s attention.

The business logic of design grids and templates


Regular page grids—and the module and program efficiency and consistency they create—are the core element of cost-effective design programs for larger enterprises. One of the most famous and successful design grid systems ever produced has been used by the National Park Service for more than thirty years. Massimo Vignelli’s Unigrid design system organizes and systematizes a huge array of park service paper publications (and now online pdfdocuments), from single-page brochures to large park maps and posters. Thanks to the strong, consistent Unigrid design program, the National Park Service has saved many tens of millions of dollars over the decades by not reinventing brochure and map design with every new print project (shown below).


Shown above is the National Park Service design grid for print publications. Thinking in a strategic, modular way about design can save a fortune in the long run.

Grids and templates on the web


Grids for page templates on the web are a more complex matter because the web is a fluid medium with many possible display conditions and a constantly changing technology base. The fundamental principles of consistent modular design programs still apply, but web page grids must necessarily accommodate a wider range of visual possibilities than their print counterparts. Print design grids are driven largely by fixed positioning and paper sizes. Web templates also create a regular, repeating structure of design patterns that consistently organize identity, navigation, content, and technical functionality, but they do it in a much more fluid, flexible medium than paper printing.

A good web template program establishes not just the visual look and feel of particular pages in the site but also specifies how regular patterns of xhtml,css, include files, and more complex application or content functionality will all merge using well-established, well-documented, and consistent standards throughout the site. And, like Vignelli’s Unigrid system, a good enterprise template system can save millions of design dollars that might otherwise be wasted in reinventing web publishing with each new corporate or enterprise site.

Templates and the enterprise


For maximum efficiency in web publishing, all large enterprises should have an existing, well-designed, well-documented set of web page templates that incorporate:

  • The global identity of the enterprise as an organized part of a larger enterprise identity program across all media
  • Global enterprise navigation features that tie smaller sites and programs to the larger institution
  • Well-designed, carefully validated xhtml and css code
  • Consistent semantic nomenclature for all xhtml and css containers and page elements
  • A consistent, enterprise-wide typography program
  • Accessibility standards that meet and ideally exceed requirements
  • Compatibility with, at minimum, a basic web content management tool such as Adobe Contribute or, ideally, an enterprise-wide web content management system
The Yale University page grids are a system of page formats in both fixed-width and fluid page forms. The templates define a consistent set of web identity, user interface, department identification, and typography standards for major university academic and administrative sites. The pages specify the locations of standard identification elements, content column widths, and a system of unique page element id nomenclature, and they provide a consistent set of typographic standards via a master set of enterprise-wide style sheets




Fixed and fluid elements in Yale University’s web template system.

Typography is a key element in template design


Consistent web typography has a huge but subtle effect on establishing coherence across a wide range of enterprise web sites. In a site with a strong typographic identity, most users will never explicitly notice why a wide range of related sites produces a cohesive web experience. Consistent web typography can bind those disparate sites in a way that still leaves enormous design flexibility to meet many functional needs and, with css techniques that use a master enterprise-type style sheet, is technically trivial to accomplish.

Reference: Web Style Guide by Patrick L

37 comments:

ford said...

Essentially the idea is to design and manufacture products that reduce and reuse materials, resources and energy.Developing a website with good design and graphics is not enough to drive traffic or get potential customer to your site. It would still depend on the contents of your site. Relevant and useful information do have its good benefits to your business.

facebook application developers

Robert Kinney said...

These layouts certainly have user friendly written all over it. It just shows that designers know better. Many thanks from Brisbane IT consultant.

seo xperts said...

Web Design

Great article and really useful ..thankx for sharing.

Blogger said...

Your blog provides us very great information. Its really very helpful to me.
web design courses

EnergyWise said...

Well this is really very crucial information for any new web designer like me. A good wire frame always goes well to create and design good website and ofcourse typography matters a lot. Thanks for sharing..

affordable internet marketing

Vilson said...

well Described..thanks

website design | ecommerce website design

Justin Chan said...

Hi,
This information about grid layout in modern web design is nice.it makes it easy to build your websites to make it comfortable.
Web Designing Services

Joy Maiti said...

The web design is an activity that involves planning, designing and implementing web sites. It is simply an application of conventional design, as it requires considering the navigability, interactivity, usability, information architecture and interaction of media such as audio, text, image, links and video.

AimIT Software - website design company

Sarthak Khnadelwal said...

Thank you for your post.Its really very helpful to me and all.These layouts certainly have user friendly written all over it.
Web Design Ahmedabad
Web Development Ahmedabad

Jack Cruz said...

Very interesting post. I like the layout for it is a user friendly one. Thanks for this.


Find out more: how to build a website

Hemant Gupta said...

Thank you for your post. this is such a nice and useful information for me. thank you for sharing....

Web Development Company

Pankaj Shishodia said...

Wow this is the best collection according to my knowladge. It's a great blog and you creat a very helpful and informative information on your blog. You have provided an amazing list of website resources thank you very much again ......


Web Development Company

Prasant Saxsena said...

Great designs and amazing post too. The designs has a really professional looking web design.There are many posts which are really too Good and very useful.You can also find interesting stuff here.
Web Development Company

Website Design Portland said...

I would really like your post ,it would really explain each and every point clearly well thanks for sharing. Web Design Portland

danellekim said...

Set the right mood in your web design with great color! The design of your website is an integral part of the marketing process. Without a visually appealing, content rich, search engine friendly website design, your business is miles behind.

boise web design

Ricky said...

Everyone has a website, but who does more cutting edge grand rapids web design? I don't want to wade through freelancers who work from templates. Recommendations?

grand rapids web design

websitedesignersmelbourne said...

Thanks for this interesting and informative article.
Website Design Melbourne

web design Bangalore said...

Grids are very much important for any kind of designing. for drawing a website or design grids are very important. i had seen these blog these is really good one. php development companies in bangalore

Jiyacreatives said...

You are sharing very nice information, Im impress to read your blog its very nice tips to share for us. If website design company make a good design at our e-commerce site then we can do easily convince our consumer from the market.
Graphic designing

emily seo said...

Grid are very much important for design, while writing the design in cadd. That to design grids are very much important for mechanical and civil engineering. Web Design Company Bangalore

web design Bangalore said...

Massimo Vignelli’s Unigrid design system organizes and systematizes a huge array of park service paper publications, from single-page brochures to large park maps and posters. These is really a good article. bangalore web development companies

omate seo said...

Well with your permission allow me to grab your rss feed to keep up to date with forthcoming post.

Website Design India

shehzil said...

Hi Friend,

I like very much your valuable information and check again here frequently.
We are one of the leading web development company atlanta, that offers various platforms for web development at a very low coast.


Thank You.

Seo Link Building said...

Web Design Services

I like your informative and knowledgeable website
good idea in a stressful situation .

robert hook said...

This is so cool! thanks for sharing

affordable small business web design
ecommerce website development

rakesh said...

thankyou for sharing
Best webdesign company bangalore

rakesh said...

good article............
PHP Training bangalore
website design bangalore
SEO services Bangalore

Sinelogix said...

wonderful article thank's for sharing
Website developer bangalore

logo design Bangalore

zoozoo4u said...

nice article ... it hepled a lot
seo agency in bangalore

Adskaro seo said...

Great info. Thanks for sharing.
Web Designing, Web Portal Development, SEO Service

SEO Company Bangalore said...

Thanks for sharing this great Post dude
Web design company in bangalore

Krsna Hemant said...

Your web page provides us very outstanding information. Its really very applied to me.
Thanks
Real Estate Noida

website design said...

These are inspiring collection of grid layouts in modern website design. I really like your good post. Thanks for sharing

Vikash Kumar said...

We are specialize in Website Design,Web Development,E-commerce Solutions,Logo Designing,Online Marketing,SEO Services,SEM Services.


Website : http://www.frescosolution.com/

Sherl Holmes said...

you provides a spanking information about the website designing ,which is really helpful for me.

Inspiregec said...

your blog gives very informative message to everyone,thanks.And also i gain some knowledge from this website once gain thank you for sharing.

Web Designing Training in Bangalore

SEO Company Bangalore said...

Thanks for sharing this great Post dude
Web Design Company Bangalore

Post a Comment