Unit 19- A look at the graphical technology in web sites

So to get it us started, the PE department have sent us some webs sites which they particularly like. To get an in depth view of these sites I will be analysing and evaluating some aspects and features they contain. I will also look and research into web sites which also include interesting features.

Roll Over Buttons
One of the web sites which was recommended by the PE department had a basic navigation bar and basic roll over buttons.

 As you can see, when the arrow is hovered near the text within the navigation bar, the text is underlined. This may seem to show basic design work into the web site, however, it clearly shows the user that the text is hyper-linked and would take them to another page. Therefore the web site has clear communication with it's users.

When viewing a page, the navigation bar indicates what page the user is currently looking at. For example when I was viewing the home page of this site, the navigation bar has added a box with a different colour and effect to make that page stand out from the rest.

What I also noticed is that there doesn't seem to be a colour change in text within the navigation bar. Usually on web sites, there would be a colour change in any hyper-linked text the user has clicked on. This enables the user to look back on previous pages they have viewed which enhances the user experience and makes the web site more user friendly. Unfortunately this web site in particular doesn't use this design, which decreased the usability of the site.

Another feature what web site usually include are sub menus. Sub menus are the menus which additionally drop down from the navigation bar. For example a web site may have different topics within the navigation bar and once one of those topics have been clicked, a sub menu will appear with the different areas and aspects you can view on the web site within that topic. This is another feature which hasn't been included in this web site in particular, which again could affect the usability and the user friendliness of the site.

This is an example of a sub menu from another web site I researched into. This feature just makes the web site more effective in terms of usability.

I believe this tool is a classic symbol of a web site. If you go and browse through a number of different web sites, you will most probably see some kind of roll over button or menu. I think they give the website a much more neater and organised layout, which of corse has a huge affect on the user experience. 

 Animated Gifs.
Animated gifs. are animated graphics within a web site. They are used to present a web site in a better and professional light. They are usually used in web sites which are aimed at a younger audience, as younger people would be attracted to this feature on a web site.

Web site designers intend to avoid animated gifs. unless it is necessary as they take up a lot of storage and space. Thus animated gifs. are very unfamiliar in the web design industry unless they are used to specifically attract a certain intended target audience.

I personally like the use of animated gifs. They are unique and just simply make a web site so fun and user friendly. They may take a bit of storage, however I believe they are worth placing on a web site, unless they are unrelated tot he theme or the text.  



Web Banners
Web banners are one of the first pieces of imagery a user will see on a web site so it is important to make it relevant and suitable for your web site. Web banners are positioned at the top of a web page and represent a particular page or just the web site in general. The below image shows the standard dimensions of web banners. It also demonstrates the gif. weight and the flash weight. The gif. weight is  how much storage the banner would take is you saved it as a Gif. format and the flash weight is how much storage and space the web banner takes up if it was exported as a flash.

http://designerstoolbox.com/designresources/banners/

     
The web site which provided this interesting piece of information allowed me to view example we banners of each style and size. This has helped me find out what type of web banners are used within the web sites I have researched into.

The BBC Sports home page included a web banner. By comparing this web banner to the table above I have come to the conclusion that is is a "full banner"

This web banner with a resolution of 468 X 60 banner used on this web site links in with the web site design overall. BBC sport has a yellow and black theme representing their sports section, within there TV channels and web site. Therefore the banner used in the site shows that the designers of this site have thought carefully about how the banner fits with the theme and layout of the rest of the site, which is something wed designers should always consider.

Logo Graphics
Logo graphics are important to a web site. They give a web site character and symoblises the company/ business. A logo makes a web site recognisable and well-remembered. It is important for a web designer to create a logo which not only represents the company/ business but also has some relevance to the audience, theme and layout of the web site. This logo to the left side of the screen is one taken from one of the web sites recommended by the PE department. This logo has been placed onto a web banner which has been animated to go through different images . The logo has only been placed on one of the transitions which doesn't really give the logo much purpose and pride on the web site.  Logos range and vary in sizes, and this depends on the web designer's taste really. However depending on how big and what file format the logo is saved as, could potentially be a problem for the designer. If it takes up to much room then the designer will have second thoughts about using this logo. In particular this logo has been save as a JPG and takes 18KB of space. This is quite a small image and therefore it would be appropriate to use for a web site. 

Another logo I have looked has interesting features which I would like to share.                  

