Unit 19 assignment 1

Unit 19: Digital Graphics for Interactive Media

I am going to analyze two different websites which both sell boxing equipment, one of the websites is ‘Sugar Ray’s’ which is the UK’s leading boxing store. The other website is ‘Box Fit UK’ which is also a leading store.

Applications of interactive media graphics:

Navigation:Both websites contain a lot of rollover buttons that allow you to click on in order to navigate around the different content of the site. For example the ‘Sugar Rays’ website have rollover buttons in the top right hand corner which allow you to navigate to their official YouTube, Facebook and Twitter pages. These pages contain information about where the company is based, any up coming events or deals the may have placed and most of all it is a social place where customers may re-assure other people that are thinking about buying from them.

However as the website is designed very illustrative it is quite hard to notice the buttons in the top banner, I think it would be more successful if the buttons were enlarged slightly because when first entering the site my attention was drawn straight to the other features of the website and not the important links.

Also the ‘Sugar Ray’s’ website uses another range of rollover buttons towards the bottom of the page which allow you to navigate to main sections of the stock such as boxing gloves, boxing boots etc. These rollover buttons are very noticeable and the use of bold block writing draws attention to the link and is easily used to find what product you’re looking for.

Kyle Mckendrick

The ‘Box Fit UK’ website also use rollover links but not as much as the ‘Sugar Ray’s’ site, they have a box which contains the four main manufacturers they deal with which are Adidas, Lonsdale, Cleto Reyes and Everlast. Each of these links navigating to a page that contains all the products they sell from that brand. Which from a professional store website you’d expect to see a wide variety of links to different sites, pages etc.

However the Home page contains an image of some of the TV Channels and publications they have worked with, I think the website would look more professional if those images were external links to the Channel’s websites.

Only the ‘Sugar Ray’s’ website contains a navigation bar which contains the usual links such as Home, Contact us etc. These links are what you would normally find in any other navigation bar, maybe some may contain extra links depending on the products they sell, but as there are loads of different manufacturers and different types of products they have a navigation menu down the left hand side of the page which displays their category links.

Kyle Mckendrick

Both websites contain large navigation menus that display different categories of products. The ‘Box Fit UK’ website have three different menus, which are ‘Shop by Brand’, ‘Site Information’ and Shop by Category’ but each menu doesn’t display the whole range of brands or categories, if you wish to see the full range you have to click on the ‘See All Categories’ link.

The ‘Sugar Ray’s’ website uses a massive navigation menu which displays all their store categories which speeds up the process of finding what you’re looking for instead of navigating through two or three pages before you get to your desired product. Also the site contains a ‘Store Bestsellers’ and a ‘Store Manufacturers’ menu, which similar to the ‘Box Fit UK’ website they don’t display all their brands which slows down the searching process.

Animated Graphics:None of the two websites contain animated GIF images. However they both contain web banners that are the main recognition when first entering the Home pages.

Kyle Mckendrick

The ‘Box Fit UK’ banner is quite simple and ordinary compared to the highly illustrative banner than the ‘Sugar Ray’s’ website use, however sometimes the most simple designs have better outcomes as it draws full attention to the purpose of the site without being ‘in the customers faces’. But with the ‘Sugar Rays’ banner being completely unique it gives the website something to be remembered by, and if the customer was to see the banner or logo anywhere else they would immediately recognize the company. Whilst sometimes keeping it too simple could cause confusion with other simple designed logos.

The ‘Sugar Ray’s’ logo is scattered about on the main layout of the site, as they use the same theme for each page with just the middle center section being different depending on what category of product or page you’re viewing. This helps remember the logo and if seen for example, in the street or on the side of the bus, you would immediately recognize it and know what company it is.

On the other hand, the ‘Box Fit UK’ website only shows their logo in the website banner and on the ‘Contact Us’ page, this shows the level of effort between the two websites and obviously shows that ‘Sugar Ray’s’ have thought about the techniques which will make their company recognizable, whilst ‘Box Fit UK’ only show their logo twice throughout the website.

The Background of the ‘Box Fit UK’ website is just a block colour white which is very simple but it prevents distraction from the writing so the full attention is drawn to the purpose of the text.

Kyle Mckendrick

However the ‘Sugar Ray’s’ website uses a very complicated design which ranges between white, grey and black coloured background whilst highlighting any product or writing with an orange box, this also draws full attention to the product or text but by using colours and highlighting the main parts, such as the price and the picture.

Both techniques work as they successfully highlight the full attention to the product, but as there is a lot of block coloured, bold text and buttons down the sides of the ‘Sugar Ray’s’ website, it is a little too much, I prefer the ‘Box Fit UK’ technique however they could add a bit more illustrations to brighten up the page. The ‘Box Fit UK’ website uses a similar technique to ‘Sugar Ray’s’ by highlighting a box around the products to draw full attention to them.

Kyle Mckendrick

Most of the design and buttons on the ‘Sugar Ray’s’ website are textured with lines and patterns, especially down the sides of the site, there are two long areas which have a diamond pattern. I think that the use of this pattern is quite random as it is completely irrelevant to the purpose of the web site, which is boxing, but it does still work well with the colour theme of the design and it prevents any boring blank backgrounds from ruining the bright illustrative design of the foreground.

Also they use quite a rough textured design of a brick wall on the banner of the website, this sets the urban environment of boxing and shows the rough edged sport that it is.

