Design

7 Key Principles That Make A Web Design Look Good

October 15th, 2009

By Juul Coolen

Everyone and their grandfather (and dog) seems to have a website these days. The Web is getting more crowded by the day, with literally dozens of websites being added as you read this article. It is becoming harder and harder to get noticed among the masses.

“Fortunately” for us designers, not everyone seems to understand what makes or breaks a Web design. Granted, Web design is to a large extent a creative process and can therefore be called more art than science. But because it is intrinsically a medium of presentation, some rules (or at least principles) apply. By following some simple pointers, anyone should be able to create a visually pleasing design and take one step closer to fame. Okay, it’s not that simple, and talent and experience do matter, but anyone can turn their home page into something prettier within mere minutes.

substraction

So what makes something pretty? It is not Flash. Not to say that Flash has no merit, but Flash alone doesn’t make a design good; some nasty Flash websites are out there. Also, one doesn’t have to be a great illustrator to make appealing designs. Instead, look at Web design as a symbiosis of different elements. No single element counts the most; rather, the sum of the elements makes a design look good.

These elements are the 7 key principles that make a Web design look good:

  • Balance,
  • Grid,
  • Color,
  • Graphics,
  • Typography,
  • White space,
  • Connection.

1. Balance

Balance is all about ensuring that your design does not tip to one side or the other. It is like the balance of weight in achieving symmetry or asymmetry.

Example

Look at the dog in the header graphic of Khoi Vinh’s Subtraction website below. I took this example from The Principles of Beautiful Web Design by Jason Beaird. Jason points out how the cross to the right makes up for the added visual weight that the dog provides on the left. It is a small but not insignificant detail. See for yourself by hiding the cross with your hand.

This is what we call asymmetrical balance, and this is what balance is about. If you’re not careful about how you lay things out, the design will become unbalanced rather quickly. You can manipulate the visual weight of a design in many ways, such as with color, size and the addition or removal of elements. If you were to make the cross, say, a vibrant orange, it would become heavier and perhaps throw the layout off balance again. Achieving asymmetrical balance is an especially delicate matter that takes time to fine-tune and a somewhat trained eye to really pull off.

Here below is another example of symmetrical balance, this one by The First Twenty. Although the header graphic is asymmetrically balanced (can you spot how it’s done?), the rest of the design lower down has symmetrical columns. Asymmetrical balance might be harder to pull off, but it tends to make a design more playful.

You will find that every design you think looks good has a well-constructed balance underlying it. And every design featured here scores high on each of the seven principles we discuss. So take a minute to scroll up and down and see for yourself if they all pass muster.

2. Grid

The concept of grids is closely related to that of balance. Grids are a series of horizontal and vertical rulers that help you “compartmentalize” a design. Think of columns. Columns improve readability, making a page’s content easier to absorb. Spacing and the use of the Rule of Thirds (or similar Golden Ratio) make everything easier on the eye.

The Rule of Thirds and Golden Ratio account for why sidebars, for example, are usually about a third of the width of the page and why the main content area is roughly equal to the design’s width divided by 1.62 (equalling phi in mathematics). We won’t get into why this is, but it does seem to hold true in practice. It is also why the subject in professionally taken photographs is usually positioned not in the middle but at the intersection of an imaginary nine-square grid (three by three, with two horizontal and two vertical lines).

Example

The grid lends itself particularly well to minimalist designs. 5 Thirty One by Derek Punsalan shows why:

While the design is not visually impressive in itself, the clear strict structuring of elements makes it easy on the eye. The left column is roughly twice the size of the right sidebar, which just makes sense and is something to think about when creating your own designs.

3. Color

What if you changed the base red on the The First Twenty website (above) to lime green? Would it look good? Most likely not. Because it does not belong to the same color palette (and of course lime green isn’t the easiest color to work with). Websites such as ColourLovers exist for a reason. You can’t just pick your colors Rambo-style, guns blazing. Some colors go well together, others don’t. A lot of theories on colors and their combinations exist, including conventions on monochrome and contrasting schemes, but a lot comes down to common sense and having a feel for it.

Find out for yourself what works together. Soak up as many website designs as possible, such as those featured on any of the many CSS showcase websites (like Best Web Gallery), to get a feel for how colors interact with each other. Pick two or three base colors at most for your design, and then use tints (which are lighter, mixed with white) and shades (which are darker, mixed with black) of these base colors to expand the palette where necessary.

Picking nice colors is as important as picking the right colors (that is, the right colors for the job). A Web design for a cozy little restaurant would do well with “earthy” tones: reds, browns, etc. Of course, there is no such thing as a surefire recipe. Every color sends out a message, and it is up to you to get the message right.

Example

Bence Kucsan’ Quommunication website has a color scheme style of his own. It’s mainly monochromatic (tints and shades of a single color) and achromatic (black and white) with a color (red) to stand out:

