Week 5 – Hierarchy & Grid Systems
Hierarchy and grid systems was the subject for week 5's lecture you can find a link to the PDF of the lecture below plus following a few links to some useful sites. As part of your research take a look at the links and post a few comments on your understanding of hierarchy and grid systems.
Hierarchy
Grid systems
- Outside the grid from alistapart
- Designing with a grid based approach from Smashing Magazine
- Grids are good from Subtraction
- a useful layout Grid Bookmarklet from Andy Budd
- Create your own graph paper to your own specifications
Recommended Books
While we don't insist that you buy any books (apart from the Web Standardistas one) we will from time-to-time make some recommendations of suitable books to help you develop your design and programming skills. Below are a few books that come highly recommended and are on all of the design staffs bookshelves:
- Designing for the Web
- Bulletproof Web Design
- Designing with Web Standards
- Transcending CSS: The Fine Art of Web Design
Project Four - Recognising Grid Systems
This is an optional project, feel free to look at the material and include in your design diary.
Choosing one site from the following list we would like you to take a screen grab, paste it into Photoshop and using the guides and a series of coloured rectangles work out the grid used on your chosen site.
Using the ruler tool work out the width of the columns in the grid and the gutter between each. For extra credit you could also indicate the hierarchy of the information presented through the use of tags, etc. On the Mac the keys for screen grabs are control + command + shift and 4. This will bring up crosshairs allowing you to select the suitable page to be pasted (command+v) into a Photoshop page. Lecture