The ‘Box Fit UK’ website has quite a soft textured design, especially on the banner as the colours fade out. This could be improved by adding a sharp, rough theme to the banner and the sides of the site. Without the image of a boxer and the logo I would have no idea that the site is selling boxing products.

Theory and Knowledge:The pixel elements of the ‘Sugar Ray’s’ website is at a higher quality than the ‘Box Fit UK’ as when zoomed in on some of the images there is quite a difference between levels of blurred edges.

Pixel:Sugar Ray’s: Box Fit UK:

Kyle Mckendrick

As you can see the ‘Sugar Ray’s’ high-resolution images are a lot clearer than the ‘Box Fit UK’ low-resolution images.When on each of the two websites there’s an opposite mood set. For example, whilst on the “sugar Ray’s’ website there is quite an intense environment created as there’s a lot if bright imagery with little blank space, the design is quite ‘in your face’ but that’s what makes it stand out from other ordinary sites. I think the bright colouring on a black/grey background work well as it creates almost an aluminous urban effect.

On the other hand the ‘Box Fit UK’ website has a very calm mood set, there’s a lot of blank space which is the complete opposite to the ‘Sugar Ray’s’ website design, but by keeping the page this simple it might bore the customer and make them want to find another website which looks like there has been more effort put into it.

Kyle Mckendrick

Raster Images:

There is a big difference in the quality of the images used on the two websites, the ‘Box Fit UK’ website uses lossy compressed images as when you zoom in to rescale the picture it becomes very blurry, that is the result of using ‘JPEG’ (Joint Interchange Format) images which are data compressed to reduce the size of the file.

On the other hand the ‘Sugar Ray’s’ website uses quite lossless compressed images as when you zoom in the same amount as on the ‘Box Fit UK’ site the images are still at a good standard and aren’t really blurred around the edges that much. Using ‘TIFF’ images, which are Lossless compression, allows the customer to zoom in to view every little part of the product without trying to make out a blurred image.

Kyle Mckendrick

Vector Images:

None of the two websites contain vector images. I think that if they were to add vector images their websites would look a lot more professional. For example, when you zoom upon the banner and all the other graphics on the page of the ‘Sugar Ray’s’ website everything apart from the text and the product images have blurred edges which is obvious that they’ve used ‘JPEG’ images which are lossy compressed. Using Vector images wouldn’t make the loading process of the website any slower as they are more compact files compared to ‘BMP’ images. Overall, vector images would make both websites look a lot more professional, however not a lot of people zoom in on the banners and buttons as they’re on the website to buy products and not to criticize the quality of the image compression.

Box Fit UK:

Sugar Ray’s:

Kyle Mckendrick

Bit Depth:

It is quite clear that basically all of the imagery on both websites are 12 or 24 bits as there is basically no greyscale or monochrome images, apart from the banner on the ‘Sugar Rays’ sight which is a black and white image therefore has to be an 8-bit image as they only need the tonal variations of an 8-bit colour channel to produce a black and white image, an 8-bit image contains 256 shades of grey between black and white. This also makes it a lot easier for the creator of the site as 8-bit images are rather small in file size that means fast loading for the customer as well.

The ‘Box fit UK’ website does not contain any monochrome imagery, they only use high colour imagery which is allows 32,768 possible colours for each pixel, whilst the ‘Sugar Rays’ website use true colour imagery which have 16.7 million possible colours per pixel which explains why ‘Sugar Rays’ have better quality imagery and doesn’t pixelate as much as ‘Box Fit UK’.

Colour Space:

RGB (Red, Green and Blue) is the colour space which is used usually for website imagery, the three colours make up 16.7 million different shades of colour which is really good as with a number of shades that big then the image quality will be a lot better due to the colour shade within pixels.

HSV (Hue, Saturation and Value) is what is also used on websites especially for the product images as you can express the brighter and darker shades of the colour due to the value.

Kyle Mckendrick

Image Capture:

All of the images have been taken using digital capturing; this is the only way, as they need good quality images of the exact products they’re selling. The resolution quality of the ‘Sugar Ray’s’ imagery is a lot better than the ‘Box Fit UK’ site as when zooming in on the two websites you receive a more clear image on ‘Sugar Ray’s’, this means that they are high-resolution images. This could also indicate that the ‘Box Fit UK’ website are using more compressed sized images in order to keep the storage size low, whilst ‘Sugar Ray’s’ maybe using larger file sized images but obviously come at a better quality. Most of it is down to the quality of the camera used to capture the images.

Optimizing:

Before the Images were put onto both sites they would have to have been compressed which will mean faster loading time, image compression is usually done by bringing down the image resolution as most computer screens display at 72/96 dpi (dots per inch) which is the resolution your image would be brought to, normally images taken by digital cameras are at 300 dpi which is a much bigger file size.

Another way of compressing images is by changing the file format, but you must change to the format that is suitable for what it will be used for, most online images are JPEG as they are very small in file size which means fast loading, however there is a drop in quality, JPEG is most likely the file format which both websites have used however ‘Box Fit UK’ have probably compressed their file size a lot more than ‘Sugar Ray’s’ which explains the blurring difference.

Kyle Mckendrick

Kyle Mckendrick

Unit 19 assignment 1

Technology

Transcript of Unit 19 assignment 1