Increasingly principals that have long been the bread and butter of print design are being applied to Web design.
For some time now fonts other than Arial, Times New Roman and Verdana have been able to be used on the Web thanks to technologies such as sIFR and cufón (which we use for the primary navigation and Twitter feed at the top of this site), and now grids are increasingly being used to help structure Web pages.
For centuries grids have been the bread and butter of graphic designers and typographers throughout the world:
“The use of the grid as an ordering system is the expression of a certain mental attitude in as much as it shows that the designer conceives his work in terms that are constructive and oriented to the future… By arranging the surfaces and spaces in the form of a grid the designer is favourably placed to dispose his texts, photographs and diagrams in conformity with objective and functional criteria.”
— Josef Müller-Brockmann, Grid systems in graphic design
It may be because more print designers are becoming or influencing web designers, or simply that web designers have finally had enough of unstructured content and ad-hoc design elements that are increasingly present throughout today’s Web.
An increasing amount of resourses are becoming available for Web designers keen to indulge in the practice of using grid systems. A great place to start is at The Grid System, a resource in grid systems from downloadable grid templates to inspirational sites. Another is 960 Grid System which advocates the use of the popular 960 grid system (which we base most of our web designs on, see image above). 960 Gridder (pictured above) is a JavaScript website overlay tool that helps designers and developers check if a website falls within the grid and is great for checking for any inconsistencies in page layouts.
From my own experience, designing Web pages to a structured 960 grid certainly helps in organising and presenting information clearly and consistently. It also aids accessibility which is becoming increasingly important amid the frenzy of new Web developments that are appearing. HTML5 promises to standardise much of this new technology and together with good design practices, the World Wide Web can continue to grow in an orderly and visually pleasing manner, something that Müller-Brockmann would be proud of.
[See original post: Rise of The Shard]
Image sequence (requires Flash)
Last updated: 14/02/2011 (Please note as we have now moved from London Bridge there will be no further updates :(
TheFrameworks London office is located directly opposite the site of the new Shard development which is currently under construction.
We thought it might be interesting to set up a webcam to capture the rise of The Shard (set to become the UK’s and Western Europe’s tallest building) and will be updating to this post with the latest pictures as the build progresses. All the geeky details of how we set the webcam up are after the break.
Current images:
Yesterday I came across a very interesting interview with Rob Janoff, designer of the Apple logo.
In the interview Rob reveals his influences, how the coloured bars came about, and the real significance of the ‘bite’. You can find the full article here.
The image above is from one of the many space walks that will be carried out by the seven-member crew of Space Shuttle Atlantis during its 11-day mission to service the Hubble Space Telescope for the fifth and final time.
The image is actually a screen-grab taken from NASA’s live web-cast of the space walks on its NASA TV website where it is possible to watch each 6.5 hour space walk live, complete with audio and NASA commentary. It is pretty remarkable to think that what you are watching is taking place live, 350 miles above Earth.
19 years after Hubble’s launch, the STS-125 mission aims to provide Hubble with the addition of new science instruments and will repair other critical hardware to extend the telescope’s life.
The space walks can be watched live via the NASA TV website: www.nasa.gov/multimedia/nasatv/index.html and more information about the STS-125 mission can be found on NASA’s mission pages: www.nasa.gov/mission_pages/hubble/servicing/SM4/main/index.html
Image credits: NASA