The black and white conveys chic and professional, while the red adds the spice that makes certain elements stand out and keeps the design from looking dull; of course, more than just red makes this design interesting. By the way, one company in particular popularized this style.

Speaking of color, WebDesigner Wall by Nick La is pure bliss:

All of those soft pastels make this design shine. At first glance, the color choices may look somewhat arbitrary, but when you look closely you notice a strictly defined color palette, which is necessary to ensure that all of the elements get along well. The website, and especially its background, also demonstrates a good combination of colors and graphics, which brings us to number four…

4. Graphics

Okay, great design doesn’t need fancy graphics. But poor graphics will definitely hurt a design. Graphics add to the visual message. Websites like WebDesigner Wall have impressive illustrations, while others are understated.

Example

Tim van Damme uses only a handful of graphics on his website Max Voltar, but he implements them with the greatest thought and care. A non-intrusive background image and a sophisticated crown are two of the graphics. Visually, they are not overly impressive, but they all add to the look and feel of the website, and nowhere is one out of place.

For some time now, Max Voltar has had a different design than the one shown above. But for the two months that this one was online, it was easily one of my favorites. Because of this and because its use of graphics is so exemplary, I picked it over the lastest version.

Rogie King’s Komodo Media is a lot more graphics-heavy, perfectly executed from both a technical and thematic standpoint.

You may not be a great illustrator or photographer, but that doesn’t mean you can’t put great graphics on your website. Some basic Photoshop skill, possibly some stock images and great taste are all you need. Try to make the graphics go well together, and make sure they embody the style you are aiming for. We are not all gifted with the same natural ability, though. You can pick up some things by learning from others, but sometimes you just have to pick the style that suits you best (like a clean style if you are not the greatest of illustrators).

5. Typography

The art of type is a tricky subject to talk about because it encompasses so many elements. While it can be regarded as a branch of design, one can spend a lifetime mastering all of its aspects. This is not the place to provide a complete typographic reference, so we will limit our discussion to what will benefit you in the short term.

Web typography is handicapped compared to print typography. The biggest difference is our lack of complete control over the appearance of type on the Web, due to its dynamic character. Obviously, dynamic rendering has its strenghts, but Web designers have little control over the results, at least for now. Missing fonts on the user’s computer, differences in browser and platform rendering, and generally subpar support in CSS make Web typography a daunting if not frustrating task. But while we may have to wait for CSS 3 for Web typography to reach its full potential, we have the means now to make it look interesting and, more importantly, pretty.

Font Stacks

There are several fairly easy ways to significantly improve your website’s typography, three of which we’ll cover here. One of them is font stacks.

Font stacks are just basic CSS. They let you define the order in which fonts should be rendered. To be precise, we are speaking of typefaces here, not fonts. For a good summary on this, please refer to Jon Tan’s Typeface != Font.

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

The property above will give the body copy the typeface of “Helvetica Neue.” This, however, requires that the user’s computer has that particular typeface installed. Macs nowadays come with Helvetica (Neue) pre-installed, but most Windows machines don’t.

The beauty of font stacks is that you can define “fallbacks,” meaning that whenever a defined typeface is missing, the browser simply looks for the next one in line. Of course, this means the design will not look exactly the same for everyone, and as such we lose some control yet again. But for those who do not want to resort to another solution (such as image replacement), this is the best that pure CSS offers at the moment (until the day we can comfortably use @font-face).

Wilson Miner uses the font stack we cited above. Helvetica Neue is an improvement of Helvetica. And while Arial is installed on almost every computer (at least on Windows and Mac machines) and therefore a popular choice for the Web, most designers prefer Helvetica to Arial. This way, you get the best of both worlds: Helvetica for those who have it and Arial in case Helvetica is unavailable.

Jon Tan uses another interesting font stack for his headings:

body { font-family: baskerville, 'palatino linotype', 'times new roman', serif; }

Only a relatively small number of visitors will see the headers in Baskerville, but that is not a problem. It gives the design an extra bit of character while not hurting anyone who doesn’t have it. Again, font stacks are not a perfect solution, but they do give you an advantage.

Measure and Leading

Measure is the length of lines, and leading is the height (or vertical spacing) of lines. In CSS, measure can be controlled by defining a width for the containing box (e.g. the paragraph element). Both affect readability. If the lines are too short or too long, users won’t be comfortable reading the content; one often sees this problem with fluid layouts. Between 40 and 80 characters per line seems ideal.

Leading can be increased (or decreased, if you really want to) by defining the line-height CSS property. Generally, a line height of 1.5 works well for paragraphs. This means that when the size of the text is 12 points, the height of the line becomes 18 points (12 × 1.5), which gives the text some breathing room.

Hanging Quotes and Bullets

A third way to improve readability is with hanging quotes and bullets. Rather than leave the text of bulleted lists and quotes with the default alignment, horizontally align it with the rest of the text on the page.

Tim van Damme uses hanging bullets for his latest redesign of Max Voltar:

