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.

Give me Edward Tufte

[Timesprout]

Anyday

Re:Give me Edward Tufte

[Doctor Memory]

Tufte doesn't say squat about web design. He doesn't really get into page or content design at all. He's all about the presentation of data, and how to try to turn it into information. He'll tell you that you should stick to primary colors or simple textures, but he'd try to dissuade you from adding a drop shadow to your graphic (indeed, from even adding a graphic if it wasn't intimately related to the data set you were trying to present).

He's the man if you're trying to present data, but if you want to present text or other non-numeric information, he's not much help.

Re:

[Timesprout]

That's the whole point. I would prefer a clear and informative website rather than someone elses interpretation of 'beautiful', because we all know beauty is in the eye of the beholder.

Re:Give me Edward Tufte

[Billosaur]

I would prefer a clear and informative website rather than someone elses interpretation of 'beautiful'...

Amen. If you want art, go to an art gallery. I want websites to be clean, functional, easy-to-navigate, and more importantly, I want to be able to find the information I'm looking for without having to hunt through and around annoying graphics and being subjected to vomit-inducing color schemes.

Re:

[pipingguy]

Are you looking forward to 2007's version of OMG Ponies? I am.

Looks good

[AoT]

There is a huge leap from "ugly as sin" to "good" and that definitly falls in the ugly as sin category.

For examples of sites that are in between and yet used often, most often perhaps, see:

Google

Craigslist

Wikipedia

Then tell me something has to be pretty.

Re:

[MidnightBrewer]

Violent fuchsia and purple as a color combination have never really resonated well with the large majority of people, ever. The page may be well laid out, but this is a perfect example of where understanding a little bit of how people react to colors would be helpful. As a graphic designer, I consider the ease of access of information and graphics that compliment rather than dominate to be an essential part of good design. Good designers understand that not everything should be Flash; the right art for t

Re:

[tigersha]

Amen. One of the main problem I have with Unix geeksis that they correctly claim that style over substance is a bad idea but then extrapolate that to the idea that all style is somehow bad or useless. MAybe its all the green screen terminals or something.

Style is good. And a little knowledge of typography can make your written publications (CV or report) WAAAAAY better than the competition that uses Arial because its all they know. Without adding too much flashiness.

How about Jakob Nielsen?

[doom]

endianx wrote:

That is one of the most common mistakes we software engineers make. Design software to be how we want it, not how the users want it. The users want a slow loading flash page with lots of sounds and a delay due to animation every time you click on something.

This is what the designers tell you, at any rate, but with very few exceptions no one knows whether this is true. You need to do some useability studies, ala Jakob Nielsen's recommendations to find out whether people use your site becaus

Re:

[MrAnnoyanceToYou]

Using the Great Repository of Knowledge Myspace as a guide, they are apparrently one and the same.

Re:Give me Edward Tufte

[fbjon]

Humans share a lot of common points in their interpretations of beautiful. These can be learned, and exploited. Don't kid yourself, beautiful is always better than ugly.

Re:

[Anonymous Coward]

beautiful is always better than ugly.

But never better than useful, useable, clear, available, working - in fact, beauty is WAAAAAAAAY down the list

Tragically, this hasn't sunk in for most web designers.

Re:

[fbjon]

Of the things you mentioned I would say:

• useful: can be assumed (otherwise you might as well not make the page)
• clear: IMHO intrinsic to beautiful
• available, working: not related to the topic
• useable: in other words,useful and non-convoluted, i.e. clear

Re: Eye of the Beholder

[andrewd18]

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!

It's not about you...

[theshowmecanuck]

...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.

Re:

[FLEB]

Visual beauty will only get you so far. The most visually beautiful site that lacks structure and informational layout would simply aggravate anyone who tried to use it. In fact, I would have to say that at least a small amount of interface design and structure is necessary for a site (or any other publication) to achieve beauty. The structured human mind finds beauty in geometry, structure, regularity, and ease. Now, wrap that with only as much graphic flashery as is needed, and you've got something respec

Re:

[vanyel]

Visual beauty will only get you so far.

Just as with people, beauty is what gets people's attention. You have to provide something useful, without being too much of a burden, to keep it.

Re:

[theshowmecanuck]

Yes. :-p

Re:Give me Edward Tufte

[T3kno]

