Everybody (and their dog and grandfather) has a website these times. With literally dozens of more websites being added daily, the Web is becoming increasingly crowded. It is becoming more difficult to be found among the masses.
It is a blessing that not all web designers seem to be able to grasp what makes or breaks a Web design. Web design is, in large part, a creative process. Because it is an intrinsic medium of presentation, there are some rules or principles that must be followed. If you follow these simple guidelines, you can create a visually appealing design that will help you get one step closer to success. It’s not so easy. Talent and experience do matter. However, anyone can transform their homepage into something more beautiful in just minutes.
1. Make sure your design is balanced.
Balance means that your design is not distorted to one side or the next. It’s like the balance between weight and symmetry to achieve symmetry or asymmetry.
Take a look at the image of the dog on the header graphic of Khoi Vinh’s Subtraction site. This is an example I took from The Principles of Beautiful Web Design (Jason Beaird). Jason points out how Jason says that the dog’s cross on the right balances the visual weight of the left. It is an insignificant but important detail. Try hiding the cross in your hand to see for yourself.
2. Use grids to compartmentalize your design.
The concept of grids is closely related to the concept of balance. Grids are a collection of horizontal and/or vertical rulers that “compartmentalizes” a design. Think of columns. Columns increase readability and make it easier for readers to understand the content of a page. Spacing, the Rule of Thirds (or another Golden Ratio) makes everything more readable.
For example, sidebars can be about one-third of the page width. The main content area is roughly equal in width to the design’s width divided by 1.62 (equallingphi in mathematics). Although we won’t discuss the reasons behind this, it seems to be true in practice. It’s also the reason professional photographs show the subject at the intersection of an imaginary nine-square grid. The grid is three by three and has two horizontal and two vertical lines.
3. You can choose two or three colors as the base color for your design.
What if you changed The First Twenty’s base red to lime green (above). Would it look good? Most likely, not. Because it is not part of the same color palette (and lime green isn’t an easy color to work with). ColourLovers and other websites exist because they are useful. You don’t have to choose your colors Rambo-style, guns blazing. Some colors are better together than others. There are many theories regarding colors and combinations, including those on monochrome or contrasting schemes. But common sense and feel for the color combination is what matters most.
You can discover what works well together. Take a look at many different websites, including those on Best Web Gallery’s CSS showcase website. This will give you a better understanding of how colors interact. Choose two to three colors as the base color for your design. Next, use tints (which lighten with white) and shades of these colors to increase the palette.
4. It is important to coordinate the graphics.
Good design doesn’t necessarily require great graphics. Bad graphics will ruin a design. Graphics are an important part of a design’s visual message. Websites like Web Designer wall have stunning illustrations, while other websites are simple and understated.
Tim van Damme has only used a handful of graphics for Max Voltar. However, he uses them with great care and thought. The graphics include a simple background image and a sophisticated crown. These graphics are not very impressive visuals, but they do add to the website’s look and feel.
5. You can improve the typography of your website.
Art of type is a complex topic to talk about, as it involves so many elements. It can be considered a sub-field of design but one could spend a lifetime learning every aspect. We won’t be able to provide complete typographic references so we will only discuss what you will find useful in the short term.
Web typography can be more complicated than traditional print typography. Because of its dynamic nature, Web typography is not as controllable as print typography. Although dynamic rendering does have its advantages, Web designers do not have any control over the results. Web typography is difficult, if certainly not frustrating, because of missing fonts on the user’s computer, differences between browsers and platforms rendering, and generally subpar CSS support. Web typography is still a challenging task. While we will need to wait until CSS 3 to achieve its full potential, we now have the tools to make it attractive and more importantly, beautiful.