Five Simple Steps - Designing for the Web.pdf - Projektowanie stron www - Georgo

Five

Simple

Steps

A Practical Guide to

Designing

by Mark Boulton

licensed to Denis (1 user license)

for the Web

A Practical Guide to Designing for the Web

by Mark Boulton

Mark Boulton Design Ltd

Studio Two, The Coach House

Stanwell Road

Penarth

CF64 3EU

United Kingdom

On the web: www.ﬁvesimplesteps.co.uk

Please send errors to errata@ﬁvesimplesteps.co.uk

Publisher: Mark Boulton Design Ltd.

Production Editor: Robert Mills

Interior Design: Mark Boulton, Nick Boulton, Benn Pearson

Cover Design: Nick Boulton

in any form or by any means, electronic or mechanical, including photocopy,

recording or any information storage and retrieval system, without prior

permission in writing from the publisher.

licensed to Denis (1 user license)

Contents

PART ONE

Getting Started

Designing for the web

The Job

Understanding Workﬂow

The Tools

Working for yourself

103

123

PART THREE

Typography

Anatomy

Classiﬁcation

Hierarchy

Typesetting

Printing the web

177

196

207

219

227

PART FIVE

Layout

The Basics of Composition

Spatial Relationships

Grid Systems

Breaking the Grid

Bringing it all together

PART TWO

Research and Ideas

The Design Process

The Brief

Research

Ideas

Putting it together

PART FOUR

Colour

The Colour Wheel

Hue, Saturation and Brightness

Colour Combinations and Mood

Designing without Colour

Colour and Brand

255

Conclusions

135

141

147

165

169

licensed to Denis (1 user license)

vii

This little book is about graphic design. It’s a book about the

craft of graphic design practice as applied to the web. It’s not a

book about CSS or Usability. I may well touch on those subjects

throughout, but only to support a point I’m making in relation

to design.

Web design should use the principles of graphic

design, but the topic of web design tends to focus on web

standards, browser technology, user behaviour and backend

development. Many web design books touch on some elements

of graphic design, but they usually address the subject brieﬂy

and superﬁcially. Even most graphic design books just show

pretty pictures of other people’s work. There are not enough

books outlining the principles, practicalities and tools of the

graphic design trade.

Credit

I never imagined I’d ever ﬁnish writing this book. Without the

help of the following people, it simply would not have

been possible:

Carolyn Wood, whose enduring patience is only outweighed

by her attention to detail. Carolyn helped shape this book out

of a few disparate blog posts, and was instrumental in forming

the structure of what you’re about to read.

Robert Mills, Nick Boulton, and Benn Pearson at Mark Boulton

Design for project management, typesetting and production.

Steven Teerlinnk for building the backend of the website.

The Britpack, in particular Andy Clarke, Simon Collison

and Richard Rutter. Norm also gets a nod for never failing to

mention the late book every time I spoke to him.

Who Should Read This Book?

A Practical Guide to Designing for the Web is for people who

want to learn the basics of graphic design and apply them to

their web designsproducing more eective, polished, detailed

and professional sites. It’s also helpful for graphic designers

who want to brush up on the basics or learn how to integrate

what they already know about design with the demands and

quirks of designing speciﬁcally for the web.

Cameron Moll for his support when he was releasing his own

selfpublished book, Mobile Web Design.

The guys at Beanlogic for continually listening to me complain

about the amount of work to do on this book whilst still trying

to hold down the day job.

Some Assumptions

That although the book contains little HTML or CSS, it assumes

that you have a working knowledge of web standards.

Last, but certainly not least, to my wife, Emma, and daughter,

Alys, for putting up with me as I spent hours and hours in front

of a screen.

That you work in web design and development. Business

owners and managers and others who want a welldesigned

site may also beneﬁt from reading this book, but the book is

directed at the people who plan and create websites.

That this book doesn’t aim to be a deﬁnitive guide to web

design or graphic design. It simply presents some of the theory,

tips and processes I’ve learnt in the past ﬁfteen years.

licensed to Denis (1 user license)

viii

Introduction

typography, as I felt there was still much more to learn

than in the six months devoted to the subject at university.

In Portsmouth I was educated by two book designers

approaching retirement. When I arrived, I wanted to learn

about type, but on a Mac. I’d spent the summer as an intern at

an advertising agency in Manchester, setting tables and forms

on an old Quadra. But no, the course in Portsmouth was about

the basics.

In the ﬁrst few weeks, they had us drawing type and grids

on a drawing board. I felt more like an architecture student

than a typography student. Wasn’t I supposed to be working on

a Mac? Surely that’s what designers need to know?

In the past few years, I’ve begun to understand the simple

lessons I was learning back then. To really get to grips with

letterforms, you have to draw them. Even now, I loosely

handrender type in my sketchbook. If the type is a sansserif, I

handrender a sans serif. If I plan on using Georgia, I hand

render a close approximation.

As design for the World Wide Web is maturing, we are

seeing a growing appreciation and willingness to learn good

graphic design practice. Studios such as Happy Cog, and

Coudal Partners, whose adoption of simple, powerful graphic

design as a central service of their oerings, have been

inﬂuential. Now, three years on, we see a constant chatter

about grid systems and good typography. A few people are

even art directing.

Simple, sophisticated graphic design is making a shift from

the oine world to the web as more designers are ﬁnding that

the tools which were formerly so constrictive the browsers

now allow them to create the layouts that once were dicult or

impossible. The web is looking good, and will only get better.

Originally devised over three years ago, and announced

over two years ago, this book has moved far beyond the

original idea of rehashing some old blog posts. Some articles

are still included, but mostly, this book has been written from

scratch, and is based on the premise that was central to those

original blog posts: Five Simple Steps to Designing for the Web.

In the summer of 2005, just before the ﬁrst @media conference

in London, I wrote an article on my blog called ‘Five Simple

Steps to Better Typography’. It was a ﬁve part series and

presented some simple facts about typography that I felt

needed to be addressed, particularly on the web.

Within two months, the trac on my site had doubled.

In the following months I was Dugg twice, and Slashdotted

once, which brought my server to its kneesalong with a hefty

hosting bill. You might say the articles had taken o somewhat.

After working as a designer solely for the World Wide Web

since 1997, I’ve been aware sometimes painfully of the

amount of web ‘designers’ in the industry who haven’t been

to design school. Don’t get me wrong, I’m not presenting some

kind of design snobbery here, but the popularity of those

articles two years ago highlighted the widespread desire for

some basic graphic design tips and techniques that are not

generally well known outside of design school.

When I ﬁnished school, I attended college to study a

twoyear course in Art. Then on to a Foundation course in Art

and Design. The ﬁrst course after school was well within my

comfort zone. We painted, and drew in charcoal, pen and ink.

It was art, as I knew it. Foundation was a whole other ball game.

I liken it to working in a kitchen, or starting in the army. First

o, they tell you to forget everything you’ve done before. It’s a

bit melodramatic, but they break you down, and rebuild you

from strong foundations.

I went to university in Portsmouth in the UK. It’s a small

university and had, at the time, one of only two undergraduate

typography degrees oered in the UK. Following a higher

diploma in graphic design, I wanted to specialise in

licensed to Denis (1 user license)

Five Simple Steps - Designing for the Web.pdf

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: