Saturday, January 15, 2011

NM3208 Presentation 1 - Website Design

1. 3 websites that I like best:

__ Dara's Garden: http://www.darasgarden.com/
__ Media Boom: http://mediaboom.com/index.htm
__ Belvedere Inc.: http://belvedereinc.net/index.php

a. Dara's Garden: http://www.darasgarden.com/


This beautiful website applies design principles such as balance, harmony, contrast, color scheme, Gestalt and so on.

Colors used are blue, green, and light brown, black and white. It follows the cool color scheme, which eases the eyes and retains visitors, since it is so comfortable and peaceful to look at. It is noticeable that blue and green are most favorite colors to most people. Different values and intensity of the same colors are applied, which helps bring variation and variety to the website. This color scheme reminds me of the scenery of green trees and soil under a blue sky in a cool and windy day. Limited color palette when used properly can create the feeling of organization and sophistication (William and Tollett, 2006).

Layout: The website has a balance between graphic and text. There is also a good contrast between the background and the texts or pictures, for example black texts on white or grey background so it is very easy to read. The principle of Repetition is applied when there is the same background and consistent graphics in every page. There is also a good way of using of grids. Texts are aligned left so it is well organized and easy to read.

Gestalt: Principle of totality is applied throughout the website. All the graphics and texts seem to harmonize in color, texture and shape. There is a hierarchy of texts. The headings and titles are bigger and have different colors. Text belongs to an idea is grouped together. Rule of symmetry is also used in the website between the right and the left, the top and bottom.

CSS: The Dara's Garden website uses external CSS from a file:

link href="/css/main.css" rel="stylesheet" type="text/css" /


__ Media Boom: http://mediaboom.com/index.htm


Similarly, this website applies design principles such as balance, harmony, contrast, color scheme, Gestalt and so on. It also uses sounds and animation to attract visitors and encourages interaction.

Colors used are mostly warm colors such as red, brown, pink, orange, yellow and so on. Some cool colors such as blue and green are also used. Different values and intensity of the same colors are applied, which helps bring variation and variety to the website. The website has an antique look. It seems formal and academic with graphics such as books and maps.

Layout: The website has a balance between graphic and text. There is also a good contrast between the background and the texts or pictures, for example black texts on light orange background so it is very easy to read. The principle of Repetition is applied when there is the same background and consistent graphics in every page. There is also a good way of using of grids. Texts are aligned left so it is well organized and easy to read.

Gestalt: Similar to the Dara's Garden website, Gestalt's principles are applied throughout the website. All the graphics and texts seem to harmonize in color, texture and shape. There is a hierarchy of texts. The headings and titles are bigger and have different colors. Text belongs to an idea is grouped together. Rule of symmetry is also used in the website between the right and the left, the top and bottom.

CSS: The Media Boom website uses internal CSS:

Similarly, this website applies design principles such as balance, harmony, contrast, color scheme, Gestalt and so on. Principle of Repetition can be seen clearly in this website as the same blue and green colors are used repetitively throughout the webpage.

Colors: Analogous colors such as blue and green are used. Unlike the two previous websites, the same value and intensity of blue and green are used, so the website can catch the attention of visitors by applying the principle of repetition quite well. Overall, the color combination makes the website comfortable and easy to look at.

Layout: The website has a balance between graphic and text. There is also a good contrast between the background and the texts or pictures, for example white texts on dark background. There is also a good way of using of grids. Texts are aligned left so it is well organized and easy to read.

Gestalt: Similar to the Dara's Garden website, Gestalt's principles are applied throughout the website. All the graphics and texts seem to harmonize in color, texture and shape. There is a hierarchy of texts. The headings and titles are bigger and have different colors. Text belongs to an idea is grouped together. Rule of symmetry is also used in the website between the right and the left, the top and bottom.

CSS: The Belvedere Inc. website uses external CSS:



2. What are the advantages of using CSS?

_ Easy to create a website using CSS. If we use HTML for the design of the website, we need to set the font, size, color and style for every element on a page. So we have to type the same code over and over again. If we use CSS, we only need to specify the details once for a group of similar elements that have a similar design, thus this saves time.
_CSS also has a larger array of attribute than HTML so it helps us code a more beautiful website.

_CSS makes the website easier for maintenance. If you want to change the style of a group of element, you only need to change the CSS code. This saves you from the problem of editing every element directly if you use HTML for the design job. Also, it helps ensure that you achieve consistency throughout the site.
_Most browsers cache CSS style sheet so the loading of page using CSS is faster.

No comments:

Post a Comment