Thinking about Web Aesthetics
- Color Aesthetics
- Choosing Color Themes
- Applying Color Relationships to Web Design
- Color Gallery
- Typography Aesthetics
- Type 101
- Verdana & Georgia
- Font Size Differences Between Macs & PCs
- Fonts for Delivery as Web Graphics
- Basic Styles of Typefaces
- What Is a Font Family?
- Aliasing or Anti-Aliasing
- Body Copy
- Using Fireworks for Type Design
- HTML for Placing Text Graphics
- What About Flash?
- Aesthetics of Layout
- The Aesthetics of Animation
This chapter is from the book
This chapter is from the book
This chapter is from the book
Color
Type
Layout
Animation
Introduction
In the beginning, people thought that building a web site meant learning and using HTML. Then people realized they needed to learn graphics applications to make images for the Web. Then they realized they had to think about usability and navigation and accessibility. The process of making web sites has changed since the early days, which is a natural byproduct of maturity—maturity of web designers' designs, of users' tastes, and of users' expectations. Somewhere in the mix lies the importance of plain-old design: color design, typographic design, and layout design.
With all the teaching and lecturing I've done, I have met thousands of web designers and developers face-to-face. From these experiences, I have come to believe that people don't want to create bad-looking sites on purpose; they just don't know how to do better. Many people have gotten into web design without formal design training. This chapter won't be a substitute for years of training, but it is geared to help those who are seeking advice related to good design principles.
The definition of aesthetics from dictionary.com is "a guiding principle in matters of artistic beauty and taste; artistic sensibility." This definition addresses two components of aesthetics that this chapter deals with: the fact that aesthetics is about design principles and that calling something "beautiful or artistic" is a subjective judgment.
Color Aesthetics
Few people are well trained in color theory, and most web developers, even seasoned artists, are insecure about their abilities to choose pleasing color schemes. You would think color theory would be a fun and creative subject. Unfortunately, it is approached in a very dry and technical manner in most color theory books. This chapter approaches color theory with a distinct web focus. It's my goal to back away from overtly technical explanations and gravitate toward easily identifiable principles and techniques.
I cannot, however, take credit for most of the ideas in this section; I can take credit only for the way in which the ideas are presented. My husband Bruce Heavin, who painted the wonderful cover to this book and all my others, is my color mentor. He has shared his color-picking methods with me, which has greatly enhanced my own color-picking abilities. I hope to pass down his pearls of wisdom to as many people as possible, hence, the approach of this chapter.
Color Vocabulary Terms
In order to describe color, we must first establish some common vocabulary terms. Here are the most important terms covered in this chapter:
){kind=small}
Figure 2.1Spectrum: All the possible colors in a color space, such as RGB or CMYK.
){kind=small}
Figure 2.2Hue: Defines a specific location on the color wheel or in the color spectrum. In this example, a green hue has been selected.
){kind=small}
Figure 2.3Value: Describes the range from light to dark. In this example, a red hue is shown at varying values from dark to light.
){kind=small}
Figure 2.4Saturation: Defines the intensity of a color.
){kind=small}
Figure 2.5Muted: When people describe muted colors, they often refer to colors that have very little saturation.
)
Figure 2.6Contrast: Separation between values.
Readability: Relates to contrast.
){kind=small}
Figure 2.7Tint: The process of adding white to a color.
){kind=small}
Figure 2.8Tone: The process of adding black to a color.