MA Web Design + Content Planning materials for applied art for the web • major project

Layout design.

[The Sage] accepts the ebb and flow of things, nurtures them, but does not own them.

Tao Te Ching; 2 Abstraction – as quoted in “A Dao of Web Design” by John Allsopp

While you are learning how to produce effective layouts you will come across many different views and practices. 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. Well worth your time to explore the depth of this topic.

When we talk about grids in webdesign, there are essentially 2 aspects to consider: the design method itself for layout (which will establish a set of rules controlling layout and white space) and the technical implementation of the grid design via CSS grid (which uses grid-specific code references to the design). Bear in mind that CSS grid is only one way of implementing a grid-based layout.

illustration of grid with golden spiral

If you are new to grid design entirely – it will be worth your time to read up and explore their principles as possible design methods. The website thinkingwithtype.com by Ellen Lupton is a great introduction – check out the section on grid specifically.

Or have a read of the following essays written by our students in 2013, pre-dating the arrival of CSS grids. Enjoy :)

wirify icon
  • Wirify
  • analyse existing layout via automated wireframe overlay
  • by Volkside Pty Ltd
 design tool icon
  • design
  • utilities for grid layout, measurement and alignment
  • by Spry Media

Layouts in the wild

Before getting stuck in – let’s have a look at a few websites to understand their structure and page layout.

I’d strongly recommend that you start studying web layouts in any way that suits you. The Inspect Element alone will give great insights into how web layouts have been put together, and importantly, how they adapt across screen widths (as we’ll look at closer in our next session).

Inspect element

screenshot of inspect element panels

Inspired by CSS Grid: Andy Clarke at the State of the Browser event, 2019.

How effective are grids?

The following three sites are driven by the written word and present a vast amount of content.

Take a look at the sites, their main sections and individual pages and use the two bookmarklet tools to explore the layouts' structure, hierarchy and effectiveness.

Group discussion

  1. what are the strengths of the given grid layouts?
  2. what are the weaknesses of the given grid layouts?
  3. List 3 possible base units as starting point for a new grid design.

Let's discuss the outlined points and think of possible starting points for a new grid.

Innovative & Practical Graphic Design with CSS Grid

View Jazz Poster page

banner image: unicorn on yellow tiles visit Layout Land
You can find even more excellent videos are on Jen's Layout Land YouTube channel - highly recommended!! And of course, Jen is also one of our people of the web :)

reference links

  1. float: none | left | right;
    read ref on MDN
  2. display: flex;
    read CSS Flexible Box Layout Module on MDN
    read A Complete Guide to Flexbox on CSS tricks
  3. position: static | relative | absolute;
    read ref on MDN
  4. display: grid;
    read CSS Grid Layout ref on MDN
    view tutorials + examples by Rachel Andrew

on learning web layout

Just a little reminder of my view of learning web layout: step-by-step and slowly does it :)

This was one of the steeper parts of the journey for me when I started. And if you're finding this difficult, that is normal! Hang in there and persist ~ it won't be as bad as you think in the end :)

My advice would be to tackle these in a way your brain can handle. Start with floats and flexible sizing with responsive units for starters and understand that method enough to implement your designs. Then venture further. CSS Grid will no doubt become the default as it is very powerful. However, remember that it is often used in combination with other layout methods which also serve as fallbacks ~ hence equally important to learn.

!! Remember !!
Fallbacks are important for most websites - especially once you get into the workplace. Projects with different scopes and varying priorities will mean that you cannot reply on the latest techniques only to get the job done.

With the grids now having firmly arrived in our browsers, we'll need to find our experts which will keep us up-to-date and teach us how to use all the new methods. In addition to those mentioned already, there's no one better than Rachel who is currently a technical writer for Google Chrome, Member of the CSS Working Group, contributing directly to the specs of the CSS Grid. Her sites and newsletter are brilliant and I can only highly recommend them!

CSS Grids – by Rachel Andrew

useful reading

grid systems & tools

a word on frameworks

Excellent tools if you know what you are doing — they will not do you any favours if you are new and still getting to grips with CSS layout. While you're learning your coding, my advice is to stay away from frameworks such as bootstrap and create your own code. This can then become your own framework, your own, self-written code base for new projects. Best of all, you'll know exactly how your code works.

Having always used merely a plain HTML page with mere basic structural tags and a CSS with only the reset as starting point for my web projects, I often wondered whether it was just my preference. That was until I saw Rachel show the very same bare files during one of her talks and declare this her framework. Well, if this is how Rachel works...! Rachel, of course, is one our people of the web, web developer supreme and a woman whose dev skills I can only admire - and she's leading the way with CSS grids and keeping us all up-to-date. Do check out the links in the earlier list. Thank you, Rachel ツ