I would argue that functionality is also in the eye of the beholder. Our brains work differently, which is why we all have preferences in art, music, etc... including functionality. Certain sites, designed by very well paid people make absolutely no sense to me, I for one hate Amazon's interface, but that's me. Obviously they spent a lot of money and research time to develop a site that works for most people, to my eyes it pretty much sucks.

Re:Give me Edward Tufte

[ShieldW0lf]

There are two approaches to setting usability goals. One goal is to make the system as easy as possible for someone who doesn't know what they're doing to use. This approach is best for transient users, such as customers buying big ticket items that won't frequently patronize the site. It's also best when you're presenting internal use stuff to executive clients, because they're usually far removed from the day to day operations of the company and will not be the "power users" of the software. Artists are usually more adept at designing for this goal, because the demands of their job require that they be more closely in tune with other people than the next person. The other goal is to make use of the system as efficient as possible for someone who has taken the time to learn it inside out. I think of it as "make it as easy as possible for someone who has already completed each task three times". This is the best approach for expert systems where the person can be expected to dedicate several hours of each day to using it as part of their job, and it's reasonable to expect them to work at learning. It's also best when you want to make it easy for frequently returning customers to be impulse-sold, like Amazon. Propeller heads are usually more adept at designing for this goal, because the demands of their job require that they be more closely in tune with the underlying system. Most cases end up with some degree of compromise between the two goals, some duplication of user interface into "Expert Mode" and "Novice Mode", and some clutter in the interface to bridge the gap. That would be Amazon.

Re:

[MidnightBrewer]

Except that "clear and informative" is also a subjective concept, when you get right down to it. Rather than saying, "I want everyone to bend to my ideas of what a good website is," it's better to look around, see what's successful, and try to incorporate that into your own designs. Just because every movie trailer website out there feels the need to run a full-window Flash animation to impress users hardly makes this the common trend. There are many more big, popular sites that run without any Flash at

Re:

[PhoenixSnow]

I just went to E. Tufte's one day class yesterday. It was not as useful as it'd been hyped up to be. However, I don't think he was just all about numbers. He did have a great deal of knowledge on how to present the information in general. The main component that's lacking in his books/class was understanding of the users as an average person on the street with no scientific background. He actually said, " yeah it's good to know your audience but it really doesn't matter." and he was all about 'high resolu

Re:

[dr.badass]

The old classic 'Design of Everyday Things' is very dry and it probably was really useful when most people didn't know the usability fundamentals. But now, it just seems like everyone already knows the basic principles and it's not adding much more value anymore.

Emotional Design, by the same author, is a lot juicier. It almost entirely concerns industrial design as well, but as with any good design book the valuable concepts can be applied elsewhere.

Re:

[dr.badass]

He'll tell you that you should stick to primary colors or simple textures, but he'd try to dissuade you from adding a drop shadow to your graphic (indeed, from even adding a graphic if it wasn't intimately related to the data set you were trying to present)

I wouldn't say this a bad recommendation, it's just not in line with web design trends, and thus useless to anyone that has to listen to client requests. While I agree with your premise that he doesn't say anything about web design in particular, I would

Re:

[Doctor Memory]

I would still suggest that anyone doing web design should at least be familiar with his work

Oh, definitely. I think that anyone who produces or evaluates information or ideas (which is pretty much everybody) should skim all of his books. He's kind of like Knuth: when publishers told him it would be too expensive to print his books the way he wanted (Visual Explanations, especially, has lots of little flaps and pieces glued in), he started his own publishing house. The results are books that are distinctive and have that air of quality about them, the kind that elicit a "wow, this is nice" feel

Re:

[nick.ian.k]

I don't know, I have a tough time taking Tufte seriously when his site (edwardtufte.com) is a horrible mess in terms of organization. He's got a lot of interesting things to say, he writes well, and I even like his prints, but man...just look at that steamer

Good presentation designer != good web designer

[jschottm]

It's funny that you mention him, as I'd been looking at his website a few days ago and thinking that while he's clearly excellent at creating visual displays of mathematical data, his (and/or Dariane Hunt's) web design leaves something to be desired.

This is the link labeled Books takes you here:

http://www.edwardtufte.com/tufte/books_vdqi [edwardtufte.com]

First, his navigation isn't consistent.

If you look at the different between the alt tags and the images used in it, the alt tags are almost completely lowercase. On the oth

Slashdot is

[Anonymous Coward]

a great example....

Great example of what?

[spun]

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...

Don't feel too threatened

[cstec]

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...

Re:

[Brummund]

