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 officialYouTube, 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
Page 1

2. 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
Page 2

3. 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
Page 3

4. 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
Page 4

5. 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
Page 5

6. 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:
As you can see the ‘Sugar Ray’s’ high-resolution images are a lot clearer than
the ‘Box Fit UK’ low-resolution images.
Kyle Mckendrick
Page 6

7. 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.
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.
Kyle Mckendrick
Page 7

8. 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.
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
Kyle Mckendrick
Page 8

9. 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:
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
Kyle Mckendrick
Page 9

10. 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.
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
Kyle Mckendrick
Page
10

11. 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
Page
11