LessFuss Design

For a recent project I was asked to come up with some (very) rough design ideas for a site where the client wanted a ‘grungy’ look. Because the client was only after some rough layout ideas and nothing polished, I put aside Photoshop and for the first time in years took to paper, pencil crayon and felt tips. I’d forgotten how enjoyable – and liberating – working with the old traditional media is. But if hand drawing isn’t your thing, but you like the sketched-style wireframes for presenting layout ideas, there’s plenty of good – and reasonably priced – software packages out there.
Designers of my generation for the most part learned the fundamentals of design on paper. At art college we would mock up magazine layouts by hand-typing all the text, which meant emulating as closely as possible the flourishes of every font, with as steady a hand as you could manage. None of your Lorem Ipsum copy and paste here. They were only installing Macs in my graduation year, and the discipline of web design was several years away from the curriculum (yes I am that old!).

True, the leaps in technology, advances in design software and the contribution of the design community itself (I doubt if there’s an effect or technique you can’t get a Photoshop brush set or tutorial for these days) have enabled designers to get from idea to mock-up faster and more efficiently. But there’s also something to be said for setting aside the comfort the software gives you and getting your ideas down on paper, assuming you have the luxury of time and space to do so.

Why are rough mock-ups important?

According to Clive Howard ‘Possibly the biggest mistake in any development project is failure to plan’ (20 Steps to Better Wireframing ). While he’s talking specifically about planning the user journey through complex applications – and deliberately putting the aesthetic side of things to one side – the same can equally be said of even the smallest web projects. Whether you’re sketching ideas by hand or using a computer, working up some rough layouts is the place to start.

I for one am guilty of getting what I believe to be a great idea for a design in my mind and going straight to Photoshop to get it mocked up in as much detail as possible. And quite often the result doesn’t seem half as good as it did in my head. Just an hour or so getting the bare bones of that design/layout on paper can expose any failings much sooner, saving you time mocking up polished layouts that might not work. For a small-scale freelancer like me the wasted time may not be life threatening, but if you’ve got a big client on a tight timescale then using up time and budget down a dead-end probably isn’t going to go down well.

Separating design & function

Another good reason for mocking up is that its a chance to separate the design from the function and usability of a site. True, a good design with stunning use of colour, image or typography can make or break a website or web application – but in the planning phase you’re best off concentrating on what needs to be on the page and where on the page it should be – not so much what it’s going to look like to the user.

‘I want it to look like this…’

This is especially important with clients who come to you with a strong idea of what they want. Often they know what imagery they want to use, what colours they want, and where on the page they want things. It can be very tempting just to leap in and start on a design, but coming up with some roughs that deliberately leave out the design elements help the client to focus on what the site is doing, and not just how its going to look. It may be that after that, they’ll rethink what they want – and better that happens before you’ve spent several days tinkering in Photoshop.

Wireframing software

If you don’t fancy putting pencil to paper then there’s some good software packages that can help you out, some of which will even output wireframes and layouts in a hand-drawn, sketchy style.

Last month Gary Barber reviewed 16 design tools for prototyping and wireframing on sitepoint.com, and while the list included the usual suspects like Visio and OmniGiraffe , and heavyweight enterprise products like iRise (suitable for big teams with complex workflow), there were also a couple of very useful ones for the likes of me (small budget, basic feature requirements and no bells and whistles).

The first was Balsamiq Mockups , a lightweight wireframing tool that for under £50 comes with a collection of predefined sketched-style shapes to drag, drop and move around to build mock-ups quickly and easily.

The second one that caught my eye was a free Firefox plug-in called Pencil . You have to create the shapes you’ll use yourself, but once you’ve got a collection of different style boxes and buttons you can use Pencil to build layouts and wireframes all within your favourite browser (Firefox version 3 and upwards).

Of course, if you’re comfortable using applications like Photoshop then there’s no reason why you can’t use those for creating mock-ups and wireframes – just as long as you can resist the urge to develop them into more than the basic outlines until you have something you and/or your client are happy with.

Further reading

1. 20 Steps to better wireframing :: thinkvitamin.com
   Colin Barber’s discussion of the importance of wireframing – particularly when it comes to application design, where you need to concentrate on how the thing is going to work long before you decide what it should look like.
2. Sketching in code: the magic of prototyping :: alistapart.com
   Again on the subject of application development, this articles goes from wireframing to the next step – prototyping, or ’sketching in code’, as with today’s rich internet applications it’s gettting harder to see how something will work from a static wireframe or image.
3. Why we skip Photoshop :: 37signals.com
   A great piece from 37Signals on why they go straight from hand-drawn sketches to HTML & CSS. It’s a good argument, and one that’s provoked a lot of comment.
4. 16 design tools for prototyping and wireframing :: sitepoint.com
   A look at 16 different products – from the free to the very expensive – to help take the hassle out of wireframing.