Workflow
10 Rules Current web design trends
A few tips. Details on: COLOR TYPE LAYOUT IMAGES
10 RULES
1) No Splash pages: Make all of your pages functional from the beginning.
b. Provide content and top-level navigation links on your first page.
2) Use White Space: giving the eye breathing room Condense text into short lead paragraphs and provide links to full articles.
b. Use images to break-up large bodies of text.
c. Use white space for emphasis and make areas distinct.
3) Be subtle:Color - use sparingly and logically; have a consistent palette.
b. Headers - Capture focal visual interest in top-level area to invite and direct users to content below. However, do not use collages - instead, use one strong image.
c. Images - Keep sizes proportional to other elements on the page and pick images with a purpose and context.
4) Be flexible - relinquish control:Accept that websites appear differently across different monitors and browsers.
b. Design layouts that allow text to grow (in length and size).
5) Pay attention to visual hierarchy:Make sure that the most important piece of information appears first and "above the fold."
b. Assign values to content elements and design accordingly.
c. Vary fonts, colors and sizes to convey hierarchy: headlines (big, bold text); sub-headlines (medium, italic); text (small, non-italic, non-bold).
6) Use visual cues:Navigation: provide different states for "on," "off" and "hover."
b. Bread crumbs allow people to trace steps and provides context for pages accessed from outside the website.
7) Test your website before launch:Test designs on multiple browsers and computers.
b. Test user interaction.
c. Adjust accordingly.
8) Be consistent: define your sandbox (style-guide). Layout: define area content priorities (typically: top-navigation, sub-navigation, main content area, sub content area, advertising, links).
b. Navigation: keep navigation simple, relevant and consistently placed. Specifically, define a standard and exclusive navigation color for text links and make sure images are clickable and direct users to relevant content.
c. Images: keep lead and sub-images to consistent sizes.
d. Color: Define a consistent palette and tonal range (essential in defining your brand) for headings, sub-headings, text, and links.
e. Typography: Like color, defining a set range of fonts can also help to define both your brand and user experience; however, realize that conventions differ between HTML fonts and graphic fonts. Use type to emphasize key elements like headings, but use one font for main texts.
9) Controlled variation: play in your sandbox. General: having a consistent layout and a well-defined tool-kit of fonts and colors allow you to explore infinite creative possibilities within those boundaries.
b. Play with the following:
i. Color.
ii. Font.
iii. Image.
c. Don't play with the following:
i. Layout.
ii. Navigation (top-level navigation links and sub-level navigation place).
10) Copy, change, create.It's okay to take attributes from other websites (layouts, architecture, color schemes, design concepts) as long as you adapt it to your specific needs (keep the layout but change the navigation, borrow the font but change the colors). Finding inspiration from other sites and borrowing what they do well is a key element of creating websites (and, dare I say, creativity itself).
CURRENT WEB DESIGN TRENDS
IN | OUT | EXAMPLE |
BIG fonts | Small fonts | www.blogger.com |
White Space | Superfluous Clutter | www.google.com |
Strong color, used sparingly | Palette hodge-podge | www.iomega.com |
Gradients and patterned backgrounds | Image Backgrounds | www.sirruf.com |
Simple, consistent layouts | Changing layouts | www.alistapart.com |
Spare 3D effects | Special-effects extravaganza | www.web2.0awards.org |
Soft-neutral background colors | Black | www.odeo.com |
Simple, attractive icons, used sparingly | Icon cacophony | www.mozilla.com |
DESIGN TIPS
IMAGES (photos): Vary the sizes and shapes of the photos and graphics to add variety and visual appeal to the page. Photos that have similar shapes and sizes are dull, giving the reader little reason to sample them. If they are nearly the same, none stands out. Avoid square photographs.
Use photos and other graphic elements to break up the gray and to avoid tombstoning headlines. Secondary photos and graphics are wonderful ways to break up headlines and to add life to the bottom of your pages. This is especially true with jumps. Make your art work for you.
TYPE: Honor the hierarchy of type. Generally, headlines should decrease in size as you go down the page because the stories are less important. Use three-line headlines above two-line headlines. The main exception to type hierarchy is the headline at the bottom of an open page on an anchor story, which gives the reader a reason to look at the story. You need a bigger headline to attract a reader to the bottom of the page.
COLOR
What is color theory?
Color Theory is a set of principles used to create harmonious color combinations. Color relationships can be visually represented with a color wheel - the color spectrum wrapped onto a circle.
The color wheel is a visual representation of color theory
According to color theory, harmonious color combinations use any two colors opposite each other on the color wheel, any three colors equally spaced around the color wheel forming a triangle, or any four colors forming a rectangle (actually, two pairs of colors opposite each other). The harmonious color combinations are called color schemes - sometimes the term 'color harmonies' is also used. Color schemes remain harmonious regardless of the rotation angle.
Classic color schemes
Monochromatic color scheme
| Examples: |
The monochromatic color scheme uses variations in lightness and saturation of a single color. This scheme looks clean and elegant. Monochromatic colors go well together, producing a soothing effect. The monochromatic scheme is very easy on the eyes, especially with blue or green hues. You can use it to establish an overall mood. The primary color can be integrated with neutral colors such as black, white, or gray. However, it can be difficult, when using this scheme, to highlight the most important elements.
Pros: | The monochromatic scheme is easy to manage, and always looks balanced and visually appealing. |
Cons: | This scheme lacks color contrast. It is not as vibrant as the complementary scheme. |
Tips: | 1. Use tints, shades, and tones of the key color to enhance the scheme.
2. Try the analogous scheme; it offers more nuances while retaining the simplicity and elegance of the monochromatic scheme. |
Analogous color scheme
| Examples: |
The analogous color scheme uses colors that are adjacent to each other on the color wheel. One color is used as a dominant color while others are used to enrich the scheme. The analogous scheme is similar to the monochromatic one, but offers more nuances.
Pros: | The analogous color scheme is as easy to create as the monochromatic, but looks richer. |
Cons: | The analogous color scheme lacks color contrast. It is not as vibrant as the complementary scheme. |
Tips: | 1. Avoid using too many hues in the analogous scheme, because this may ruin the harmony.
2. Avoid combining warm and cool colors in this scheme. |
Complementary color scheme
| Examples: |
The complementary color scheme is made of two colors that are opposite each other on the color wheel. This scheme looks best when you put a warm color against a cool color, for example, red versus green-blue. The complementary scheme is intrinsically high-contrast.
When using the complementary scheme, it is important to choose a dominant color and use its complementary color for accents. Using one color for the background and its complementary color to highlight important elements, you will get color dominance combined with sharp color contrast.
Pros: | The complementary color scheme offers stronger contrast than any other color scheme, and draws maximum attention. |
Cons: | This scheme is harder to balance than monochromatic and analogous schemes, especially when desaturated warm colors are used. |
Tips: | 1. For best results, place cool colors against warm ones, for example, blue versus orange.
2. If you use a warm color (red or yellow) as an accent, you can desaturate the opposite cool colors to put more emphasis on the warm colors.
3. Avoid using desaturated warm colors (e.g. browns or dull yellows).
4. Try the split complementary scheme; it is similar to the complementary scheme but offers more variety. |
Split complementary color scheme
 | Examples: |