This logo taken from the BBC Sports web site with a bit depth of 32 bit. This means that the image can show a HUGE range of clear colours. However this is not always necessary for a logo. This logo in particular only uses two colours giving monochrome effect. Therefore this logo only needs a bit depth of 1 bit. A bit depth of 1 bit only contains two colours, hence why this bit depth will be acceptable for this logo. The designers of this logo have decided to use a 32 bit depth because this is a much more manageable format.

 Similarly, this logo has a bit depth of 32 bit. However, this logo as you can tell uses more colour and therefore it more of a necessity for a 32 bit depth for this logo compared to the BBC Sport logo.

I believe it is important to include a logo on your web site. Everything needs to have an identity fro it to be reconised. I also beleive that a designer has to consider the logo and the background colours at the same time. The BBC sports logo is grey scale and is positioned onto a yellow background. The Ramus logo is placed onto a balck background. If these two logos and backgrounds were to be mixed then they woul dnot look easy on the eye and will ultimatley hurt the desigin and overall look of the site.

Backgrounds

The SkySpots web site has an interesting background. With a bit depth of 24 bit and a 2400x1400 resolution, this background gives of a modern and stylish look to the website. The uses of colour connects to the logo of the web site . The uses of blues and reds suggests that the RGB colour space has been used.

A RGB colour space is made up of 3 colours- Red, Green and Blue. These colours are then mixed to make a variety of colours such as yellows and pink.

Some other web sites may use other colour spaces such as YUV (luminance and chrominance) and HSV (Hue,Saturation, Value). YUV is a color space as part of a color image pipeline. It encodes a color image which reduces the bandwidth for chrominance components. The advantage for YUV Over RGB is that a YUV colour space enables the compression artifacts to be more efficiently covered by the human perception, something which RGB doesn't enable. A HSV col-our space is a different model to a RGB. They are similar in terms of colours and capabilities, however the HSV version is a cylinder model.

With all this in mind it may be best for a web site to consider the YUV colour space on their web site and backgrounds as this has a more depth in terms of coloring in images and backgrounds.

This background taken from National Institute Of Sport web site, contrasts with the one taken from SkySports. This background as a slightly smaller resolution of 1600x468. However this background has bit depth of 32 bit. This is because there is a lot of colour used within the background. With a mixture of blues, reds, greens, yellows and oranges, also suggest that this background also uses the RGB colour space. This background has a bigger resolution as the pattern/ image of the background has to be much larger, for the user to see the full effects of the colours and style.

Whilst this background gives of a stylish and modern out-look, I struggle to see a connection between the purpose of the web site and this background. There is a them of wavy and twisting lines throughout the web site-similar to the background style, however unlike the SkySports background, I see no relevance nor connection with this layout and theme. It could be possible that the designers are trying to reflect the idea of sport being the modern day and bright future for our World, but this inst made clear, therefore I don't agree with the use of this background.

In my opinion, I think it may be be important to have a background, but I don't suggest you use a backround which could take the attention away from the context. I recomend a background which suites the target audience and the theme, which dosen't have to much depth and etail, such as colours. For example I don't suggest you use a bright purple background if you have a "under water" theme for you web site. 

With similar uses to backgrounds, there are also texture graphics used within web sites. Texture graphics are images which give of the effect of a real life object or texture such as plastic and fur. It is fantastic way of attracting the audience to a particular area of the web site. Texture graphics create an imaginative image inside the use's head of a particular thing, which enhances the user friendliness of the web site.















Texture graphics usually take up the same amount of storage and have the same bit depth similar to backgrounds. The texture on the left has a bit depth of 24 bit and a resolution of 300x224. This means that texture graphics use less pixels, due to the fact that there is only usually one or very similar colours used to create a texture. The texture on the right is very similar to the one next to it, only this one has a 498x331 resolution.

Texture graphics can also be 3D renders, they can be edited in various software to be then positioned on other images or along side the text of a web site, to give the text a more in depth image for the user.

Picture Element
The resolution and the bit depth affects the picture element of any image including backgrounds, texture graphics and general use of images on a web site. An image on a web site is dependent on the dots per inch (dpi) on the screen in terms of quality and pixels. The resolution of an image/ picture will affect how many dpi there are on within the picture.
 

