Rainydays website

The Rainydays website is a e-commerce shop for sport and outdoors jackets.

UX improved version

The main branch is the starting point where the UX improvements have been made.

The improved version is available in the branch improvements: https://github.com/FP22FD/raindays-website-Interaction-Design-CA/tree/improvements. Details in the Readme.

The deployed versions are:

• original static website (without API): https://luxury-halva-7c3f63.netlify.app
• Improved Website with API, before UX improvements: https://glistening-hummingbird-317e80.netlify.app/
• Final Website with UX improvements (improvements branch): https://improvements--glistening-hummingbird-317e80.netlify.app/

Description

The main goal of this repository is to implement the Figma design I made for the Rainydays website in the previous CA.

The website implementation has been made with HTML and CSS to practice:

• responsive design (concepts, media queries, etc),
• semantic html 5,
• DRY (css variables, structured code, etc),
• image optimization,
• accessibily concepts (WCAG),
• developer tools (VS Code, Prettier, DevTools, Github, Netlify, etc)
• code validation tools

Implemented structure flows:

• users can access the site by desktop and mobile devices (breakpoint at 800px).
• users will be able to browse all available products and pay for them at checkout.
• the site has a public GitHub repository and is deployed using Netlify.

The website code has been validated using the following tools:

• check html validity: https://validator.w3.org/

• check css validity: https://jigsaw.w3.org/css-validator/

• check redirect links: https://validator.w3.org/checklink

Dependencies

To develop the website I have used Visual Studio Code with Prettier formatter extension.

No other tools are required to compile or run the website.

The Figma prototypes from the previous CA:

• Figma Mobile prototype
• Figma Desktop prototype

NB. The implemented website version is slightly different, because few improvements to the Figma/design files were made based on the Design course feedbacks from the Tutor.

References

• flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• css grid guide: https://css-tricks.com/snippets/css/complete-guide-grid/
• css selectors reference: https://www.w3schools.com/csSref/css_selectors.php
• Hamburger menu based on HTML and CSS Task 3.4: https://vimeo.com/481725388/ee9b0cfbc3
• How to overlap grid items: https://mastery.games/post/overlapping-grid-items/
• Plugin for extra image [about us]: https://unsplash.com/