Review: The Principles of Beautiful Web Design
My web design sucks!
If you’re like me you’ve probably said that to yourself at least once in your career. When you browse through sites like cssBeauty and FaveUp, you are wowed by the beautiful designs, and you can’t help but ask yourself “What am I missing?”
I know some freelancers who come from a development background assume that programmers just can’t design. Others have decided to go back to school to take a course in design. But to be honest, when you are already well invested in your career, it’s often not practical or even reasonable to head back to school.
Wouldn’t it be great if you could get a crash course in design principles? Jason Beaird’s The Principles of Beautiful Web Design to the rescue!
Who should read this book?
Jason admits that the book is geared towards programmers and developers that feel a little squeamish when it comes to design, so if you’re an established designer there’s not much this book can teach you. Also, you’re not going to find step-by-step tutorials here, the book covers design principles not design how-to’s. Think of it as a good starting point rather than a hefty tome that’s going to teach you everything there is to know about design.
I also want to point out that although the book claims to focus on developers branching into design, it does make some assumptions that a developer would already be familiar with Photoshop. With that in mind, I would say the book is going to be of most benefit to those starting into a design career or programmers that have tried their hand at design and would like to improve.
The book is broken down into 5 sections.
Layout and Composition.
There are few things more daunting than a blank canvas. Even when you have an idea of what the client wants – how do you get from the idea to the layout? Jason describes his methods of starting with pen and paper, and drawing out a simple grid to sketch out basic concepts. He looks at balance, unity, contrast and other factors that the designer should consider when putting together his composition.
Color
With over 16 million colors to choose from it’s no easy task to pick a color scheme for your website. It’s even harder when you’re forced to work with client colors that just don’t work. The book dips into tried-and-true color theories as well as the six classic color schemes. Did you know there is a color scheme named Tetradic? Use it in a sentence to impress your friends!
Texture
Texture was a major thing that I was missing in my design. I had no idea how important a role it plays in taking your design to the next level. It’s true that you can overdo it with texture – think web 2.0 wet glass – but a little gradient, pattern, or light and shadow can go a long way to making your design’s pop.
Typography
I bought a whole book dedicated to typography but learnt more from Jason’s descriptions in just 30 pages. So often you’ll see type used poorly or as an afterthought to the design, but there are so many creative ways to use type that we should give careful thought to our font choices.
Imagery
It seems like a no-brainer that you’re going to need images for your site. After all, what would a website be without beautiful images? With that in mind however, you still need to decide if the images you use are relevant, interesting, and appealing. Jason describes where to look for images and how to make your own stand out.
Highlights
When I started into web design over 10 years ago I could look at a website and tell you if it looked good, but I couldn’t really tell you why it looked good. Jason book helps to pull back the cover on web design and removes some of the mystery on why things look the way they do.
- Your web site needs balance. It may not be readily apparent, but if you have heavy graphics on one side of your page, you’re going to need something to balance it out on the other side. Jason illustrates it to hanging a picture lopsided.
- Text and white space are as important and flashy graphics.
- Spend some time on your graphics. Crop them and tweak them till they pop. If you’re using other people work make sure you know their usage rights and don’t just try and gank them from a Google image search.
- Dingbats are your friends. Use them responsibly.
The Principles of Beautiful Web Design is like looking over the shoulder of a designer and having them explain the methods and reasons for their design decisions. It’s hard to not wish the book was 10x longer, but after all, it’s really only a starting point.
Travis King is a freelance web designer and a lover of all things Asian. If you have a product or service you think Freelance Switch readers might be interested in, please email Travis at travis@greenteadesign.ca
3,200 freelancers surveyed globally. In-depth interviews with 10 notable freelancers.
Insights and information you can't afford to ignore!
Find Out More
With over 100 weekly comic strips and counting, Freelance Freedom is an institution around here. Check out of all NC's brilliant work in the archives.
Freelance Freedom Archives
Interested in contributing to FreelanceSwitch? Write for the foremost freelance community and help share knowledge for the benefit of all!
Become a Guest Writer
I read this book as well. Sitepoint books are really professional and straight to the point. Especially “The Principles of Beautiful Web Design”. To my additional satisfaction, I have the signature edition
I think I might buy this, thanks for the write up as I hadn’t heard of this book before.
Cheers
Mat
Apart from all that is written in this review and probably in the book as well, there are two things that a web designer should keep in mind: 1. content is relevant; 2. if the content is relevant, the web site might get translated. And here I’ll just copypaste a rather sarcastic translator’s rant about web site translation. This is only an example of what happens lots of times when we get a web site translation assignment:
“We sized all these windows perfectly for the English text. How annoying that the stupid German is longer. Oh, never mind… we’ll just leave out the last couple of lines. They’re probably not that important and a text that breaks off in mid-sentence always adds a bit of intrigue, especially to this dry legal stuff.
Man, look at the length of these words! No way they’ll fit into our neat fields. Not to worry, though. We’ll just use as many of the German characters as we provided space for the English. Let’s see. We’ve got “Terms of Use” here, 12 characters — if that’s good enough for the English, it should be good enough for any language. There’s always momentum, after all… by the time people worked their way through “Nutzungsbedi”, they can probably figure out how this word ends.
Darn, we forgot to send the translator the text for the buttons and links. Ah. let’s just run them through Google Translate. What do you mean, those translations might not be correct? Ok, we’ll run the German back through Google Translate and then check the English to double-check. See? They’re perfect, told you. Should have done without those translators in the first place, would have been much faster.
What’s with all these capital letters? Surely the translator didn’t mean to put them there. Let’s make the extra effort of removing some of them at random. Let’s leave some of them in, though… gives the whole thing such an exotic feel. Say every third one or so.”
I’ve been umming and aaaahing over buying some Sitepoint books for a while, the book in this review being one of them. Read the reviews on the site, but this has won the deal for me I think, going to order it as an early Christmas treat for myself.
This sounds great, think I’ll give it a try.
I think that even as a web designer, or designer in general, it’s good to keep resources like this around, as they can be an invaluable source for refreshment at a later date. Sometimes we get caught up in doing things a certain way and resources such as this are a great way to step back, read up, and realize the things we’ve been forgetting!
I borrowed this book from a friend and read it in 2 days. It’s a good reminder of the basics, but I don’t think I learned anything new. I good read none the less!
M not much aware about designing, but would love to enter in this field. I think this book suggested by you, can help in me in future… Will go for it..
Thanks for recommendations! I think I will buy this book!
Wow that sounds interesting. I’m definitely going to look into that!
I’ve actually read the book twice, and would recommend it to anyone looking into CSS and web design in general. It contains a lot of great information on every aspect, which I found the color section to be quite helpful when picking layouts.
I bought this book a year ago. This is a nice book for everybody, but will be used as a reminder for advanced webmasters! Well done, really =)
This book sounds really helpful, even for experienced web designers needing a brush up or some inspiration.
This sounds like an interesting book. Does it address readability issues? When we evaluate performance of our clients’ websites we often find designs that look great but drive people off the site because they are too hard to read. This is especially true of business-to-business sites where visitors want to see a lot of plain text.
Love the article, will read it in few days..
Hello. Here is a link to a download page of the ebook if you wanna check it out before you buy it.
http://www.freebooksportal.com/the-principles-of-beautiful-web-design/
I have it since last year, and yes, its very helpful
There is another one by that very smart man: http://www.amazon.com/Transcending-CSS-Design-Voices-Matter/dp/0321410971/ref=sr_1_8_s9_rk?ie=UTF8&s=books&s9r=8a5850a41a9c975a011b1feef0810f21&itemPosition=8&qid=1227719270&sr=1-8
This book is just beautiful and inspiring. Check it out!
Great book! I purchased it 6 months ago. It literally made me a better web designer since I have a technical background vs. graphic design.
I just purchased “Deliver First Class Web Sites: 101 Essential Checklists” from SitePoint.
http://www.amazon.com/exec/obidos/asin/0975841904
I’m glad you enjoyed the book, Travis. Thanks for the awesome review!
Since a couple people here have recommended other books, has anyone picked up this book yet:
The Web Designer’s Idea Book by Patrick McNeil
http://www.amazon.com/gp/product/1600610641/
It just came out in October and it’s out of stock on Amazon.
Planning to pick one up as soon as it’s back in stock.
Sounds great and look nice, searching for books now!
Thanks for sharing
I have this book and it is quite good. But for me, a much more useful and compelling read was Save the Pixel by Ben Hunt:
http://savethepixel.org/
That book is very well written in that it does not just explain the principles behind Hunt’s “Save the Pixel” design philosophy but also provides numerous case studies of Web site re-designs. Each case study shows the original site and explains why it wasn’t exactly successful. Then it shows the redesigned version and explains why it works better and why key design decisions were made.
If you want to go beyond the basics I thing Save The Pixel is a better value.
Just IMO…
Hahaha…thanks for the reminder that I had this buried half-read in a stack of other half-read books. (I should probably try and focus on just a couple at a time.)
Pulled it out and am now almost finished.
I’ll add my thumbs up to it too.
I can’t believe my luck. I was thinking of getting a book and was leaving through numerous similar write-ups in our bookstore the other day – but couldn’t make up my mind. And here you are… Thank you!
Nice post! i am considering to buy this book for my own. It’s really nice. Thank for your recommendation
Your design sucks because you’re a programmer, just as my programming sucks because I’m a designer.
Two separate jobs. You can try to do both in order to make extra money or get a job done quicker or because the budget doesn’t allow for two people, but in the end one is always going to be better than the other.
That’s why I stick to web design and leave programming to the professionals.
I bought this book a few months ago and I’ve read it almost three times! It’s excellent at describing what to consider when preparing a design, and that’s coming from a person who has the creativity of a four-year-old (no, I’m not kidding!).
It’s one of the few books that when I saw it I thought “I must have this book!”. And I rarely buy books, so that’s saying a lot. Cheers.
Coming from a programming\development background I can say that I’m not where I want to be regarding my design skills. However I do know the basics. I bought this book some time ago expecting to learn something that would blow me away. It was a good read, but I can’t say there was something in there that I haven’t already read or understood before-hand. I rate my books based not on how good of a read it is, but how much I use it later on. I am yet to pick this book back up after I’ve read it the first time around.
Good read. Solidifies theories I had on basic design concepts. Nothing that really takes your breath away. A little too basic for me.
Just made a post on the top 10 best design books in my opinion… Great article! This book will be on the next list!
Nice book but unfortunately i can’t afford to purchase it. $26.37 is quite big for book size even for web designer
“The Principles of Beautiful Web Design” is a great book add to any designers library of knowledge. This book demonstrates some of the very basic techniques when planning and designing out the front-end of a website. Such techniques many designers never explore and often times it shows in their work and separates the big players from the small and ultimately on how much you can make off a site.
Remember – visual candy can only get you so far but if you can’t put the candy in the right place with the right spacing, colors, and texture, then your visual candy will not be appealing.
Takumi86, don’t look at this as it is too much for a book. If you are a designer or an aspiring designer, think of this as a tool, as a lesson, as an investment for you.
Rafal
Hey thanks for the information related to principles of web designing.
thanks a lot for sharing