Ergonomie et design UX

Portfolio

I developed this application as a part of my Master’s course STIC (Sciences et Technologies de l’Information et de la Communication).

The application is aimed at people interested in knowing more about UX design and ergonomics, and especially for those interested in designing for colour-blind people. The “Glossary” application serves therefore as an introduction to the subjects of UX design and ergonomics and it lays the basis for the others concepts, accessible through tabs on the same page. This helps them to easily find (or come back to) the information they’re more interested in. The page is composed of two sections: a brief introductions and the glossary, where the definitions are accessible by hovering with the mouse over the images. The single images are part of a larger image that has been cropped in 9 parts. At the bottom of the page, a button allows to go back to top. This is mainly useful in the third tab (“Bonnes pratiques”), as the text is quite long.

I chose to use the imagehover animation (Bootstrap) because it is an elegant solution for a glossary page, instead of having a simple list of terms. The structure of the page is relatively simple and the application is responsive, as it is developed using Bootstrap.

Have fun!

I’ve used Visual Code Studio to code the pages (CSS, HTML and Javascript). I used Bootstrap to make the application responsive. More detailed credits (images, sound) are available in the application page. This application collects some of the works I did in previous exercises of my Master’s course. The Report pages for each of the tabs gathered in this application are available at these links (hosted on the Geneva University server): Javascript simple application, Interactive video, Bootstrap, Javascript Drag & Drop.