The Rainydays website is a e-commerce shop for sport and outdoors jackets.
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 (
improvementsbranch): https://improvements--glistening-hummingbird-317e80.netlify.app/
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
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:
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.
- 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/