implementing given layout

Your practical challenge today is to use your newly learnt layout skills to recreate 3 given layouts. This exercise comes in 2 phases. Today, we'll focus on the mobile first approach, working primarily on the typesetting for smaller screens.

We'll take this further in our next session when we'll extend the layout to larger screens and make it responsive.

The text

The text quotes Dieter Rams, a widely recognised and respected German industrial and product designer whose work continues to be influential. In the 1970s, he wrote the now famous ten principles for good design which have become even more relevant today. I hope you will enjoy reading and working with this text.

Good content inspires good layout :)

Phase 1 task:

  1. work with the given HTML
  2. write the CSS required to implement the given 3 layouts, i.e. make copies of the existing CSS to edit for each of the layout versions
  3. focus on typesetting and spacing - this will become the mobile version of the page

Source files:

download source files

  • FOLDER: 10-principles
    webpage files (HTML/CSS/JPG)
  • FOLDER: layouts(phase1)
    screenshots of layouts, today's version
  • FOLDER: layouts(phase2)
    screenshots of layouts, for our next session
  • FOLDER: srcs
    original text + photos

Phase 1 - mobile first layouts

  • layout screenshot
  • layout screenshot
  • layout screenshot

Phase 2 - responsive layouts

Please note: this is only a preview of what comes next :) Our aim today is to work on the initial layouts.

layout screenshots

videos to watch

Here are some video tutorials which will help you get to grips with working on web images. The apps used are the Adobe CC but the principles apply to all.

profile project

CHECK LIST #4

  1. work on any visuals included in your design / experiment with patterns for background
  2. produce the final single webpage
  3. prepare a pseudo-PechaKucha presentation as recorded video (saved as MP4)
  4. collect all files into a neatly organised project folder for submission !! deadline 18/11/22

feedback threads on Slack

For this last phase, I'd like to ask you all to post your progress and ask for feedback, and please give feedback too. I'm not going to bother with putting up the groups again as it seems only too few of you are making the effort. And it's not fair on those who will be called up to report back if you are not all joining in.

Just remember how important feedback is to your work ~ you will not succeed in creating great designs if you shun other views or if you're just too lazy to join into conversations. And a big thank you and well done to all of you who did do this ~ long may your collaborations continue, I'm here and happy to join in ツ

✶ download deliverables details

the extra task ~ the presentation ツ

As the Major Project crits are soon upon you - this is intended as a warm-up exercise. I'm asking you to put together a mini presentation of your profile project that is very short and to the point, captured as MP4 and included in your submission. If you would like feedback on this, please include a note and I will write up some comments for you and send those to you via DM. And don't worry, the video will be seen only by me :-)
Please do check my tips on how to present it well!.

Pcha Kucha

What exactly is Pecha Kucha? = presentation format of a slide show of 20 images, the presentation of each slide is to last no more than 20 seconds, do check out the site for more. It was created in Japan in 2003 by renowned architects, Astrid Klein and Mark Dytham. The word “PechaKucha” is Japanese for “chit chat.”

You don't need to strictly stick to this - but it might be good practice to do so. Apart from the upcoming informal presentations, we will ask you to do a presentation for each of the formal crit themes. See this video presentation as a nice little practice run ;)

what to cover

This does not have to very serious or formal, prepare a few slides and talk about your page's design. It can be very short, about 2-3 minutes, or a little longer if you wish (though it should not exceed 6 minutes ~ which is about the length of a pecha kucha presentation).

  1. your angle on this personal introduction
  2. a few words on the design, your choice of fonts and colours
  3. closing thoughts on how happy -or not- you are with the page you are submitting

And you can, of course, use any tool for this, I love open source and hence my recommendation of JITSI :) ~ despite it working best in Crhome. As you have fre access to all the Adobe apps, you could use Captivate for this task.

Use Jitsi to record your presentation

The following video was done a little while back and shows how you can record the presentation video and then save the output to DropBox. I've just tested it and you can now save the file to your local drive :) Still in beta but works well, nice! It'll save as .webm file - which you can then covert easily to mp4, via a tool like convert.io, for example. Or this alternative Zara found: freeconvert.com ~ thanks, Zara :)


NOTE: this is a super-quick flyby demo – intended to be paused as needed for reading/viewing (hit SPACE bar or use controls). For the sake of a lighter file load, there is no audio included, all information included as text in the video.