Back in the wild 90's, the company I worked for built the web pages for the national railway company. This company has a deep blue color as its major color, and it is not possible to get this color on a 16 color display (as was the norm then) without dithering. In one of the preliminary meetings, the person in charge of corporate design/branding at this company had decided to show up.

The branding manager was outraged by the fact that this color could not be displayed properly on all computers, due to the pr

Re:

[4iedBandit]

In my experience, programmers/developers design some of the worst interfaces. Doing something interface wise just because you can, or just because it looks cool very rarely makes the interface intuitive let alone useable.

Granted Designers also fail on this point. The only difference is they're concerned with the "look" and have no concept of usability.

Unfortunately programers/designers who have a good grasp os usability are few and far between.

Non-Designer's Design Book

[johnrpenner]

'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 [amazon.com].

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 [earthlink.net]

Argh, the flashbacks

[mihalis]

consistently use the same Motif throughout

May I suggest a better rule? Mine would be Never use Motif

Chris

- helpful as ever

Re:

[account_deleted]

Comment removed based on user account deletion

Re:Non-Designer's Design Book

[pycnanthemum]

I found the book by Robin Williams to be a great resource as well.

But I specifically remember her listing the design principles in a different and purposeful order:

Contrast
Repetition
Alignment
Proximity

...and I have never forgotten them! :-)

Re:

[Dystopian Rebel]

i've found the best book on the subject
for people who aren't designers is: Robin William's Non-Designer's Design Book.

Yes, this is from the period of his best work, when he was still doing lots of drugs.

Now look at him. His movie "Man Of The Year [rottentomatoes.com]" was a disappointment.

Re:

[ObligatoryUserName]

Just a comment about the quote that you started out your post with because it is so often misinterpreted: 'Perfection is achieved not when there is nothing more to add, but rather when there is nothing more to take away'

Engineers seem be reading this as "use as many of the default values as possible". For example, not specifying a background color for a web page and just letting the browser's default value be used (grey in 1996, white today). Failing to specify visual design is not a minimalist design, it

Re:

[Blakey Rat]

I love it when a webpage specifies a dark/black image background but neglects to set the background color to something dark. So the image doesn't load for whatever reason, and suddenly you're confronted with a white-on-white color-scheme!

Re:

[mblase]

Heh. I came here just to mention Robin Williams' "Non-Designer's Design Book", and find that someone's beaten me to it. Guess that just goes to show how useful it is.

Seriously, any programmer who has to do ANY work outside of the command line can benefit from this book. It's about general design, not "just" web design, and can improve everything from your paper resume to your personal homepage. You can read it front to back in half an hour. Half the principles are so basic you wonder why you never thought o

Re:

[mr_mischief]

There's also a related title that is more web-specific, so there's an option. It's called the Non-Designer's Web Book. There are also font-specific, scan-and-print-specific, and application-specific books by Williams. She even has her own computer dictionary.

hmm...so what?

[caffeinemessiah]

a lot of "techies" don't have artistic ability, but would you really want an artist to design your perl scripts? a plumber can go to his local library and learn about prescription drugs, but you take his medical advice? people are good at different things. no artist is going to replace a techie's job unless they're also geeks, in which case calling them "artist" does not imply "not geek".

Re:

[DwarfGoanna]

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 hal

Re:

[scot4875]

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 [rocket-surgery.net]

--Jeremy

Re:

[L-Train8]

Lots of jobs could benefit from a little artistic knowledge. My father, who remodeled houses for a living, had this problem. He was very handy with drywall and carpet and cabinetry, but he would frequently pick out these garish paint colors that ended up making a room look hideous. I don't need my contractor to be Picasso, but I would like him to be able to pick out some pleasing paint and carpet colors. Likewise, someone with a little design knowledge and solid coding skills can certainly put together a be

Re:

[CastrTroy]

However, once you starting needing a website that needs actual coding, you're probably better off with someone who is a great coder with a little bit of design knowledge, than with someone who is a great designer with a little bit of coding knowledge.

Nurses know everything

[Latent Heat]

Nurses know everything and how to do anything. My mom was in a nursing home, and one RN asked me how I was doing. I replied that I had a brush with death because I grabbed an electric heat thermostat I was installing with both hands and got a shock because I thought I had pulled all of the breakers but the box must have been hot from another panel. I was scolded "One hand! You must never grab those things with two hands, always one hand!"

On another occasion, a different nurse told me what I need to ge

