Please list 3 good websites which you like and evaluate these websites. Do they apply the Principles of Visual Communications which you have learnt in NM2208 (Color Scheme, layout, Gestalt and so on).
http://www.webshocker.net/pc.asp
http://www.chocri.de/valentinstag/
http://www.uqude.com/
webshocker.net
The website catches my attention mainly because of the cute “Hello world” banner. The size of this banner is bigger than normal webpage banner size. But we can treat the content of the banner (CG) as a part of the website company’s design product.
One interesting point of this website is, one page slips to another page from left or right side of the website. It is a bit like a link list, home, news, about, work and contact are linked together.
Color: The background color of this page is very simple: white and light grey, with dark grey top and bottom line. The color of the title worlds are mainly light blue and orange, which lead attention to the titles.
Layout: From the picture we can see that, the webpage is divided into grids: top, bottom left and bottom right. The division is very clear and balance. The content of top and bottom, as well as bottom left and right, has the similar weight.
Continuity and Similarity: The fonts and colors of the titles and content are similar. The layout of each page is also very similar.
Chocri.de
This website is a chocolate official website. The current theme of the website is Valentine’s Day. My attention was first caught by the theme color, very happy, warm and full of passion.
Color: As I mentioned, the background color is full of passion. Red is the right color of food. Rose red also looks nice with white color and chocolate color.
Layout: The layout of this website is also very clear. The page is divided to grids: top line, follows by top, mid and bottom part. The middle part is divided into 4 parts. The whole felling is vey clear and balance.
Continuity and Similarity: The whole page, except for logo and title of banner, uses the same font. Each part of the page uses the same background color and word color. The styles of the 4 parts in the middle are similar.
Uqude.com
I found out that all the 3 web pages I found has simple and clear layout and simple color scheme. I like this style. There should not be too much information on the main page. But all the information should be placed clearly and logically. User can find the link to the information he/she needs easily.
Color: White and light grey background. White color gives a feeling of clean and clear. White color will not catch much attention, thus leads users’ attention to the content. The colors of the words are mainly dark grey or light blue, which also very simple. The most attention-catches part is the 3 pictures at the middle right part, as they are colorful, stands out from grey and white.
Layout: The middle-bottom part is a bit empty, which looks not that nice. However, this part will not be shown on the screen, unless the user drags down the page.
Do these websites use CSS (Cascading Style Sheet)?
Yes, all of them use CSS.
If yes, how do they implement the CSS across the websites?
I have checked the page source code of these three webpages. All of the code import CSS files. Thus I cannot check the original CSS code in the page source. But from the outlook of the webpages, we can see that the font, background color and content color, as well as paragraph layout may use CSS.
Part 2
What are the advantages of using CSS?
From my understanding, the mainly advantage is divide content and style into two parts. We can make the layout and content using HTML or maybe other language, and then call the CSS code to apply the style.
As the style is created and saved in another file, we can call the same style over and over again and apply the same style to each part of the webpage as we want. The change the style will be very easy as we only need to change once, in the CSS code. We can create any complicated style apart from the main html code, thus will not mass up the code. With CSS, we can apply continuity, unit, and similarity to the website easier.