We have added the red line to emphasize how all of the text has been horizontally aligned. By simply setting the padding-left CSS property of the bulleted list to 0, you can achieve the same result.

Pulling off hanging quotes, on the other hand, is not as straightforward. Most designers resort to a background image for quotation marks and then align accordingly, as done by Matthew Buchanan:

The hanging quotation mark here does not disrupt the flow of text. It’s a detail not often attended to but well worth the investment.

Print Rules That Do Not Apply

Print and Web are not the same. That seems pretty obvious, but a lot of people treat them as if they were the same. Print is fixed, and the Web is dynamic. Having complete control over how your Web design will look for everyone is impossible.

Vertical rhythm, proper justified text (with hyphenation and without rivers) and multi-column layouts are just a few of the features of print that are (almost) impossible on the Web. Thus, we have a lot to look forward to with CSS 3. CSS 3 will probably not be, however, a be-all and end-all solution, and it will likely be another few years before we can fully take advantage of it. We simply have to accept these differences for now: don’t look at the Web as an online version of print; rather, use the intrinsic potential of the Web to its fullest.

A Word About Image Replacement

What about image replacement (the technique of replacing fonts with images)? We’ve talked about font stacks, but aren’t they inferior to image replacement? Well, that depends on what you think is more important: being able to display the exact font you want or having dynamic, accessible and SEO-friendly content? Certain image replacement techniques have gotten pretty advanced, but they still aren’t as flexible as plain text. Image replacement lends itself well to headers and excerpts, but it is hardly a solution for body text.

6. White Space

White space, or negative space, has to do with what is not there. Like measure and leading, white space gives text some breathing room and spatial peace. You can make elements stand out by adding white space around them. Copy, for example, shouldn’t look cramped. To ensure readability, make sure paragraphs have sufficient padding.

Perfume ads — or any ad for a luxury product for that matter — are known for their use of white space… loads of it; and a serif typeface for good measure.

Example

I suppose it’s time for a shameless plug. The screenshot above is of my own website Shift (px). The design relies heavily on typography and white space. White space probably takes up about 50% of the page. White space is one of the easiest (because you aren’t really adding anything, are you?) and most effective ways to create a visually pleasing and readable design.

White space adds a lot of class to a design. Don’t be afraid to leave some holes open, even gaping ones. Inexperienced designers are tempted to put something in every little corner. Design is about communicating a message. Design elements, therefore, should support this message, not add noise to it.

Another good example of plenty of white space:

Kyle Meyer’s Astheria shows that not much is needed for a pleasing design. Some people may confuse “minimalist” with “simple.” But pulling off such a style is neither simple nor easy (even if one does not have to be great with graphics or illustrations).

7. Connection

“Connection” is a bit of a made-up term here, but it seems to be the best one for what we mean. Connection here refers to a Web design that has both unity and consistency. These two attributes demonstrate the profesionalism of a design (and thus its designer). They are very broad attributes. A design should be consistent in its use of colors, in its range of fonts, with its icons, etc. All of these aspects count; a design can look great and still suffer from inconsistencies.

When a design is inconsistent, its unity can be lost on the user. Unity is slightly different from consistency. Unity refers to how the different elements in a design interact and fit together. For example, do the colors and graphics match? Does everything contribute to one unified message? Consistency, on the other hand, is found between the pages of a design.

Unity is perhaps the more important of the two. Without unity, having a good design is hard. Inconsistency, however, may look a bit “sloppy” but may not make the design “bad.”

Of the seven principles addressed in this article, connection is the most important. Connection has to do with how all elements come together: balance, grid, colors, graphics, type and white space. It is sort of the glue that binds everything together. Without this glue, the design falls apart. You could have pretty type and a brilliant and meticulously chosen color palette, but if the graphics are awful or simply don’t match or if everything is crammed together without thought, the design will fail.

This is the hardest part of designing. It is not something that can be easily taught or necessarily be taught at all. A little natural ability and experience is required. But it is what it is, and it makes a design look good in the end.

Example

We praised Nick La’s WebDesigner Wall earlier because of its lovely graphics, but it is also a good example of connection. When you look closely at the graphics and the style in general, everything has a hand-drawn watercolor look to it: the articles’ images, the watercolored background images, the hand-drawn doodles and icons, the styling of the poll, and so on. The attention to detail makes this design excel.

Further Resources

Conclusion

Good Web design is not limited to the seven key principles discussed here. Aspects such as accessibility, readability and usability play a part, too.

This is the reason why Web design is so difficult. Getting your feet wet in design is easy, especially today, with so many content management systems, blogging tools and themes readily available. But truly mastering all of the facets of Web design takes time and, let’s be honest, talent. Having the ability to craft pretty designs is just one facet, but an important one.

About the Author

Juul Coolen is a computer science student living in The Netherlands who happens to love design. Besides developing and designing for the Web, he occasionally blogs on his personal website Shift (px) and tweets @juulcoolen.

(al)

Tags:

