eyelearn

a look at design for the web & all it entails

· view menu ·

grids in webdesign

 reflections
image: street reflections – photo © Jeffrey Zeldman 2014

A lot has been written and discussed about grids in design, from historic examples, architecture, graphic and web design. As an approach to design, this is a technique which is loved by many, loathed by some and under constant debate. There is no doubt that grids can be a fantastic tool which can assist you in the layout and design of any given page.

If you are new to grid design – it will be worth your time to read up and explore their principles as possible design methods. Our MA students from a few years ago have written essays about this topic – have a look: gallery of essays “grids in webdesign”

As you study and work on your web skills ~ remember your final goal, to produce good accessible design for the web. I recommend that you read this now famous article by John Allsop for A List Apart, if you have not done so already. Though it is 14 years old – it is an essential read for anyone working on the web:

header of article

Let’s have a closer look at the designing with grids and consider possible underlying structures – these 2 tools/bookmarklets will help us understand existing designs:


Wirify‘ will strip any page content and display a page’s structure as wireframe, very handy for analysing page layout :)


The ‘DESIGN‘ bookmarklet is one of my favourite tools which allow you to overlay grid, guides and measurements onto any webpage.

grids in action

as seen on: STV,
work by Stuff and Nonsense (Andrew Clarke).

as seen on: Greenbelt,
work by Edge of my Seat (Rachel Andrew).

Grids in webdesign now cannot be discussed without a mention of the numerous frameworks out there, see the list below for examples. However, some of the frameworks are quite heavy and cumbersome, overkill for many sites. Make sure not to feel tempted to use a framework unless it really fits your project. Instead, explore these frameworks, try them out and experiment to learn and understand.
For some projects, these will work very well, for others, not so much. Stick to your principles of clean and semantic code, and only write as much code as necessary.

This point is clearly explained by Rachel in her blog post on the same topics as her slides. Definitely worth a read, a great insight from a professional and experienced developer ;)
→ Stop solving problems you don’t yet have
→ Responsibly Responsive: developing the Greenbelt website

Time for one final edit… ?

TASK
Using the lovely #grid tool from Analog – have a closer look at your profile page design and text layout.
Just enough time for a final tweak before you hand in your files ;)

useful reading

grid systems & tools

grid madness :-)

applied grids

mini project

Complete your typographical experiments on the Seed Conference page from our last session by applying a grid to the page layout. Upload your final result and leave a comment including the link to it here.

to do list

  1. check and edit HTML of source page
  2. typography to use one single typeface alone
  3. apply a grid to the layout structure and complete the page
  4. upload your final page
  5. submit your final by posting a link below

As always, feel free to comment below if you have any questions :)

9 Comments

  1. Izzy G-Potts
    9
    15/01/2015

    Heres mine:

    http://igrahampotts.users40.interdns.co.uk/seedcon/index.html

    I used GridFox to sort out the spacing ect.

  2. Yang
    8
    14/11/2014

    Hi all:
    sorry for upload late.
    here is my Seed conference re-design page with grid overlay:
    http://i44.photobucket.com/albums/f11/Gillian_Yang/Grid-cw_zpsfc2c1cfa.png

    and here is the page link:
    http://yyang.users41.interdns.co.uk/Grid/index.html

    See you next week :DD

  3. Jenn Pope
    7
    13/11/2014

    Hi all
    Please see my redesigned SEED page:
    http://jpope.users40.interdns.co.uk/coursework/appliedart/assignment2/

  4. Sergi
    6
    12/11/2014

    Hi all,
    Here’s my version of the Seed Conference site:
    http://stantinya.users41.interdns.co.uk/coursework/artweb/seed-conference/index.html

    And here with the grid overlay:
    http://awesomescreenshot.com/0b23u7vod5

    See you tomorrow!

  5. Cathryn
    5
    12/11/2014

    Hi all,

    Here is my redesigned Seed conference page – http://cathryndenney.com/coursework/seed-conference/

    And, not to be left out, here’s my page with grid overlay – http://cathryndenney.com/coursework/images/seed-grid.png

  6. Marthe
    4
    12/11/2014

    Hi!

    Here is a link to my Seed Conference with a grid:
    http://s1375.photobucket.com/user/marthevi/media/seedconference_zpsdd6dd365.png.html?sort=3&o=0

    And here is my page:
    http://mvittor.users41.interdns.co.uk/seedconference/seedconference.html

    Best regards :D

  7. Carys
    3
    12/11/2014

    Hi guys,

    Here is a link to a screen shot of my seed conference re-design (with a grid overlay):

    http://s1289.photobucket.com/user/carysannajenkins/media/CarysSeedConferenceRe-Design_zpsc96aa23c.png.html?sort=3&o=0

    And a link to the page:

    http://cjenkins.users40.interdns.co.uk/masters-website/masters-website/seed-conference.html

    See you tomorrow!

  8. Wes
    2
    11/11/2014

    Hi everyone
    Here is a screenshot of my seed conference with grid overlay: https://www.dropbox.com/s/12nwlvb35gzp0xq/seed-conference-grid.png?dl=0

    Here’s a link to the finished page: http://wesleymehaffy.co.uk/applied-art/seed-conference/seed-conference.html