DOCSLIB.ORG

Designing for the Web

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Designing for the Web Five Simple Steps A Practical Guide to Designing for the Web by Mark Boulton 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.fivesimplesteps.co.uk Please send errors to errata@fivesimplesteps.co.uk Publisher: Mark Boulton Design Ltd. Production Editor: Robert Mills Interior Design: Mark Boulton, Nick Boulton, Benn Pearson Cover Design: Nick Boulton Copyright © 2009 Mark Boulton Design Ltd. All rights reserved. No part of this publication may be reproduced or transmitted 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. iv v Contents PART ONE PART THREE PART FIVE Getting Started Typography Layout 3 Designing for the web 77 Anatomy 177 The Basics of Composition 9 The Job 79 Classification 196 Spatial Relationships 13 Understanding Workflow 91 Hierarchy 207 Grid Systems 17 The Tools 103 Typesetting 219 Breaking the Grid 27 Working for yourself 123 Printing the web 227 Bringing it all together PART TWO PART FOUR Research and Ideas Colour 255 Conclusions 41 The Design Process 135 The Colour Wheel 51 The Brief 141 Hue, Saturation and Brightness 57 Research 147 Colour Combinations and Mood 63 Ideas 165 Designing without Colour 69 Putting it together 169 Colour and Brand vi vii This little book is about graphic design. It’s a book about the Credit craft of graphic design practice as applied to the web. It’s not a I never imagined I’d ever finish writing this book. Without the book about CSS or Usability. I may well touch on those subjects help of the following people, it simply would not have throughout, but only to support a point I’m making in relation been possible: to design. Carolyn Wood, whose enduring patience is only outweighed Web design should use the principles of graphic by her attention to detail. Carolyn helped shape this book out design, but the topic of web design tends to focus on web of a few disparate blog posts, and was instrumental in forming standards, browser technology, user behaviour and backend the structure of what you’re about to read. development. Many web design books touch on some elements of graphic design, but they usually address the subject briefly Robert Mills, Nick Boulton, and Benn Pearson at Mark Boulton and superficially. Even most graphic design books just show Design for project management, typesetting and production. pretty pictures of other people’s work. There are not enough Steven Teerlinnk for building the backend of the website. books outlining the principles, practicalities and tools of the graphic design trade. The Britpack, in particular Andy Clarke, Simon Collison and Richard Rutter. Norm also gets a nod for never failing to Who Should Read This Book? mention the late book every time I spoke to him. A Practical Guide to Designing for the Web is for people who want to learn the basics of graphic design and apply them to Cameron Moll for his support when he was releasing his own their web designs!producing more e"ective, polished, detailed self!published book, Mobile Web Design. and professional sites. It’s also helpful for graphic designers The guys at Beanlogic for continually listening to me complain who want to brush up on the basics or learn how to integrate about the amount of work to do on this book whilst still trying what they already know about design with the demands and to hold down the day job. quirks of designing specifically for the web. Last, but certainly not least, to my wife, Emma, and daughter, Some Assumptions Alys, for putting up with me as I spent hours and hours in front ß That although the book contains little HTML or CSS, it assumes of a screen. that you have a working knowledge of web standards. ß That you work in web design and development. Business owners and managers and others who want a well!designed site may also benefit 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 definitive guide to web design or graphic design. It simply presents some of the theory, tips and processes I’ve learnt in the past fifteen years. viii x 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 Introduction 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 In the summer of 2005, just before the first @media conference the basics. in London, I wrote an article on my blog called ‘Five Simple In the first few weeks, they had us drawing type and grids Steps to Better Typography’. It was a five part series and on a drawing board. I felt more like an architecture student presented some simple facts about typography that I felt than a typography student. Wasn’t I supposed to be working on needed to be addressed, particularly on the web. a Mac? Surely that’s what designers need to know? Within two months, the tra$c on my site had doubled. In the past few years, I’ve begun to understand the simple In the following months I was Dugg twice, and Slashdotted lessons I was learning back then. To really get to grips with once, which brought my server to its knees!along with a hefty letterforms, you have to draw them. Even now, I loosely hosting bill. You might say the articles had taken o" somewhat. hand!render type in my sketchbook. If the type is a sans!serif, I After working as a designer solely for the World Wide Web hand!render a sans serif. If I plan on using Georgia, I hand! since 1997, I’ve been aware ! sometimes painfully ! of the render a close approximation. amount of web ‘designers’ in the industry who haven’t been As design for the World Wide Web is maturing, we are to design school. Don’t get me wrong, I’m not presenting some seeing a growing appreciation and willingness to learn good kind of design snobbery here, but the popularity of those graphic design practice. Studios such as Happy Cog, and articles two years ago highlighted the widespread desire for Coudal Partners, whose adoption of simple, powerful graphic some basic graphic design tips and techniques that are not design as a central service of their o"erings, have been generally well known outside of design school. influential. Now, three years on, we see a constant chatter When I finished school, I attended college to study a about grid systems and good typography. A few people are two!year course in Art. Then on to a Foundation course in Art even art directing. and Design. The first course after school was well within my Simple, sophisticated graphic design is making a shift from comfort zone. We painted, and drew in charcoal, pen and ink. the o#ine world to the web as more designers are finding that It was art, as I knew it. Foundation was a whole other ball game. the tools which were formerly so constrictive ! the browsers ! I liken it to working in a kitchen, or starting in the army. First now allow them to create the layouts that once were di$cult or o", they tell you to forget everything you’ve done before. It’s a impossible. The web is looking good, and will only get better. bit melodramatic, but they break you down, and rebuild you Originally devised over three years ago, and announced from strong foundations. over two years ago, this book has moved far beyond the I went to university in Portsmouth in the UK. It’s a small original idea of rehashing some old blog posts. Some articles university and had, at the time, one of only two undergraduate are still included, but mostly, this book has been written from typography degrees o"ered in the UK. Following a higher scratch, and is based on the premise that was central to those diploma in graphic design, I wanted to specialise in original blog posts: Five Simple Steps to Designing for the Web. 1 2 Getting 1 Started Designing for the web is di!erent than designing for any other medium. The breadth of skills required is sometimes daunting. The depth of experience required, seemingly unobtainable. Yet, the medium attracts designers from all spheres of design practice: from engineering and architecture, to product and graphic design. This chapter aims to provide a snapshot of the current state of the medium, and our role as practitioners working within it. 3 Designing for the Web ~ Getting Started 4 exciting. The mistake we all made was trying to make the Chapter One web what it isn’t. We tried imposing other media conventions on technology that it wasn’t designed for. A small example Designing for of this is HTML tables. HTML data tables are supposed to be for tabular data but, with their cells, rows and columns, they the web spoke the same visual language of graphic designers who had been using Quark XPress for all those years.
Load more

