Web Design for Developers.pdf

Web Design for Developers

A Programmer’s Guide

to Design Tools and Techniques

Brian P. Hogan

Many of the designations used by manufacturers and sellers to distinguish their prod-

ucts are claimed as trademarks. Where those designations appear in this book, and The

Pragmatic Programmers, LLC was aware of a trademark claim, the designations have

been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The

Pragmatic Programmer, Pragmatic Programming, Pragmatic Bookshelf and the linking g

device are trademarks of The Pragmatic Programmers, LLC.

Every precaution was taken in the preparation of this book. However, the publisher

assumes no responsibility for errors or omissions, or for damages that may result from

the use of information (including program listings) contained herein.

Our Pragmatic courses, workshops, and other products can help you and your team

create better software and have more fun. For more information, as well as the latest

Pragmatic titles, please visit us at

http://www.pragprog.com

No part of this publication may be reproduced, stored in a retrieval system, or transmit-

ted, in any form, or by any means, electronic, mechanical, photocopying, recording, or

otherwise, without the prior consent of the publisher.

Printed in Canada.

Contents

1 Introduction 13

1.1 Before We Get Started... .................. 13

1.2 The Design Process in Action ............... 14

1.3 YourFoodbox.com ...................... 16

1.4 Ready to Go? ......................... 17

1.5 Acknowledgments ...................... 17

I The Basics of Design

2 The Basics of Site (Re)design: Redesigning Foodbox 20

2.1 The Existing Site ...................... 20

2.2 Gathering Requirements .................. 23

2.3 Know Your Purpose ..................... 24

2.4 Where to Go from Here ................... 26

2.5 Sketching Your Ideas .................... 27

2.6 Sketch Selection ....................... 31

2.7 Summary ........................... 31

3 Choosing Colors 33

3.1 The Basics of Color ..................... 33

3.2 Color Context ........................ 36

3.3 Evoking Emotion with Color ................ 37

3.4 Color Schemes ........................ 41

3.5 The Web-Safe Color Palette ................ 46

3.6 Building Color Schemes .................. 47

3.7 Choosing Your Scheme ................... 58

CONTENTS

4 Fonts and Typography 62

4.1 Font Anatomy ........................ 62

4.2 Font Types .......................... 63

4.3 Dealing with Font Limitations ............... 65

4.4 Selecting Our Fonts ..................... 69

4.5 Using the Baseline Grid .................. 71

4.6 Summary ........................... 76

II Adding Graphics

5 Designing the Foodbox Logo 78

5.1 Setting Up a Working Folder ................ 78

5.2 The Foodbox Logo ...................... 79

5.3 What If We Need to Create Our Own Logo? ....... 84

5.4 Summary ........................... 85

6 Design Mock-up: The Structure 86

6.1 A Bit About Layers ..................... 86

6.2 The Basic Structure .................... 87

6.3 Placing the Logo ....................... 93

6.4 Organizing Our Composition with Layer Groups .... 94

6.5 Adding a Reﬂection to Our Logo ............. 94

6.6 The Footer .......................... 96

6.7 Wrapping Up ......................... 96

7 Design Mock-up: The Content 97

7.1 Creating the Search Box .................. 97

7.2 The Browse Recipes Tag Cloud .............. 99

7.3 Scope Creep ......................... 100

7.4 Mocking Up a Tasty Masthead .............. 100

7.5 Main Content ........................ 103

7.6 Simulating the Browser .................. 104

7.7 Summary ........................... 106

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: