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)? Do these websites use CSS? If yes, how do they implement the CSS across the websites? If no, why? What makes them good?
[Disclaimer]
It has been a long while since I took NM2208, hence the full and exact details of what was learnt is a little foggy, so please bear with me while I do my best to refresh my memory.
Apple
For my top pick, my FAVOURITE would be the Apple website. Okay granted, I may like to use Apple products, but I think that their website is really pleasing on the eyes and easy to navigate around.
Applying Principles of Visual Communication
- Color Scheme: The colors are of a consistent grayish tone, so it is soothing to the eyes (I can't imagine if the colors are too bright and contrasting all the way) and it also gives it an elegant look.
- Layout: The website is organized neatly into grids and the most important information (or at least what the company wants people to notice) is always placed at the center (e.g. new products). Plus, different sections of information are placed into boxes and the headings are often highlighted in a different shade, which makes the distinction even clearer.
- Typography: I especially love the typography here as everything is consistent, readable and even the spacings between the letters make it look very pleasing.
- Others: I like it that everything I want to find out about the products are very easy to find. Firstly, the navigation at the top is very clearcut - there is no ambiguity in it. I also like that there is a search option, so that in the event that people still cannot find what they are looking for, they can just use the search function.
Yes. After reading through some of the source code, CSS was done for the navigation bar and also for the display of text. The body text throughout the website has a consistent font and color and the hyperlinks also have its own color set. CSS was also used for the proper positioning of the elements (e.g. side bar, main content etc).
Crumpler
Next, it would be the Crumpler website.
Applying Principles of Visual Communication
- Color: The theme of the website is that of a "real-life store", complete with shelves and table top for the cash register. I think that the website achieved this theme well with the color scheme - e.g. the main shelve area where the products are displayed has a white/plain background, which is mostly the case in stores so that the background will not distract the consumers from the product.
- Gestalt: The products are placed across the website in a horizontal manner (albeit level by level). There might not be much of a practical explanation for this, but I guess it makes it more readable and neater for the people to read.
No, since the website was fully built in Flash. It is good, in my opinion, because it is very engaging in terms of the animation and the functionality of the website (displaying the price tags, sorting of the products according to type & price, having a search bar and even having a 'cash register' at the bottom of the page for us to keep track of the total cost). I also find that the theme of the website was very fun/unique/interesting and energetic, much like what the company actually wants to portray - the kind of fun, energetic, youthful and vibrant culture for the consumers.
Pixar
Finally, another website which I found to be good is the Pixar Animation Studios website.
Applying Principles of Visual Communication
- Color Scheme: White was used as the background and much of the website's fitted the "white, clean and classy" look. For example, the navigation was just a plain white, which (to me) made it all the more clean. It wouldn't have been as effective if the background of the navigation bar wasn't white.
- Layout/Gestalt: Everything was organized very neatly and very much simply - with just the navigation on top, main content in the middle and perhaps another sub content horizontal bar for additional interesting news (only in the homepage). It makes it very straightforward and easy to read.
- Style: The style of the website can be said to be clean and minimalist - which is a style I very much appreciate if done well.
No, the website didn't use much CSS, except for perhaps some of the formatting of the text (which didn't take up much of the website because it was mostly constructed with images). The layout of the website was mostly done using HTML tables.
I guess the good thing about the website was that it was clean and concise - achieving its purpose of introducing the public of their projects and their company's history.
II.
What are the advantages of using CSS?
CSS makes it more manageable for the website designer to design the website (also for the webmaster etc) because the layout and text style are already done in css, so there is no need to keep on using the HTML tags for every single chunk of text - which also significantly reduces file size.
On further research to the topic of CSS, I found out that it makes loading of the page faster too as the browsers cache the stylesheet page (http://www.plus2net.com/html_tutorial/css-adv.php).
A disadvantage, however, would be that CSS may not work consistently in different browsers.
III.
What is Woff? What are the advantages of using Woff? Any disadvantages? Find 2 good websites which apply Woff. Elaborate how Woff is used in the websites.
Woff stands for Web Open Font Format. It is a font format for use in web pages (developed by Mozilla), whereby people design fonts, save or convert them to WOFF and then use other technologies (e.g. HTML, CSS) to tell browsers which fonts to download and apply.
For more info, check out Wikipedia here, and w3 here.
Advantages:
- The font data is compressed, hence websites will use less bandwidth and loads faster.
- More fonts can be available to designers since there are more licenses for WOFF formats.
- It has the potential of becoming universal and an interoperable font format for the web (since it is gaining in popularity).
- (more info visit here)
I suppose it would be problematic if the server which supplies the fonts goes down.
2 good websites:
So far, I haven't been able to really find good websites that employ Woff. However, I did manage to find some demo sites that employ Woff (although sad to say that I wasn't able to load some of the fonts in some websites).
Here they are:
demo1
demo2
demo3
No comments:
Post a Comment