(Tiểu luận) báo cáo đề cương môn thiết kế và triển khai web thương mại điện tử đề tài thiết kế website kinh doanh balo, túi xách học sinh

PHẦN 1: ĐẶT VẤN ĐỀ- Đề tài: Thiết kế website kinh doanh balo, túi xách cho học sinh - Sinh viên thực hiện: Phạm Thị Thùy Duyên II.. Chính vì vậy, việc tạo ra một website thương mại điện

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI

KHOA KINH TẾ

BÁO CÁO ĐỀ CƯƠNGMÔN : THIẾT KẾ VÀ TRIỂN KHAI WEB THƯƠNG MẠI ĐIỆN TỬ

ĐỀ TÀI:

THIẾT KẾ WEBSITE KINH DOANH BALO, TÚI XÁCH HỌC SINH

Giảng viên hướng dẫn : Th.S Nguyễn Thị Quỳnh Như

Sinh viên thực hiện : Phạm Thị Thùy Duyên

Hà Nội 2022

PHẦN 1: ĐẶT VẤN ĐỀ

- Đề tài: Thiết kế website kinh doanh balo, túi xách cho học sinh

- Sinh viên thực hiện: Phạm Thị Thùy Duyên

II Lý do chọn đề tài

- Balo, túi xách hiện nay không còn là món đồ xa lạ đối với học sinh, sinh viên Cùngvới sự phát triển mạnh mẽ của ngành thời trang, giờ đây mỗi chiếc balo hay túi xách không chỉđơn giản là một vật dụng giúp chúng ta đựng đồ dùng, bảo quản đồ dùng mà còn là một phụ kiệntuyệt vời làm nổi bật lên phong cách của giới trẻ

- Với sự nhanh nhạy của giới trẻ, khi mà công nghệ đang được toàn cầu hóa, không khó

để có thể tìm mua bất cứ thứ gì, balo và túi xách cũng không ngoại lệ Thay vì đi một vòng quanhtrung tâm thương mại, siêu thị hay chợ; các bạn trẻ thường tìm chúng ở trên mạng xã hội, xem thông tin, xem đánh giá tại các website và đặt mua online

- Chỉ bằng một vài thao tác trên điện thoại người dùng đã có thể sở hữu được một chiếc balo hay túi xách mà không cần mất nhiều thời gian hay công sức Chính vì vậy, việc tạo ra một website thương mại điện tử kinh doanh sản phẩm balo và túi xách sẽ giúp tăng doanh thu bán hàng, giảm chi phí cho việc quảng cáo, đơn giản hóa quá trình mua bán, đặc biệt là việc làm hài lòng khách hàng và mở rộng được thị trường

III Cơ sở thực tiễn của đề tài đã chọn

- Như chúng ta đã biết, xu hướng sử dụng Internet của giới trẻ ngày càng cao, việc mua sắm online cũng phát triển theo đó

- Nắm bắt được hành vi mua sắm mới này, các doanh nghiệp đã dần chuyển đổi phương thức kinh doanh từ trực tiếp sang xây dựng website mại điện tử để bán hàng online

2

- Đặc biệt, thế hệ trẻ càng ngày càng năng động, ưa sáng tạo ,thích thể hiện mình, đi đầu trong công nghệ, do đó việc các doanh nghiệp kinh doanh balo và túi xách trên nền tảng internet

sẽ giúp thoả mãn lợi ích của cả hai bên

IV Mục tiêu

Thiết kế được website thương mại điện tử kinh doanh sản phẩm balo và túi xách phục

vụ hai đối tượng là doanh ghiệp và khách hàng:

+ Đăng nhập, quản lý được trang web

+ Cập nhật, xem, xóa thông tin sản phẩm

+ Cập nhật tin tức, ưu đãi,

+ Chăm sóc, tư vấn khách hàng

+ Xem được tin tức của trang Web

V Kết quả mong muốn

- Đối với Doanh nghiệp: Website đạt được có đầy đủ các chức năng theo đúng yêu

cầu của một website thương mại điện tử: Chức năng hiển thị (hiển thị hình ảnh,thông tin sản phẩm, khuyến mãi, ưu đãi); chức năng điều hướng, chức năng giỏhàng, chức năng thanh toán Giao diện thiết kế thu hút, banner ấn tượng,

