Giai đoạn 1: Thiết kế giao diện và tương tác tại Trang chủ
Ở giai đoạn này bạn sẽ thiết kế trang chủ cho website. Trang chủ giới thiệu các thông tin chung về thương hiệu và sản phẩm. Bên cạnh đó, người dùng có thể Đăng nhập hoặc Đăng ký tại đây.
Yêu cầu
1. Trang chủ được chia làm 5 sections: Slider, Sản phẩm mới, Về thương hiệu, Các sản phẩm và Phản hồi khách hàng
1.1. Header – Thanh công cụ đầu trang
- Khi người dùng nhấp chuột vào vị trí số (1), dù đang ở trang nào cũng sẽ luôn quay về trang chủ;
- Thanh công cụ sẽ hiện ra khi người dùng nhấp chuột vị trí số (2):
- Trang sẽ tự động chuyển sang “Trang Đăng nhập” khi người dùng nhấp chuột vào vị trí số (3).
1.2. Slider:
- Người dùng sẽ đi đến “Trang Chi tiết sản phẩm” khi nhấp chuột vào vị trí (4) và chuyển sang nội dung khác khi nhấn vào button ở vị trí (5);
- Khi nhấp chuột vào vị trí (6), người dùng sẽ đi đến “Trang Sản phẩm”.
1.3. Sản phẩm mới:
Khi người dùng rê chuột vào các box trong section “Sản phẩm mới”, box sẽ hiện tương tự như hình số (7):
1.4. Về chúng tôi:
Người dùng sẽ đi đến “Trang Về chúng tôi” khi nhấp vào button (8):
1.5. Các sản phẩm Bán chạy, Giảm giá, Nổi bật:
Khi người dùng nhấn vào button (9), trang sẽ chuyển thành “Trang Sản phẩm”:
1.6. Phản hồi của khách hàng:
- Khi người dùng nhấn vào mũi tên hướng trái/phải tại vị trí (10), nội dung và hình anh tại section này sẽ thay đổi;
- Người dùng sẽ quay trở lại đầu trang khi nhấn vào button (11).
2. Trang Đăng nhập
- Người dùng có thể nhập thông tin sau khi hoàn thành phần Đăng ký và nhấn button (12) để đi đến “Trang chủ”, lúc này header đã thay đổi ở vị trí (*)
- Người dùng nhấn button (13) để đi đến popup “Đăng ký”:
3. Trang Đăng ký:
- Người dùng tick vào ô ở vị trí (14) mới có thể nhấn được button (15):
Tài liệu
Bạn xem và tải tài liệu tại đây.
Gợi ý cho bạn
- Tạo slider tại trang chủ với Slick và Slick for React;
- Tạo ra các Section trên trang chủ với Grid Layout (Sematic UI hoặc Bootstrap);
- Tạo Form (Semantic UI hoặc Bootstrap)
- Tạo Pop-up (Modal) với Semantic UI hoặc Bootstrap.
Related Posts
Leave a Reply Cancel reply
Categories
- Bài viết (1)
- Blog (24)
- Code Review (3)
- Course Introduction (2)
- CSS (4)
- CSS Grid (4)
- Javascript (2)
- Lesson (11)
- Lưu dữ liệu trên trình duyệt (1)
- Network Requests (1)
- OneDirect Projects (1)
- Product Review (3)
- Stage Content (16)
- WCS Courses Content (17)