Slashdot Mirror
The Principles of Beautiful Web Design
Trent Lucier writes "Fellow programmers, beware! Graphic designers have been invading our territory. A flood of books have been released aimed at artists who want to learn web development skills. Oh, it starts innocently enough, usually with CSS and XHTML. But soon they are learning JavaScript, PHP, and even SQL! What have we techies fought back with? What material is there for us to boost our artistic right-brain power? Sadly, our motley collection of Gimp tutorials alone will not win this battle. We need something stronger. We need to understand the principles of graphic design. But the shelves have been empty of books that make this topic accessible to tech-minded people. Well, empty until now." Read below for the rest of Trent's review.
The Principles of Beautiful Web Design
author
Jason Beaird
pages
180
publisher
O'Reilly Media
rating
7
reviewer
Trent Lucier
ISBN
0975841963
summary
A book aimed at developers who want to learn how to make websites look more attractive
The Principles of Beautiful Web Design by Jason Beaird is aimed at developers who want to learn how to make websites look more attractive. The 5 chapters each cover one of the pillars of graphic design theory: Layout, Color, Texture, Typography, and Imagery. Full-color and packed with lots of great examples, the book contains screenshots from dozens of modern websites to illustrate graphic design principles. A cumulative case-study ends each chapter, where the author shows you how the theories he just explained can be applied to a real site he is developing for a client.
Except for some CSS sprinkled here and there, the book contains no code. Don't look for tips on creating 3-column layouts or other stylesheet wizardry, because you won't find it here. The author assumes that you know how to take an image mock-up and convert it into an HTML/CSS document. This is a strong point of the book, since the focus can remain on graphic design techniques and not unnecessary code listings Additionally, there isn't much discussion of tool usage. A few examples use Photoshop, but the book focuses mostly on theory and case studies, not step-by-step program tutorials.
The book starts with Layout and Composition. If you have ever wondered why some websites just look better organized than others, this chapter will explain why. Beaird discusses the concepts of grid theory, and how using the golden ratio to divide page elements can improve the visual appeal. Plenty of examples are given that illustrate the principles of balance, unity, and emphasis.
The Color chapter contains my favorite example, where Beaird uses different versions of the same drawing to describe monochromatic, analogous, and complementary colors. As with the previous chapter on layout, this part of the book does an excellent job of teaching you how to learn from attractive websites, instead of mindlessly imitating them. Color is a hard topic to understand, but there are some good tips here that teach readers how to create an appealing palette for a website.
Relying solely on solid colors and grid layouts can make a website look flat. The Texture chapter discusses ways to use style and make your designs much more eye catching. This chapter is probably the most "Web 2.0" chapter in the book. Gel buttons, gradients, and backgrounds are all discussed.
To the dismay of typophiles everywhere, font support on the web is very poor. There are very few "web safe" fonts that designers can safely assume are on all computers. The Typography section shows readers how to make the most out of this situation by understanding letter spacing, justification, and font usage. Beaird also discusses the sIFR technique (Scalable Inman Flash Replacement), which uses Flash and Javascript to display fonts that may not be on the user's computer. The sIFR method is accessible and degrades gracefully. While the book does not discuss the specific implementation details of this method, just bringing it to my attention taught me something new.
Imagery is the subject of the final chapter, and the book ends on a disappointing note. Very little of this section is about the graphic design principles behind imagery. Rather, precious pages are dedicated to discussing various license agreements and tips on finding stock photos. This is useful information, but it should have been relegated to a sidebar at the most. The chapter focuses almost entirely on images as content and not as design elements. If you want to know how to make images in a blog post look pretty, there are some ideas here (drop-shadows, borders). But there is no information about how to work images into a page header or navigation menu. How do I determine if an image matches my color scheme? How can images spice up a design without going overboard? These were just some of the questions I had going into this chapter that were left unanswered. The Texture chapter hinted at these ideas with examples, but I wanted to see a deeper explanation of the underlying principles.
The book is a little short at 180 pages, but that's not as bad as it may seem. Those of us accustomed to reading 800-page tomes on programming tend to forget how much content can be packed into a book when the author doesn't have to waste 300 pages listing code, 200 pages on the API, and 150 pages on an index.
The Principles of Beautiful Web Design is a good book to kick start your graphic-design journey. The biggest benefit that I got from this book is the knowledge to learn from great designs as opposed to just admiring them in a state of awe. The book could have been a little longer, and some of the topics could have been discussed in more detail. This book won't teach you everything, but it's a good place to start and it will leave you excited about learning more.
Trent Lucier is a software engineer. He is the creator of ChessUp, a tool for creating chess diagrams online.
You can purchase The Principles of Beautiful Web Design from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
Except for some CSS sprinkled here and there, the book contains no code. Don't look for tips on creating 3-column layouts or other stylesheet wizardry, because you won't find it here. The author assumes that you know how to take an image mock-up and convert it into an HTML/CSS document. This is a strong point of the book, since the focus can remain on graphic design techniques and not unnecessary code listings Additionally, there isn't much discussion of tool usage. A few examples use Photoshop, but the book focuses mostly on theory and case studies, not step-by-step program tutorials.
The book starts with Layout and Composition. If you have ever wondered why some websites just look better organized than others, this chapter will explain why. Beaird discusses the concepts of grid theory, and how using the golden ratio to divide page elements can improve the visual appeal. Plenty of examples are given that illustrate the principles of balance, unity, and emphasis.
The Color chapter contains my favorite example, where Beaird uses different versions of the same drawing to describe monochromatic, analogous, and complementary colors. As with the previous chapter on layout, this part of the book does an excellent job of teaching you how to learn from attractive websites, instead of mindlessly imitating them. Color is a hard topic to understand, but there are some good tips here that teach readers how to create an appealing palette for a website.
Relying solely on solid colors and grid layouts can make a website look flat. The Texture chapter discusses ways to use style and make your designs much more eye catching. This chapter is probably the most "Web 2.0" chapter in the book. Gel buttons, gradients, and backgrounds are all discussed.
To the dismay of typophiles everywhere, font support on the web is very poor. There are very few "web safe" fonts that designers can safely assume are on all computers. The Typography section shows readers how to make the most out of this situation by understanding letter spacing, justification, and font usage. Beaird also discusses the sIFR technique (Scalable Inman Flash Replacement), which uses Flash and Javascript to display fonts that may not be on the user's computer. The sIFR method is accessible and degrades gracefully. While the book does not discuss the specific implementation details of this method, just bringing it to my attention taught me something new.
Imagery is the subject of the final chapter, and the book ends on a disappointing note. Very little of this section is about the graphic design principles behind imagery. Rather, precious pages are dedicated to discussing various license agreements and tips on finding stock photos. This is useful information, but it should have been relegated to a sidebar at the most. The chapter focuses almost entirely on images as content and not as design elements. If you want to know how to make images in a blog post look pretty, there are some ideas here (drop-shadows, borders). But there is no information about how to work images into a page header or navigation menu. How do I determine if an image matches my color scheme? How can images spice up a design without going overboard? These were just some of the questions I had going into this chapter that were left unanswered. The Texture chapter hinted at these ideas with examples, but I wanted to see a deeper explanation of the underlying principles.
The book is a little short at 180 pages, but that's not as bad as it may seem. Those of us accustomed to reading 800-page tomes on programming tend to forget how much content can be packed into a book when the author doesn't have to waste 300 pages listing code, 200 pages on the API, and 150 pages on an index.
The Principles of Beautiful Web Design is a good book to kick start your graphic-design journey. The biggest benefit that I got from this book is the knowledge to learn from great designs as opposed to just admiring them in a state of awe. The book could have been a little longer, and some of the topics could have been discussed in more detail. This book won't teach you everything, but it's a good place to start and it will leave you excited about learning more.
Trent Lucier is a software engineer. He is the creator of ChessUp, a tool for creating chess diagrams online.
You can purchase The Principles of Beautiful Web Design from amazon.com. Slashdot welcomes readers' book reviews -- to see your own review here, read the book review guidelines, then visit the submission page.
Anyday
Do not try to read the dupe, thats impossible. Instead, only try to realize the truth
What truth?
There is no dupe
a great example....
Foruntately, artists are too busy creating art to consider either the user interface or usability. In fact, head to the nearest art show and it's practically the opposite. I think most art majors think the plan is to make the whackiest thing you can and then laugh at the viewers who don't get it...
'Perfection is achieved not when there is nothing more to add,
but rather when there is nothing more to take away'. (Antoine de Saint-Exupery)
as a technical writer for ten years, i've found the best book on the subject
for people who aren't designers is: Robin William's Non-Designer's Design Book.
it covers the four basic principles of Design:
1) Proximity: Make sure than when you Poke button X, status indicator Y is PROXIMATE to X.
2) Alignment: Don't start things out on a new Arbitrary Visual Margin, reuse existing Bounding Rectangles to ALIGN things to each other.
3) Repetition: Don't use a different icon for the same thing; consistently use the same Motif throughout.
4) Contrast: If two elements are not exactly the same, make them distinguishably different.
all the best,
j
Oh, it starts innocently enough, usually with CSS and XHTML. But soon they are learning JavaScript, PHP, and even SQL!
I always knew Java was a gateway drug.
The theory of relativity doesn't work right in Arkansas.
We already have this one page about cube stuff. We don't need a single more, you dog brain student.
After 3 days without programming, life becomes meaningless
- The Tao of Programming
How about a method that uses images and PHP?
I'm in the hole of the broadband donut.
consistently use the same Motif throughout
May I suggest a better rule? Mine would be Never use Motif
Chris
- helpful as ever
That's right. Coders will be called in sooner or later to fix up the abortions that web designers create.
The world's burning. Moped Jesus spotted on I50. Details at 11.
A way to waste time? Dork herd behavior? What happens when you get a bunch of pontificating windbags all on the same message board?
Slashdot is a great example of something, that's for sure.
I keed, I keed...
- None can love freedom heartily, but good men; the rest love not freedom, but license. -- John Milton
http://www.webdesignfromscratch.com/ - covers pretty much everything web design related
http://www.sheriftariq.org/design/index.html - articles on some design elements
http://www.adampolselli.com/getthelook/ - guides that basically hold your hand to achieve various styles
http://webtypography.net/intro/ - typography applied to the web
http://www.alvit.de/handbook/ - list of links related to web design/graphic design/etc.
You can also try enrolling in a class at a community college or something...that way you can learn, practice, and receive feedback from a teacher/peers.
Freelance Web Designer - Portfolio
Web designers will be called in sooner or later to fix the artistic abortions that coders create. And then user-interface designers will be called in to fix the usability mistakes of both.
- None can love freedom heartily, but good men; the rest love not freedom, but license. -- John Milton
When in doubt:
- add more popups
- blinky lights are exciting
- if your page loads in less then 10 seconds, it must not be very interesting
Lather. Rinse. Repeat.
http://www.bitworksmusic.com/
BitWorksMusic.com -- odd tunes for odd times
As a design student myself, I'm going to let you in on a secret: graphic design attracts a lot of really uncreative people, and this is why we're continually assaulted with bad graphic design. Don't get me wrong, there is really really good design out there, but only at the very top end do they crossover into "artist" territory. Sad but true. Now, what would be really interesting is someone with technical ability working in concert with an actual fine artist to produce the type of stuff designer largely half ass. Unfortunately, designers have wedged themselves in between the two fields.
"You know why you do not see me styling wit my homies? Because I have no homies!!" -Mojo Jojo
Far better to have graphic designers with some web knowledge, and web specialists with some graphic design knowledge. The overlap in skills is where the good results come through.
Drill baby drill - on Mars
I've been somebody who, for many years, has loved web design from both the visual and technical sides of things. How well a website works is obviously important, but just as important is how it looks. There are many people out there who disagree, and say that usefulness is key and how "pretty" a page is isn't important, but they're completely wrong. (In my opinion, of course.)
The reason they're wrong is that web design isn't either/or, no matter what some may say. There are obvious examples of design over use - countless, countless examples - but that doesn't mean that making a website visually attractive kills the chance to also make it work like a charm.
For me personally, one of my favorite projects web design wise has been my personal forums, where I've put just as much important on how they look as well as how they work. Forum design is, to put it bluntly, god-awful across the internet. If message forums don't just stick with the defaul theme, they slightly modify it to make it look average AND ugly.
Message forums are about reading the posts presented there, but they're also about the community, so the design of the forums should reflect that. Here's a screenshot of the new theme I have in progress - it's far, far from done, but gives an idea of my kind of sense of forum style. First off, avatars are 600x150; a bit larger than the previous 600x120 avatars we were running. Some see that kind of thing as a waste, but our large avatars were one of the things that made our forums stand out, be remembered, and the way the board was coded, you could turn off avatars and still have the forum work perfectly and look very nice. Users will be able to select their own background color for their posts; it makes things more colorful, and personal, but it also then lets a user quickly scan a thread and find their own posts, due to knowing what color they're looking for. Items such as thread title, page navigation, and search box will be part of a bottom-of-the-window-pinned navigation bar, extending on the previous navigaion bar we had; this helps to reduce the clutter in layouts, and give the forum another unique visual aspect, but it also presents important navigation and UI items in one consistant, always available on-screen location, instead of scrolling up and down the page to hunt them down every time.
Not that I'm trying to toot my own horn here - my point is that with just a bit of thought, web design can be both visually appealing and enhance the user experience, but that idea seems to be lost on people far too often. And, obviously, the same design elements and planning I'm using for my new forum skin wouldn't work for other types of websites, but we need to better understand what each type of website needs and requires, and work from there. Nobody would make sense in saying that every type of website needs to be visually stunning, but those saying that sites don't need to be fancy or appealing are just as wrong. A website being visually unique, pleasing to look at, providing quality design at the same time it presents quality UI, those are all important factors that too often go overlooked.
This is the first time I've heard mention of Web Design since the 90s. Maybe I'm oblivious, but I was beginning to think people forgot it existed.
If you've spent any amount of time on MySpace, nobody's going to blame you.
Wow! You're saying that I could get a +1 modifier to my Charisma if I carry a Beholder Eye in my knapsack? That's an extra use of Turn Undead per day!
...not trying to sound cliche. Unless you are developing a web site for you to look at exclusively.
I do agree with you that a clear, easy to navigate site is important... who wouldn't agree with that? But at the same time, an overwhelming number of the average public are attracted more to graphics containing 'cool' looking web sites than 'Plain Jane' web sites. The web sites that are trying to sell or advertise a product or service to the general public need to appeal to the general public. That is one of the reasons why web sites are redesigned so often, to attract new people. It can't be 'cool' unless it is new and on the 'bleading edge'. As far as 'beauty is in the eye of the beholder': the people creating the site, if they really know what they are doing, know their target audience. They will appeal to what they know the majority of that group finds beautiful. But most people belong in that big general public demographic...
Another reason it needs to be fancy is that it shows the viewers that there is something behind the web site. They will assume that there are people willing to invest time (=money) in the site design, meaning they are looking at something that is likely to be more legitimate (we all make assumptions in life... we have to). When people see a product being advertised on a text only web page and an equivalent product on a 'cool' web site complete with good graphics, they will usually go for the product with a well designed graphics laden site. And I am not talking about some horrible mishmash of graphics put together by someone using their windows front page lite or whatever the hell windows comes with these days. It's basically like the reason you wear a suite or good clothes to a client's site. To make a good impression.
-- I ignore anonymous replies to my comments and postings.
You know why it was called that? Because Netscape thought Java was going to be the future. JavaScript was a way to glue HTML page elements (forms, mouse clicks, page loads, images, links) to an embedded java applet in the page that would do the "heavy lifting" or allow you to control the java applet using native-looking controls couched in action-less forms. And LiveConnect was the magic glue that made it possible. JavaScript used to be called "LiveScript" for just that reason.
And now we have this crazy confusion about JavaScript Java, when they now have little to do with each other.
Let's just call it ECMAScript so no one gets confused.
THIS THING CAN TURN ON A DIME, MACROSSZERO STYLE ALSO FUCK BETA, ~NYORON
One thing for anyone to remember is that Web design is about much more than layout, fonts, and purty pictures. The web is interactive, and therefore user interface principles come into play also. Sadly, most "web designers" and many "web developers" have little more than tangential knowledge of this subject.
The web is not inherently a graphical medium. All "web designers" out there should put a post-it note in their workspace reminding them that HTTP and HTML both contain text in their definitions: not images, video, or Flash.
In my experience, the worst web designers can be divided into two groups: non-artistic people (called programmers in TFA) and print designers.
Programmers I can excuse because they normally don't claim to be experts at any type of visual design.
Print people on the other hand, insist that their artistic training translates intact to the web: it doesn't. The web is interactive and involves many more unknowns (operating system, hardware platform, screen resolution, font size preferences, window size, to name a few) than designing for a X by Y piece of paper. Web pages cannot be treated as a canvas to be painted on. HTML has technical rules, best practices, conventions and "gotchas" that go far beyond what print people learned in their traditional design school. Without a doubt, the least feasable (but sometimes most visually appealing) web designs I've had to deal with were all produced by print people masquerading as web designers.
Bullshit. Some people are great at both. Some people are great at design. Some are great at programming. Some suck at one or both. Some are mediocre at one or both.
Even within the art realm, some are great at design but not drawing or painting. Others can draw a picture really well but can't ever seem to do a print layout or web page. Some can do both.
Some people can act. Others can sing. Others dance. Some can do it all, and are the leads in musicals.
Some people can shoot. Some can blow stuff up. Some can swim really well. Some can skydive. Some are Navy Seals.
Some people act really well. Some people are really funny. Some people write really well. Some people are good improv comedy actors.
See a pattern? In short, any practitioner of one discipline saying that to shift to another discipline is much easier than the opposite is likely either in the wrong field to start or is just pumping up an ego like a balloon.
I'd say good design is more about controlling the presentation of your message, and has very little to do with the "graphics". In my experience there is one driving element to good design in print and online: legibility. If your message can be understood by great use of type, then you achieve getting the message across. This applies to both print and web. I don't think flashy graphics help, and can sometimes distract. When we're designing ads for clients, or doing page layout, we stay away from the real flashy stuff and use the type to control the message. You also need to be weary of reader tendencies in how you approach putting the type elements on a page. If you do this one simple thing you may find your stuff looks way more polished. Wanna see awesome type layout online? http://alistapart.com/ That's a classy website.
okinawa japan
All in all, there are a lot of misconceptions about graphic and interaction design. Design is by no means intended to make something look cool for cool's sake. Graphic and interaction design are disciplines that dedicated toward developing effective communication solutions. Design SHOULD enhance communication and user experience. That is, without a doubt, the whole point of design.
That said, we live in a culture where people are constantly bombarded with visual media, do-it-yourself design books, and easily accessible desktop publishing solutions. As a result, the sheer volume of horrible "designers" greatly outweighs the modest amount of trained professionals who actually know what they're doing.
But as for the parent topic here... the industry is changing and Interaction design is really starting to be recognized as the next big design industry. In 10 years a web or software dev team is not going to consist of isolated designers and isolated developers. CS students are graduating school having visited the design department, and graphic designers are leaving school having visited the CS department. Moreover, collaborative development environments are starting to emerge that allow designers and engineers to work in the same room at the same time.
As a professional you're probably never going to learn it all... you'd be in school forever. However, we can develop environments where experts are effectively able to communicate, comprehend, and collaborate with other experts.
"Things are more moderner than before- bigger, and yet smaller- it's computers-- San Dimas High School football RULES!"
No, it's GRAPHICS people who threaten web design. ALL Flash pages?! Photoshop slices?! Might I remind people America is not #1 but the 18th in the world for broadband adoption! How many sites are over 300KB in size that will take a minute or more to load on dialup? Web font support is sketchy but CSS is not! You can specify a hundred various web font's if need be and you can even use the * selector for all elements if you're looking to minimize your code. Need to override the * selector? Just adjust the fonts AFTER (below) the * selector. Why are we talking about Flash again? Flash, nothing is more obnoxious then hidden music and long pointless movies when I'm looking for resources online. If you can make nice looking graphics or movies great, go to Hollywood or YouTube or something but that stuff disorganizes a website. Flash can only be good when it's PART of a website. Let's talk XHTML 1.1, application/xhtml+xml (plus editing XML Schemas (to give attributes ill removed items such as tabindex on divisible elements), CSS, JavaScript, JavaScript + Flash interaction, AJAX, accessibilities, and a little PHP and MySQL. THAT is a well rounded Web Design book.
- John
http://www.jabcreations.com/
I teamed up with a graphic designer/fine arts friend of mine to do just this. He's the creative talent, I'm the person that makes the pages look the way he wants them to.
:)
It's been working out quite well for us. We've been busy enough that we haven't had time to update the website in almost 9 months.
Rocket Surgery
--Jeremy
Jesus was a liberal