At the end of our first web session with Simon we were set a task to help develop our website analysis skills. We were asked to find examples of websites both good and bad, noting down our initial thoughts about their functionality, aesthetic quality and relation to the intended audience.
Christian Goth
I think this is a good example of a bad website;
- There is an overwhelming use of the colour black, although this relates to Gothic target audience, the overuse of the colour causes the webpage to look uninviting.
- The patterned background is distracting for the viewer and takes focus away from the content.
- The information is not well ordered, what seems to be the home page flows straight down into a section of links despite the page divider.
- The second image shows how elements of the website exceed the set width followed by all other aspects of the website.
- There is a variety of fonts used on all pages, this affects the aesthetic quality of the site as inconsistent use of fonts gives the site an unprofessional, tacky feel.
- As shown in the last image, no width constraints have been set on certain pages leaving the text to flow freely from one side to the other. This affects the legibility of the text as it is straining for the eyes to follow such as long line of text.
- Overall, I think that this website lacks functionality, it is hard to navigate and the way in which the information is presented often affects the readability of the passage. Furthermore, the choice to use a tiled background, a variety of different typefaces and an unbalanced composition drastically affects the aesthetic quality of the site.
TOOL
'Tool' is a production company from America, they have a really effective website that showcases how a site should look and navigate;
- Firstly, the company and what they do is instantly communicated upon opening the sites homepage, the designer has decided to utilise a clean, legible sans-serif font so that the information is clear and easy to digest.
- Moreover, the website also makes use of a simple colour scheme consisting of black and white. The use of a dark background with white visual elements placed on top directs viewer focus to important information such as the company logo.
- The designer has also utilised the width of the page to his full advantage. Unlike other more poorly designed websites 'Tool' uses the full width of the page for its graphic elements, this leaves negative space which also helps to give the site a sleek minimalist feel.
- In terms of navigation the website is also very successful, links to other parts of the site are placed at the top of the page, they are easy to find due to their location and contrast created between the two colours.
- After clicking the 'View Reel' link on the home page a video started playing, unlike other websites the video played at the full size of the screen (see image 2). Personally, i think that this was a really nice touch and gave the website a real upmarket feel.
- Finally, I followed the 'work' link found at the top of the page, it took me through to a page that showcased different projects. The layout that the designer has used on this section works effectively at displaying the projects in a functional yet aesthetically engaging way. Each project is displayed with an image and a selection of information regarding the works title and director.
- Overall, I think this is a very successful website, the designer has created a site that communicates its purpose redundantly, navigates well and holds viewer attention with engaging graphic elements.
Links are placed at the top of the site.
The video was displayed full screen.
Projects are displayed in a really ordered format.
ARNGREN
This is another example of a bad website;
- AHHHHHHHHH.
- The first image shows what the viewer is greeted by upon first opening the page, an overwhelming composition of commercial goods and information.
- Too much information is displayed on this page, its an eye sore and completely lacks functionality.
- The target audience is parents and grandparents, as they are most likely to use catalog style websites to buy cheap commercial gifts. One thing is for certain, if my grandparents opened this site it would most likely scare them to their inner core, the computer would never be touched again.
- Finally, the lack of any composition seriously affects the aesthetic quality of the piece. Such is the lack of order that the page becomes painful to view, any piece of design work (unless justifiable) that causes this effect on the viewer has failed miserably in terms of composition and aesthetics.
STICKS & STONES OUTDOOR ADVENTURE
Next, I decided to look at this badly designed website created for an outdoor adventure magazine;
- Firstly, upon first opening
the homepage the viewer is greeted by a dull, uninviting combination of
graphic elements, advertisements and links. The unpalatable grey
background colour gives the website a boring, commercial feel, with a
target audience of outdoors driven hunters this is far from suitable.
- Moreover, the arrangement of
the graphic elements such as the advertisements and links are placed in
a confusing, unorganized fashion.
- Additionally, upon first
opening the website I thought that it was promoting an
outdoor pursuits supply shop, when in fact it is promoting a hunting
magazine. The sites concept is not immediately communicated due to the lack of immediate information.
- The designer has
decided to utilize the thin column style template that a lot of
poorly designed websites seem to have in common. Utilizing this style of composition leaves a large amount of unwanted negative space at either side of the sites elements, causing the site to look out of proportion with the page.
- With a messy layout like the one showcased below I would hate to think what the magazines composition is like.
- After following one of the links I was taken through to a separate page (image 2) which is equally if not more uninviting than the home page. Simply consisting of a dull grey background, header and links the page is far from suited to its target audience.
The messy homepage.
100 ans de tour
Finally, I decided to finish with a very successful website that visually displays information about the past 'Tour de France' competitions;
- Firstly, the home page that the viewer is initially greeted by is minimal in its appearance and yet instantly communicates the websites content. The designer has included small graphic elements such as the cog logo to add further context to the simple home page.
- Moreover, a lot of thought has also been put into the site aesthetics. Firstly, during the 'Tour de France' the lead cyclist is given a yellow racing jersey, the colour scheme clearly reflects this which adds further relevance to websites aesthetics. The target audience, who I assume would be interested in the 'Tour De France' would instantly recognize the relevance of this chosen colour scheme. Furthermore, the black used for the typeface and other graphic elements creates a clear contrast to the primary yellow colour, leaving all elements clearly distinguishable.
- The sans-serif typeface has been used consistently across the site and is clearly legible at various size.
- The designer has also successfully utilized a full screen composition, absent of the restrictive column designs featured by other websites. Utilizing the full screen allows the designer to be much more flexible with the composition of graphic elements, in this case they have been arranged into a balanced, ordered fashion which helps with the navigation of the site.
- One thing that really stood out to me when exploring the site was the innovative style of site navigation. After viewing the home page the audience are presented with a panel style grid of dates, each linking to a specific year the 'Tour De France' took place. I think that this is an ingenious way of displaying an otherwise boring, information heavy page, it enables the viewer to interact with the site in a more engaging fashion.
- Moreover, upon following one of the dates the audience is taken to an illustration of Europe, the viewers focus is attracted to France, which has been rendered completely in black. Furthermore, relevant information about that tour can be found around the edges of the illustration.
- Finally, another element of the website that really showcases the designers creativity is comparison page, here the audience can select and compare statistics from two different years that the 'Tour De France' took place. The information has been rendered in an redundant infographic style, and is also displayed in an engaging fashion making it easy for the audience to digest.
Unusual site navigation.
The comparative page of the site.
No comments:
Post a Comment