- Đối với Khách hàng: dễ dàng tìm kiếm sản phẩm phù hợp, mua hàng nhanh chóng, hợp lí, giao diện thân thuộc và dễ sử dụng

VI Kế hoạch thực hiện:

- Ngày 21/10: Nộp đề cương bài tập lớn

- Ngày 27/10: Nộp đề cương lần 2

- Ngày 28/10: Nộp thiết kế trang chủ

- Ngày 4/11: Nộp thiết kế trang con chính

PHẦN 2: NỘI DUNG

I Cấu trúc thiết kế website

1 Số lượng trang: 16 trang

Bao gồm: 1 trang chủ, 4 trang con chính, 9 trang con chi tiết,1 trang giỏ hàng, 1 đăng nhập

Bao gồm: trang chủ, trang con chính, mức trang con chi tiết, trang mô tả, mức giỏ hàng và trang đặt hàng

3 Gam màu:

- Website kinh doanh balo, túi xách được thiết kế với cách phối màu đơn sắc:

- Gam màu chủ đạo: màu đỏ có mã #CF202F là một màu nổi bật, gây được ấn tượng mạnh mẽ Màu đỏ thể hiện cho sự nhiệt huyết, năng động, mạnh mẽ, tự tin; biểu trưng cho sức mạnh và những điều tích cực

- Màu nền: màu đỏ nhạt có mã #FF6ED mang lại sự hòa hợp , thân thiện

4

- Màu phụ: màu trắng với mã màu #FFFFFF – sắc màu trung lập, tối giản, nhẹ nhàng,

dễ dàng hài hòa với hình ảnh, văn bản,nút và biểu tượng; màu đen #000000 dùng để trình bày nộidung văn bản

4 Sơ đồ Website – sơ đồ phân cấp liên kết các trang web

5 Ý tưởng thiết kế các thành phần trang web

Header bao gồm: logo, mục balo, túi xách, thanh tìm kiếm, giỏ hàng, đăng

nhập - Logo: Logo là tên trang web , nằm ở góc trái header

- Thanh tìm kiếm nằm giữa header

- Mục balo và túi xách điều hướng khách hàng đến các trang con sản phẩm

- Giỏ hàng :Chứa sản phẩm mà khách hàng đã thêm trong quá trình mua sắm Nếu khách hàng quyết định đặt hàng, giỏ hàng sẽ chuyển sang trang thông tin đơn hàng, thông tin thanh toánvà đặt hàng Ở đây, người dùng cung cấp đầy đủ thông tin về họ tên, số điện thoại, địa chỉ, ghi chú (nếu có ), bên cạnh đó là các thông tin về đơn vị vận chuyển và các phương thức thanh toán, sau đó ấn nút đặt hàng

Banner quảng cáo thiết kế hình chữ nhật, nằm dưới header Trên banner quảng cáo có

thể thiết kế hình ảnh các sản phẩm nổi bật của doanh nghiệp, cũng như những ưu đãi và slogan của doanh nghiệp

- Trang chủ sẽ hiển thị những sản phẩm mà doanh nghiệp đang kinh doanh

- Trang sản phẩm có độ sâu 2 mức, mỗi mức lại có 1 thiết kế riêng:

+ Trang con chính sản phẩm: Hiển thị các hình ảnh sản phẩm, giá tiền của chúng.+ Trang con chi tiết sản phẩm ( trang mô tả) : Là thông tin mô tả sản phẩm, tùy chọn màu, chọn số lượng, nút mua ngay và nút thêm vào giỏ hàng

- Trang giỏ hàng xuất hiện những sản phẩm mà khách hàng đã thêm , có hình ảnh , tên và đơn giá của sản phẩm, có nút thanh toán và có thể chọn nhiều sản phẩm cùng 1 lúc để đặt hàng

- Trang đặt hàng : Hiện sản phẩm mà khách chọn mua, số lượng và tổng giá thành tiền, chọn phương thức thanh toán điền thông tin và ấn nút đặt hàng

Footer: thiết kế mỗi trang đều giống nhau bao gồm:

Chăm sóc khách hàng

Hỗ trợ khách hàng : bảo mật, bảo hành, vận chuyển, thanh

toán Liên hệ shop

HÌnh1: Bản sketch trang chủ

