What Does Good Web Design Look Like?

Jul 15, 09 What Does Good Web Design Look Like?

When web designers take on a project, they must take into account many different factors that may affect the outcome of the final product. A good web design should be fit for the purpose and audience and also at the same time should deliver the content and information to the audience in a visually coherent manner. This article will go over some of the essential elements of good web design and examples of well-established web sites that exhibit them.

Effective Color Schemes

A successful color scheme is key to building the mood and atmosphere for any kind of design. A common mistake that is often made by web designers is that they overlook the importance of a well-planned out color scheme. The choice of color not only affects the aesthetic appeal but also user experience of the target audience.

Feed Stitch colorful web design
Many experienced web-designers have learned that colors should be relevant to the purpose of the design and correspond to the mood of the content. For example Feed Stitch uses bright and vivid colors from the spectrum to illustrate a lively and fun mood, which is directly linked to its purpose of combining different syndication feeds into one unified feed.

Ploc Media contrasting colors
There are times and situations where there is a need to hold back and put a restraint on using bright and eye-catching colors as it is just not appropriate for the design. There are other ways of achieving quality with less exaggerated color schemes. Ploc Media is a fine example for this – The aqua marine blue emphasizes the product/service on the dark grey design. The designer effectively highlighted the primary focus of the website by creating this contrast.

Deciding on a color scheme can be difficult so designers should constantly experiment and find out which hues go well together, but at the same time making sure the colors are relevant to the product/service the website is promoting.

Spacing and Negative Space

Just because there is an empty area, doesn’t mean it has to be filled. Design elements should be spread out and clear. Even the space between text can make a huge difference to the overall appearance of the website.

Digital Mash well spaced design
White space on a page is often called negative space (and isn’t always white). It balances the overall layout and adds contrast to the page. Magazine adverts for luxury items like expensive cars and watches laid over a 2-page spread often make use of empty space to accentuate the product making it appear more elegant and chic. The Digital Mash website is an example of a well spaced design. The header navigation and the links at the bottom are well spaced, yet the elements are not too far away from each other making it a very practical design also. The main graphic exhibits a lot of empty space which doesn’t appear to be wasteful at all.

Cultured Code simple web design
Another example of an excellently spaced design is the front page of Cultured Code. At the top you can see a user-friendly navigation bar with each and every item appropriately divided. Then, following a big gap is the heading and the 2 large icons that are also spaced evenly within each other. This creates a very welcoming yet simple front page.

Like color, spacing is really just another thing designers should experiment and play around with. The trial and error method can be used to find out what looks the best. Negative space also forces designers to display only the important content without cramming large amounts of information in a small space. Also, designing with a grid system or css frameworks such as 960 and blueprint gives designers the opportunity to learn more about spacing and understand the importance of it in quality design.

Typography

The appearance of the content is defined by the typographic choices made by the designer. It is up to the designer to make sure the text content is legible and easy to follow. Many people think typography is just about fonts but it is actually much more complicated than that. You also have to consider about the font spacing, the font sizes, and spacing (yes, here comes spacing again).

The Netsetter excellent typography
The Netsetter is a brilliant example of good typography in web design. Its combination of sans-serif and serif typefaces is outstanding. The paragraphs are well structured and each line is clear and readable. A heavy and bold font style used in the headings and titles give emphasis to the article. The spacing between each line and paragraph is optimal and makes the articles very comfortable to read.

Generally, the default values for font styles are not enough. For example the default line spacing is too little and doesn’t make large chunks of text very readable. The technique of changing the line spacing is called leading which originates from the printing press process where they placed lead bars of varying thickness between lines. Keep this in mind as it significantly affects the overall structure and legibility of the content.

Detail and Subtlety

Subtle additions to a web design can make such a big difference to an overall appearance. Web designers often focus on adding small, subtle details such as gradients, shadows, and inset pixel dividers. The following are examples of web designs that use these extra elements to enhance the overall design.

Tutorial 9 single pixel highlights
If you take a closer look at the borders and edges in Tutorial 9’s design you can see the designer added a 1 pixel highlight to the edges to make each section stand out on its own. It draws attention to the content inside the box and gives a sense of 3D and realism.

Deaxon detailed web design

MetaLab Design pixel perfect detail
Deaxon and MetaLab Design are also great examples of design with pixel-perfect details. Especially with MetaLab, the user interface feels very interactive and slick.

Visit PsPrint Online Printing and learn how you can create effective and excellent-looking door hangers.

22 Comments

  1. Very nice post. Great summary of what it takes to have a nice looking web site. Stumbled.

  2. Casey G /

    Nice article! It looks like you might want to space your paragraphs from the images on your own site – or maybe it’s just me..;) Great job with the site so far though:P

  3. Stephen L /

    I like it! =D

  4. I’d just like to thank you for taking the time to create this internet website. It has been extremely helpful

  5. Good round up – negative space is certainly the one I struggle to get clients to understand

  6. My blog design follows all the “rules” you listed here, can I consider it “good”? You tell me! :)

    • You got an awesome blog there! and yes! your site does follow all these rules but sometimes rules are meant to be broken ;)

  7. Nice, little article! Considering those facts/rules, my site seems to fit these as well. Good then…

    Found this site via a Twitter RT. Nice one!

  8. This is exactly what good web design looks like! There’s nothing better than coming across a well designed website, it makes up for all the awful ones we have to face on a daily basis!

    Great article.

  9. Great stuff here–especially what you had to say about typeface use. All of the examples you’ve cited are excellent, and the design of this website itself shows you have a good grasp of web layout and design. Found this via Stanley Tang’s Twitter, very nice.

  10. Great points! I’ll keep these in mind when I’m working on my next wave of designs.

  11. Jonathan /

    Nice article, spot on.

    I find it difficult to implement proper use of negative space to make an elegant design. Let alone convince the client to appreciate it at the first sight.

    It’ll be easier to do if you have good photographs and correct color combination.

  12. This is a great article. very useful for who’s looking for high quality design and good usability.

  13. riri nnana /

    WELL i would give you all the points u deserve, thanx guys am actual doing ma assignmemt on how to design a web,, now m goin to pass bcz of u………. naughty naughty YOU. thumbs up

Leave a Reply