yeah

[User 956]

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.

Re:yeah

[Brummund]

1. Build timemachine
2. Set machine from 1. to 1995
3. Silence the Netscape jerk that coined the JavaScript name
4. Party like its 1999!

A true story about JavaScript.

[Ayanami Rei]

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.

Re:

[IthnkImParanoid]

I've witnessed many times the average user's tendency to take an obscure acronym and mash it into a actual familiar word. We should call it ECMAScript not to avoid confusion, but to hear the disturbing support calls related to the user's "eczema".

Re:

[Brummund]

If you take care of the JavaScript bunch, I'll make the rest use cracker and hacker appropriately. :)

Re:

[Paradise Pete]

The Romans had time machines?

Well, yeah. Obviously the time machines. I mean, the time machines go without saying, don't they? But apart from the sanitation, the aqueduct, and the time machine--

Some related websites...

[Cr4wford]

http://www.webdesignfromscratch.com/ [webdesignfromscratch.com] - covers pretty much everything web design related

http://www.sheriftariq.org/design/index.html [sheriftariq.org] - articles on some design elements

http://www.adampolselli.com/getthelook/ [adampolselli.com] - guides that basically hold your hand to achieve various styles

http://webtypography.net/intro/ [webtypography.net] - typography applied to the web

http://www.alvit.de/handbook/ [alvit.de] - 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.

Discount Web Design!

[davido42]

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]

What happened to web design?

[MeanderingMind]

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.

Back in the days of tiling backgrounds, embedded Midi files, and blue/red hyperlinks there was a term coined. "Web Design" was a buzzword for anyone who knew how to take a few gifs, some HTML, and make a crappy website. I even had a webpage dedicated to Chocobos from Final Fantasy, each page with it's own Chocobo Midi and prominent image, background a tiling of st

Re:

[mblase]

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.

Usability vs. Visibility

[shidoshi]

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 u

Re:

[ADRA]

When I mouse over the '90%' (image size?) I get it flashing between 90% visible and not. Probably something small to fix like making sure the 90% is visible when IT is the focus.

Misconceptions About Design

[Aqua OS X]

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

Re:

[WedgeTalon]

I would be interested in seeing more of that forum design you have going on there, if you don't mind sharing. It looks very interesting. (Though, to be honest, I'm not completely sold. I would have a big concern that it would space content too much and end up making the page a chore to read. All the more reason I'd like to see more if it! I'd love to be wrong.)

I HATE it when that happens ....

[Gorshkov]

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

Re:

[hankwang]

how long is it going to take some of you people to realise that not everybody can read your gorgeous 8 pt font,

I was getting annoyed myself about small fonts on websites including the Slashdot redesign of a couple of months ago. But then I discovered that somehow all major browsers default to 16px font sizes which is HUGE for the majority of people, which forces webdesigners to either specify an absolute fontsize or a relative font size of 70 to 85 percent. But if you do the sensible thing and set your web

Re:

[dr.badass]

default to 16px font sizes which is HUGE for the majority of people

You mean 16pt., which properly should be just under 1/4 of an inch. In reality, it's usually smaller. How is that huge?

Re:

[hankwang]

If you don't believe me, compare it to the font size in your word processor, mail client and other applications.

Most of the time I use

• xterm: 12x6 font - I'm usually not staring at the commandline for hours, and this is a good compromise between screen real-estate and ease of readability. My email client runs in an xterm.
• emacs: 13x7 font - slightly bigger since I do spend hours working with emacs
• Opera web browser: I prefer about 12 px for regular text. I've set my default to 14 px and it works reasonab

Re:

[hankwang]

Quiet acquiescence solves nothing. If a website screws up its fonts, complain. I'm a web developer, and I'd hate to think people were silently putting up with mistakes I made instead of telling me about it.

I actually have a website with a small community [lagom.nl] that had been running with 100% fonts for quite some time. It turned out that several people didn't like my layout and used one of the forum-software-supplied default style because my fonts were too big and setting the browser defaults +smaller makes the r

Re:

[Gorshkov]

If web designers use the proper font size units in their CSS, such as in the guide above, there shouldn't be a problem--units like em and % allow the font to be resized by the viewer.

Both you, and the lad at the noodleincident, are still missing the point ... and proving mine.

What looks good for you - what is a "reasonable" text size in your eyes - is NOT necessarily "reasonable" for me, or my grandmother, or my neighbor, or anybody else.

