Đang tải... (xem toàn văn)
Đây là tài liệu quan trọng hướng dẫn về phát triển sản phẩm trong lĩnh vực thương mại điện tử, Hai khái niệm ux và ui sẽ được làm sáng tỏ ở tài liệu này
ptg ptg 1 The - Non - De sign er ’ s - Design - B 0 oK - th rd edition - J design and ty po graph ic principles for the visual novice Robin Williams Peachpit Press Berkeley California ptg © by Robin Williams Peachpit Press Eighth Street Berkeley, California .. .. Editor: Nancy Davis Interior design: Robin Williams Production: Robin Williams Cover design and production: John Tollett Peachpit Press is a division of Pearson Education. Find us on the web at www.Peachpit.com. To report errors, please send a note to errata@peachpit.com. The Non-Designer’s Design Book third edition C e quote by Jan White on page is from the out-of-print book How to Spec Type, by Alex White. Reprinted courtesy of Roundtable Press, Inc. Copyright by Roundtable Press, Inc. e portions of “Ladle Rat Rotten Hut” and other stories, such as “Guilty Looks Enter Tree Beers,” “Center Alley,” and “Violate Huskings” are from a long out-of- print book by Howard L. Chace called Anguish Languish. It is our understanding that these delightful stories are now in the public domain. ey are easily found on the Internet. Notice of rights All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on obtaining permission for reprints and excerpts, please contact permissions@peachpit.com. Notice of liability e information in this book is distributed on an “as is” basis, without warranty. While every precaution has been taken in the preparation of this book, neither the author nor Peachpit Press shall have any liability to any person or entity with respect to any liability, 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 herein. : ---- : --- Printed and bound in the United States of America ptg S S o armen heldon, my comrade in esign, my friend in ife. with great love, . ptg ore matter is being printed and pub lished today than ever before, and every publisher of an ad ver tise ment, pamphlet, or book expects his material to be read. Publishers and, even more so, readers want what is important to be clearly laid out. ey will not read anything that is trou ble some to read, but are pleased with what looks clear and well ar ranged, for it will make their task of understanding easier. For this reason, the important part must stand out and the un im por tant must be sub dued . . . . e technique of modern typography must also adapt itself to the speed of our times. Today, we cannot spend as much time on a letter heading or other piece of jobbing as was possible even in the nineties. } Jan Tschichold 1935 typefaces Miss Fajardose Garamond Premier Pro Regular and Italic } Type Embellishments One typefaces Flyswim Schablone Rough Helvetica Regular Schablone Labelrough Positive Paul Rand The function of Readability is often ta-ken too literally and over- emphasized at the Cost of INDIVIDUALITY. Paul Rand 1914 ≥ 1996 ptg Contents 1 2 3 4 5 Is this book for you? . . . . . . . . . . . . . . . . . . . . . . . . . . . The Joshua Tree Epiphany The four basic principles . . . . . . . . . . . . . . . . . . . . . . . Proximity Summary of proximity . . . . . . . . . . . . . . . . . . . . . . . . . The basic purpose . . . . . . . . . . . . . . . . . . . . . . . . How to get it . . . . . . . . . . . . . . . . . . . . . . . . . . . . What to avoid . . . . . . . . . . . . . . . . . . . . . . . . . . . Alignment Summary of alignment . . . . . . . . . . . . . . . . . . . . . . . . The basic purpose . . . . . . . . . . . . . . . . . . . . . . . . How to get it . . . . . . . . . . . . . . . . . . . . . . . . . . . . What to avoid . . . . . . . . . . . . . . . . . . . . . . . . . . . Repetition Summary of repetition . . . . . . . . . . . . . . . . . . . . . . . . . The basic purpose . . . . . . . . . . . . . . . . . . . . . . . . How to get it . . . . . . . . . . . . . . . . . . . . . . . . . . . . What to avoid . . . . . . . . . . . . . . . . . . . . . . . . . . . Contrast Summary of contrast . . . . . . . . . . . . . . . . . . . . . . . . . . The basic purpose . . . . . . . . . . . . . . . . . . . . . . . . How to get it . . . . . . . . . . . . . . . . . . . . . . . . . . . . What to avoid . . . . . . . . . . . . . . . . . . . . . . . . . . . Desi g n Principles ptg 6 6 7 8 Review Proximity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Repetition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Little Quiz #1: Design principles . . . . . . . . . . . . . . . . . . Little Quiz #2: Redesign this ad . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using Color The amazing color wheel . . . . . . . . . . . . . . . . . . . . . . . Color relationships . . . . . . . . . . . . . . . . . . . . . . . . . . . Complementary . . . . . . . . . . . . . . . . . . . . . . . . . Triads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Split complement triads . . . . . . . . . . . . . . . . . . . . Analogous colors . . . . . . . . . . . . . . . . . . . . . . . . Shades and tints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Make your own shades and tints . . . . . . . . . . . . . . Monochromatic colors . . . . . . . . . . . . . . . . . . . . Shades and tints in combination . . . . . . . . . . . . . . Watch the tones . . . . . . . . . . . . . . . . . . . . . . . . . . . . Warm colors vs. cool colors . . . . . . . . . . . . . . . . . . . . How to begin to choose? . . . . . . . . . . . . . . . . . . . . . . cmyk vs. rgb; print vs. web . . . . . . . . . . . . . . . . . . . . Extra Tips & Tricks Creating a package . . . . . . . . . . . . . . . . . . . . . . . . . . Business cards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tips on designing business cards . . . . . . . . . . . . . . . Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Type size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create a consistent image on all pieces . . . . . . . . Letterhead and envelopes . . . . . . . . . . . . . . . . . . . . . Tips on letterhead and envelope design . . . . . . . . . . Envelope size . . . . . . . . . . . . . . . . . . . . . . . . . . Create a focal point . . . . . . . . . . . . . . . . . . . . . Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . Second page . . . . . . . . . . . . . . . . . . . . . . . . . . Faxing and copying . . . . . . . . . . . . . . . . . . . . . . ptg 7 Flyers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tips on designing flyers . . . . . . . . . . . . . . . . . . . . . Create a focal point . . . . . . . . . . . . . . . . . . . . . . Use subheads that contrast . . . . . . . . . . . . . . . . . Repetition . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tips on designing newsletters . . . . . . . . . . . . . . . . . Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . Paragraph indents . . . . . . . . . . . . . . . . . . . . . . . Not Helvetica! . . . . . . . . . . . . . . . . . . . . . . . . . . Readable body copy . . . . . . . . . . . . . . . . . . . . . Brochures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tips on designing brochures . . . . . . . . . . . . . . . . . . Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Repetition . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . Proximity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Postcards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tips on designing postcards . . . . . . . . . . . . . . . . . . What’s your point? . . . . . . . . . . . . . . . . . . . . . . . Grab their attention . . . . . . . . . . . . . . . . . . . . . . Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Newspaper ads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tips on designing newspaper ads . . . . . . . . . . . . . . Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Type choices . . . . . . . . . . . . . . . . . . . . . . . . . . Reverse type . . . . . . . . . . . . . . . . . . . . . . . . . . Web sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tips on designing web pages . . . . . . . . . . . . . . . . . Repetition . . . . . . . . . . . . . . . . . . . . . . . . . . . . Clarity/Readability . . . . . . . . . . . . . . . . . . . . . . . ptg 8 Type (& Life) Concord . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Conflict . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Categories of Type Oldstyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Slab serif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sans serif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Decorative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Be conscious . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Little Quiz #3: Categories of type . . . . . . . . . . . . . . . . Little Quiz #4: Thick/thin transitions . . . . . . . . . . . . . . . Little Quiz #5: Serifs . . . . . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Type Contrasts Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Combine the contrasts . . . . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Little Quiz #6: Contrast or conflict . . . . . . . . . . . . . . . . Little Quiz #7: Dos and don’ts . . . . . . . . . . . . . . . . . . An exercise in combining contrasts . . . . . . . . . . . . . . . D esi g ning W th T ype 9 10 11 ptg It stinks . Herb Lubalin But , is it appropriate? Edward Gottschall E xtras 14 1 3 9 So, Does it Make Sense? The process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . An exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Okay—redesign this! . . . . . . . . . . . . . . . . . . . . . . . . . Answers to Quizzes Typefaces in this Book Primary faces . . . . . . . . . . . . . . . . . . . . . . . . . . Modern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Oldstyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Slab serif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sans serif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ornaments . . . . . . . . . . . . . . . . . . . . . . . . . . . . Decorative . . . . . . . . . . . . . . . . . . . . . . . . . . . . Appendix OpenType . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Mini-glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Index Colophon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 . to errata @peachpit. com. The Non- Designer’s Design Book third edition C e quote by Jan White on page is from the out-of-print book How. ptg 1 The - Non - De sign er ’ s - Design - B 0 oK - th rd edition - J design and ty po graph ic principles for the visual novice Robin Williams Peachpit