Web Design
Fashion Prototype Website
Midterm project for Web Development 2 with the application of learning ARIA Accessibility, Schema, and CSS Animations
Year :
2024
Industry :
Commerce
Client :
Algonquin College
Project Duration :
3 Weeks
Overview
We were tasked to build the Figma file into a website prototype for our midterm project. The desktop layout for the site is given, the challenge is to build another two pages for the site and compose a layout.
Since desktop layout has been given, I have to do a wireframe sketch for mobile and tablet layout of the webpage design.
"New Arrivals" Section
Seeing this section for the first time is a bit tricky on my perspective. I've thought of reducing scroll, but at the same time, I also want to showcase each category in this section. For the tablet layout, I converted the usual vertical card to a horizontal card layout at least the users can see all categories right way.
Adding forms
Adding form is easy, but the validation becomes the challenge for me since this is my first time encountering this concept. So what I did is to search for proper input types, added an aria-required property so the user won’t be able to skip or forget any component that is required. Adding a min and max property for password as I have stated in the label that it should be maximum of 8 characters only.
More Projects
Web Design
Fashion Prototype Website
Midterm project for Web Development 2 with the application of learning ARIA Accessibility, Schema, and CSS Animations
Year :
2024
Industry :
Commerce
Client :
Algonquin College
Project Duration :
3 Weeks
Overview
We were tasked to build the Figma file into a website prototype for our midterm project. The desktop layout for the site is given, the challenge is to build another two pages for the site and compose a layout.
Since desktop layout has been given, I have to do a wireframe sketch for mobile and tablet layout of the webpage design.
"New Arrivals" Section
Seeing this section for the first time is a bit tricky on my perspective. I've thought of reducing scroll, but at the same time, I also want to showcase each category in this section. For the tablet layout, I converted the usual vertical card to a horizontal card layout at least the users can see all categories right way.
Adding forms
Adding form is easy, but the validation becomes the challenge for me since this is my first time encountering this concept. So what I did is to search for proper input types, added an aria-required property so the user won’t be able to skip or forget any component that is required. Adding a min and max property for password as I have stated in the label that it should be maximum of 8 characters only.
More Projects
Web Design
Fashion Prototype Website
Midterm project for Web Development 2 with the application of learning ARIA Accessibility, Schema, and CSS Animations
Year :
2024
Industry :
Commerce
Client :
Algonquin College
Project Duration :
3 Weeks
Overview
We were tasked to build the Figma file into a website prototype for our midterm project. The desktop layout for the site is given, the challenge is to build another two pages for the site and compose a layout.
Since desktop layout has been given, I have to do a wireframe sketch for mobile and tablet layout of the webpage design.
"New Arrivals" Section
Seeing this section for the first time is a bit tricky on my perspective. I've thought of reducing scroll, but at the same time, I also want to showcase each category in this section. For the tablet layout, I converted the usual vertical card to a horizontal card layout at least the users can see all categories right way.
Adding forms
Adding form is easy, but the validation becomes the challenge for me since this is my first time encountering this concept. So what I did is to search for proper input types, added an aria-required property so the user won’t be able to skip or forget any component that is required. Adding a min and max property for password as I have stated in the label that it should be maximum of 8 characters only.