The web is a DYNAMIC medium - I'm sure you're more than familiar

Re:

[Gorshkov]

There's a more important question here that you're overlooking: how many people bother to change their default settings? Are those defaults optimal for all users; or were they just set to where they are because the committee of programmers who wrote the browser collectively decided, without doing any research or studies to support their decision, that they should be so?

Actually, it's NOT a more important question. It's just Yet Another(tm) rationalization. I would bet that most of those that don't change t

Re:

[Gorshkov]

I'd rather have white text on a black background than the other way 'round; much, much easier on my poor eyes.

And you have total, utter, complete freedom to set that as your default if you so choose ..... and wouldn't you be pissed if the people who wrote rxvt decided that they knew better than you, and fixed the font size and colour foreground/background combination to ignore what YOU prefered?

Meh...

[th3space]

I'll browse this if I happen across it on my journey to Borders or similar, but I don't see myself buying it. I do this junk for a living, and - owing to my environment - I use graphics less and less and have begun to apply a more austere design sensibility to the sites that I work on. Of course, I'm doing it in corporate environment whose primary concerns are less oriented around 'flashy' than they are around 'substantive, intuitive and compliant'.

Admittedly, I do spend a good portion of my free time wor

Web design Graphic design

[Dracos]

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.

Html is a Great Starting Point

[Bellum Aeternus]

As a classics major in collage, I had the need to set up a small but informative website circa 1996. I had no one to help me, so through the use of view source I figured out how to make a very basic website (it even used frames). From there I learned Javascript, CSS, XHTML, XML, Java, C#, C, and SQL. So, the article is right - Html skills can lead to real software skills. I apologize for never learning/using any LAMP except MySQL but I've always been given Win boxes as servers to work with.

Graphic Design and good websites...

[okinawa_hdr]

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/ [alistapart.com] That's a classy website.

Good

[goldcd]

As somebody with a vague technical leaning, I picked up MySQL and PHP and cobbled together a nice functional site a while back.
I'm proud of it, people seem to like it - but it is DOG ugly.... well maybe not actively ugly, but well minimalist in the extreme.
But I digress. Point I was wanting to make is that form must follow function for the design - but once you've nailed function, you're really going to want to go back and give it a good polishing.

Ass Backwards!

[JAB Creations]

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 fo

HTML is not a programming language

[Durandal64]

Could the web "programmers" please get over themselves? HTML and CSS are not programming languages. I don't know why this misconception is so widespread (you'll often see resumés of computer science graduates with HTML, CSS and XML listed under "Programming Languages"), but HTML and CSS aren't programming or scripting languages. HTML is a markup language, hence the "ML" part of the acronym. You can't implement algorithms in them, so knowing them doesn't make you a programmer. It makes you a guy who kno

Welcome to 1999

[mshurpik]

>Fellow programmers, beware! Graphic designers have been invading our territory.

Oh really?

Re:Maybe we'll finally see...

[Phisbut]

...some Cubist web pages.

We already have this one page [timecube.com] about cube stuff. We don't need a single more, you dog brain student.

Re:

[Paulrothrock]

How about a method that uses images and PHP? [alistapart.com]

Re:

[treeves]

I don't reply to Anonymous Cowards. But you did, you did.

Re:

[Zaiff Urgulbunger]

If sIFR is what is used on the 123-Reg [123-reg.co.uk] website, then it's total pants. On Firefox on Ubuntu, it just slows everything down and doesn't always render correctly anyway.

Re:

[drinkypoo]

Actually, sIFR really doesn't work very well. Text typically looks different in different browsers, perhaps appearing in odd locations. And making new faces does NOT work by the directions (they make it sound like you just open the flash file and double click in the box but it usually takes two double-clicks and you have to be sure to get the insertion point out of the box or it shows up on your page.

Re:

[TheWoozle]

I don't think so. Where do you think aesthetic sense comes from, exactly? I highly suspect it has to do with your culture and what you learned from your relatives growing up, and not with some innate ability.

I sumbit to you that the reason geeks don't learn to dress trendily in High School has less to do with ability and more to do with motivation. I believe I am a case in point: in high school I was a protoypical geek, but my fiancee has whipped me into shape. I now have the ability to go clothes shopp

Re:

[NotQuiteReal]

I second the motion, with regard to the cultural impact on one's sense of aesthetics.

Consider a lotto winner from random spots on the globe, who can suddenly decorate their new mansion/palace as they deem fit.