The split complementary scheme is a variation of the standard complementary scheme. It uses a color and the two colors adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme.
Pros: | The split complementary scheme offers more nuances than the complementary scheme while retaining strong visual contrast. |
Cons: | The split complementary scheme is harder to balance than monochromatic and analogous color schemes. |
Tips: | 1. Use a single warm color against a range of cool colors to put an emphasis on the warm color (red versus blues and blue-greens, or orange versus blues and blue-violets).
2. Avoid using desaturated warm colors (e.g. browns or dull yellows), because this may ruin the scheme. |
Triadic color scheme
| Examples: |
The triadic color scheme uses three colors equally spaced around the color wheel. This scheme is popular among artists because it offers strong visual contrast while retaining balance, and color richness. The triadic scheme is not as contrasting as the complementary scheme, but it looks more balanced and harmonious.
Pros: | The triadic color scheme offers high contrast while retaining harmony. |
Cons: | The triadic color scheme is not as contrasting as the complementary scheme. |
Tips: | 1. Choose one color to be used in larger amounts than others.
2. If the colors look gaudy, try to subdue them. |
Tetradic (double complementary) color scheme
| Examples: |
The tetradic (double complementary) scheme is the richest of all the schemes because it uses four colors arranged into two complementary color pairs. This scheme is hard to harmonize; if all four colors are used in equal amounts, the scheme may look unbalanced, so you should choose a color to be dominant or subdue the colors.
Pros: | The tetradic scheme offers more color variety than any other scheme. |
Cons: | This scheme is the hardest scheme to balance. |
Tips: | 1. If the scheme looks unbalanced, try to subdue one or more colors.
2. Avoid using pure colors in equal amounts. |
TYPE
Typography is the selection and arrangement of typefaces, sizes, and spacing on a printed publication or web page. Typography has a major impact on the overall look and image of your page and its overall quality.
In choosing typography, you must:
- Select a font (or typeface)
- Choose a font size
- Decide how much space to allow between lines of type
- Determine how much contrast to add between headlines and text
Typography should be readable and legible. Readability refers to whether a long block of text, such as an article or book, is easy to read. Typefaces are readable when they are basically invisible to the reader. This happens when the reader doesn't stop to think about the typeface instead of the message when reading. Legibility refers to whether a short amount of text, such as a headline or subhead, is easily recognizable.
Kinds of Typefaces
Sans Serif Typeface - Sans Serif typefaces do not have finishing strokes at the ends of the letterforms. The name comes from the French word sans, which mean "without." Sans Serif typefaces are also referred to as Gothic. Avante Garde, Helvetica, and Arial are the most common Sans Serif typefaces.
Serif Typefaces - Serifs are lines or curves projecting from the end of a letterform. Typefaces with these additional strokes are called Serif typefaces. They are also referred to as Oldstyle typefaces. Times Roman, Palatino, Bookman, and New Century Schoolbook are common Serif typefaces.
Script Typefaces - Script typefaces simulate handwriting, with one letter connected to another visually, if not physically. Script typefaces emulate several different types of hand-lettering, including calligraphic, drafting, and cartoon. Zaph Chancery and Brush Script are common Script typefaces.
Character Fonts - Character fonts are extended character sets packaged as fonts. To view the character font sets on a personal computer, open the Character Map file in the Accessories folder to view a grid of all of the characters for a specified typeface. Click on the character you want to use and either note the keystroke displayed in the box in the lower right corner of the window or copy and paste it into the publication where you want to use it. Wingdings and Dingbats are common Character fonts.
Decorative Fonts - Decorative fonts are fonts that do not fit into any other group. These typefaces are reserved for novelty, for special effect, or a special approach. Because they are different, they are usually harder to read than standard fonts, so use them sparingly and always as display type - never as text. Beesknees, Curlz, and Snap are examples of decorative fonts.
IMAGES
The primary challenge in creating images for Web pages is the relatively low resolution of the computer screen. But today's computer screens can display thousands or millions of colors, and this wealth of color minimizes the limitations of screen resolution. Complex graphics or color photographs often look surprisingly good on Web pages for two reasons:
- True-color (24-bit) or high-color (16-bit) displays show enough colors to reproduce photographs and complex art accurately
- The light transmitted from display monitors shows more dynamic range and color intensity than light reflected from printed page
The screen versus
printed color artwork
Relative to printed pages the computer screen is a low-resolution medium. When you look at illustrations, photographs, and other sophisticated imagery, however, the differences in quality between conventional four-color printing and the computer screen are not as great as you might expect.
In terms of resolution, the computer screen is limited to about 72 to 92 dots per inch of resolution (see Screen resolution). But most four-color magazine printing is done at 150 dpi, or only about four times the resolution of the computer screen (150 dpi is four times the resolution of 75 dpi because resolution is measured over area, 150 x 150 per square inch):
Regarding color reproduction, four-color printed images are separated into four subtractive printing colors (cyan, magenta, yellow, and black). These four inks combined produce the illusion of a full range of colors on the printed page, but ultimately the typical magazine or textbook image is composed of only four colors. By comparison, as mentioned, current computer monitors can display millions of colors, producing a richness of color that easily rivals the best quality color printing. Also, computer screens display transilluminated images - the colored light shines out from the screen. Transilluminated images deliver a much greater range of contrast and color intensity than images printed on opaque paper, which depend on reflected light. Finally, computer displays show color images using the additive RGB (red-green-blue) color system, which can display a much broader and subtler range of colors than conventional four-color printing.
Bottom line: the computer screen is lower in resolution, but because of the other advantages of computer displays, images on Web pages can easily rival color images printed on paper.
MORE ON: http://www.webstyleguide.com
Home | Audio | DIY | Guitar | iPods | Music | Links | Brain and Problem Solving | Site Map | Contact
Top