Recommended publications
  • Advanced CSS
    www.allitebooks.com AdvancED CSS Joseph R. Lewis and Meitar Moscovitz www.allitebooks.com AdvancED CSS Copyright © 2009 by Joseph R. Lewis and Meitar Moscovitz All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-1932-3 ISBN-13 (electronic): 978-1-4302-1933-0 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail kn`ano)ju<olnejcan)o^i*_om, or visit sss*olnejcankjheja*_ki. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail ejbk<]lnaoo*_ki, or visit sss*]lnaoo*_ki. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at dppl6++sss*]lnaoo*_ki+ejbk+^qhgo]hao.
    [Show full text]
  • Practical CSS3 DEVELOPAND DESIGN
    Practical CSS3 DEVELOPAND DESIGN Chris Mills Practical CSS3 DEVELOP AND DESIGN Chris Mills Practical CSS3: Develop and Design Chris Mills Peachpit Press 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the Web at: www.peachpit.com To report errors, please send a note to: [email protected] Peachpit Press is a division of Pearson Education. Copyright © 2013 by Chris Mills Acquisitions Editor: Rebecca Gulick Development and Copy Editor: Anne Marie Walker Technical Reviewers: Peter Gasston, Bruce Lawson Production Coordinator: Myrna Vladic Compositor: David Van Ness Proofreader: Patricia Pane Indexer: Valerie Haynes-Perry Cover Design: Aren Howell Straiger Interior Design: Mimi Heft Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, elec- tronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the pub- lisher. For information on getting permission for reprints and excerpts, contact [email protected]. Notice of Liability The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. Trademarks Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark.
    [Show full text]
  • Beginning HTML5 and CSS3
    For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.it-ebooks.info Beginning HTML5 and CSS3 Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian www.it-ebooks.info Beginning HTML5 and CSS 3 Copyright © 2012 by Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher's location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN-13 (pbk): 978-1-4302-2874-5 ISBN-13 (electronic): 978-1-4302-2875-2 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logos, or image we use the names, logos, or images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.
    [Show full text]
  • For Anyone Who Has Grown Disenchanted with Microsoft's Internet Explorer • Reviews Web Browser, Don't Click on the Blue E! Offers Help
    Don't Click on the Blue E! By Scott Granneman Publisher: O'Reilly Pub Date: April 2005 ISBN: 0-596-00939-9 Pages: 284 Table of • Contents • Index • Reviews Reader For anyone who has grown disenchanted with Microsoft's Internet Explorer • Reviews web browser, Don't Click on the Blue E! offers help. It gives non-technical • Errata users a convenient roadmap for switching to a better web browser-- • Academic Firefox. As the only book that covers the switch to Firefox, this how-to guide is a must for all those who want to browse faster, more securely, and more efficiently. Don't Click on the Blue E! By Scott Granneman Publisher: O'Reilly Pub Date: April 2005 ISBN: 0-596-00939-9 Pages: 284 Table of • Contents • Index • Reviews Reader • Reviews • Errata • Academic Copyright Preface Audience for This Book Organization of This Book Conventions Used in This Book We'd Like to Hear from You Safari Enabled Acknowledgments Chapter 1. The Problem with the Blue E Section 1.1. Long, Long Ago...in Internet Time Section 1.2. Mosaic Section 1.3. Netscape Section 1.4. Microsoft, IE, and the Browser Wars Section 1.5. A Long Shot That Paid Off Section 1.6. IE and Windows: Joined at the Hip Section 1.7. The Blue E: The Achilles Heel of Windows Security Section 1.8. The Red Lizard and Its Children Section 1.9. Where to Learn More Chapter 2. Installing and Configuring Firefox Section 2.1. Installing Firefox Section 2.2. Running Firefox for the First Time Section 2.3.
    [Show full text]