Mark Boulton on grids and responsive web design

Mark Boulton is speaking at Generate this year. He chats to Martin Cooper about his design process, his sources of inspiration and solving problems with grids

Shares

.net: What’s the best way to stay inspired?Mark Boulton: I get inspired by all kinds of things. I get inspired by walking around looking at buildings, trying to work out why they look the way they do. It sounds terribly trite, but I get inspired by my two-year-old learning new words and learning how to construct new sentences.

I don’t really surf the web looking for inspirational websites. What excites me is reading a book from the 1950s and understanding how the design process was then, what constraints they worked under, and joining the dots [to] the constraints we’re working under now.

I collect stuff all the time. I think a lot of designers do. I’m an awful hoarder of printed stuff mostly. Wherever I go, I pick up postcards and newspapers. Whenever I speak at a conference, I’ll try to pick up three or four newspapers from that country. I’ve got a whole stack of them: some awful, some amazing. I try to immerse myself in the typography of the place. I drive my wife mad because I always come home with a bunch of stuff that I put somewhere and very rarely look at. But I know it’s there, and that’s the most important thing. Although my hoarding tends to stay at work.

.net: What’s your methodology for prototyping?MB: Prototyping is a funny thing. Over the years, it’s become much more important. It’s a way of communicating about the web in the environment it’s meant to be seen, and that’s great: clients understand that.

There’s this whole movement of designing in the browser. I don’t necessarily buy that. I think it depends where you are in the process; it depends on the client. We work with people who are very comfortable with the process of prototyping; they know it’s not going to look like that. But we’ve also worked with clients where showing them a prototype early on freaked them out, so we had to go a bit more traditional and a bit more Photoshop-based to get them to buy into the process. It depends – and I hate using that answer to a question – but it really does.

If [the client] is a very visual organisation, if people are used to seeing things, [prototyping can be a problem]. I’ve lost count of the number of times I’ve heard, ‘What’s it going to look like? Can you show me a visual?’. That still comes up every day.

.net: When it comes to grids, what are the most critical decisions to make at the beginning of a project?MB: Grids are an interest of mine, and have been for a very long time. They’re the very foundation of how you create order in a design; how you guide the reader one way or another.

It’s like architecture: if you create a shoddy foundation, the building is likely to fall over. If you build a shoddy grid, you won’t get the opportunities you’re likely to get if you used [even] a cookie-cutter framework grid.

It’s mostly about content. It’s about understanding what your content is, if you’re lucky to have it [at the design stage]. If you don’t have your content, you need to know what the content is made from, what it types of content it comprises, and how you can build around that. We try never to use lorem ipsum. We try never to build a prototype that uses just nonsense content. Wherever possible, we’ll make [the content] up, and that freaks the client out sometimes – but in a good way, because then they confront the problem a lot sooner.

Also, prototyping has made us think about grids a lot sooner, because we have to get into a browser a lot sooner, particularly for responsive design. Grids have never been more important than they are right now.

Responsive design has changed the way we think about grids, because grids are traditionally static. If you think about printed media, grids are derived from the form: if you think about a book, or a newspaper, the grid is derived from the shape of the paper. A browser is fluid, so we don’t have a fixed size. [It] can go from really small to a large TV or billboard – and everywhere in between.

Responsive design had changed the way I think about making grids, and what the final output will be. We may have several different types of grids for several different sizes or types of devices.

.net: What problems is Gridset intended to solve?MB: Responsive design has thrown up challenges: some around grids, but mostly challenges around mathematics. A lot of grid design is maths; it’s about subdividing. With responsive design, you’re subdividing a fluid canvas, trying to translate into either em measurements or percentage measurements. That’s a headache. It’s a headache with a very simple grid, maybe with just five columns – but what happens if you have a grid derived from the golden ratio with nested [sub-]grids? All of a sudden, the maths becomes really hard. We needed a tool to do it for us.

We’ve been using it [Gridset] internally for two years now, and it went live as a product about a year ago. We’re still very excited about it. It’s a tool that has a lot of our thinking and theory embedded within it. It allows you to do things with grids – without going anywhere near the mathematics – that you haven’t been able to do on the web at all, like compound grids (multiple grids overlaid). The theory came from the 1960s, then died a death, because it was very difficult to do in some kinds of technology. Desktop publishing killed it. And now, putting that theory into the tool is very exciting – for me, anyway.

.net: What advice would you give to a young designer?MB: I get asked this a lot: 'I’m leaving university: where do you think I should focus?'. And a lot of these people [asking it] have studied interactive design or multimedia design, not necessarily the core foundations of graphic design. And that would be my advice. Those principles have been around for a long time: the principles of colour, of form, of composition. Applying them to other media gives you a much stronger foundation on which to build in your career than aligning yourself with a particular medium or technology. Otherwise, you’re always going to be playing catch-up. There’s always going to be a glass ceiling to your ability.

Use the discount code MB15 to get 15 per cent off your Generate ticket.