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] (/articles/2018-2019/images/hannah_perenoel.png)

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] (/articles/2018-2019/images/hannah_portbrew2.png)

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] (/articles/2018-2019/images/hannah_portbrew3.png)

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] (/articles/2018-2019/images/hannah_portbrew5.png)

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

![product page port brew] (/articles/2018-2019/images/hannah_portbrew4.png)

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