Web ergonomics

Web ergonomics

My work this week was dedicated to learning about web ergonomics. To do so I worked in two parts

Part 1 : Studying an old website that was far from ergonomic

I had to find an old website that didn't adhere to the rules of ergonimcs, for this I found a website that allowed children to get in contact with father christmas. I did a study of the website writing down positive and negative aspects of the site. Following this stage I had to make the aspect of the site look better, so I changed the colors, the font and the layout slighty. I got rid of the double menu and I got rid of the pictures that were all different styles.

site père noël et amélioration

The top part of this picture is the site I found and the second part of the picture is how I would make it better

Once I finished the study of this site, my next goal was to create a webdesign.

Part 2 : Webdesign for a craft beer brewery

So for my webdesign I had Carte blanche, I decided to create an e-commerce site that sells beer. For this I found an existing site that I thought didn't work with the theme of beer. Therefore I used the name of the brand, its information and its media to create a webdesign I thought would be more adapted. I chose to use colors that reminded us of beer so tones of yellow and to contrast this I also used tones of blue. Aswell and the home page I designed a page for the product list, a page with the description of each product, the basket page and finally a page about how the beer is made. On all of these pages I created a second version where I added the hover effects, to show what would happen when the cursur hoverd over something.

The Home page is the image you can see as a banner for my article

home page port brew with hover

In this image you can see what the hover effects would be present on the home page if the site was created, including scroll down menus.

product page port brew

This picture is of the product list page, were you can see the product name, a review and can add the product to your cart.

product page port brew

Here you can see the cart page as if you had some products added in the cart.

product page port brew

Finally this is the product page where you can see a description of each product.

This week was very instructive for me, and compared to the first webdesigns I created I find there is a big evolution and my work is getting better.

Hannah Ford