113 comments for „7 Key Principles That Make A Web Design Look Good
  1. bogdan on October 15th, 2009 at 5:24 pm

    interesting … :)

  2. Jaswinder on October 15th, 2009 at 6:10 pm

    Excellent post with some awesome examples… more of this please! :)

    • G7 on October 16th, 2009 at 3:15 am

      Definitely please more of this. Great tips and though we may all have some scence of this we seem to get caught up in the bulk.

    • anred on November 20th, 2009 at 1:24 am

      nice stuff – thanks for the infos

  3. InternetHow Blog on October 15th, 2009 at 6:10 pm

    Very good points.

  4. Pim on October 15th, 2009 at 6:41 pm

    Juul, goed artikel: lekkere brain verfrissing.

    We want more!

  5. Bleyder on October 15th, 2009 at 6:44 pm

    Good read!

  6. designfollow on October 15th, 2009 at 6:47 pm

    big thanks for this info

  7. RK on October 15th, 2009 at 6:56 pm

    I love these blogger circle jerks. They all compliment each others blog designs like its the only right way to do things.

    • ADP on October 20th, 2009 at 4:15 pm

      So do you have any of your own comments? The stuff here makes sense. Very helpful for designers like me.

      • Neil on April 20th, 2011 at 3:13 am

        From what I have read in this article the title is absolutely correct. It is an article about *design* princeples. However it should be noted that they should really substitute design for ‘teh pwetties’.

        Now, if only designers can also comply to those pesky little things called standards, usability and proper design princeples, my job of turning your pretty unrealistic pictures into an actual website will be ten times easier.

  8. Monica Escaler on October 15th, 2009 at 7:32 pm

    Excellent information, useful! Thank you

  9. Most Interesting Ideas on October 15th, 2009 at 7:37 pm

    Absolutely agree with author

  10. Noel Wiggins on October 15th, 2009 at 7:42 pm

    fantastic outline for what goes into great website design.

    And yes it is great for us designers that a lot of folks out there don’t know how to design great sites. Even when you expose the “mystery” I still don’t think they can do it with out professional help.

    Hope they can try…

    Thanks and Regards

    Noel

  11. AtiKuSDesign on October 15th, 2009 at 8:29 pm

    I really love this post. It’s full of great advice about the basics that everyone should understand before moving on with a design.

    Thank you

  12. joyoge bookmark on October 15th, 2009 at 8:50 pm

    great post, thank you..

  13. Mark on October 15th, 2009 at 8:56 pm

    Very good principals to take along with you when designing a website. I am becoming better with communicating the need for “whitespace” to my clients.

    • paul on July 31st, 2013 at 12:18 pm

      Nice topic you can also see my website that i build and charge just few pound for a sexy website…

  14. Amber Weinberg on October 15th, 2009 at 9:39 pm

    Great tips. It’s nice to see a website based on typography versus heavy graphics :)

    • G7 on October 16th, 2009 at 3:04 am

      Definitely agree. Web designers tend to focus too much on graphics sometimes. I have to admit, I do so myself. But I have been thinking about text based sites and there appearance online. Nice Post.

    • Andalee Deeds on October 17th, 2009 at 9:38 pm

      I agree its very nice to see some typography and not entirely visual flash based sites. Finding all three things can be hard 1) SEO 2) Functionality 3) Visual appeal

  15. Park Rice on October 15th, 2009 at 10:23 pm

    good, now use this info of yours to fix up this crappy blog design

  16. Beckley on October 15th, 2009 at 11:35 pm

    Step 1: Put a giant banner ad above your headline. ;)

    • Si on October 16th, 2009 at 9:34 pm

      yep, it’s funny how many ‘design’ blog are implementing massive adverts in very obvious places about the fold. It is starting to get ridiculous haha

      • Jason on October 17th, 2009 at 2:53 am

        Hosting and designing a website isn’t cheap, especially when the resources offered to the reader are FREE.

        So the owner puts some ads on the blog to actually recoup expenses, Oh noes!

        Go complain elsewhere.

  17. Saoirse on October 15th, 2009 at 11:42 pm

    Great article!

    I love great typographic-based designs. I don’t know what it is about them, but great use of fonts really does it for me.

    I’m not that clued up on good typography, but the best tip I ever picked up was to be careful when mixing serif and sans-serif. Personally, I generally use serif for headers, titles, etc and sans-serif for the main bodies of text. I think it creates a pleasant balance.

    Graphics, on the other hand, is my thing! I’m not as good at designing them as I’d like to be, but I know how to use the components to put together a great site. I get a lot of stuff from http://www.ThemeForest.net and I have the collection from http://www.amazingwebgraphicscollection.com – I don’t think I’ve had to design anything from scratch in a long time!

  18. bakytn on October 15th, 2009 at 11:58 pm

    Thank you!!!

    so useful article.

  19. Anders Nylander on October 16th, 2009 at 12:03 am

    Have to say, that this was first “X things to know before…” writings that I actually read through! You really had some good points there that I had to put behind my ear. Thanks!

  20. drewbeta on October 16th, 2009 at 12:49 am

    Nice work, I especially like the part about print and web being different. I try to explain this to people all of the time. there are a lot of print designers who think that they can very easily design a website, but they don’t take things like changing content and consistent interfaces into account.

  21. Tyler Herman on October 16th, 2009 at 1:07 am

    Nice Post.

    Unrelated: Is anyone else having the fonts on the site look very illegible(italic and very light weight). I’m using the latest version of Firefox (mac). Firebug says Helvetica Neue but it is way too light to be the normal weight. Everything looks fine in Safari, but not FF. Havn’t checked any other browsers.

    • Danny on October 16th, 2009 at 7:37 pm

      I would be careful with specifying helvetica neue in your font stacks, as a print designer I have various weights activated, normally postscript versions, and that leads to them rendering like crap, especially in FF.

  22. Teiosanu George on October 16th, 2009 at 1:27 am

    Great article! Will apply these on my website. Got a lot of things to learn from this article. Made me review my stance on web design…

  23. Marcel on October 16th, 2009 at 1:29 am

    7: The word you are looking for is:

    http://en.wiktionary.org/wiki/gestalt

    It is one of the first concepts that is taught in design.

  24. Juul Coolen on October 16th, 2009 at 1:49 am

    Thanks, Marcel. I have no formal education in design, so thanks for pointing that one out!

  25. Ben M on October 16th, 2009 at 2:28 am

    8. Put a whole wall of paneled advertising on your tech blog because it looks sooo great. Then use that as a platform to sound like you know what you’re talking about and pretend like it doesn’t cheapen your message.

  26. moabi on October 16th, 2009 at 2:28 am

    yep, very good, i’m even thinking about grids now, though i’ve never wanted to…congrat !

  27. Kristofer on October 16th, 2009 at 2:41 am

    Nice rundown of the principles. However, I notice that none of the examples have to deal with one real-world issue: ad placement. What do you do when 25% of the available window at any given time has content you cannot control in any way?

  28. Russ on October 16th, 2009 at 2:43 am

    It’s a good article for non designers. Any good designer should know all of this already. And then some.

  29. SE7EN on October 16th, 2009 at 2:55 am

    Great article and interesing examples :D

  30. Sarah Camp on October 16th, 2009 at 3:04 am

    This is a great breakdown of basic principles of things that go into a good design. Well done!

  31. Rebeca on October 16th, 2009 at 3:41 am

    Excellent post. I’ve learned a lot in one read :) Thanks!

  32. Daniel on October 16th, 2009 at 7:09 am

    Nice post and great examples, thanks!

  33. Eric B. on October 16th, 2009 at 9:54 am

    Excellent post! I’ve bookmarked this post for future reference ;)

  34. Delazee on October 16th, 2009 at 1:05 pm

    Superb.

  35. Siena on October 16th, 2009 at 1:29 pm

    Nice post and superb examples. Good work.

  36. Los on October 16th, 2009 at 4:48 pm

    I definitely agree with you Mr. Coolen. These seven points are wonderfully explained as well as the way you have narrated them with examples is very good. Everything is easily understood and there is logic behind everything point too. Also agree to your conclusion that web designing is not that easy as it seems to be. Truly appreciate your article.

  37. Web Samurai on October 16th, 2009 at 5:18 pm

    I’m sorry, but Web Designer Wall looks amazingly ugly to me.

  38. Mark @ NxT LvL MrktnG on October 16th, 2009 at 6:30 pm

    Nice list. Yes, it’s really is that simple, eh?

    There one more that’s worth considering and that is, Target Audience. As they say, “Beauty is in eye of the beholder.” And IMHO all (except balance) of the above exist in the context of the beholders, no?

    Also, do you consider UX as part of “good design”? We’ve all been on sites that look great but are inappropriate for the target and/or are not user friendly.

  39. Catherine Azzarello on October 16th, 2009 at 8:53 pm

    Good article.

    These are all design principals covered in 100/200 level university classes for most BA/BFA disciplines.

  40. Jonatan Guerra on October 16th, 2009 at 9:44 pm

    Excelent article

    Just one thing that you might want to add.

    Inside typography, there’s a relative new tool that’s called SiFR3 (http://wiki.novemberborn.net/sifr3/).

    It’s great to use instead of image replacement. You might want to check it out and maybe update this article.

  41. vasudev karthik on October 16th, 2009 at 11:47 pm

    great article :)

  42. Dario Gutierrez on October 17th, 2009 at 1:48 am

    Great tips, sometimes we don’t look these details.

  43. All for Design on October 17th, 2009 at 1:46 pm

    One of the best article I have red.
    It’s a very good overview and the examples have been very well chosen !
    Thanks for sharing.

  44. wptidbits on October 17th, 2009 at 11:06 pm

    Talents and efforts. These two factor is contributing much in web design. Hope that i can be these people (Nick La and this post writer). Better be true..

  45. Juul Coolen on October 17th, 2009 at 10:01 am

    Thanks all for the kind words, much appreciated! Gives me the energy to keep doing what I do.

  46. Miroslav Nikolov on October 17th, 2009 at 11:24 pm

    I think you can not subject unique design on some principles. This is only for a good designs.

  47. Loralyn Tate on October 18th, 2009 at 6:15 am

    One of the most comprehensive tutorials in a long time. Thanks.

  48. Moto Liege on October 18th, 2009 at 9:04 am

    Nice article, hope to have the time to apply these rules to my website…

  49. Raju Dandu on October 18th, 2009 at 4:08 pm

    Beautiful article. I always felt there are two sides to any design. The art and the science. Few people can separate it. If we can, leave the art to a truly creative person and the science to any one who is interested in learning design with out being an artist.

  50. Murrieta Web Designer on October 18th, 2009 at 9:29 pm

    This is the first post of this sort that I didn’t think was weighed down with unnecessary design dogma. Other than one of the examples (for “Unity”) that I felt was a less than optimal example, I think this post is spot-on. This should be shown to anyone endeavoring on designing a website for the first time.

  51. Minneapolis Web Design Guy on October 18th, 2009 at 10:22 pm

    Typography if easily the trickiest on for me. It’s amazing how the slightest variations in thickness or rounded corners can change the way a word looks or the reactions it sets off. It’s a very subtle art that takes a lot of focus.

  52. Cre8ive Commando on October 18th, 2009 at 10:48 pm

    Interesting article. I think these points make sense although a website can look good without them.

    With regard to font replacement, here are a few methods which I found work best: Two great ways to embed a font in your website :-)

  53. PelFusion on October 19th, 2009 at 11:08 am

    very well written… very helpful

  54. multimedia design on October 19th, 2009 at 1:11 pm

    Nicely done – I hope all my clients read this!

  55. Angela on October 21st, 2009 at 8:18 pm

    Fantastic article. Very thorough and helpful. I will be checking out some of the other resources as well. Enjoyed this very much!

  56. om ipit on October 22nd, 2009 at 1:06 am

    nice and complete list post
    maxvoltar redesign :)

  57. Tim Mustoe on October 22nd, 2009 at 5:42 am

    Agree with everything you’ve written, and thanks for trying to educate about design discipline. There are some terrible websites out there, put together with no knowledge of the fundamentals of good graphic design.

    I’ve always come to web design with the same set of rules, guidelines, principles (whatever you want to call them) as I would for a print design project. Everything described above is the basis of successful design, regardless of the medium.

    Admittedly, there are some web-specific considerations, but just because the medium changes, we shouldn’t throw out the design rule-book, just adapt it accordingly.

  58. TheWebTuts on October 23rd, 2009 at 3:09 am

    Tutorial added to thewebtuts.com

  59. Merlin77 on October 23rd, 2009 at 4:39 am

    What can be done, if the various sources for increased energy production do not fully offset the decline in oil and gas production? ,

  60. Jinjaninja on October 23rd, 2009 at 5:51 am

    An epic list, consise but highly informative. Excellent job.

  61. Jay on October 25th, 2009 at 9:41 am

    Awesome info -thanks for creating a great resource through this post!

  62. Adam on October 25th, 2009 at 2:18 pm

    Wow! very well articulated and your examples are well chosen.
    #Bookmarked

  63. Matt on October 27th, 2009 at 8:38 am

    Ahhh… those are basically the 7 principles for design. Nice try taking credit for it though. At least it opens some eyes to some designer wanna-bes.

  64. font9a on October 30th, 2009 at 11:05 am

    I always find these lists difficult to write.
    Top 10 Principles of UX Design
    7 Top Design Priorities
    Eleven Rules to Effective Site Design…..

    I like your list of 7 things. But where do you talk about navigation excise, or human centered design (e.g., smart system messaging), or accessibility?

    but instead of making the list longer, I propose making it shorter.

    1) Connection. Design and use a rational design language system that accommodates both present needs and future design extensions.
    2) Grid. Balance, typography, whitespace, and graphics are all subsets of the design and use of a well-architected grid.
    3) Color. Easily the most subjective and most abused principle in most art/design projects. Also, probably the deepest rabbit hole where the final color doesn’t matter nearly so much as the system used to create your palette. Trends just ebb and flow too quickly (like typefaces) to recommend a color scheme. But the main principle here should be a system that is easy to manage in RGB (Hex, HSB), CMYK, and can adapt with little fanfare by using tints, shades, and duotones. Unless you’re a photographer and need to also manage Lab / 16-bit color within your design workflow you can eliminate that most delightful to use colorspace.

  65. Loky on November 9th, 2009 at 4:30 am

    Very nice article. I found out a few thing that I was not aware of.
    Thanks.

  66. Super User Studio on November 12th, 2009 at 7:04 am

    Great article, thanks.

  67. Vinfotech on April 19th, 2010 at 8:41 pm

    Needless to say – Superb article. Thanks a bunch for sharing this resource.

  68. Ted Thompson on June 9th, 2010 at 1:52 am

    Great info, very useful. Thanks for sharing!

  69. Terrilyn Leischner on June 27th, 2010 at 7:17 pm

    love the information here hope to read more

  70. Nihar Rathore (aka Nick) on July 18th, 2010 at 1:44 pm

    Hi,

    This post is exactly what I was looking for. Most of the posts I came across is talking about stuffs which are important but not directly related to web site designing, pro. Thankfully, I would be able to enhance my skills gradually by implementing few suggestions here as I missed on few previously, I guess. I am recently designing supplementary graphics for easymoneyschemes.com and want it to be near perfect and that is how I got in here. Learning curve is never ending and thanks to people, who never mind sharing their experience and knowledge.

    Thanks,

    Nick

  71. Nike Rift on August 11th, 2010 at 5:48 pm

    Thanks for posting!

  72. Cross Cut on September 30th, 2010 at 6:16 pm

    Reading this i finally took a break from my job. I run a hardware store, and i get kinda stress throughout the day =) this site just bought me a few minutes of relax =] I managed to find a rss feed on your site, so that i could subscribe for some more. Ill be sure to come here more often from now on ^__^

  73. Bilbo on October 5th, 2010 at 6:15 pm

    THE ORIGINAL

    http://www.quommunication.com/

    CLONE STAMP!

    http://www.artworkstudios.it/

    Another great plagiarism on the web…

  74. Darren on November 16th, 2010 at 1:29 am

    I really enjoyed reading this article, however you don’t really mention what bad examples of each are, like a comparison.

    Aside that it was very informative and pretty straight forward with the content delivered.

    Well done.

  75. Abu Masud on January 7th, 2011 at 4:49 am

    Very good article. Looking forward to an article on usability of the design.
    Thanks !

  76. Kaden Hamilton on February 25th, 2011 at 1:20 am

    I find that balance, weight, color etc. are extremely useful tools as well. Thanks for the great article. KH

  77. James Holmes on May 5th, 2011 at 8:06 pm

    This is perhaps one of the best books I’ve read in a long time, mostly because it’s targeted specifically to folks like myself: those who are technically sound but graphically impaired. My solid skills behind a camera translate not at all to good site design and layout, so I was really excited to look through this book when I first heard about it.

    Beaird has written a very concise, gloriously illustrated work that does a tremendous job of covering everything from layout/composition to textures and color. Throughout the book Beaird uses real-world examples of sites that illustrate the particular point he’s working on. Sitepoint’s willingness to spring for full-color printing helps nail down Beaird’s content.

    The book clearly discusses layout fundamentals like balance, grid theory, and symetry/asymetry. The chapter on color hits color psychology (“Feeling a bit blue today?”), palatte selection, and the value of using color wheels to pick complementary and contrasting colors.

    The rest of the book is every bit as golden, hitting texture, typography, and imagery. There are a number of terrific resources for fonts, colors, and images with a mix between free and commercial resources.

    This isn’t a book to find out the details of how blocks flow and clear in CSS, nor is it a book to learn about the latest and greatest in AJAX/Javascript. What this book does cover, and covers well, are the higher-level, vital concepts you need to grok before you start wiring up AJAX controls and laying out <div> elements.

    The Principles of Beautiful Web Design isn’t just for lame design folks like myself. I imagine even accomplished web designers could learn a thing or two from it. It’s that good.

  78. serrurier on June 6th, 2011 at 9:15 am

    I couldn’t have really asked for a better blog. You’re ever present to present excellent advice, going directly to the point for straightforward understanding of your readers. You’re undoubtedly a terrific professional in this matter. Thanks a ton for remaining there for folks like me.

  79. Jason Curby on September 27th, 2011 at 5:34 am

    Great article and point of reference – I’ve revisited this page a couple of times.

  80. Aniket - Professional Website Developer on November 28th, 2011 at 7:09 am

    Very nice article.
    I liked the point of having balanced. Using graphics & typography is good but must be well optimised.
    Site loading time is also an essential part of a good web design.
    Grid sytems are good.

    Thank you for such a useful resource

  81. Bob on March 12th, 2012 at 11:18 pm

    This is a great article, well written and worthy of “bookmark” status! Thanks for sharing!

    That said, there is a typo (strenghts) in the second paragraph under Typography ;-)

  82. Alex on April 10th, 2012 at 5:40 am

    All the pictures are broken! Looks like a good article but is fairly useless without the pictures you constantly reference!

  83. Deven CK on June 17th, 2012 at 7:50 am

    Thanks, This was a good points to keep in mind and know before and after of website design.

  84. Gopinath Pandian on June 28th, 2012 at 8:01 am

    could you please let me the preferred width of a website.
    Thank you in advance

  85. David on July 22nd, 2012 at 7:19 pm

    I would really love to read this article but your images are broken

  86. Brad on August 9th, 2012 at 5:27 am

    Great info, always good to have an outside opinion on website design. When your building the site it is all too easy to fall into a trap without knowing.

  87. Amilkar on August 17th, 2012 at 6:08 pm

    This is the best article I’ve ever read on this subject. I’m not a professional web designer nor do I have a degree in arts. I’m a physicist that moved on to the computer science filed and eventually ended up developing a website. It is not hard to see why I had such a hard time trying to make it look nice. I’ve been searching to web for good information on principles that explain what we look at in a web design when we find it pretty. Since our assessment of beauty tends to be an automatic process I had never stopped and wonder about what specific details make a website look good. As a physicist I knew about the golden ratio but I lack the experience and education (and probably talent) needed understand what went wrong when I saw my own design and I didn’t like what I saw. This is definitely an art to me, but I’m glad I’ve found somebody who took the time to explain the basic principles that serve as guidelines. Thank you very much! (Sorry about my poor English. It is not my native language). Greetings!

  88. Sergey on December 15th, 2012 at 10:53 pm

    Hello! I am from Ukrain and I dont speak english so gut, but I have homework to find the english text to read and translate it. So, I find this article and try to translate it. So, I want to tell “thank you” to the autor, because I find a lot of interesting information, that I can use for my website and develop my skills to make something beautiful! ^_^

  89. Paras Sharma on December 25th, 2012 at 12:11 pm

    Hey Colon,

    Page Loading Speed is important aspect of website design these days, no visitor want to hang up for long if the page is taking time to load. Survey says that visitor will wait for 4 seconds maximum in most cases.

    Many thanks for other wonderful pointers.

  90. Pramodkumar Varma on January 2nd, 2013 at 12:22 pm

    Hey Colon,
    very informative 7 key principles to make a Web design look good , nice article which covers basic things which are always missed by new developers.

  91. Xiong Vang on January 22nd, 2013 at 8:02 pm

    Hi there.people. Just remember that your website can only be as great as the content. Content matters lots and if you have nothing to offer, showoff or to interest the reader your pretty design goes bye bye in a matter of a minutes.

    I’ve bumped into some of the ugliest websites on the planet and because their content is so delicious that those ugly websites have succeeded and are still here since the day http came online.

    So for all those that think design is important don’t ever for get your content matters too. Even the way you writer needs to know how to entertain with great scripts or users hit the home button so fast you lost them.

    Just saying.

  92. Otobo Firstman Noah on January 29th, 2013 at 3:58 am

    I love it, it thought me a lot. thanks

  93. Aashi on February 1st, 2013 at 3:06 pm

    Thanks a lott for the info………

  94. Owyn on February 2nd, 2013 at 2:44 pm

    This article is very insightful. I learned a lot reading it. I am doing research into web design and I am using this article as my main basis of research. The author should be proud of himself, it is written so well.

  95. one direction on February 28th, 2013 at 10:58 am

    this was really helpful in my ICT lesson. Thanks a million times over.

  96. Stacey Devine on March 26th, 2013 at 11:11 am

    This article is damn good man contain lot of useful information for people like who wanted their web design look good. Thanks

  97. David Fitzgerald on March 31st, 2013 at 3:31 pm

    Great information! It’s amazing reading this to today how relevant these principals are in 2013. Thank you for being such a great resource!!

  98. Majdi M Aburahelah on April 4th, 2013 at 4:51 am

    It’s nice and I like it.
    Many thanks

  99. Gail on June 24th, 2013 at 10:51 pm

    When you say that the Main Content area should be equal to the width of the page divided by 1.62, I’m a bit confused.

    How does this work if you want to put more than the defined length in, then? In order for the area of the main content to equal page width divided by 1.62, then the main content space would have to be either wide and short or narrow and long.

    {———————————————————————————————-}
    {— side —}{———————————————————————–}
    {— panel —}{— main content —}
    {———————}{———————————————————————–} <–end of webpage

    {———————————————————————————————–}
    {— side —}{— main —}
    {— panel —}{—content—}
    {— —}{— —}
    {— —}{— —}
    {— —}{— —}
    {— —}{— —}
    {— —}{— —}
    {———————}{— —}
    {— —}
    {— —}
    {— —}
    {— —}
    {— —}
    {— —}
    {—————-}

    I'm probably missing something, but I'm not sure.

  100. Edmund Punongbayan on October 16th, 2013 at 10:52 am

    great article! thanks for this! Additional aspects to practice!

  101. Anirban Pathak on December 23rd, 2013 at 11:20 am

    Very good principals to take along with you when designing a website. Web designers tend to focus too much on graphics sometimes. I have to admit, I do so myself. But I have been thinking about text based sites and there appearance online.

  102. Burton Haynes on March 24th, 2014 at 9:28 am

    I just want to mention I am new to weblog and honestly loved you’re page. Likely I’m going to bookmark your blog post . You surely have exceptional article content. Regards for sharing your blog.