For example, one image I came across when researching into a variety of web sites, was this one. The web site containing this image, which presents the wonderful places the creator of the site has been, is full of very large images and ones which have a very high resolution. This image in particular has a resolution of 1936x1296. This makes the image so big for a typical web site, however, whilst it may seem like a terrible idea to have such large images on a web site, this sized image also comes with a very large amount of pixels. This image has 300 dpi horizontally and vertically. This means that this image is presented in superb quality. On the other hand, using such a large image such as this one affect the user friendliness of a web site and can ultimately affect the site as a whole, due to an established amount of space been taken from this very large image.

Obviously the creator of this site was thinking more of the presentation of the web site rather than the user friendliness of the site. This could be down to the fact that they are determined to show the Wonders of the world they have visited in the strongest possible light and quality.

There is also a wide range of colours used within the image. This is reflected by how many colours there are in a image with a bit depth of 24 bit, like the one presented above. An image made up of 1 bit contains only two colours, whilst 24 bit image consists of 16,777,216 colours (true colours), so this high contrast in colours demonstrates the high amount of colours needed for a 24 bit depth image.   

Intensity
Intensity is linked with pixels. The intensity of an image is the brightness of the pixels. With low intensity the picture will be dull and give of a darker view of the image. If the intensity is high, the image will look bright. If the intensity is too low or too high then the images becomes difficult to see clearly.

It is important that the creator of a site include images which are at the right intensity. If they do not consider this factor then this could affect the user's experience with the web site, as the user may not like the brightness or the dullness of the image.

Compression
This is something which can help reduce the size of an image or background . If you compress an image, you are initially squeezing (compressing) the image down to a smaller size. There are two types of compression- lossy and lossless. Lossy compression is where you compress an image to a smaller size which actually looses some quality to the image.
For example this image apears to be pixelated as it has been lossy compressed. The original image has a larger resolution which shows that the image has been shrinked to a smaller size. Lossless compression is where an image is compressed with out any qualities changed. Whilst this may seem good, the problem is that a lossless compressed image (i.e. a logo) takes more storage compared to a lossy compressed version. My personal view on this is that a lossless compressed image is much better. I think that it is important to have a good quality within the images you use on a web site as images are the key audience grabbers. On the other hand if the lossless compressed images still take up too much storage, then my point can be counter against.

In terms of file formats it is commonly known that JPEG images are usually lossy compressed. This may seem like a disadvantage for this file type, however, JPEG's have great flexibility and therefore are still widely used for images.

For lossless compression the TIFF file format is used. This is because this format enables you to easily compress an image. In addition, a TIFF format allow you to layer images on top of each other. This links in with the texture graphics mentioned earlier, as texture graphics can be made up of a layer of images.

One important factor all web designers should consider is that they shouldn't compress one single image repeatadley. This could lead to terrible image quality and gives of an unprofessional look. This is because the image will be progressively degraded by the compressed items. I personaly woyuld use lossless compression as I always want positive feedback from my audience. I would always want my web sites to be user friendly and very attractive to the intended target audience.

Sampling
Sampling is similar to the bit depth, as it is to do with the quality of of a piece of media. Usually the sample rate is most commonly associated with audio and video. The sample rate is  basically the number of "snapshots" of audio that are sampled every second. The continuous audio stream is encoded in a similar way to a high tech camera capturing motion by recording an image frame many times per second. The higher the sample rate (and bit depth), the more accurately the original sound can be presented and heard.
This diagram explains this further.The curve is the original sound and the columns is digital data trying to represent the original sound.

A web designer should consider the sample rate of the audio on their videos which may be placed on their web site. They need to make sure they a clear and understandable audio to give the user every detail and information they need out of that video. 




Point Line Curves and Polygons

Vector point is the points that make up a vector shape. For example on a vector square there are three vector points. Thus there is 3 points on each corner.

In terms of vector lines they are the lines that make up a shape, they join up with the vector points, these will then make up the shape. So in simple terms these are the edges of the shape

Vectors create circles and rounded shapes such as semi-circles. For example, a semi-circle will be made up of two vector points, one vector line and one vector curve.

A vector polygon is a shape that is complete. For example, going back to the square, it is made up of 4 vector points, 4 vector lines. The given name to this type of shape is a vector polygon.

 

*These shapes can be easily identified in many images and logos used on web sites...

  










NOTE: This blog page and the contents of this page could not have been complete without a little help from the following resources; WikiPedia.co.uk, SkySports.com, BBCSports.co.uk, sportsdirect.com, eis2.co.uk, fasinatingjouneys.com, wrightrobinson.co.uk, googleimages.co.uk