Thiết Kế Website Cửa Hàng Bán Quần Áo | Môn Thiết kế Web - Đại học Công Nghệ Đông Á

lOMoAR cPSD| 60752940
Bài tập lớn môn Thiết Kế Web
Đề tài: Thiết kế giao diện Website bán quần áo I. Giới thiệu
1. Lý do chọn ề tài •
Thế giới ngày nay càng phát triển, ời sống con người ngày càng hiện ại hóa.
Do ó, quần áo rất ược nhiều người ưa chuộng và yêu thích •
Hiện nay thì nhu cầu mua sắm online ngày càng phát triển, nhu cầu mua sắm
thời trang trực tuyến là rất lớn. Ngày càng có rất nhiều các cá nhân, doanh
nghiệp, tổ chức quan tâm ến lĩnh vực này ể kinh doanh, quảng cáo. •
Các phương tiện kĩ thuật và công cụ thiết kế website ngày càng ơn giản,
rộng rãi ể thiết kế, xây dựng. •
Từ ó, em ã quyết ịnh chọn ề tài “Thiết kế Website cửa hàng bán quần áo”,
xây dựng thử nghiệm web mua sắm trực tuyến theo mô hình kiến thức của
thầy và giáo trình. Thông qua ó em có thêm hiểu biết, nắm rõ hơn về lĩnh
vực thiết kế website môt cách hiệu quả nhất.
2. Phân tích của ề tài a) Yêu cầu • Yêu cầu chung: •
Thiết kế trang website cho cửa hàng bán quần áo là một trang web về bán
hàng, vậy ể phục vụ kinh doanh qua mạng ược thuận tiện , trang web cần
phải áp ứng các tiêu chú chủ yếu sau: o Bố cục phải hợp lí và rõ ràng o Giao
diện phù hợp, ấn tượng, nổi bật
o Trang chủ phải tóm tắt, sơ lược ược mô hình cửa hàng (công ty); ể khách
hàng hình dung ược mình ang bước vào một cửa hàng(công ty) thực sự
o Các trang con , trang liên kết phải nêu lên chi tiết từng sản phẩm có trong cửa hàng( công ty) b) Chức năng •
Thiết kế và hỗ trợ những trang web tốt nhất cho các công ty kinh doanh. •
Hình thành nên những mạng lưới kinh doanh rộng lớn trong và ngoài nước. •
Tạo sựu gắn kiết và trao ổi buôn bán dễ hơn giữa cửa hàng( công ty) với khách hàng. •
Hỗ trợ cho hình thức kinh doanh qua mạng. •
Tăng tính thuận lợi, nhanh chóng cho các cửa hàng( công ty) kinh doanh. •
Đem lại nhiều sự lựa chọn, tư vấn nhiệt tình giữa nhân viên bán hàng với
khách hàng, tạo một cầu nối giữa cửa hàng( công ty) với khách hàng. lOMoAR cPSD| 60752940 3. Kết luận •
Phân tích và thiết kế website theo kiến thức ã học của môn thiết kế web.
Thiết kế giao diện hài hòa về màu sắc, bố cục giao diện dễ nhìn. •
Tạo ược giao diện với một số chức năng cơ bản. •
Sử dụng thành thạo các thẻ trong HTML. •
Phân loại sản phẩm theo danh mục. •
Nắm ược các bước cơ bản trong thiết kế web, hiển thị từng loại sản phẩm,
các hạng mục cùng với những bộ sưu tập mới nhất và các mặt hàng khác a
dạng các loại cho khách hàng lựa chọn •
Website cửa hàng phải có sựu kiên kết với nhau: Các trang trong một thiết kế
cần phải có liên kết với nhau một cách chặt chẽ khi người dùng muốn chuyển trang. •
Thời gian tải nhanh : Nếu website của bạn không áp ứng ược thời gian tải thì
sẽ không thể giữ chân ược khách hàng ến với cửa hàng.
II. Kế Hoạch Thực Hiện
• Từ ngày 01/03/2021 ến ngày 03/03/2021 : tham khảo tài liệu, website khác
• Từ ngày 04/03/2021 ến ngày 05/03/2021 : tìm kiếm thưu viện ảnh
• Từ ngày 06/03/2021 ến ngày 15/03/2021: Thiết kế sơ bộ(bản thảo bằng phần
mềm), phối màu (chọn màu theo tiêu chí nào trong bán xe màu Color
Wheel), chọn font, cỡ font.
• Từ ngày 16/03/2021 ến ngày 31/03/2021 : Thực hiện trên máy
• Nộp bài tập lớn vào ngày: 06/04/2021
III. Các Phần Mềm Và Các Ngôn Ngữ Sử Dụng •
Photoshop CS6, Photoshop 2020 •
HTML, CSS, Subline text 3 • Chrome
IV. Ý Tưởng Thiết Kế
 Số lượng trang: 1 trang chủ và 9 trang con
 Gam màu chủ ạo: Tím nhạt, Trắng, Xanh 
