Web Creative

The New York Times is quite possibly the worlds most famous newspaper. The NYT website has an Alexa ranking of 101, an average visit time of 4.6 minutes and has over 100,000 websites linking back to its content. They must be doing something right! I read the NYT (website) on a regular basis, but until now I never stopped to think about what exactly pulls me in about the design of this site… Continue Reading

An excellent article on making fluid layouts work well and still adhere to the grid.

This is the template that I start most of my web design production in.  It is a 12 column grid based on a baseline type size of 12px.  I have it sized for creating designs that are viewed at a minimum screen resolution of 1024x768 pixels (which yeilds an average viewable area of 960x560 pixels).  The template’s dimensions are 960x560 pixels for this reason - ending where the ‘fold’ (the point at which users will have to scroll) will naturally fall on most 1024x768 pixel monitor resolutions.  You’ll likely need to make the template taller to  accomodate your full page layout - but always keep in mind where the ‘fold’ will be for what is currently still the majority of Internet users.

Download the template

More about grid systems

@irishstu brought this to my attention when he linked to it on Twitter earlier today.  It is a really great presentation explaining why and how to use grids to layout your designs.  I am always astounded at how many web designers don’t use grids -  designers live and die by the grid in my opinion. As this presenation from SXSW 2007 says ‘Grids are Good’.  Indeed.

Abstract:

There has been a lot said recently about Vertical Rhythm. Richard Rutter began the work on 24ways last year with the piece ‘Compose to a Vertical Rhythm’. This was built upon by Wilson Minor on A List Apart recently with his article on Baseline Grids. All sound typographic advice. If you haven’t read both of them, I’d urge you to do so now otherwise you know what I’m on about it in this post.

At @media this year, I presented ‘Five Simple Steps to Better Typography’. Step two in my presentation was was Vertical Rhythm where I reiterated some of the excellent points Richard made in his article and also the presentation we both gave in at SXSW in March. I also added something of my own: Incremental leading, or Incremental line-height.

Abstract: The Golden Section is a ratio which is evident throughout the universe as the number Phi. You can use this ratio to good effect in design by making sure that elements of your grid conform to this ratio. Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will ‘feel’ right.