The Anatomy of a Perfect Landing Page

I have always had an interest in design. I studied Graphic Design at college and almost begun a Degree in Typography. I had dreams of working on magazine layouts and album covers.

I ended up with a career as a sculptor!

But I digress, this post is is a collection of inspirational links pertaining to slick landing pages,  clean layouts and resources for grid systems. 

First a look at The Anatomy of a Perfect Landing Page. Somewhat contrived but a good example of what should be in mind when designing your site. There is no such thing as perfection but there is certainly a wrong way to do layouts.

Here we have some examples of super clean, minimal layouts. There are some beautiful examples here and enough inspiration to keep all happy.

There are rules to follow when designing layouts. Web Pages can be intuitively composed but the best way to build the content of the page is to first create a layout grid. 

“ The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to his
personal style. But one must learn how to use the
grid; it is an art that requires practice. ”
Josef Müller-Brockmann

First have a look at this site http://fluid.newgoldleaf.com/ and try switching on the SHOW GRID button in the header. The button reveals the underlying structure of the layout.; six columns and a fixed line heights.

This site http://960.gs/ shows many examples of 960px web layouts, each that you can switch on and off the grid. And here a site based on a 1140px Fluid Grid. http://cssgrid.net/

Next is an example of a 'square' framework for your layouts. This introduces a very interesting concept for contstructing your pages.  http://thesquaregrid.com/ 

Ok - that's more than enough information for anyone begining to deal with grid systems. Anyone who would like to learn more about grid systems can dive down the Rabbit Hole with the below resources. Enjoy your research!

http://www.thegridsystem.org/

http://webdesignledger.com/tools/13-excellent-tools-and-systems-for-css-grid-based-layouts

Mark Boulton article: Five Simple Steps to designing grid systems and his upcoming book

Also Khoi Vinh's book: Ordering Disorder: Grid Principles for Web Design 

Ethan Marcotte's Responsive Web Design 

A List Apart article: http://www.alistapart.com/articles/responsive-web-design/ 

Comments

[Jamie Curle]

Grids are awesome and very useful. Mark Boulton has a nice article on this

Five Simple Steps to designing grid systems - http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1

He's also about to publish a book on the subject - http://designinggridsystems.co.uk/ but you might also want to checkout Khoi Vinh's book on it - Ordering Disorder: Grid Principles for Web Design

And for good measure - check out Ethan Marcotte's - Responsive Web Design book - http://www.abookapart.com/products/responsive-web-design ( can personally vouch for this one ) or checkout the article that may have spawned the book on A List Apart - http://www.alistapart.com/articles/responsive-web-design/

There is a move towards letting the content define the grid, rather than an arbitrarily nice number ( such as 960)
and there's no doubt this is a better approach. (seems to be labelled as 'content out' rather than 'canvas in') because you're designing for the content - which is a known entity, as opposed to the users browser - which is unknown.

Hope this provides more food for thought,

Cheers,

Jamie.

[Wayne Taylor]

Cheers Jamie,

I was going to mention Mark Boulton's article - I bought his 5 Simple Steps book on design a couple of years back!

I may expand on this post a bit - it was getting late last night so I published and turned myself in. I have copied the links you mention and bolted them onto the bottom of the article as the links in the comments section seem to be dead.

Wayne