Design <title> <link rel=stylesheet type="text/css" href="styles.css"> <head> <body> <div id="nav"> <ul> <li class="hori"><a href="index.html"> Home </a></li> <li class="hori"><a href="design.html"> Design </a></li> <li class="hori"><a href="function.html"> Function </a></li> <li class="hori"><a href="targetaudience.html"> Target Audience </a></ </ul> </div> <div id="bd"> <center> <h2> Burnett Dairy Cooperative </h2> <h3> website design analysis </h3> </center> <table> <tr> <td> <b>Proximity: </b> This site demonstrates good use of proximity between the page content and the navigation bar. By doing so, each element is distinguished as separate from each other. In the body content, the three elements are distinguished clearly by spacing them out. </td> <td> <center> <image src="images/bdproximity1.gif"> <center> <image src="images/bdproximity2.gif"> </td> </tr> <tr> <td> <br/> <b>Alignment: </b> Throughout this site, the pages change from a three column grid alignment to a two column grid alignment. The top alignment of the large heading, emphasised with the navigation bar below it, gives a solid and tried and proven feel to the website. This website complies with the traditional western convention of reading from left to right, hence increasing efficient usage of this site. </td> <td> <center> <image src="images/bdalignment.gif"> </td> </tr> <tr> <td> <br/> <b>Repetition: </b> The repeated colour scheme as well as header and navigation bar in the same location creates order and unity in this composition. The font varies very slightly in this website, with small headings and text being in the same font and the style of heading and text being repeated in applicable element. The site has been able to establish visual rules that instil confidence in the viewer while promoting the sophistication of this dairy and hence their products. </td> <td> <a href="http://burnettdairy.com/history/"> <center> <image src="images/bdrepetition.gif"> </a> </td> </tr> <tr> <td> <br/> <b>Contrast: </b> Contrast is not overtly used in this website, however the variance in colour of elements does separate and visually unrelated them together, making navigation of this website effective. </td> <td> <center> <image src="images/bdcontrast.gif"> </td> </tr> <tr> <td> <br/> The main colour palette is red/brown, beige, charcoal and light brown. This allows the site to seem sophisticated, peaceful and sophisticated. <br/>The size of the headings is size 18, and the size of the body text is 12, both in the font of Verdana. To emphasise the main points of the page in this website, size 12 Times New Roman font is used to summarise the main idea of the page. <br/>This site does not use icons for navigation. </td> <td> <center> <image src="images/bdfonts.gif"> </td> </tr> <tr> <td> <br/> This site design is effective is attracting and keeping likely viewers satisfied. It is very easy to navigate and interact with. The soft warm tones making viewing this site all the more pleasant and the logical alignment of the site further elucidates the effectiveness of the deign of this website </td> </tr> </table> </div> <div id="in"> <center> <h2> Incubus </h2> <h3> website design analysis </h3> </center> <table> <tr> <td> <b> Proximity: </b> This site demonstrates good use of proximity between the page content and the navigation bar. By doing so, each element is distinguished as separate from each other. In the body content, the elements are spaced out and divided by a horizontal divide so they are not visually connected. </td> <td> <center> <image src="images/inproximity.gif"> </td> </tr> <tr> <td> <br/> <b> Alignment: </b> There is a simple almost two column alignment in this website; where the content is one large column and the navigation bar is a smaller (but still significant in size) column. The top alignment of the heading gives a solid and tried and proven feel to the website, however the right alignment of the navigation bar is a bit disorientating, though it can provide a strong and definite finishing line for the eye. The centre alignment of all the page content makes the website a bit weak in alignment, though this is countered by the strong contrast of the body margin to the background. </td> <td> <center> <image src="images/inalignment.gif"> </td> </tr> <tr> <td> <br/> <b> Repetition: </b> The consistency of the font and colour used in each page, as well as the size of the font and the headings as well as spacing between each heading and the paragraph has created order and unity in this composition which could easily be considered an arbitrary placement of elements. Because this is similar for each page in this site, it creates confidence in the viewer that they are viewing and understanding the site properly. The site has been able to establish visual rules that allow them to create emphasis by breaking these rules if they so wished to make a large visual emphasis on the viewer. </td> <td> <center> <image src="images/infonts.gif"> </td> </tr> <tr> <td> <br/> <b> Contrast: </b> Established contrast is used extensively in this site. The purple headings in a larger size than the black, smaller text allows the reading to skim read through the elements till they reach one of interest. Although the different elements are not largely visually contrasted, the use of purple (a heavy purple border and purples splashes) on the ordered black and charcoal striped background is visually startling and keeps the eyes focused on the main content of the website </td> <td> <center> <image src="images/incontrast.gif"> </td> </tr> <tr> <td> <br/> The main colour palette is white, purple, black and charcoal. This allows the purple to create a large contrast and hence emphasis, while the white neutralises what could potentially be too visually startling. <br/> The size of the headings is size 18, and the size of the body text is 12, both in the font of Trebuchet. The whole website uses only one font, which is effective in establishing consistency. <br/> This site does not use icons for navigation. </td> <td> <center> <image src="images/intypefaces.gif"> </td> </tr> <tr> <td> <br/> This site design is effective in grabbing the attention of a viewer and compelling them to explore. However, those who are not likeminded, impatient or not so web experienced, this site would prove to be difficult to navigate and hence use. For the target audience, this site would be fine to use, however the unusual alignment and the lack of strong structure will disorientate many viewers. </td> <td> </td> </tr> </table> </div>