Font chữ sử dụng :
a) Segoe Script cho logo
b) Courier New cho Header Top
c) Arial cho Header Bot
d) Arial cho tất cả phần Content lOMoAR cPSD| 60752940
V. Bố cục layout và cách thức thiết kế 1. Logo 2. Trang chủ a. Header
⚫ Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 4 phần theo chiều ngang
• Phần 1: Banner quản cáo
• Phần 2: Thời trang nam
• Phần 3: Thời trang nữ
• Phần 4: Quần áo cặp ôi c. Footer
• Địa chỉ và số iện thoại từng chi nhánh của shop
• Các trang liên kết, châm ngôn của shop lOMoAR cPSD| 60752940 2000 px lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm
3. Trang hàng quốc tế Header ⚫
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 3 phần theo chiều ngang
• Phần 1: Dòng sản phẩm 1
• Phần 2: Dòng sản phẩm 2
• Phần 3: Dòng sản phẩm 3 c. Footer
• Địa chỉ và số iện thoại từng chi nhánh của shop
• Các trang liên kết, châm ngôn của shop lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm 4. Trang SaleOFF Header ⚫
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 2 phần theo chiều ngang
• Phần 1: Dòng sản phẩm 1
• Phần 2: Dòng sản phẩm 2 lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm c. Footer
 Địa chỉ và số iện thoại từng chi nhánh của shop 
Các trang liên kết, lời cam kết của shop
5. Trang Ưu ãi thành viên Header ⚫ lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 1 phần theo chiều ngang
 Phần 1: Dòng sản phẩm 1 c. Footer
 Địa chỉ và số iện thoại từng chi nhánh của shop 
Các trang liên kết, lời cam kết của shop lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm 6. Trang giỏ hàng Header ⚫
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 2 phần theo chiều ngang
• Phần 1: Dòng sản phẩm 1
• Phần 2: Dòng sản phẩm 2 c. Footer
 Địa chỉ và số iện thoại từng chi nhánh của shop 
Các trang liên kết, lời cam kết của shop lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm
7. Trang khung giờ săn sale Header ⚫
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 2 phần theo chiều ngang
• Phần 1: Dòng sản phẩm 1
• Phần 2: Dòng sản phẩm 2 lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm c. Footer
 Địa chỉ và số iện thoại từng chi nhánh của shop 
Các trang liên kết, lời cam kết của shop
8. Trang voucher Header ⚫ lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 1 phần theo chiều ngang
 Phần 1: Dòng sản phẩm 1 c. Footer
• Địa chỉ và số iện thoại từng chi nhánh của shop
• Các phương thức thanh toán và ơn vị vận chuyển của shop lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm 9. Trang ăng nhập Header ⚫
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 1 phần theo chiều ngang
 Phần 1: Dòng sản phẩm 1 c. Footer
• Địa chỉ và số iện thoại từng chi nhánh của shop
• Các phương thức thanh toán và ơn vị vận chuyển của shop
• Các phương thức thanh toán và ơn vị vận chuyển của shop lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm N ội dung đăng nhậ p 10. Trang ăng kí a. Header ⚫
⚫ Header Bot: Hàng quốc tế, Siêu sale, Ưu ãi thành viên, Voucher, Khung giờ săn sale
b. Content: Chia làm 1 phần theo chiều ngang
 Phần 1: Dòng sản phẩm 1 lOMoAR cPSD| 60752940 a.
Header Top: Đăng ký, Đăng nhập, Giỏ hàng,Tìm kiếm c. Footer
• Địa chỉ và số iện thoại từng chi nhánh của shop
• Các trang liên kết, lời cam kết của shop N ội dung đăng kí lOMoAR cPSD| 60752940
VI. Sơ ồ liên kết Website Đăng nhập Đăng kí Trang chủ Giỏ h ng Ưu đãi thành Hng qu ố c t ế Khung gi ờ viŒn săn sale Sale off Voucher VII. Giao diện Website 1. Trang chủ lOMoAR cPSD| 60752940 lOMoAR cPSD| 60752940 2. Trang Đăng ký 3. Trang Đăng nhập lOMoAR cPSD| 60752940
4. Trang hàng quốc tế lOMoAR cPSD| 60752940 5. Trang giỏ hàng 6. Trang sale off