course notes 2015/16

layout design

Nov 11th 2015

featured photo by Rain Noe, lines & shapes added to original, © Rain Noe, core77

While you are learning more about positioning – your next challenge will be to design effective layouts which present all content well. There are many different approaches and one prevailing and well established method is of course the use of grids.

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 to design your webpage layouts.

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 15 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

on the grid

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

stop solving problems you don’t yet have

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.

Feel free to work on one final edit and send me your edited final as update.

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. Peter Kasamias

    Nov 17th 2015

    Hello,

    Please find the links to my Seed Conference coursework. The first version was designed with the use of GridFox, the second with the Bootstrap grid system.

    http://pkasamias.users41.interdns.co.uk/art/seedconference/proxima_final/seed.html

    http://pkasamias.users41.interdns.co.uk/art/seedconference/georgia_final/seed.html

    Many thanks,
    Pete

  2. Karima Hajjaj

    Nov 17th 2015

    http://karimahajjaj.users40.interdns.co.uk/seedconference/

    Sorry, I couldn’t use the grid.I need more practice.

  3. Theresa

    Nov 17th 2015

    Hello,

    Here’s my link for the Seed Conference coursework:

    http://theresamorcos.users40.interdns.co.uk/website/seed-exercise/seed.html

  4. Hannah Boom

    Nov 18th 2015

    Hey, here’s my Seed Conference assignment. I just used Gridpak to played with the column and gutter spacing for my page’s grid.

    http://hannahboom.users41.interdns.co.uk/applied_art/seedconference/seed.html

    Hannah

  5. Alana Foley

    Nov 18th 2015

    http://afoleykeane.users41.interdns.co.uk//appliedartfortheweb/seed/seed.html

  6. Aisha El-Tahlawi

    Nov 18th 2015

    http://aishaeltahlawi.users41.interdns.co.uk/seedConference/seed.html

  7. Lung Shing Hoang

    Nov 18th 2015

    Sorry for posting late, sorry for posting it on my site.

    http://lshmemoirs.co.uk/seedConference/

    The epic struggle on using grids. =(

  8. Inder

    Nov 18th 2015

    http://indersingh.users40.interdns.co.uk/seed/

  9. Smita

    Nov 18th 2015

    http://smitaroy.users40.interdns.co.uk/seed/index.html