Color
Using color is a beneficial way to add a pop to any webpage, regardless of content. However, depending on the palette you choose, you can easily change the mood of your website. A baby pink motorcycle website suddenly doesn't seem as threatening as the one that uses metallic gray and a fiery red. The meaning of colors differs based on a number of factors. The emotions that are associated with colors that are listed below are not universal; these are the Western perceptions of color on the web.
White
- pure, clean, youthful, sterile, innocent, newness, simplicity
- best for open, minimal websites, allows for negative space
Black
- power, elegant, secretive, formality, strength, mystery
- also fairly effective for minimal websites
Red
- passion, excitement, boldness, desire, courage
- good accent colors, as it stimulates people to make quick decisions
Pink
- not as forceful as red
- warm and fairly upbeat, associated with femininity
- among food, suggest sweetness
Orange
- vibrant, energetic, playful, cheerful, affordable
- often stimulated mental activity, best at stimulating appetite
- however, it is also perceived as lacking prestige
- highly accepted among young people
Yellow
- attention-grabbing, comfort, liveliness, intellect, happiness, energy
- stimulates mental activity and is effective as an attention grabber
Green
- durability, reliability, safety, honesty, optimism, harmony, freshness
- not good as a predominant color on a website, has been known to drive people away
- unless it is associated with nature, green is better used for website accents
Blue
- depth, stability, professionalism, loyalty, reliability, honor, trust
- calming effect, common color used in electronic-related websites
- when combined with warm colors, can result in vibrant and high-impact design
Purple
- power, nobility, luxury, mystery, royalty, elegance, magic
Gray
- conservatism, traditionalism, intelligence, seriousness
Brown
- endurance, relaxing, confident, casual, reassuring, earthy
In considering shopping behavior, in relation to color, psychologists have deemed that a website's colors can account for 60% of acceptance or rejection of a product/service. Impulse shoppers responded best to red-orange, black, and royal blue. Shoppers who tend to plan and stick to budgets respond best to pink, teal, light blue, and navy. At the same time, traditional people respond to pastel colors, like pink, rose, and sky blue. Color becomes extremely important, when you are trying to sell something to the public.
Using color to your advantage
Using 3 to 5 colors on your website is the best combination when it comes to color theory. More than 5 colors can be distracting and appear more unprofessional if not handled correctly. Start by choosing a background color, even if it's just white. White actually loads more quickly than darker colors, and with black text, it becomes extremely legible. If you plan on using a lot of text, stick with a lighter background and a darker text. You can use up to 2-3 more colors to add visual interest if you would like to bring in more contrast.
You should also consider color theory if you really want to effectively make use of color. Complimentary colors are the two colors found opposite of each other on the color wheel, such as red-green or blue-orange. These complimentary colors are best for contrast, but you must be careful to find the right saturation or the clashing colors will become unreadable. Analogous colors are adjoining colors in a color wheel. This combination will give a softer appearance to the webpage and becomes more pleasing to the eye than a website using complimentary colors. In addition, knowledge of warm and cold colors comes in handy. Hues from red through yellow, browns and tans will give off a more cheerful, fun and happy association.
Take into consideration the impression you want to leave with your company. In addition, you should consider the target audience. Teens may not be as interested in pastel colors as an older adult might be.
Typography
Color is not the only thing that is important when it comes to a successful website design. Besides simply looking nice and attracting attention, a website must also clearly communicate its purpose. Typography is the art of arranging type and type design. This involves the selection of typefaces, point size, line length, line spacing, the adjustment of spaces between groups of letters (tracking) and between pairs of letters (kerning). There are millions of websites out there on the web today that have text. However, in most cases, authors don't care about how their information is laid out. The web is a medium where typography rules are applied in order to create a readable, coherent, and visually satisfying whole that engages the reader without their knowing. The limited choice of fonts on the web should not be a typographer's major concern, rather he should use what is available and make the most out of it. The first tip for web typographers and authors who are editing their texts is to never experiment with colors and text dimensions. It is hard to come up with a nice color scheme on your own, especially with no experience. As stated previously, this is why it's a good idea to go simply with a white background and black text on top.
Text has more elements to it than just the body, there are also titles, captions, images and forms. In digital media like the web, text is usually split into chunks that can be addressed by search engines and links. It is always a good idea to have a series of articles or a chapter-structure book split into several pages, but it is a horrible idea to split one long article or a blog post into several pages. It is annoying and only benefits ad owners who get more views of their ads. The actual text on the page is usually broken up into pieces that offer alternative routes through masses of information. To help users navigate through the content on the web, designers use headings and paragraphs to set a hierarchy of information, links, and other tools that transform a chunk of text into a pleasurable interface.
Hypertext links
Since the beginning of the Internet era, links have been represented with an underlined word, or several words in a different color. Nowadays some authors do not treat text as an interface and do not underline links or make them noticeable. This is not acceptable because links that are not presented properly do not fulfill their purpose. The rule for links is to always underline them and make them a different color unless they are buttons.
Alignment
Alignment can be justified, flush left or right, or centered. Justified alignment is good to use to make a figure or shape on the page, or when the text normally occupies the whole page and has to use space efficiently. Flush left is used by designers who want the text to flow organically without introducing possible uneven spacing between words. That is why on the web, text should be flush left, which is a default setting in most browsers, unless a designer wants every element on the website to be part of a strictly defined grid. Flush right alignment can be good for captions, marginal notes, or sidebars. It should never be used with normal text because it makes it harder to read. Centered alignment can be used for titles, songs, or poems, but never with normal text because it is also hard to read.
Bold text
For web designers, it is important not to overbold text, which would defeat the purpose of boldface. It is better to use bold or semi-bold form on websites since they are the best for various screen resolutions.
Spacing
On the web, a typographer has to understand that text might be viewed on different screens and in different resolutions; that is why it is important not to specify sizes statically. Both pixels and points are static. However, points are on a dots per inch value, which is why a text size set in points will have more pixels on paper than on screen, since text printed on paper has a higher DPI. Instead, em unites should be used for font dimensions and sizes of elements and between elements. The em is the true typographic unit and acts as a multiplier based on the next element's parent unit. It defines the proportion of the letter width and height with respect to the point size of the font.
Before working on a website, it is a good idea to select an appropriate scale for the text. To change the units from pixels to ems, a designer should take the desired size of the paragraph (for example, 12 pixels) and divide it by the text size of the body (for example, 16 pixels) to get a value of 0.75 em. Classical sizes are 14 pixels for H4 heading, 18 pixels for H3, 24 pixels for H2, and 36 pixels for H1. The transformation should be applied to these headings as to a paragraph resulting in em sizes of 0.875, 1.125, 1.5, and 2.25 respectively.
Tracking
This is the overall spacing between letters in a block of text. For web designers, it is a huge pain to apply kerning rules, since HTML does not have a good mechanism for that.
Leading
This is the amount of added vertical spacing between lines of text. Text with no leading and text with very large leading are both very hard to read. On the web, it is a good idea to set leading to 70% to 8-%, but never exceed 100% because it causes problems with readability.
Punctuation
It is easy to mess up punctuation on the web since text represented with HTML is mostly written in code editors that do not have very advanced controls for punctuation. An important punctuation mark that is usually used incorrectly on the web is the dash. The look of it is similar to a hyphen (-), but it is longer and should be used differently. The most common versions of the dash are the en dash (–), the em dash (—), and the figure dash (‒). The en dash is used to express ranges. The em dash is commonly used for demarcating a parenthetical thought or something similar. The figure dash is the same width as a digit and is used as a dash within numbers. A hyphen is used to join words and to separate syllables of a single word.
Conclusion
A design that is sensitive to color and typography can make or break a website. It is not always enough to know just one or another. A website that only uses color, or emphasizes design may not always effectively communicate its point. On the other hand, a boring but very readable website will not be able to grasp its viewers. An author who has both a knowledge of colors as well as a strong understanding of typography will be able to find the perfect balance to engage his or her viewers in a very rich and exciting website.
No comments:
Post a Comment