The Principles of Beautiful Web Design (Book review)
Not all of us are great graphic designers. That includes me. I occasionally do a bit of design dabbling, but I do not feel very confident at coming up with something completely on my own. Semantics, structure, nice and valid code, no problem. Tweaking an existing design? Sure. But creating a graphic design from scratch? I’d rather not.
However, armed with Jason Beaird’s book The Principles of Beautiful Web Design, I can at least get a better grip on some of the principles behind graphic design for the Web.
The book’s five chapters describe and explain the major parts of the design process: layout and composition, colour, texture, typography, and imagery. Everything is explained in a straightforward and, as far as I can tell, correct way.
I don’t agree fully with everything in this book from a technical (coding) point of view, and I don’t even think most of the graphic design examples are really that good looking. Reading the book will, however, give you some solid design theory to help you create better designs or make better decisions when modifying existing designs.
Obviously reading this book will not make you a great graphic designer. I think you need talent for that, and some of us just don’t have that. But what this book will do for you is help you understand how graphic design works. That, in turn, will help you when you need to do a bit of design work as well as when communicating with graphic designers.
- The Principles of Beautiful Web Design
- Author: Jason Beaird
- ISBN-10: 0975841963
- ISBN-13: 978-0975841969
- Previous post: Help keep accessibility and semantics in HTML
- Next post: Is HTML 5 a slippery slope?
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
I guess I am in the same boat as you - I am very comfortable coding, I even consider it fun... however, once in a while I am asked to redesign a site at work. Staring at a blank canvas in photoshop, I find myself getting stuck at "Where do I begin?".
I have no formal training/education in graphic design, and sometimes wonder if I am even capable or creative enough to be a designer. I manage to get the job done when asked, but I am never happy with it.
That being said, I would love to get more comfortable designing sites, not just coding. Roger, would you recommend this book for someone like me?
This book kinda reminds me of Transcendence CSS...
AdamA: Start with a paper. Draw the layout in broad strokes. Then continue with some closeups on important areas on a separate paper, and try to start thinking about sizes an contrasts ("what needs to be emphasized?" "what can be toned down?") for each page. Try also to keep in mind what the user needs to do on the page in question, and keep removing or tone down what you find conflicts with that workflow. Just some tips on top of my mind.
AdamA: Yeah, I'd say this book is for someone like you :-).
Nick: I don't think this book has a whole lot in common with Transcending CSS. Some parts, perhaps.
Anton: Good tips :-).
AdamA, if you check the book in www.sitepoint.com you can get a chapter sample...
As a professional web designer, I must admit I cannot say exactly how I do my work, there's lots of "implicit" knowledge. I'm not sure I could write a "how to design" book because like Roger said, design is down to something intangible called "talent". Talent isn't always something you're born with, you can develop it but takes love (to your work), time (do it every day) and dedication (be persistent and don't give up).
With that said, there are still a couple of things that I find myself doing:
look at designs and trying to analyze them, making sure to remember and pick apart beautiful designs, understanding what makes them tick
being extremely critical of my own work, trying to find ways to improve it
go to some of the best sites that showcase great designs (such as CSS Remix) to "bring myself down" from time to time helping me see the "next summit", and find sources of inspiration
"kill my darlings", don't stick with an idea just because I've gotten used to it or I have grown fond of it, instead taking a very non-sentimental approach to what works and what doesn't
look at details as well as the whole, bad details can ruin a good whole, and lots of nicely designed details don't necessarily make a great whole either
I'm currently reading this book, and I can really recommend it to others like me, e.g. the target audience of this book.
Apart from actually learning a thing or too, I find it to be very inspiring as well.
Jason Baird can consider it a job well done.
I was slightly worried about this from the sample chapter:
Hope there's not too much similar sort of advice in the rest of the book.
What I've started to do to design/re-design sites is use Inkscape. It gives me great block-level tools for basic layouts, I can use transparencies where I want/need to, I can write notes on layers so I can hide/view them, it lets me import the actual graphics if/when I have them, and a bunch of other handy little things that SVG design does better than raster graphics in Photoshop/GIMP.
Heck, I can even set up rounded or squared corners on my blocks to see what I like better for a given design. I can export snapshots, even use it to design elements. (It's GREAT for those "much needed" cough, cough web 2.0 violators. :P )
You can group items, move 'em around, play with it, and undo things with ease. It's a fabulous tool - and it's free if you don't already have something like Illustrator on your machine. (inkscape.org) One of the best tools I've ever found. Helps keep me focused on a design instead of my old system of design on the fly ... and ending up with a mess in the end.
here is a pdf from sxsw about designing on a grid ... it was interesting to flip through to witness the process of design from scratch:
gridsaregood.pdf
Do you mind letting me borrow this one? ;) I hit a major snag designing some of my own stuff and I think I feel an ulcer coming.
During 2001-2004 I spent my time studying graphical communication and media, which gave me really nice knownledge and courage to create good designs. After that, I began studying computer engineering and web development, which was my true interests. Unfortunately, my great design skills began to fade when my design oriented mind tranversed into a developer's mind. My markup is great, with usability and accessibility in mind, but my pages have lost their excellent and artistic designs.
Then I read this book.
Suddenly, I could do a backtrace and start to find the designer mind, which was buried deep under the developer, and very slow I start to be able to think as an designer again.
Really great book!
AdamA, if you are struggling to find creativity there are books available that can up stir up the creativity for you to start designing. For instance, one that I use frequently is called "Caffeine for the creative mind." you can pick it up on Amazon-- it has been a world of help for me in the past. I hope it can help you also.
I quite liked this book but I did find it a little basic.
I am also a coder rather than a graphic designer and all in all I agree with this book. For someone who is getting started it should prove very useful.
Yep, I'm reading it at the moment.
Finding it a little bit basic - but hey that's designers for you (only joking!)
The best thing it's taught me is how important it is to have a design process - rather than what that process actually is.
Well, I have studied both architecture and computer science, so I think I have a good background on both things, but I am still very skeptic in talking about innate talent.
I consider myself a designer now, as much as a SW developer, but I had to learn my way to that.
I started to write a loooong comment here, so I decided to write it like a post on my blog.
Regards!
I glanced at this book at my local bookstore. I think this is a very good book for anyone new to web design or a good coder whith limited graphical background. But if you have any sort of background in design then contnt of this book will fell familiar and only cover the basics. Again a very good book but only for the target audiance.
I just wanted to thank everyone who offered me advice/recommendations. You guys rock :)
It still goes beyond me, why a webdesigner is not always a graphic talent? It should be, of course, technique and skills improve over time.
Hi. Very interesting advice from everyone! Thanks. Also, i think that talent doesn't come with the genes. Of course, some have an inclination towards some form of art, and others don't, but if you are perseverent, learn some technique, analyse other works and be authentic in making yours, you can make it.
I'm not a designer, but i want to try it out, and this book looks like a very good start.
Also on grids, i found this very helpful: http://www.markboulton.co.uk/journal/comments/simplestepstodesigninggrids/ (but you probably know it already.)
Sorry, i didn't realize that the pdf from SXSW was made by mr Boulton as well. Anyway, the articles have a different approach, and if you join them up with his other series (about color theory and contrast) you end up with a pretty good start for a design process.
Was thinking of buying the book and even have downloaded the sample chapters from Sitepoint but just have not got around to reading them yet.
Will need to chuck it on my "to do list"
Thanks for the review
I might be able to shed some light on the topic. I have been a designer for at least 15 years now, and I have instructed design theory and advanced design app courses throughout my career. I have to say that one of the most profound things that I will always enjoy about teaching is what I call the "awakening". When a student finally "sees" and accepts the subtle things. Having the eye for it. Over time, it turns doodles into works of art, FrontPage users into hand-coding "standardistas", HTML coders into full-blown developers. Awakening your inner-designer begins with simply curiosity, followed with diligence and continues with long hours past your bedtime trying to get something right. It's the "hhmmm, something is still out of place" thinking.
Are people born with talent? I have to say yes, that is why we have superstars in sports and dalai lamas. My theory on talent is that these people had that "awakened" switch turned on at birth. I also beleive that people have the ability to turn that switch on. The next and involuntary step after the awakening is the addiction, the self pursuit of doing something better. As a past educator, you know your job is done when that light turns "on", because it never turns off.
Books are a great resource, they open your mind to possibilities, no matter how bad or how good they may be. It really is up to you, and how you choose to absorb it and make it your own. Being very old school (pre-computers) it's this awakening and addiction that leads you down a very long road of self-education, self-discovery and personal achievement. This pretty much applies to anything you do. If anyone is really serious about getting into design, I strongly suggest picking up one of the many books about "basic design theory". You'll know you have the right book if it's filled with a lot of black and white dots and lines. The principles you will find apply to this very day. You will know when you have "reached that point" when you begin to understand. Everything changes, your entire outlook on life changes. You start looking differently at print, web, tv graphics, typography, traffic signs, apple products, the monitor bezel in front of your face, furniture, celebrity red carpet attire, and restroom signs.
In closing, I believe that everyone here, already has that switch turned on, or else you wouldn't be here. You are all here to "find a better way", because "something isn't quite right". In this case, it's for building better websites. All you need to do now, is apply it to a different medium. So in that sense, you are already ahead of your inhibitions.
I have been visiting Roger's site quite frequently these days, and though I highly respect him I must disagree with his suggestion that people must have talent in order to be (great) designers. Sure, there are those who seem to be naturally gifted, who require only little or no training to crank out amazing designs and artwork. And naturally, we envy them, just like we envy people who have killer metabolisms and eat all day but never get fat, while the rest of us do our rounds on our treadmills like little rodents.
Regarding those gifted people now (those with the exceptional metabolisms): they are in great shape naturally. They don't need to work out to stay lean. But does that mean that the rest of us can't get lean? No, it does not. Of course we can! It just takes a little more effort for us "non-gifted", that's all.
The same goes for designing and being (or becoming) a designer. It takes effort to get to that level where you can create stunning designs. More specifically, it takes training.
Though I consider myself a creative person - and I have created some real nice designs and artwork in the past -, the thought of sitting down and designing with "purpose" (for a specific project with a specific design goal) scared the hell out of me. "How on earth do I do that?"
Well, here's some great news for all of you who are comfortable in the "analytical" and logical department, those of you who are comfortable with code and markup and use your brains rather than your artistic intuition:
The design process can be logical and analytical too.
As a matter of fact, there are certain principles that you apply while designing, just as you would use a recipe to bake a cake. There's lots of "dry" planning involved, too - oh, you coders are going to love it! ;)
I'd like to mention, though, that I'm not an experienced designer. I just got started. Thus I know what many of you go through when you think of "design". It might make you uncomfortable. But that's totally ok. Just as you learned how to code and all about markup, you'll learn how to design. There's no difference there, really. I'm currently enrolled in a class that opened my eyes on "design". I highly recommend it to any of you who'd like to create effective designs for the web:
http://www.eclasses.org/cgi-bin/ql/pullout.cgi?template=listing/coursemaininfo.htm&listing.ID=0010188
IWA members get a $100 discount on the class. http://iwanet.org/
Treat yourself this class. You won't regret it!
Bottom line: to be able to design you don't necessarily need to be in communication with your "higher spirits", and you don't need to be particularly intuitive and artistically inclined. And besides, don't confuse designing for the web with creating works of art (see design spectrum article further below). So you don't need to be a Rembrandt to get some serious work done. Good news indeed, eh?
Here are some interesting links for you to check out:
http://www.webdesignfromscratch.com/designspectrum.cfm http://www.webdesignfromscratch.com/designlikenooneswatching.cfm http://www.webdesignfromscratch.com/dontdecorate_communicate.cfm
Harry
I think anyone can design a 'usable' website.
However, I am not a great designer but take inspiration from others designs.
Recently I have discovered templates (of which there are plenty of free ones on the www) are a great place to start off a new site.
I don't see myself as a good graphic designer for web at all. I know the underlying XHTML and CSS part of a site's template, but exactly what makes a site look so darned good currently escapes me.
I am however VERY critical to design books. So critical infact that I own only one, and it wasn't even half good. This book's author's site (featured on Stylegala) didn't really impress me, which didn't prove well for the book. If that is an example of Beautiful web design, then I'd perhaps call it mediocre. ZenGarden and Stylegala both have a lot of excellent examples of beautiful web design, all free to explore and admire. I prefer it that way.
Hi Guys,
Thanks for all the discussion regarding the book (and thanks for the review Roger).
Anyone whose interested in the book should find the excerpt very helpful:
http://www.sitepoint.com/article/principles-beautiful-web-design
It'll give you a very good taste of what they will find inside the book.
@John Faulds: Thanks for pointing that out. It'll be corrected in the next reprint.
I don't personally thing the design is the problem for many of us. I have great ideas. But when I start CSS programming so it looks OK in Opera, FF and IE6/7, my head hurts a lot... I work 10% of the time and I struggle with "hacks" and browser differences the rest of the time. Many times, I make a compromise, because my great design can not be made without too much sacrifise in speed/time etc....
My 5 cents...
Jerry
Sorry for the late reply, but I bought the book recently after reading your review and it's very helpful to me. Thanks, I owe you one ;)
Sorry, comments are closed for this post.