Will it be a clean steel and glass uber-modern design?
Simple "contemporary"?
Or traditional European stuff like you'd find in a castle?
How about an intricate middle eastern motif, with lots of flowery rugs?

Each would be different from the others, and you might not like one or more of them. Even

Re:

[fiannaFailMan]

Aesthetic sense, "good taste", whatever you want to call it, is something which you either have intrinsically or you do not. Most people do not and will not no matter whose "set of guiding principles" are employed.

I disagree. I used to be clueless about good graphic design until I teamed up with a specialist artist. Now I wince at the sight of pixealated images, badly-kearned text, bad contrasts, cramped layouts, text bumping against the edge of its container, clashing rather than complementary colours, e

Re:

[geekoid]

Nope, it is a trained skill.

People who want to improve, do.

"Just look at the average geek's wardrobe LOL, if it was like math or language we'd all have it down by HS graduation, wouldn't we?"
If it was important to them, then there wardrobe would look fine. People who look good do so because they care to. No more. no less.

Think about it: Anybody who cared enough could simply look at the pictures of people in a magazine and copy what someone with there body typa and colors are wearing.

Another thing to think a

Re:

[SpecBear]

Think about it: Anybody who cared enough could simply look at the pictures of people in a magazine and copy what someone with there body typa and colors are wearing.

I do. But whenever I see a short fat guy in a magazine, he's dressed like a dork.

Re:

[MightyMartian]

That's right. Coders will be called in sooner or later to fix up the abortions that web designers create.

Just to be fair

[spun]

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.

Re:

[PopeRatzo]

I'd say an artist could learn to become a great programmer much easier than a programmer could learn to become a great artist.

Both require a working brain, but only one requires a working soul.

The life I've lived, the things I've done and have not yet done, qualify me to make this statement.

Re:

[mr_mischief]

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

Re:

[PopeRatzo]

Wait a minute, you think being an artist is about drawing a picture or singing or dancing?

Then, you equate these things with how some people can shoot, "blow stuff up".

I think this pretty much proves my point about a soul not being required for certain professions. Honorable professions, mind you, but not requiring anything "special in the heart" as a great man put it or self-knowledge.

I'm sorry somebody took my comment above as flamebait. I didn't mean it so. There are other qualities that programming re

Re:

[Rob T Firefly]

who needs the right brain anyway..

I'm left-handed, you insensitive clod!

Re:

[gEvil (beta)]

who needs the right brain anyway..

I'm left-handed, you insensitive clod!

So how's it feel when you let the left brain take over? ; )

Re:

[fiannaFailMan]

Of course the best solution would almost completely abstract the presentation from the data. That would allow the programmers and designers to work independently and do what each does best.

Nice in theory, but you need good communication between the two to get the right results. We once had a 'web designer' who came from a print background and when we had to have data generated dynamically on a web page he asked why we couldn't just use PDF format. He didn't get the concept of dynamically-generated web pag

Re:

[CastrTroy]

Graphic designers love PDF because they know it will look exactly the same on every computer. This is the reason the web (or at least HTML) is a graphic designers worst enemy. First of all, each browser will render the HTML differently, depending on quirks in the browser. Second, User settings will change the way a page looks. If I have Firefox show up to always show the address bar, and I see a pop-up, it's usually the wrong size, because the graphic designer thought my browser window would be a certai

Re:

[ObiWanKenblowme]

Instead of writing pages of snide remarks, perhaps you could admit that while this won't turn a programmer into a graphic artist, it might help the programmer avoid some glaring (and apparently common) blunders. It's not about making programmers create award-winning design, it's about making programmers think about design as a necessary element to a project and giving them a concise set of guidelines to follow to avoid bad design.

Re:

[ADRA]

Thank you so much for your authoritative opinion.

I'll think less of those deluded underlings from now on!

Re:

[rblum]

It's not a matter of "underlings". I have the highest respect for web designers - it's a tough job, and I wouldn't be able to do it. But exactly as a web designer would never let me touch his web pages, I'd never let a web designer touch our code.

It's a matter of matching skillsets. And judging from the job interviews I get to see, there are plenty of people who have the misguided belief they're programmers - when they are web designers. It's a waste of time for them and me - so why not use proper labels an

Re:

[mr_mischief]

Hmmm... it looks to me like the review already had a link to Amazon, too. So 363636-20 is not just a spammer but a liar too.