The Web Designer's Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design

274 Pages·2010·25.12 MB·English

by  Patrick McNeil

vol 2
WEB DESIGN E T
C
N H
A
W VEotlhuBepmmo Dep aebtDu2ils eicaosgfrat lEo nlTTwveyes,hhrexe tS’reesayba slv I oimWwIe hdesydepeee Gllwboebsab i Wep iauofn sogDso fNuh dciBnl t ke etan whto s cbihnptlIeh ohhr eghoeekiaaom,mnrgtaN s vp ’ eistoeyhrsidb’ld sesao,estryoSeh s u sIr ’sosiaefi r tdackgrxpneaP.epa nuippdtalI bp mcidearaltloBinnayeuioRilw nsroitngcnpaeonidlgsreh kr tgfA oasir daiotu wtlnnbrit yglTcgnamohlich.esiItnounioc snf ucdgmon agOsoem orddmnas w weedyniau. msst NioidsnnihtSguosg dr i rrc nnt au eoa aew ftAcmtpi cutsrot hisooeuriharaTntnwdkr ioa.nce tl ireou s ro6Pp,emAlo lcko5afl,e teaea 0 trtr syimna hencodnGoaee gerk udn n s woottedrMc rhi Lsihx.awizohc gpnsielweToN nadbhwbucie iais sllaonistb ,i tes oyh bnne ctekeet sregso ysy oew jatfyt parfcusohtrveeaem,ueoarol lrlnrlisn p iudangobsatdmeftge enes et a iedsr Wa ahogttasr epl ne gy taspblaoeoin ol nuiediear n d zm ccnelloieedun exnldittn ,etn ,ps er .tohjies ct. E IDEA WEB DESIGNER’S T H PEA T RIC KW MIc N EILE, crDe Bator of d De sigEn mEsel,t d toSwr nI.Ae c onmGd s Na n dBE s tR y l’eOsS i n vw o Ole ub ms ite e 2Kd e s i g n
B e
m
e
O h
t
t
O s
e
b
K e
US $30.00 h
t
Z6427 f
o
IIISSSBBBNNN-- 11309::7 891-7-186-0-106-606100-60916712---99X7722--44 53000 McN o r e
E m
IL
N
A
C E
P
U
9 781600 619724
ZZ66442277ccmm__WWDDIIBB22..iinndddd 11 66//3300//1100 55::1144 PPMM
2
e
m
u K
S v ol
R ’ O
E
N O
G
S I B
E
D
A
B
E
E
W
E D
H
T I
ZZ66442277ii__11FFMM..iinndddd ii 77//11//1100 1100::1177 AAMM
ZZ66442277ii__11FFMM..iinndddd iiii 77//11//1100 1100::1177 AAMM
PATRICK McNEIL, creator of designmeltdown.com
THE WEB DESIGNER’S
volume 2
IDEA BOOK
more of the best themes, trends and styles in website design
Cincinnati, Ohio
www.howdesign.com
ZZ66442277ii__11FFMM..iinndddd iiiiii 77//11//1100 1100::1177 AAMM
THE WEB DESIGNER’S IDEA BOOK, VOLUME TWO. Copyright © 2010 by Patrick
McNeil. Manufactured in the USA. All rights reserved. No other part of this book may
be reproduced in any form or by any electronic or mechanical means including infor-
mation storage and retrieval systems without permission in writing from the publisher,
except by a reviewer, who may quote brief passages in a review. Published by HOW
Books, an imprint of F+W Media, Inc., 4700 East Galbraith Road, Cincinnati, Ohio
45236. [phone]. First edition.
For more excellent books and resources for designers, visit www.howdesign.com.
14 13 12 11 10 5 4 3 2 1
Distributed in Canada by Fraser Direct
100 Armstrong Avenue
Georgetown, Ontario, Canada L7G 5S4
Tel: [phone]
Distributed in the U.K and Europe by F+W Media International
Brunel House, Newton Abbot, Devon, TQ12 4PU, England
Tel: [phone], Fax: [phone]
E-mail: [email protected]
Distributed in Australia by Capricorn Link
P.O. Box 704, Windsor, NSW 2756 Australia
Tel: [phone]
Cataloging-in-Publication data can be found on record at the Library of Congress.
Edited by Amy Schell Owen
Designed by Grace Ring
Production coordinated by Greg Nock
ZZ66442277ii__11FFMM..iinndddd iivv 77//11//1100 1100::1177 AAMM
DEDICATION ACKNOWLEDGMENTS
For Angela and Jack. As with the fi rst Web Designer’s Idea Book,
I can’t imagine how I could thank anyone
for making this second volume without
ABOUT THE AUTHOR fi rst acknowledging the countless design-
ers who worked so hard to make the
Patrick McNeil is a web developer fo-
designs presented in this book. It is the
cused on content management systems
work of others that inspires me to obsess
and front-end web development. His love
over web design, and I truly appreciate
for both technology and design makes
the passion you pour into your work. I also
the web his ideal playground, and his di-
owe many thanks to the readers and fans
verse interests allow him to be involved
of Design Meltdown and the fi rst book;
in everything from writing and speaking
your response far exceeded my expecta-
at conferences to digging into jQuery and
tions and I am grateful for your support.
advanced content management system
While many people at F+W Media make
integrations. Ultimately, his love for design
a book like this possible, I particularly
drives him to obsess over cataloging web
appreciate Amy and Grace’s efforts to
sites into the various trends and patterns
help push this book to be the best it can
presented in this very book.
be. And as always, my wife Angela is my
biggest supporter: She encourages me
to chase my dreams and sacrifi ces count-
less hours as I stay up late writing.
ZZ66442277ii__11FFMM..iinndddd vv 77//11//1100 1100::1177 AAMM
ZZ66442277ii__11FFMM..iinndddd vvii 77//11//1100 1100::1177 AAMM
table of contents
word from the author .....001 freelance ........................036 iphone as fl ourish ..........114 atypical navigation .........194
band ...............................041 social media links ..........119 atypical layouts ..............199
blog ................................045 icons ..............................123 pseudo-fl ash ..................205
01 / inspiration
personal .........................051 typographic....................129 horizontal scrolling ........210
002
design fi rm .....................055 photographic one-page ........................214
event ...............................059 backgrounds ............135
using inspiration in the
travel and tourism ..........063 07 / sites by
design process ........003
e-commerce ..................067 05 / sites by structural elements 220
business card ................072 styles and themes 139
02 / basic principles
web utility .......................075 tabs ................................221
of design 007
web software .................078 ultra clean ......................140 buttons ...........................225
real estate ......................083 minimal ...........................145 form elements ................229
emphasis .......................009
portfolios ........................087 sketchy ...........................150 helpful homepages ........236
contrast .........................012
coming soon ..................092 collage ............................154 functional footers ...........240
balance ..........................016
t-shirt.............................096 illustrated .......................160 homepage slide shows ..246
alignment .......................020
directory .........................100 type-focused .................166 404 pages ......................252
repetition ........................024
solid colors ....................171
fl ow .................................027
04 / sites by fabric ..............................177 index/permissions .........255
design elements 103 wood ..............................185
03 / sites by type
030
the pitch .........................104 06 / sites by
lighting ...........................109 structural styles 193
iphone application .........031
ZZ66442277ii__11FFMM..iinndddd vviiii 77//11//1100 1100::1177 AAMM
ZZ66442277ii__11FFMM..iinndddd vviiiiii 77//11//1100 1100::1177 AAMM
word from the author
The web is one of the fastest-changing like jQuery continue to shape the face of my fi eld. There is a reason you can google
mediums creatives can hope to work in. web sites. Flash, while still ever-present, almost any web development problem
The styles come and go as quickly as you has more and more found its place in the and quickly find an answer. We are a
can imagine, and new development tech- myriad of web development tools and is community of people passionate about
niques are always emerging. These new no longer the de facto standard for sites what we do and fearless about sharing
techniques lead to other trends and pat- that demand to be amazing. And mobile that knowledge. I sincerely hope that this
terns that turn up in countless web sites. platforms have become an unstoppable book can be part of my contribution to the
On the whole, I am thrilled to see how the force that will drive change in the industry. web community.
web industry is progressing. The past year The web is evolving, the same as it always
was a good one for web design. We saw has. If you’re up for it, the web industry —Patrick McNeil
many of the web 2.0 fads fade, such as offers endless opportunities to grow and
frivolous badges and an insatiable use of learn. And this is just what I and so many
glossy designs; in their place, a refined others are addicted to.
Note: If you would like to submit your designs for possible
style with a sense of purpose has emerged. It is this addiction which drives me to use in future books, please visit TheWebDesignersIdea
I can’t help but refl ect on how much obsess over trends and patterns and form Book.com to sign up for our semi-annual mailing list. You
will be informed of book releases, calls for entries and
things have changed since the original them into this book. In fact, I am already
other information directly related to the books. Submitting
Web Designer’s Idea Book, especially thinking about what books three and four sites is free, easy to do and is open to anyone. And if you
from a technology standpoint. With might contain. I believe I share this insa- think you are too small of a shop to submit your work, I
encourage you to do so anyway. I pride myself on profi ling
much wider acceptance of JavaScript- tiable appetite for learning, growth and
many lesser-known sites. My books showcase what is
based tools than ever before, libraries better understanding with many people in happening on the web, not just the most expensive sites.
001
ZZ66442277ii__PPAARRTT11--11..iinndddd 000011 77//11//1100 1100::1188 AAMM