7 Key Principles That Make ...

download 7 Key Principles That Make ...

of 28

Transcript of 7 Key Principles That Make ...

  • 7/31/2019 7 Key Principles That Make ...

    1/28

    AJAX

    CSS

    DESIGN

    PHOTOSHOP

    TUTORIAL

    WORDPRESS

    more Noupe

    Web Designer's Online Resource

    Oct 15

    7 Key Principles That Make A Web Design Look Good

    Posted in How To's

    79 Comments

    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, its not thatsimple, and talent and experience do

    matter, but anyone can turn their home page into something prettier within mere minutes.

    So what makes something pretty? It is not Flash. Not to say that Flash has no merit, but Flash alone doesnt make a design

    good; some nasty Flash websites are out there. Also, one doesnt have to be a great illustrator to make appealing designs.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    2/28

    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 ofweight in

    achieving symmetry or asymmetry.

    Example

    Look at the dog in the header graphic of Khoi Vinhs 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 thatthe 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 youre 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 ofsymmetrical balance, this one by The First Twenty. Although the header graphic is

    asymmetrically balanced (can you spot how its 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.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    3/28

    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 pages content easier to absorb.

    Spacing and the use of the Rule of Thirds (or similarGolden 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 designs width divided by 1.62 (equallingphi in mathematics).

    We wont 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:

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    4/28

    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 isnt the easiest color to work with).

    Websites such as ColourLovers exist for a reason. You cant just pick your colors Rambo-style, guns blazing. Some colors go

    well together, others dont. 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 rightcolors (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. Its mainly monochromatic (tints and shades

    of a single color) and achromatic (black and white) with a color (red) to stand out:

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    5/28

    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

    particularpopularized 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 doesnt needfancy 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

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    6/28

    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 onewas 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 Kings 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 doesnt mean you cant 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

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    7/28

    Web designers have little control over the results, at least for now. Missing fonts on the users 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 websites typography, three of which well 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 Tans 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 users

    computer has that particular typeface installed. Macs nowadays come with Helvetica (Neue) pre-installed, but most

    Windows machines dont.

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

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    8/28

    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 anextra bit of character while not hurting anyone who doesnt 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 wont 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 ofMax Voltar:

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    9/28

    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. Its 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 isfixed, 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: dont 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

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    8 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    10/28

    What about image replacement (the technique of replacing fonts with images)? Weve talked about font stacks, but arent

    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 arent 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, forexample, shouldnt 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 its 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 arent 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. Dont 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:

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    11/28

    Kyle Meyers 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 ofthe 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 dont 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

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    12/28

    retweet

    667tweets

    We praised Nick Las 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

    Five Simple Steps to Designing Grid Systems

    A beginners guide to grids.

    The Golden Ratio in Web Design

    8 Simple Ways to Improve Typography in Your Designs

    Fonts and the Web

    About the state of fonts on the Web and image replacement.

    4 Principles of Good Design for Websites

    Four other principles, more from a practical standpoint.

    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, lets 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)

    This entry was posted on Thursday, October 15th, 2009 at 4:41 pm and is filed underHow To's. You can follow any responses to this entry

    through the RSS 2.0 feed. You can leave a response, ortrackbackfrom your own site.

    79 Responses, Add Comment +

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    13/28

    bogdan 15 October 2009

    interesting :)

    Reply

    1.

    Jaswinder15 October 2009

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

    Reply

    G7 16 October 2009

    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.

    Reply

    2.

    InternetHow Blog 15 October 2009

    Very good points.

    Reply

    3.

    Pim 15 October 2009

    Juul, goed artikel: lekkere brain verfrissing.

    We want more!

    Reply

    4.

    izmir winsa 15 October 2009

    Great post!!! Thanks

    Reply

    5.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    14/28

    Bleyder15 October 2009

    Good read!

    Reply

    6.

    designfollow 15 October 2009

    big thanks for this info

    Reply

    7.

    RK 15 October 2009

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

    Reply

    8.

    Monica Escaler 15 October 2009

    Excellent information, useful! Thank you

    Reply

    9.

    Most Interesting Ideas 15 October 2009

    Absolutely agree with author

    Reply

    10.

    Noel Wiggins 15 October 2009

    fantastic outline for what goes into great website design.

    And yes it is great for us designers that a lot of folks out there dont know how to design great sites. Even when you

    expose the mystery I still dont think they can do it with out professional help.

    Hope they can try

    11.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    15/28

    Thanks and Regards

    Noel

    Reply

    AtiKuSDesign 15 October 2009

    I really love this post. Its full of great advice about the basics that everyone should understand before moving on with

    a design.

    Thank you

    Reply

    12.

    joyoge bookmark15 October 2009

    great post, thank you..

    Reply

    13.

    Mark15 October 2009

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

    Reply

    14.

    Amber Weinberg 15 October 2009

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

    Reply

    G7 16 October 2009

    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.

    Reply

    15.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    16/28

    Andalee Deeds 17 October 2009

    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

    Reply

    Park Rice 15 October 2009

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

    Reply

    16.

    Beckley 15 October 2009

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

    Reply

    Si 16 October 2009

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

    Reply

    Jason 17 October 2009

    Hosting and designing a website isnt 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.

    Reply

    17.

    Saoirse 15 October 2009

    Great article!

    18.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    17/28

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

    Im 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! Im not as good at designing them as Id 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 dont think Ive had to design anything from scratch in a long

    time!

    Reply

    bakytn 15 October 2009

    Thank you!!!

    so useful article.

    Reply

    19.

    Anders Nylander16 October 2009

    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!

    Reply

    20.

    drewbeta 16 October 2009

    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 dont take things like

    changing content and consistent interfaces into account.

    Reply

    21.

    Tyler Herman 16 October 2009

    Nice Post.

    Unrelated: Is anyone else having the fonts on the site look very illegible(italic and very light weight). Im 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. Havnt checked any other browsers.

    Reply

    22.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    18/28

    Danny 16 October 2009

    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.

    Reply

    Teiosanu George 16 October 2009

    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

    Reply

    23.

    Marcel 16 October 2009

    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.

    Reply

    24.

    Juul Coolen 16 October 2009

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

    Reply

    25.

    Ben M 16 October 2009

    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 youre talking about and pretend like it doesnt cheapen your message.

    Reply

    26.

    moabi 16 October 2009

    yep, very good, im even thinking about grids now, though ive never wanted tocongrat !

    27.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    19/28

    Reply

    Kristofer 16 October 2009

    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?

    Reply

    28.

    Russ 16 October 2009

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

    Reply

    29.

    SE7EN 16 October 2009

    Great article and interesing examples :D

    Reply

    30.

    Sarah Camp 16 October 2009

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

    Reply

    31.

    Rebeca 16 October 2009

    Excellent post. Ive learned a lot in one read :) Thanks!

    Reply

    32.

    Daniel 16 October 2009

    Nice post and great examples, thanks!

    Reply

    33.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    20/28

    Eric B. 16 October 2009

    Excellent post! Ive bookmarked this post for future reference ;)

    Reply

    34.

    Delazee 16 October 2009

    Superb.

    Reply

    35.

    Siena 16 October 2009

    Nice post and superb examples. Good work.

    Reply

    36.

    Los 16 October 2009

    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 pointtoo. Also agree to your conclusion that web designing is not that easy as it seems to be. Truly appreciate your article.

    Reply

    37.

    Web Samurai 16 October 2009

    Im sorry, but Web Designer Wall looks amazingly ugly to me.

    Reply

    38.

    Mark @ NxT LvL MrktnG 16 October 2009

    Nice list. Yes, its really is that simple, eh?

    There one more thats 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? Weve all been on sites that look great but are inappropriate for

    39.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    21/28

    the target and/or are not user friendly.

    Reply

    Catherine Azzarello 16 October 2009

    Good article.

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

    Reply

    40.

    Jonatan Guerra 16 October 2009

    Excelent article

    Just one thing that you might want to add.

    Inside typography, theres a relative new tool thats called SiFR3 (http://wiki.novemberborn.net/sifr3/).

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

    Reply

    41.

    vasudev karthik 16 October 2009

    great article :)

    Reply

    42.

    Dario Gutierrez 17 October 2009

    Great tips, sometimes we dont look these details.

    Reply

    43.

    All for Design 17 October 2009

    One of the best article I have red.

    Its a very good overview and the examples have been very well chosen !

    Thanks for sharing.

    Reply

    44.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    22/28

    Parfume 17 October 2009

    Thats one nice post, use it when ever i have to conversionoptimize my websites.

    Txh alot!

    Reply

    45.

    wptidbits 17 October 2009

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

    Reply

    46.

    Juul Coolen 17 October 2009

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

    Reply

    47.

    Miroslav Nikolov 17 October 2009

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

    Reply

    48.

    Web Design Maidstone Kent 18 October 2009

    Really great article and some very good points on whitespace

    Reply

    49.

    Loralyn Tate 18 October 2009

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

    Reply

    50.

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    23/28

    Moto Liege 18 October 2009

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

    Reply

    51.

    Trackbacks

    7 Key Principles That Make A Web Design Look Good Noupe - Make Better Websites - Inspiration &

    Showcase for Quality Design and CSS Websites

    1.

    7 Key Principles That Make A Web Design Look Good - Dreamco Magazine2.

    WebDev Bookmarks for October 15th | hbflyte.com3.

    7 principios para un buen diseo web | Un Mundo Libre4.

    links for 2009-10-15 | Digital Rehab5.

    Tech News! - Page 2 - myhosting.com Forums6.

    > 250GB PlayStation 3 Priced And Dated For North America FREEKO7.

    Friday Focus 10/16/09: Ornamental | Devlounge8.

    7 Key Principles That Make A Web Design Look Good | Techdoom Reports9.

    the basics on creating an effective and good-lookin web design gorilla in the room10.

    In the Woods ThemeForest Week In Review11.

    The Technology Blog: 7 Key Principles That Make A Web Design Look Good12.

    MakinMo's Tech Blog13.

    links for 2009-10-16 riverrun meaghn beta14.

    Il punto della settimana #2 Francesco Corsentino .net15.

    7 consejos para un buen aspecto en tu diseo web - VitaminaWEB.com16.

    Sweet Tweets: Design Resources of the Week #2117.

    links for 2009-10-17 Amy G. Dala18.

    7 Key Principles That Make A Web Design Look Good Noupe | Peringkat Satu19.

    How To Get A High Quality Website20.

    Twitter Link Roundup (10.10 10.17)21.

    Tips in Creating a Landing Page Design22.

    Leave a Reply

    Name (required)

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    24/28

    Mail (will not be published) (required)

    Website

    SubmitComment

    Notify me of follow-up comments via e-mail

    Subscribe by RSS

    Subscribe to Noupe by Email

    Twitter

    TypeKeywordsAndHit

    Sponsors

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    25/28

    Ad

    Ad

    Ad

    Submit News

    Popular Articles

    50 Most Beautiful Icon Sets Created in 2008

    in Icons / 242

    Ten Simple Rules for Choosing the Perfect CMS + Excellent Options

    in PHP / 226

    Mastering Your WordPress Theme Hacks and Techniques

    in WORDPRESS / 185

    40+ Extremely Beautiful Icon Sets Hand-picked from deviantART

    in Freebie / 183

    Discussing PHP Frameworks: What, When, Why and Which?

    in PHP / 183

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    26/28

    50+ Amazing Jquery Examples- Part1

    injQuery / 163

    40+ Absolutely Stylish & Creative Hand-picked Wallpapers

    in Wallpapers / 163

    40 (NEW) High-quality and Free Icon Sets

    in Icons / 161

    47+ Excellent Ajax CSS Forms

    in AJAX / 158

    13 Awesome Javascript CSS Menus

    in AJAX / 157

    101 CSS Techniques Of All Time- Part 1

    in DESIGN / 150

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web

    28 10/18/2009

  • 7/31/2019 7 Key Principles That Make ...

    27/28

  • 7/31/2019 7 Key Principles That Make ...

    28/28

    RSS Feed

    Email Subscription

    News RSS

    Noupe Friends

    Smashing Forum

    Dr. Web (.de)

    Smashing Magazine

    Smashing JobsSmashing Book

    2009 Smashing Media GmbH

    y Principles That Make A Web Design Look Good Noupe http://www.noupe.com/how-tos/7-key-principles-that-make-a-web