b) Bản wireframe trang chủ

HÌnh 2: Bản wireframe trang chủ

c) Bản mockup trang chủ

8

HÌnh 3: Bản mockup trang chủ

2 Trang con chính sản phẩm: Hai trang balo và túi xách có thiết kế tương tự

nhau

a) Bản sketch trang con

Hình 4: Sketch trang con chính sản phẩm

b) Bản wireframe trang con chính

10

Hình 5: Bản wireframe trang con chính

c) B ản mockup trang con ( trang balo và trang túi xách là như nhau)

Hình 6 B ản mockup trang con chính

12

3 Gi ỏ h àng

Hình 7: Bản sketch giỏ hàng

b) Bản wifreframe giỏ hàng

Hình 8: Bản wireframe giỏ hàng

14

c) Bản mockup giỏ hàng

Hình 9: Bản mockup giỏ hàng

4 Trang đăng nhập

a) Bản sketch Trang đăng nhập

Hình 10: Bản sketch trang đăng nhập

16

b) Bản wireframe trang đăng nhập

Hình 11: Bản wireframe trang đăng nhập

c) Bản mockup trang đặt nhập

Hình 12: Bản mockup trang đăng nhập

18

5 Trang con chi tiết

Hình 13: Bản sketch trang con chi ti ết

b) Bản wireframe trang con chi ti ết

Hình 14: Bản wireframe trang con chi tiết

20

c) B ản mockup trang con chi ti ết

22

Hình 15: Bản mockup trang con chi tiết

Hình 17: Bản mockup trang đặt hàng

I Điểm nổi bật của trang Website:

- Trang Web đã có đa dạng mẫu mã sản phẩm

- Có đủ trang giỏ hàng , trang thanh toán, đăng kí, đăng nhập

- Màu sắc đẹp , thu hút, ấn tượng

II Vấn đề chưa đạt được so với ý tưởng thiết kế ban đầu:

- Chưa cập nhật được số lượng đơn đã bán và đánh giá sản phẩm

- Phần kết nối, liên kết ngoài chưa hoàn thành

TÀI LIỆU THAM KHẢO

Website Maia: https://mia.vn

Website phối màu Coolors: https://coolors.co/

Color hunt: https://colorhunt.co

Website Shopee: https://shopee.vn/

26

MỤC LỤC

PHẦN 1: ĐẶT VẤN ĐỀ 2

I Giới thiệu: 2

II Lý do chọn đề tài 2

III Cơ sở thực tiễn của đề tài đã chọn 2

IV Mục tiêu 2

V Kết quả mong muốn 3

VI Kế hoạch thực hiện: 3

PHẦN 2: NỘI DUNG 3

I Cấu trúc thiết kế website 3

1 Số lượng trang: 16 trang 3

2 Độ sâu: 5 mức 4

3 Gam màu: 4

4 Sơ đồ Website – sơ đồ phân cấp liên kết các trang web 4

5 Ý tưởng thiết kế các thành phần trang web 5

II Giao diện và trang web chi tiết được xây dựng 5

1 Trang chủ 5

2 Trang con chính sản phẩm: Hai trang balo và túi xách có thiết kế tương tự nhau 9

3 Gi ỏ h àng 12

4 Trang đăng nhập 15

5 Trang con chi tiết 18

6 Trang đặt hàng 21

PH ẦN 3: K ẾT LU ẬN 22

I Điểm nổi bật của trang Website: 23

II Vấn đề chưa đạt được so với ý tưởng thiết kế ban đầu: 23

TÀI LIỆU THAM KHẢO 23

TIÊU CHÍ ĐÁNH GIÁ CHUYÊN MÔN BTL Môn học: THIẾT KẾ VÀ TRIỂN KHAI WEBSITE TMĐT

Thiết kế Website Kinh doanh Balo , túi xách học sinh điểm quả

1. Bảng thiết kế tổng thể 3,0đ

Các chức năng đáp ứng được yêu cầu của người

dùng Trang trí đẹp, màu sắc hài hoà

Thống nhất ngôn ngữ trên các trang Web

Các công cụ hỗ trợ được sử dụng trong đề

0.5đ

3.5 đ

b Hiểu biết về nguyên lý thiết kế: Màu sắc, bố cục, tỉ lệ, chức