Website Design Principles
Prominence
We had thrown enough light on the aspect of unity in our previous articles. There is another aspect of prominence or importance which is related to unity. It focuses on highlighting one specific element in the design rather than trying to fit all things together. The purpose here is to attract more attention from the surfers.When you design a web page layout, often you'll identify an item in the content, or the layout itself, that you want to stand out. Perhaps it's a button you want users to press, or an error message that you want them to read. One method of achieving such emphasis is by making that element into a focal point. A focal point is anything on a page that draws the viewer's eye, rather than just feeling like part of the page as a whole or blending in with its surroundings. As with unity, there are a few tried and true methods of achieving a focal point.Placement Although the constraints of practical web design do not often allow for it, the direct center of a composition is the point at which users look first, and is always the strongest location for producing emphasis. Continuance The idea behind continuance is that when our eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along. Even though the bottom splotch is bigger and tends to catch your eye first, your brain can't help but go to the small pointer on the left sometimes! You'll soon find yourself staring at the smaller object.Continuance is also one of the most common methods that web designers use to unify a layout. By default, the left edge of headings, copy, and images placed on a web page form a vertical line down the left side of a page before any styling is applied. A simple way to expand on this concept is to use the rule of thirds to line up other page elements along the lines of your grid.Isolation In the same way that proximity helps us create unity in a design, isolation promotes prominence. An item that stands out from its surroundings will tend to attract attention. For e.g. you have various flower vases on different pages of your web design. While on the main page you have just one beautiful flower like daffodils or a lily. The viewers automatically tend to notice this singular flower which stands out differently in the design. That’s how isolation works.Contrast Contrast is defined as the juxtaposition of dissimilar graphic elements, and is the most common method used to create emphasis in a layout. The concept is simple: the greater the difference between a graphic element and its surroundings, the more that element will stand out. Contrast can be created using differences in color, size, and shape.Take an example of an ecommerce web site that sells just one item per day. When you look at this layout, what's the first thing that grabs your attention? Probably the viewers would first notice the product they're selling. Now the product in this site changes daily. So the question is “what grabs your eye after that?” Obviously the answer is “I want one” button. Although the same colors are used elsewhere in the design, the oval shape isn't. When set against an area of white space, the button has both contrast and isolation working to highlight it. This site has a definite purpose that the viewers really click that button.Proportion One interesting way of highlighting in a composition is through the use of proportion. Proportion is a principle of design that has to do with differences in the scale of objects. If we place an object in an environment that's of larger or smaller scale than the object itself, that object will appear larger or smaller than it does in real life. This difference in proportion draws viewers' attention to the object, as it seems out of place in that context.You can take just one lily or a daffodil flower and can superimpose it on the house and see how it draws the attention of the viewers! This principle works for miniaturization as well. Sometimes even reduction in the size highlights one particular object in a design. Consider a miniature version of a male or a female in the design. This small image stands out distinctly because of its proportion that different than the surrounding. A few standard HTML tags and CSS properties have been designed to take advantage of the preceding theories to create emphasis in a web page even without customization. For isolation of content consider the block quote element. This element indents the left- and right-hand side of any text placed within it, purposely breaking the continuation lines of the page content and drawing attention to itself. For positioning, consider the position property in CSS. By absolutely positioning an object with CSS, you take it out of the flow of its containing block, so you can place it strategically to draw attention. And when you think about contrast, think about the blink tag. Don't ever think about the blink tag. Yes, it creates contrast ... over and over and over again. Please don't use it. Don't get any ideas about using a marquee tag either. Design is just as much about what we leave out as it is about what we put in.
Bread-and-butter LayoutsMost of what we've talked about thus far has been design theory. Theory's good, but it can only take us so far toward understanding why some ideas work--and others don't--in a web site's design. Most academic graphic design programs include a curriculum that's rich in art history and fine art. These classes provide a great foundation for an understanding of graphic design from an art perspective, but they do little to prepare you for the specific challenges you encounter when you take your designs to the Web.When you look out across the Internet, you can see that the possibilities for layout really are endless. But, only a few of those possibilities make good design sense. That's why we see certain configurations of identity, navigation, and content over and over again.Left-column Navigation Regardless of whether we're talking about liquid or fixed-width layout design, the left-column navigation format is the de facto standard. Many sites that fit into this mold don't necessarily use the left column as the main navigation block--sometimes you'll see the navigation along the top of the page--but they still divide the layout below the header into a narrow (one-third or less) left column and a wide right column. It's a status quo, like a security blanket. For those reasons, a layout featuring left-column navigation is a safe choice for any project.The downside to sites that use left-column navigation is that they can lack creativity. They've been done so many times, and in so many ways that they tend to look the same. That's not to say you shouldn't use a left-column navigation layout. But the question is “how to do something different?” It can be done by picking that left column up and sticking it on the other side of the content. Then you'd have a right-column navigation layout.Right-column Navigation Although it's difficult to find sites that place the main site navigation along the right-hand side of the layout, it's quite easy to find sites that use a right-hand column for sub-navigation, advertising, or sub-content. Since, in western cultures, our eyes scan from left to right, this allows the page's main content to be the first thing viewers see. The same might not hold good for cultures in other regions like east!
There are very less sites today that make use for right column designs. However viewers very naturally intend their cursors to hover on the right side of the browser window anyway. Ultimately, this is a decision that's really about the needs of your clients and how they want people to perceive their online presence. Left-column navigation is familiar and more standard, but that's not always the number one priority in designing a new site. One thing's for sure, though: if you want your design to be different from the average web site, but you still want users to be able to find your navigation, you should give a right-column layout a try.Three-column Navigation The typical three-column layout has a wide center column flanked by two diminutive navigational columns. Although three columns may be necessary on pages that have a ton of navigation, short bits of content, or advertising to display, it's important to remember that white space is essential if we are to keep a layout from appearing cluttered. In the three columns on the main page, a white space center column promotes eye movements of the viewers.Expansive Footer Navigation If you scroll to the bottoms of pages on many of the most recently redesigned sites, you're likely to see an interesting new trend. Rather than using the footer for main links and a copyright notice, many sites are expanding to include contact information, expanded site navigation, and extra content such as blogrolls, linkrolls, Flickr badges, and so on. Although putting a site's main navigational element at the bottom of the page isn't a good idea, the concept of including "bonus" navigation and content in that space is being noticed across many sites today.Three Columns with Content First The majority of fresh three-column site designs that have been produced lately have put the content first. It means that such sites are locating the content on the far left of the display. This concept gives a professional touch to the site.Although this isn't really a new idea, it's been practice by many site designers lately in both liquid- and fixed-width site designs. The majority of three-column layouts usually switch to a two-column structure outside the homepage. By placing the content on the left, the transition from three columns to two is more natural, as the content column can simply expand, rather than having to relocate completely. Resizing: Fixed Width vs. Liquid Width We had discussed about the containing block, and whether or not it would expand to fill the page in one of our articles earlier. In fact, the fixed-versus-liquid is still a matter of debate anyhow. Some web gurus even opine that liquid layouts are out of use now.But most of the designers have established their own opinions in regard to the fixed-versus-liquid debate. The decision to use one type of layout over the other should really be determined by the target audience and the accessibility goals of each individual web site. But, regardless of personal preferences, it's important to put the needs of your client first. If you're deciding on the width of a fixed-width layout, you have to think about the audience for which you're designing, and create a layout that meets the needs of those users.
Prominence
We had thrown enough light on the aspect of unity in our previous articles. There is another aspect of prominence or importance which is related to unity. It focuses on highlighting one specific element in the design rather than trying to fit all things together. The purpose here is to attract more attention from the surfers.When you design a web page layout, often you'll identify an item in the content, or the layout itself, that you want to stand out. Perhaps it's a button you want users to press, or an error message that you want them to read. One method of achieving such emphasis is by making that element into a focal point. A focal point is anything on a page that draws the viewer's eye, rather than just feeling like part of the page as a whole or blending in with its surroundings. As with unity, there are a few tried and true methods of achieving a focal point.Placement Although the constraints of practical web design do not often allow for it, the direct center of a composition is the point at which users look first, and is always the strongest location for producing emphasis. Continuance The idea behind continuance is that when our eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along. Even though the bottom splotch is bigger and tends to catch your eye first, your brain can't help but go to the small pointer on the left sometimes! You'll soon find yourself staring at the smaller object.Continuance is also one of the most common methods that web designers use to unify a layout. By default, the left edge of headings, copy, and images placed on a web page form a vertical line down the left side of a page before any styling is applied. A simple way to expand on this concept is to use the rule of thirds to line up other page elements along the lines of your grid.Isolation In the same way that proximity helps us create unity in a design, isolation promotes prominence. An item that stands out from its surroundings will tend to attract attention. For e.g. you have various flower vases on different pages of your web design. While on the main page you have just one beautiful flower like daffodils or a lily. The viewers automatically tend to notice this singular flower which stands out differently in the design. That’s how isolation works.Contrast Contrast is defined as the juxtaposition of dissimilar graphic elements, and is the most common method used to create emphasis in a layout. The concept is simple: the greater the difference between a graphic element and its surroundings, the more that element will stand out. Contrast can be created using differences in color, size, and shape.Take an example of an ecommerce web site that sells just one item per day. When you look at this layout, what's the first thing that grabs your attention? Probably the viewers would first notice the product they're selling. Now the product in this site changes daily. So the question is “what grabs your eye after that?” Obviously the answer is “I want one” button. Although the same colors are used elsewhere in the design, the oval shape isn't. When set against an area of white space, the button has both contrast and isolation working to highlight it. This site has a definite purpose that the viewers really click that button.Proportion One interesting way of highlighting in a composition is through the use of proportion. Proportion is a principle of design that has to do with differences in the scale of objects. If we place an object in an environment that's of larger or smaller scale than the object itself, that object will appear larger or smaller than it does in real life. This difference in proportion draws viewers' attention to the object, as it seems out of place in that context.You can take just one lily or a daffodil flower and can superimpose it on the house and see how it draws the attention of the viewers! This principle works for miniaturization as well. Sometimes even reduction in the size highlights one particular object in a design. Consider a miniature version of a male or a female in the design. This small image stands out distinctly because of its proportion that different than the surrounding. A few standard HTML tags and CSS properties have been designed to take advantage of the preceding theories to create emphasis in a web page even without customization. For isolation of content consider the block quote element. This element indents the left- and right-hand side of any text placed within it, purposely breaking the continuation lines of the page content and drawing attention to itself. For positioning, consider the position property in CSS. By absolutely positioning an object with CSS, you take it out of the flow of its containing block, so you can place it strategically to draw attention. And when you think about contrast, think about the blink tag. Don't ever think about the blink tag. Yes, it creates contrast ... over and over and over again. Please don't use it. Don't get any ideas about using a marquee tag either. Design is just as much about what we leave out as it is about what we put in.
Bread-and-butter LayoutsMost of what we've talked about thus far has been design theory. Theory's good, but it can only take us so far toward understanding why some ideas work--and others don't--in a web site's design. Most academic graphic design programs include a curriculum that's rich in art history and fine art. These classes provide a great foundation for an understanding of graphic design from an art perspective, but they do little to prepare you for the specific challenges you encounter when you take your designs to the Web.When you look out across the Internet, you can see that the possibilities for layout really are endless. But, only a few of those possibilities make good design sense. That's why we see certain configurations of identity, navigation, and content over and over again.Left-column Navigation Regardless of whether we're talking about liquid or fixed-width layout design, the left-column navigation format is the de facto standard. Many sites that fit into this mold don't necessarily use the left column as the main navigation block--sometimes you'll see the navigation along the top of the page--but they still divide the layout below the header into a narrow (one-third or less) left column and a wide right column. It's a status quo, like a security blanket. For those reasons, a layout featuring left-column navigation is a safe choice for any project.The downside to sites that use left-column navigation is that they can lack creativity. They've been done so many times, and in so many ways that they tend to look the same. That's not to say you shouldn't use a left-column navigation layout. But the question is “how to do something different?” It can be done by picking that left column up and sticking it on the other side of the content. Then you'd have a right-column navigation layout.Right-column Navigation Although it's difficult to find sites that place the main site navigation along the right-hand side of the layout, it's quite easy to find sites that use a right-hand column for sub-navigation, advertising, or sub-content. Since, in western cultures, our eyes scan from left to right, this allows the page's main content to be the first thing viewers see. The same might not hold good for cultures in other regions like east!
There are very less sites today that make use for right column designs. However viewers very naturally intend their cursors to hover on the right side of the browser window anyway. Ultimately, this is a decision that's really about the needs of your clients and how they want people to perceive their online presence. Left-column navigation is familiar and more standard, but that's not always the number one priority in designing a new site. One thing's for sure, though: if you want your design to be different from the average web site, but you still want users to be able to find your navigation, you should give a right-column layout a try.Three-column Navigation The typical three-column layout has a wide center column flanked by two diminutive navigational columns. Although three columns may be necessary on pages that have a ton of navigation, short bits of content, or advertising to display, it's important to remember that white space is essential if we are to keep a layout from appearing cluttered. In the three columns on the main page, a white space center column promotes eye movements of the viewers.Expansive Footer Navigation If you scroll to the bottoms of pages on many of the most recently redesigned sites, you're likely to see an interesting new trend. Rather than using the footer for main links and a copyright notice, many sites are expanding to include contact information, expanded site navigation, and extra content such as blogrolls, linkrolls, Flickr badges, and so on. Although putting a site's main navigational element at the bottom of the page isn't a good idea, the concept of including "bonus" navigation and content in that space is being noticed across many sites today.Three Columns with Content First The majority of fresh three-column site designs that have been produced lately have put the content first. It means that such sites are locating the content on the far left of the display. This concept gives a professional touch to the site.Although this isn't really a new idea, it's been practice by many site designers lately in both liquid- and fixed-width site designs. The majority of three-column layouts usually switch to a two-column structure outside the homepage. By placing the content on the left, the transition from three columns to two is more natural, as the content column can simply expand, rather than having to relocate completely. Resizing: Fixed Width vs. Liquid Width We had discussed about the containing block, and whether or not it would expand to fill the page in one of our articles earlier. In fact, the fixed-versus-liquid is still a matter of debate anyhow. Some web gurus even opine that liquid layouts are out of use now.But most of the designers have established their own opinions in regard to the fixed-versus-liquid debate. The decision to use one type of layout over the other should really be determined by the target audience and the accessibility goals of each individual web site. But, regardless of personal preferences, it's important to put the needs of your client first. If you're deciding on the width of a fixed-width layout, you have to think about the audience for which you're designing, and create a layout that meets the needs of those users.
