Monday, March 21, 2011

Principles of Design for the Web

The Principles of Design of the Web
Web design is a relatively new profession compared to other forms of design, due to the youth of our medium. As with any design discipline, there are aspects of the Web design process that are unique to the medium, such as screen resolution, additive color spaces and image compression. There are many basic concepts that underly the field of design. Balance
• Rhythm
• Proportion
• Dominance
• Unity
Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.
Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. Symmetrical balance is also known as formal balance.
Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.

Horizontal Radial Asymmetry

Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.
• Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
• Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
• Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.

Regular rhythm Flowing rhythm Progressive rhythm

Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.
• Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.
• Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.
• Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.
In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups2.
Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.
Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.

Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.

Similarity, Proximity and Alignment
Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.

Related concepts
There are many additional concepts that are related to the principles of design. These can include specific terms and/or techniques that are in some way based on one or more of the above tenets. In they end, they add to the collection of compositional tools available for use by the designer.
Contrast or Opposition
Contrast addresses the notion of dynamic tension -the degree of conflict that exists within a given design between the visual elements in the composition.
Positive and Negative Space
Positive and negative space refers to the juxtaposition of figure and ground in a composition. The objects in the environment represent the positive space, and the environment itself is the negative space.
Rule of Thirds
The rule of thirds is a compositional tool that makes use of the notion that the most interesting compositions are those in which the primary element is off center. Basically, take any frame of reference and divide it into thirds placing the elements of the composition on the lines in between.
Visual Center
The visual center of any page is just slightly above and to the right of the actual (mathematical) center. This tends to be the natural placement of visual focus, and is also sometimes referred to as museum height.
Color and Typography
Many would place color and typography along side the five principals I have outlined above. I personally believe both to be elements of design, so I’ll give them some attention in my next column. In addition, both topics are so robust that I plan on writing an entire article about each of them in the future.
Principles of Web design include easy to navigate pages, consistent page layout and colors, concise writing style, effective use of links and graphics, and accuracy of information - not an easy task for one person. When you begin your site, you may want to meet with a representative of CCMS (Computing, Communications, and Media Services) for assistance in instructional design, graphic design, and Web design.
If you have spent any time on the Web, you can probably remember at some point being lost in cyberspace. The ability to link virtually anywhere from a page can be confusing. A well-designed site offers good navigational tools to give the reader a clear, quick, and consistent method to move within the site.
On the Teaching and Learning Online site, the list of documents on the Content page offers readers the option to jump from subject to subject by clicking on the title hyperlink. The back and next links at the top and bottom of each page offer readers the option to move from first to last page without returning to the Content listing.
Books tend to be linear, where one starts at the beginning and proceeds to the end. Many Web site designs begin with a hierarchical diagram with the home page at the top and the main branches linked below.
In the book, Web Page Design: A Different Multimedia, the authors recommend navigation methods designed to keep commonly accessed information near the top. Four to five clicks should take users to 80 percent of the information they want.
Page Layout
Much of page layout on the Web has to be accomplished within tables because HTML has no method to set margins or columns. Once designed, the HTML document can serve as a template for subsequent documents on your site. When creating the template for your site:
• Keep lines short, approximately 40-60 characters or about 11 words per line.
• Keep paragraphs four to eight lines.
• Use wider margins to increase white space for readability online.
• Use headlines, bullets, pull quotes, and sidebars.
• Use darker or brighter contrast in small areas.
• Give all pages a common look and feel.
• Links should be easy to understand, and graphic links should be clear and also have text links for accessibility.
• Try to use descriptive words for links instead of click here.
• Make pages or sections easy to return to. When you link to other sites you might want to use the Target command to open the other site in a new window, i.e., CSUS Web opens in a new window instead of CSUS Web opens in the same browser window and the reader must use the browser's back button to return.
• Check links regularly to make sure they are still current.
Make sure graphics support the message. Using a graphic repeatedly throughout the site reduces download time because once an image is downloaded it remains in the computer's cache. During the browser session, the image is called from cache instead of going out to the Web site. Avoid overusing graphics and animations because they draw away from the message and increase download time. Types of Media on the Web contains further information on graphic types and size.
What to Avoid
• Large graphics with slow download time that delay page display. Bandwidth is a primary restriction of the Web and large graphic, audio, and video files that are slow loading distract the reader. If the load time is not worth the wait, the reader becomes frustrated with the site.
• Buttons or links that are hard to use or identify. Logic behind the way screens are linked and the navigation elements need to be clear.
• Long pages without white space or relevant graphics. Unless the page is meant to be printed instead of read on the screen.
• Backgrounds that result in unreadable text or are distracting. Avoid dark colors combined with dark text fonts or distracting images that overshadow the text. To begin, stay with a white background.
• Excessive frames.
• Broken links are a sign of an outdated site or one with a low quality control.
• Overuse of fonts, colors, and animations.

No comments:

Post a Comment