/Culture/ How to create your best layouts
15/03/2010 | Filed under Discover > Culture
When approaching a fresh site design, what’s the best way to tackle layout and ensure a guaranteed win? Elliot Jay Stocks shares his top layout tips
Ah, the blank canvas: probably my favourite part of the design process. What I love about it is the multitude of opportunities it represents: free rein to create without being encumbered by any of the restrictions that come into play further down the line. Anything can happen!
There are a number of ways to approach this stage. Some like to jump straight into Photoshop (or their layout tool of choice), but personally I try to stay ‘analogue’ for a while and work with good ol’ paper and pens.
Such tools are far more freeing than using a mouse and computer screen. They enable us to throw down ideas as soon as they come into our heads and be as expressive as possible, having absolutely no concern for things like neatness, which – at this stage, at least – just get in the way of creativity. If you haven’t worked this way before, give it a try: it’s extremely liberating.
To get further outside of your comfort zone, try doing your sketches in a completely different environment to where you do your more finished designs. If you’re not using a computer then you can travel light and not worry about things like electricity, so use it as an excuse to get outside. If it’s a sunny day, find a patch of grass. If it’s raining, revel in the hustle-and-bustle of your local coffee shop.
The sketchpad
My weapon of choice at this stage is my trusty A5 pad, which is just small enough to carry around easily but just big enough to fit in plenty of ideas. I prefer a blank one myself – because it feels the most ‘free’. Many designers favour the Moleskine. Later, when you’re getting ready to neaten up your sketches (obviously it’s impractical to continue down the path of freeform messiness forever), using square gridded paper can be a great way of deciding on your own grid structure, but more on that in a moment.
If sketching is a new concept to you and you’re not sure of the best way to approach it, try this exercise. Look at an existing website – ideally, one created by a designer you admire – and re-create it as a rough sketch in your pad. Firstly, this will help familiarise you with the relationship between sketch and finished product. Secondly, with long pages that have lots of content, it’ll help clarify how an entire page fits together – that is, the full height of any given page rather than just the bits we see in the limited browser window.
Sketching is a handy way of coming up with ideas, and refining your sketches before jumping into Photoshop means you can sort the good ideas from the bad quickly, without wasting time in an actual layout app. However, there’s no point in refining sketches too much, because detailed design is best saved for the medium in which it will eventually be experienced: the screen. Personally, I sketch in my pad until I become frustrated enough that I’m not working out the technicalities in Photoshop. At that stage, it’s time to start blocking out elements using wireframes.
Wireframes and grids
Wireframes can mean different things to different people, and even vary from project to project. Some designers or clients like wireframes to go into great detail and define exact proportions of the grid that the site will eventually follow. Others treat them as nothing more than ‘neatened up’ versions of the most refined sketches. In reality, there are no hard and fast rules to live by, except to say that wireframing should enable you to see how the website will be laid out before any of what I call ‘the pretty stuff’ gets added on top. As I said in last issue’s article about working as a solo web designer, this is why it’s a good idea to separate out the wireframe and aesthetic stages of design: although they’re both parts of what you could liberally call ‘the design phase’, they focus your client’s attention on different aspects, one part at a time. Very loosely, you could say that wireframes enable them to think about layout from an interaction point of view, and aesthetics let them concentrate purely on the emotive experience.
Whether you decide to define your exact grid during the wireframe stage or later, when you approach the ‘proper’ design, is an important decision. A popular grid is the 960 Grid System, which – at 960 pixels wide – can be divided into many different inner widths, such as 16 or 12 equally wide columns with gutters. However, it doesn’t really matter which grid you use, be it your own or one created by others, because ultimately it should be one that suits the content and provides you (the designer) and others (the site’s maintainer) with a guide that allows for the aesthetically pleasing alignment of a variety of different page elements. Carried across a site’s various pages, this considered alignment helps create a visual consistency. In his presentation ‘Walls Come Tumbling Down’, designer Andy Clarke reminds us that for large sites with a lot of dynamic content, we’re designing a system, not a page. (Andy is also a big fan of creating your own bespoke grids that are dictated by the site’s content. A number of his experiments with varied grids can be found here).
For more on grid-based theory and how principles from the art world can assist with our layout choices – such as using the Rule of Thirds or the Golden Ratio to define your relative widths – see Mark Boulton’s book A Practical Guide to Designing for The Web or my own recent book, Sexy Web Design.
So, with our sketches informing our wireframes and our wireframe helping to formulate the grid on which we’ll base the actual design, it’s time to move into the meatiest part of the project and start turning our ideas into something that resembles a functioning website.
My tool of choice for this task (and the wireframing stage before it) is Photoshop which, although not perfect, is a powerful program that enables me to visualise what I have in my head in the quickest and easiest way, at least in the first part of the design phase. Others prefer Fireworks, which was created for the specific task of designing for the web. But again, the tool is not important: it’s what you do with it that counts!
Designing in the browser
As time goes by, I find more and more that there isn’t really one tool to do all the jobs I need, and I find myself increasingly turning to the browser and treating it as a design tool in itself.
There’s one easy-to-spot reason why designing in the browser makes a lot of sense: it’s where the site, once finished, will be viewed. There are a variety of other reasons, but for me typography is one of the biggest ones – I’ve yet to find an application that can accurately simulate the way type appears in the browser, and as text is rendered differently in different browsers and on different operating systems, there’s no one true ‘correct’ rendering anyway.
Designing in the browser is also a massive time-saver. Changing a line or two of CSS to affect something like column width or line height across an entire test site will often be much quicker than making the same changes in a mock-up, where the change would need to be made across several elements, re-exported and so on. It also means testing to see what works and what doesn’t can be done in seconds. Consider a 20-page site where each page has 10 divs containing text. If you have a mock-up for each page, it would be a huge job to change the gutter width between each text block from 10 to 15 pixels. But with a browser, you only need to open your stylesheet, change something like div.text { margin:0 15px } and you’re done. Just hit Save and then refresh your browser!
37signals is known for favouring browser-based design. In his post ‘Why We Skip Photoshop’, Jason Fried explains why the company jumps straight to HTML and CSS: “You can’t pull down menus in a Photoshop mockup, you can’t enter text into a field in a Photoshop mockup, you can’t click a link in a Photoshop mockup. HTML/ CSS, on the other hand, is the real experience.” My opinion is that this approach should be used where appropriate. I still do 80 per cent of my design in Photoshop and use browser-based design for tweaking and making the more intricate decisions about typography, for instance. Photoshop is a necessary tool for graphics-heavy sites (something I tend to produce rather a lot) but is understandably not as necessary for a company like 37signals, as its products use less imagery and favour simple blocks of colour and text-heavy elements such as multiple form fields. Once again, it comes down to choosing the most appropriate tool for the job.
However, another reason it’s worth considering browser-based design is that it will instantly show you how your site appears, not only on multiple browsers but also on multiple devices. No designer can ignore the increase in demand for mobile compatibility, and while that has been made a little easier with the popularity of the iPhone and Mobile Safari’s desktop-like experience, there are still key differences.
With difference comes broken layouts, so it makes a lot of sense to see if and where they’re happening as soon as possible.
Working with fixed layouts has always been the easiest option, but with elastic and fluid layouts it’s a different matter. This adds an extra layer of uncertainty, as more parts of the design are allowed to move, so multiple scenarios need to be considered. And how do you show these changes in a flat mock-up? There’s no question about how awkward this is to do in Photoshop, where you’d need to create multiple versions of the page, rendered at different widths. If you’re creating elastic or fluid layouts, designing in the browser is worth doing as soon as possible in the process.
Layout constants
I’m a big fan of trying to design sites that break from convention and do something a little more interesting than all of the other clones out there. However, innovation is only effective when it’s balanced with conformity and let’s face it, sometimes we’ve just got to conform! Hence there are some elements in web design that appear time after time, and why not? Take the humble header: it’s hard to come across a site that doesn’t have one. But a clearly defined header adds some site-wide branding and consistency, and when it contains navigation, it gives users a guaranteed base to which they can return and find their way around. Headers needn’t actually be at the top of the page, either: I think of them more as a point of focus. Take balhar.com for instance: the ‘header’ is actually a strip that appears vertically centred in the middle of the screen.
Huge footers seem to be all the rage these days, and for good reason. If you consider the common sidebar, a regular feature on blogs especially, there’s a lot of information there that sits alongside the actual content (which, on blogs, is usually the post). The trouble is this that the sidebar often contains elements that don’t necessarily relate to the post itself: think of the search box, generic category listings, links to recent comments on other posts, etc. Why clutter up your page with these things that detract from the main article being read? Sure, there are valid reasons to give prominence to these elements, but often we throw these things together without even thinking. Not so with the big footer: it’s a way of presenting large amounts of disparate information (such as blogrolls, social network links and daily bookmarks) without interrupting the flow of reading the main article.
Art direction
If there’s one area in web design I find exciting right now, it’s the concept of art direction being injected into the way we approach layout: something that, until recently, was sadly lacking in our online world. Popularised by Jason Santa Maria’s approach to his blog entries, the mantle has now been picked up by a number of designers who are aiming to treat their blog posts with the amount of care usually reserved for offline magazine articles. The key thing is that each post has a unique design, or variation on the ‘base’ design, and is thus a unique experience in itself. Rather than succumb to the rigidity of templates (something we’re all guilty of), each article gets designed according to its content. Dustin Curtis’ site is a great example: apart from the nav bar and footer, every single page looks completely different. Greg Wood’s site is another example in a similar vein, with even fewer constants. Each article has a distinct personality and looks absolutely beautiful.
Of course, art directing every single page isn’t something that can be applied to all websites. In fact, if we’re being honest, the number of sites that would be suited to this approach is relatively small. But it goes to show that layout on the web is finally growing up and we’re starting to achieve something that print design has enjoyed for years. Even if this only serves to impart a subtle influence on other sites where full-on art direction is unsuitable, it’s undoubtedly a great thing, and a sign that web designers are no longer afraid to do what they do best – design!
Bookmark with:
Comments
Douglas Bonneville / 15/03/2010 / 13:56 / http://bonfx.com
This is a great article. I'm convinced now about designing in the browser and styling as I go. The last site refresh I did, I designed entirely in the browser on top of my current WP theme. I only turned to Photoshop when I needed an element. I'd try it out and keep going. I'd have to backstep here and there, but in the end, I was DONE, not just ready to start cutting things up. I was surprised at how pleasant the process was.
I just did my site redesign last week so this article is very timely.
I would add that with the advent of Firebug and very fast Firefox versions lately, along with Browser Lab from Adobe, there isn't much reason left to not design in the browser. You can always send screen shots to the "hard copy" die hards :).
Anna Green / 15/03/2010 / 14:48 / http://www.crearedesign.co.uk
In the seven years i spent in higher education studying Graphic Design and Visual Communication, nobody one ever uttered to words nets or grids! I had to find out about them myself, as it goes i got hold of a quite rare book and tough myself Iv never looked back!!!
Jim Munro / 15/03/2010 / 21:21 / http://www.jimfmunro.com
Thanks for the look at your design techniques. I love paper & pencil to get started, it's easier to think away from the computer with Twitter constantly bugging me. Gives one a chance to get to a coffee shop and caffeinate.
The links are great, I learned a lot more there, but it killed my day reading so much great stuff! I blame you.
Igor Ivankovic / 15/03/2010 / 21:27 / http://www.taptapdesign.com
Nice article, although my worst nightmare is blank canvass LOL!
steven riley / 16/03/2010 / 11:16 / http://www.welovechief.com
great article, i've just purchased a 'grid' pad, although i find working with horizontal A4 a little more benificial, also i agree with the trying to find new layout ideas, but in the real world, this still seems to complicate viewers as they seem to want everything NOW!..why can't they try to appreciate a site and not want to see everything in '3 clicks' ...p.s the blank screen fears me !
Pop Up Displays / 19/03/2010 / 10:50 / http://www.weprintpopups.co.uk
Great layout ideas. I really found this interesting, especially the sketch pad section.
Jon Winter / 29/03/2010 / 12:48 / http://www.ableafstudio.com
I've found many techniques useful for mock-ups but have to agree there is nothing more quicker than the might pen and paper. It gives you the speed to redesign a mockup in the space of seconds/minutes compared to doing it in Photoshop.
I have also found a very interesting mockup tool called Balsamiq mockups, which at first glance seems 'silly' but once you use it, you realise it's full potential. It allows me to quickly drag sample page elements i.e. drop down lists, buttons etc, onto a page and even make them appear to work! It's a clear stage between the pen and paper and HTML/CSS mockups but is fairly fast at doing a mockup.
From these mockups I fully agree, the HTML/CSS route is very powerful and so much quicker to see how things will handle in the browser.
These are simply my preferred way of working, although I have to find these out the hard way!
Ben Kouba / 03/04/2010 / 13:53 / http://leaf9.com
A great place to find quality sketchbooks is your local arts and crafts store. It sounds obvious, but it took me a while to realize that. You can find all shapes and sides of blank books. Grab some nice art pens while you're there. The quality of the tools you use does have an influence on the quality of your design work... at least that's been my experience.
Martyn / 08/04/2010 / 13:14 / http://www.webdesign-gm.co.uk
I never start a web design without the 960 grid layout opened up in front of me. It helps so much with the spacing of content and use of white space.
David Lewendon / 08/04/2010 / 15:01 / http://www.organic-web.net
Hi great article, I have started using a grid pad to help with my layout too! I have a question that is a bit off topic
but im not really sure where to ask this!! Can anyone advise me on developing a style guide for my designs as i need to hand my desing and html/css over to an inhouse team to manage and i have been asked for a style guide. but i cant find any good examples online. An artical about the writing a style guide or looking at some examples to see how other doit would be somthing i would read.
Thanks sorry again if this is not the place for this.
andrew / 18/04/2010 / 20:21 / http://www.andrew-brundle.com
Really good article.
The comment that "designing in the browser is also a massive time-saver" is especially valid.
For most websites that I personally make, the design tends to be 50% in the browser; 50% in Photoshop.
berrypoint / 29/04/2010 / 13:44 / http://www.berrypoint.co.uk
I used to design in the browser from the start, but these days I prefer to start with a hand sketch, then mock it up in a graphics package, then move on to the browser once the basic layout is agreed. Its easier to tweak the layout and demonstrate look and feel in the browser, but perhaps more time consuming if you have to completely redesign the layout early on in the process.
Mark Smith / 18/06/2010 / 01:33
I teach / lecture media production in HE and I (as well as other areas of visual communications) are finding that more and more students are consciously moving away from paper based idea generation at the conceptual stage and heading straight to the 'Machine'.
What students need to understand is that they need to create and develop their own 'visual vocabulary' to make themselves individuals within a heavily contested market, and by running straight to the machine they miss out on that all important idea generation stage that can yield so many serendipitous visual solutions.
But more importantly they also limit their "creativity" by concentrating on what they can 'do with the machine' as opposed to "what the machine can do for them!"...they have become slaves to the damned thing instead of it being nothing more than a tool to help them 'realise' their concepts and designs.
So i find it incredibly refreshing that many of you are still creating ideas and roughs on paper and not totally relying on the machine, vive la sketch pad!
