Please click on the links and View -> Source to see the codes if needed. I'm afraid screenshots will be too small and difficult to present here. Alt + Tab is probably better? :)
NM2208 Theories
Site 1: http://veerle.duoh.com/
Figure and ground:
~ The white text on the gray background provides good color contrast which makes the text easy to read. The gray background also allows the colorful graphics to stand out.
~ The background is also free of details, so it does not distract the viewer from the text and graphics.
Proximity/Similarity:
Similar headings and their related content are designed similarly and placed near each other, so it is easy for the viewer to distinguish different content.
Principles of Interaction:
The design controls attention by applying the following principles of interaction -
~ There is an adequate balance of space, as the white space provides framing room for different content, but at the same time the size (e.g. font size) of the content is not compromised.
~ As for value, the white text is easy to read against the darker gray background.
~ The design is neat, which allows viewers to scroll down the page (scanning pattern) without distracting elements.
~ The headings are also large enough to be identified as such.
~ The content are all rectangular in shape
~ The main colors for this website are gray and white, which are well-contrasted and balanced.
~ The website also mainly follows the Golden Ratio and the rule of thirds, except the page on Belgian Graphic Design, which divides the page into 4. Nevertheless, the design is still neat.
How CSS is implemented
CSS is implemented in a separate file. It is used to provide a consistent look, such as the same layout and color scheme, for the website. (View the source of the website and click on /css/master.css.)
Site 2: http://mintdigital.com/
Figure and ground: http://mintdigital.com/blog
~ The black text on the white background provides good color contrast which makes the text easy to read. The white background also allows the colorful photographs to stand out.
~ The background is also free of details, so it does not distract the viewer from the text and graphics.
Proximity/Similarity:
Similar headings and their related content are designed similarly and placed near each other, so it is easy for the viewer to distinguish different content.
Continuity: http://mintdigital.com/about/history
Some pages (e.g. the one on methodology) uses a dotted arrow as a divider between the heading and the content. The dotted arrow uses continuity as we perceive it the same way as an underline. Hence continuity allows a more interesting divider to be used (arrow instead of the conventional underline).
Principles of Interaction:
The design controls attention by applying the following principles of interaction -
~ The design is minimalistic with a lot of white space. This allows the text to be read easily.
~ As for value, the black text is easy to read against the white background.
~ Generally the design is neat, which allows viewers to scroll down the page (scanning pattern) without distracting elements.
~ The headings are also large enough to be identified as such.
~ The content are generally rectangular in shape
For the home page, viewers can click on “portfolio, people, contact, blog” below the company logo. The order for this is left to right (since people usually read from left to right).
However, there is no particular control of attention for the “mind map”. This is not necessary bad design, however, as the designers may feel that for people who have time to explore their website, everything related is equally important, and hence there is no need to impose an order on the viewer.
Harmony: http://mintdigital.com/about/hemlock
~ The main colors for this website are black and white, as well as shades of green and blue (for the company logo. This allows the word “mint” in “mintdigital” to stand out).
~ Since the website is mainly black and white, there is less of “warm versus cool”. However, subheadings with warm colors stand out more against the cool colors of “mint” in the company logo.
~ The website also mainly follows the Golden Ratio and the rule of thirds.
How CSS is implemented
CSS is implemented in the source of the website. It is used to provide a consistent look, such as the same layout and color scheme, for the website.
CSS is also used to provide different versions of the website for different platforms (e.g. print and web). (Click on Print Preview of the home page and you will see that the 2 versions are vastly different.)
Figure and ground:
~ The black text on the white background provides good color contrast which makes the text easy to read. The white background also allows the graphics to stand out.
~ The background is also free of details, so it does not distract the viewer from the text and graphics.
Proximity/Similarity:
Similar headings and their related content are designed similarly and placed near each other, so it is easy for the viewer to distinguish different content.
Principles of Interaction:
The design controls attention by applying the following principles of interaction -
~ The design is minimalistic with a lot of white space. This allows the text to be read easily.
~ As for value, the black text is easy to read against the white background.
~ Generally the design is neat, which allows viewers to scroll down the page (scanning pattern) without distracting elements.
~ The headings are also large enough to be identified as such.
~ The content are generally rectangular in shape
Harmony:
~ The main colors for this website are black and white, which is well-contrasted
~ The website however, does not follow the Golden Ratio and the rule of thirds. It is simply left-aligned
What makes them good?
For a website without CSS, the design is appropriate as it applies NM2208 principles and facilitates easy reading. However, by today's standards, the design is rather unsophisticated as we are used to websites with pretty graphics and effects such as rollovers.
Advantages of CSS
CSS makes it easy to change the look throughout the website. For example, if you want to change the design of a website from a theme which consists of blue and white to red and green for a Christmas theme, we can simply alter a few codes from the CSS to change the main color scheme.
Although HTML can provide a consistent look, it is tedious to use the HTML repeatedly across every page of a website. CSS makes it convenient and efficient to maintain a consistent look.
CSS also makes it easy to come up with different styles for different platforms, e.g. website 2.
No comments:
Post a Comment