Great moment in Grid system design: Yahoo blog - Friends & testimonials page

I think I dont have to say any single word, the pictures below tells all.
(All pictures were captured under 1280pixels x 800pixels resolution)

1. Before added unit and gutter guideline:
The friends and testimonials page\'s snapshot

2. 1 unit:
1 unit = 64px.
After added 1 unit guideline

3. 2 units + 1 gutter:
1 unit = 64px.
1 gutter = 23px.
2 units + 1 gutter

4. 3 units + 2 gutters:
1 unit = 64px.
1 gutter = 23px.
3 units + 2 gutters

5. Special width (the red arrow’s width) for an avatar with it’s testimonial
Width = 3 units + 2 gutters.
1 unit = 64px.
1 gutter = 23px.
Special width for an avatar with it's testimonial

6. 7 units + 6 gutters:
1 unit = 64px.
1 gutter = 23px.
7 units + 6 gutters

7. Special width (the red arrow’s width) for special size avatar (not in standard scale):
1 unit = 64px.
Special width for special size avatar (not in standard scale)



Leave a Reply

Formatting: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>