These days, everyone and their grandfather (and dog) appears to have created a website. The Internet is becoming increasingly crowded, with hundreds of new websites being uploaded every day as you read this piece. It’s becoming increasingly difficult to stand out among the crowd.
Fortunately for us, not everyone appears to understand what makes a web developer successful. Given that web design is largely a creative process, it is more akin to an art than a science. However, because it is really a presenting medium, some rules (or at least principles) apply. Anyone should be able to produce a visually appealing design and move one step closer to popularity by following a few basic recommendations. Okay, it’s not that easy, and talent and expertise are important, but anyone can make their home page look better in minutes.
So, what is it that makes anything beautiful? It isn’t Flash at all. Not to suggest that Flash has no value, but it isn’t enough to make a design decent; there are some nefarious Flash websites out there. Also, to create beautiful designs, one does not need to be a fantastic illustrator. Instead, consider Web design to be a symbiosis of several aspects. The aggregate of the pieces, rather than any single feature, makes a design look beautiful.
1. Make sure your design is well-balanced.
The goal of balance is to ensure that your design does not lean to one side or the other. It’s similar to producing symmetry or asymmetry by balancing weight.
Take a look at the dog in Khoi Vinh’s Subtraction website’s header graphic below. This example comes from Jason Beaird’s book The Principles of Beautiful Web Design. Jason points out how the right-hand cross compensates for the dog’s additional visual weight on the left. It’s a minor point, but it’s important. Try hiding the cross with your hand to see for yourself.
Asymmetrical balance is what we call it, and it’s what balancing is all about. If you don’t pay attention to how you arrange things out, your design will quickly become unbalanced. Color, size, and the addition or removal of elements can all be used to change the visual weight of a design. Making the cross a bright orange, for example, would make it heavier and possibly throw the layout off again. Achieving asymmetrical balance is a particularly delicate topic that necessitates patience and a trained eye to master.
Another example of symmetrical balance is provided below, this time by The First Twenty. Although the header graphic is asymmetrically balanced (can you figure out how it’s done? ), the rest of the design is symmetrical. Asymmetrical balance is more difficult to achieve, yet it makes a design more whimsical.
You’ll notice that every good-looking design has a well-constructed balance underneath it. And each of the seven ideas we discuss is well-represented in each of the designs showcased here. So have a look and see whether they all pass muster by scrolling up and down.
2. Use grids to divide your design into sections.
Grids are strongly tied to the concept of balance. Grids are a set of horizontal and vertical rulers that assist you divide a design into sections. Consider columns. Columns boost readability by making it easier to assimilate information on a page. The usage of the Rule of Thirds (or a similar Golden Ratio) makes things look more balanced.
The Rule of Thirds and the Golden Ratio explain why sidebars are typically a third of the page’s width 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 go into why this is the case, but it appears to be correct in practice. It’s also why, in professional shots, the subject is frequently placed near the intersection of a nine-square grid rather than in the middle (three by three, with two horizontal and two vertical lines).
The grid works especially well in minimalist designs. Derek Punsalan’s novel 5 Thirty One explains why:
While the design isn’t particularly eye-catching, the precise, rigid organization of pieces makes it simple to read. The left column is nearly double the size of the right sidebar, which is logical and something to consider when designing your own layouts.
3. Choose no more than two or three foundation colors for your design.
What if the basic red on The First Twenty’s website (above) was replaced with lime green? Is it going to look good? Almost certainly not. Because it isn’t part of the same hue family (and lime green isn’t the simplest color to work with). There’s a reason why websites like ColorLovers exist. You can’t just pick your colors, weapons blazing, like Rambo. Some colors complement one other, whereas others do not. There are many ideas about colors and their combinations, including monochrome and contrasting schemes, but a lot of it comes down to common sense and intuition.
Find out what works well together for yourself. To obtain a sense of how colors interact with each other, look at as many website designs as possible, such as those shown on any of the many CSS showcase websites (like Best Web Gallery). Choose no more than two or three base colors for your design, and then add tints (lighter colors combined with white) and shades (darker colors mixed with black) to expand the palette as needed.
It’s just as vital to choose pleasant colors as it is to choose the appropriate ones (that is, the right colors for the job). Reds, browns, and other “earthy” tones might work nicely in a Web design for a pleasant little restaurant. Naturally, there is no such thing as a foolproof recipe. Every hue sends a message, and it’s up to you to decipher it correctly.
Bence Kucsan’s website features a distinct color design. It’s mostly monochromatic (shades and tints of one color) and achromatic (black and white) with a pop of color (red):
The black and white transmits stylish and professional, but the red offers a splash of color that makes specific components pop and keeps the design from becoming monotonous; of course, there’s more to this design than simply red. This style was promoted by one brand in particular.
WebDesigner Wall by Nick La is sheer joy in terms of color:
This design shines thanks to all of the gentle pastels. At first glance, the color selections appear haphazard, but closer inspection reveals a well-defined color palette, which is required to ensure that all of the pieces work together harmoniously. The website, particularly its backdrop, also has a fantastic color and visual combination, which gets us to number four…
4. Make sure the graphics complement each other.
Okay, outstanding design does not necessitate the use of flashy graphics. Poor graphics, on the other hand, will wreak havoc on a design. The use of graphics enhances the visual message. Some websites, such as WebDesigner Wall, offer striking images, while others are more subtle.
On his website Max Voltar, Tim van Damme utilizes only a few visuals, but he uses them with great thought and care. Two of the images are a non-intrusive backdrop image and a sophisticated crown. They aren’t particularly eye-catching, but they all contribute to the overall appearance and feel of the website, and none of them are out of place.
Max Voltar has had a different design than the one displayed above for quite some time. But it was undoubtedly one of my favorites for the two months it was available. Because of this, as well as its excellent graphic design, I chose it over the most recent version.
Rogie King’s Komodo Media is far more graphics-heavy, with excellent technical and thematic execution.
You might not be a fantastic illustrator or photographer, but that doesn’t mean your website can’t have outstanding visuals. All you need is a basic understanding of Photoshop, probably some stock photos, and excellent taste. Make sure the graphics complement each other and reflect the style you’re going for. However, we are not all born with the same innate abilities. Some things can be learned from others, but sometimes you just have to choose the style that best suits you (like a clean style if you are not the greatest of illustrators).
5. Improve the typography on your website.
Because it involves so many elements, the art of type is a difficult subject to discuss. While it is considered a discipline of design, learning all of its components can take a lifetime. We will confine our talk to what will aid you in the short term because this is not the place to provide a complete typographic reference.
When compared to print typography, web typography has a disadvantage. The most significant distinction is that, because to the dynamic nature of the Web, we don’t have perfect control over the appearance of type. Dynamic rendering has obvious advantages, but Web designers have limited control over the output, at least for the time being. Web typography is a difficult, if not tedious, operation due to missing fonts on the user’s computer, variances in browser and platform rendering, and generally poor CSS support. While Web typography may have to wait until CSS 3 to fulfill its full potential, we now have the tools to make it seem interesting and, more importantly, lovely.
There are a few simple strategies to improve the typography on your website, three of which we’ll go over today. Font stacking are one of them.
Font stacks are little more than basic CSS. They allow you to specify the sequence in which fonts are presented. To be clear, we’re talking about typefaces, not fonts. Please see Jon Tan’s Typeface!= Font for a decent description of this.
body fonts: “Helvetica Neue,” Helvetica, Arial, sans-serif;
The typeface “Helvetica Neue” will be used in the body copy as a result of the property above. This, however, necessitates the installation of that typeface on the user’s computer. Helvetica (Neue) is pre-installed on Macs nowadays, but not on most Windows devices.
The beauty of font stacks is that you can designate “fallbacks,” which means that if a specific typeface isn’t available, the browser will simply look for the next in line. Of course, this means that the design will not be identical for everyone, and we will once again lose control. However, for those who do not want to utilize another solution (such as image replacement), this is the best that pure CSS has to offer right now (until we can use @font-face comfortably).
Wilson Miner makes advantage of the font stack we mentioned earlier. Helvetica Neue is a step forward from Helvetica. While Arial is installed on practically every computer (at least on Windows and Mac computers) and is thus a popular Web font, most designers prefer Helvetica. This way, you get the best of both worlds: Helvetica for those who already have it and Arial for those who don’t.
For his headlines, Jon Tan utilizes a different font stack:
body baskerville, ‘palatino linotype’, ‘times new roman’, serif;
The headers will only be seen by a small percentage of visitors in Baskerville, but that isn’t a problem. It adds a touch of personality to the design while causing no harm to those who don’t have it. Font stacking aren’t a perfect solution, but they do provide a benefit.
Leading and Measuring
Line length is measured in measure, and line height (or vertical spacing) is measured in leading. Measurement can be adjusted in CSS by specifying a width for the contained box (e.g. the paragraph element). Both have an impact on readability. Users won’t be able to read the material if the lines are too short or too lengthy; this is a common issue with fluid layouts. The ideal number of characters per line appears to be between 40 and 80.
The line-height CSS property can be used to raise (or decrease, if you really want to) leading. A line height of 1.5 works nicely for paragraphs in general. This means that when the text size is 12 points, the line height becomes 18 points (12 1.5), giving the text some breathing room.
Bullets and Quotes on the Wall
Hanging quotations and bullets are a third approach to improve readability. Rather than using the default alignment for bulleted lists and quotes, align them horizontally with the rest of the text on the page.
Tim van Damme’s latest rendition of Max Voltar has dangling bullets:
- The red line has been introduced to indicate how the text has been horizontally aligned throughout. You can get the similar effect by setting the padding-left CSS value of the bulleted list to 0.
- Hanging quotations, on the other hand, are more difficult to execute. For quote marks, most designers use a backdrop image and then align them correctly, as Matthew Buchanan did:
- The text flow is not disrupted by the hanging quotation mark. It’s a minor point that’s often overlooked, but it’s definitely worth the effort.
Rules that do not apply should be printed.
Print and the Internet are not the same thing. Although this appears self-evident, many individuals handle them as if they were the same. The difference between print and the web is that print is static and the web is dynamic. It’s hard to have perfect control over how your Web design will seem to everyone.
Vertical rhythm, properly justified text (without hyphenation or rivers), and multi-column layouts are just a few of the print elements that are (nearly) difficult to achieve on the Web. With CSS 3, we have a lot to look forward to. CSS 3 will most likely not be the be-all and end-all solution, and we’ll have to wait a few years before we can fully exploit it. For the time being, we must accept these differences and focus on using the Web’s inherent potential rather than treating it as an online version of print.
A Quick Note on Image Replacement
What about image substitution (the process of substituting images for fonts)? Font stacks have been discussed, but aren’t they inferior to image replacement? That depends on what you value more: the ability to display the precise typeface you want or having dynamic, accessible, and SEO-friendly content. Although certain picture replacement systems have progressed, they still lack the flexibility of plain text. Headers and extracts benefit from image substitution, but it’s not a good answer for body content.
6. Add white space around things to make them stand out.
White space, often known as negative space, refers to what isn’t there. White space, like measure and leading, gives text breathing room and spatial serenity. By surrounding components with white space, you may make them stand out. For example, copy should not be cramped. Make sure paragraphs have enough padding to ensure reading.
Perfume ads, like any other ad for a luxury product, are noted for their use of white space… There’s a lot of it, and a serif typeface thrown in for good measure.
It’s time for a shameless plug, I suppose. The image above is from my personal website, Shift (px). Typography and white space play a big role in the design. About half of the page is presumably taken up by white space. White space is one of the simplest (since you’re not actually adding anything, are you?) and most successful ways to make a design that is both visually appealing and readable.
White space gives a design a lot of class. Don’t be afraid to leave some gaps, even if they’re large. Inexperienced designers are prone to cramming things into every nook and cranny. Design is all about getting a message through. As a result, design components should reinforce this message rather than distract from it.
Another fantastic example of having a lot of white space is this:
Kyle Meyer’s Astheria demonstrates that a pleasant design does not require much. Some people may mix up the terms “minimalist” with “simple.” However, executing such a look is neither simple nor straightforward (even if one does not have to be great with graphics or illustrations).
7. Connect all of the elements.
“Connection” is a made-up phrase for what we’re talking about, but it appears to be the best one. The term “connection” refers to a Web design that is both cohesive and consistent. These two characteristics reflect a designer’s professionalism (and thus its designer). These are fairly wide characteristics. A design’s usage of colors, typefaces, icons, and other elements should all be consistent. All of these factors are important; a design can look fantastic but yet have flaws.
When a design is inconsistent, the user may lose sight of its unity. The terms “unity” and “consistency” are not interchangeable. The term “unity” refers to how a design’s many aspects interact and fit together. Do the colors and visuals, for example, complement each other? Is everything working together to send a single message? Consistency, on the other hand, is found in the space between a design’s pages.
Perhaps the most crucial of the two is unity. A good design is difficult to achieve without unity. Inconsistency, on the other hand, may appear “sloppy,” but it does not necessarily mean the design is “poor.”
The most crucial of the seven principles discussed in this essay is connection. Balance, grid, colors, images, typography, and white space all play a role in how all aspects come together. It functions as a sort of glue that holds everything together. The design would break apart without this adhesive. The design can have lovely text and a fantastic and painstakingly chosen color palette, but if the images are bad or don’t match, or if everything is packed together without thinking, it will fail.
This is the most difficult element of the design process. It’s not something that can be taught easily, or even if it can be taught at all. It is necessary to have some inherent ability and experience. But it is what it is, and in the end, it makes a design appear excellent.
Nick La’s WebDesigner Wall has already received attention for its beautiful visuals, but it is also a fantastic illustration of connectedness. Everything has a hand-drawn watercolor look to it when you look closely at the visuals and style in general: the photos in the articles, the watercolored background images, the hand-drawn doodles and symbols, the poll formatting, and so on. This design shines because of its meticulous attention to detail.
The seven basic principles presented here aren’t the only ones that apply to good Web design. Accessibility, readability, and usefulness are also important considerations.
This is one of the reasons why web design is so challenging. Getting your feet wet in the design world is simple, especially now that there are so many content management systems, blogging tools, and themes to choose from. However, true mastery of all aspects of Web design requires time and, let’s face it, talent. The ability to create beautiful designs is only one facet, but it is a crucial one.