In today seminar, it was about text, illustration, and video for web. For example, how can we have quality illustrations for our web? Size file of illustrations? The size file and quality of video? What font type we use?
Illustrations
There are many different formats of images (JPEG, GIF, and PNG etc.) They are divided into two separate categories of compression: Lossless and Lossy.
Lossless- allows media to be represented without any loss in quality or information.
Lossy- may result in a loss of quality and information.
For web design, we usually save images as “save for the web” which can be done in Photoshop. I will save my images either in JPEG or PNG-8 or 24. JPEG is great for photographs displaying millions of colours at a very small file size. PNG-8 this works best to retain crisp detail in simple illustrations that less than 256 colours, good for web graphics containing text. PNG-24, although larger in file size, is a good choice that I don’t wish to lose any quality in photographs. And PNG is transparency that allows designer to designate the background of the image transparent. This means that if you place a transparent PNG in a blue table cell, the background color of that image will turn blue.
Video Compression
Nowadays, we use video H.264 as our video format, because H.264 is an industry standard for video compression. The H.264 standard offers substantial performance improvements over its predecessors. For example: A standard DVD can hold one two-hour movie compressed using the MPEG-2 (the popular standard for DVD movies) codec and four hours of movies using an H.264 codec.
The biggest advantage of H.264 over previous standards is its compression performance. Compared with standards such as MPEG-2 and MPEG-4, H.264 can deliver better image quality at the same compressed bitrate or a lower compressed bitrate for the same image quality.
Typography
After the seminar and read the article that present in the ilovetypography.com. I understood the importance of typography including contrast, size, hierarchy and style.
Contrast
Size
A web designer must consider everybody, so the text must be set to the minimum of 12px. We have to think the size of the monitor e.g. from the ilovetypography.com it stated “65 inch High Definition Plasma monitor, might not be so on a 15 inch MacBook.”
Hierarchy
Varying type size is one of the best ways to differentiate content, but we can also use different styles; for example, all-caps, or using bold or italic for sub- headings.
Style
There are various types of font that I can be used in my website. And using different font is the best way to differentiate content. In my website, I only used one font for all area, because too many fonts mix together will make the user confuse. Generally, 2 fonts are sufficient in any design. The typeface that I decided to use is Tahoma, because this is a common available sans-serif font and it is an ideal font for presenting information on the screen.
During the seminar, some of my classmates have given some comments to Shaun that we are confusing what we supposed to do. Therefore, Shaun gave us a website template that allows us to mess around with it. For me, this is a very good practice that I can use the layout design and paste it on the template to see what will it like.
The following is what I had done during the seminar session. However, that is an error appears. The navigation bar was separated. I have looked through each section of the CSS.
I realised that the position of the navigation ID, it was fixed. To solve this, I changed it to absolute. Now, when I scroll down the page, the navigation bar won’t separate.
After this practice, I have the basic concept of how to create a website. Once I have gathered all the information that I need I will start to create my website, hopefully I will finish it next week.
No comments:
Post a Comment