BÀI TẬP LỚN MÔN THIẾT KẾ WEB ĐỀ TÀI THIẾT KẾ WEBSITE KINH DOANH RAU, CỦ, QUẢ CHO CỬA HÀNG RAU SẠCH

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

KHOA CÔNG NGHỆ THÔNG TIN

-BÀI TẬP LỚNMÔN THIẾT KẾ WEB

ĐỀ TÀI: THIẾT KẾ WEBSITE KINH DOANH RAU, CỦ,QUẢ CHO CỬA HÀNG RAU SẠCH

Sinh viên thực hiện: Nguyễn Văn Hiếu - 2210A02

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

Hà Nội, năm 2023 1

Mục lục

1.1.Giới Thiệu Chung 3

1.1.1 Tên đề tài: 3

1.1.2 Lý do chọn đề tài: 3

1.2.Phân Tích Yêu Cầu: 3

1.2.1 Chủ sở hữu của website: 3

1.2.2 Mục đích xây dựng website: 3

1.2.3 Đối tượng hướng tới: 4

1.2.4 Các chức năng mà website cung cấp: 4

1.2.5 Kết quả mong muốn: 5

II Nội Dung: 6

2.2.2 Bố cục layout trang con liên hệ: 9

2.2.3 Bố cục layout trang con đăng nhập: 10

2.2.4 Bố cục trang con đăng ký: 11

2.2.5 Bố cục trang con giỏ hàng: 12

2.2.6 Bố cục trang con danh mục sản phẩm: 13

2.2.7 Bố cục trang con chi tiết sản phẩm: 14

2.3.9 Trang danh mục - Trái cây: 24

2.3.10 Trang danh mục - sơ chế: 25

2.3.11 Trang danh mục - Giảm giá: 26

2.3.12 Trang chi tiết sản phẩm - Cải bẹ xanh: 27

2.3.13 Trang chi tiết sản phẩm sau khi cho vào giỏ hàng: 28

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

1.1.Giới Thiệu Chung

1.1.1 Tên đề tài: Thiết kế website kinh doanh rau, củ, quả cho cửa hàng Rau Củ

1.1.2 Lý do chọn đề tài:

 Kinh doanh rau, củ, quả là một hoạt động kinh doanh quan trọng trong ngành nông nghiệp Việc cung cấp những sản phẩm tươi ngon này không chỉ đáp ứng nhu cầu dinh dưỡng mà còn hướng tới sự tươi mới và sức khỏe của khách hàng Bán rau củ cũng đóng góp vào việc khuyến khích một lối sống lành mạnh và bảo vệ môi trường.

 Với sự phát triển của công nghệ, việc sử dụng website để bán rau củ trở thành một cách tiếp cận hiệu quả và tiện lợi Qua đó, khách hàng có thể dễ dàng lựa chọn và mua sắm các loại rau củ chất lượng và an toàn ngay tại nhà.

 Vì vậy, đề tài: “Thiết kế website kinh doanh rau, củ, quả cho cửa hàng Rau Sạch” nhằm mang đến một website thân thiện với người dùng, đáp ứng được nhu cầu mua hàng một cách đơn giản và thuận lợi.

1.2.Phân Tích Yêu Cầu:

1.2.1 Chủ sở hữu của website: Cửa hàng Rau Sạch.

1.2.2 Mục đích xây dựng website:

 Mở rộng khách hàng: Cho phép tiếp cận với khách hàng tiềm năng trên phạm vi rộng hơn cửa hàng vật lý.

 Tiếp cận 24/7: Cho phép khách hàng truy cập và mua hàng bất kỳ lúc nào kể cả khi cửa hàng không hoạt động (chỉ cần trong kho còn hàng)  Tăng khả năng tiếp thị: Trang web cho phép cửa hàng áp dụng các

chiến lược tiếp thị hiệu quả như: quảng cáo trực tuyến, email maketing, quảng cáo trên mạng xã hội,

 Xây dựng niềm tin, uy tín: Một trang web chuyên nghiệp có thể tạo dựng hình ảnh tích cực về cửa hàng bằng cách cung cấp thông tin chi 3

tiết về sản phẩm, đánh giá từ khách hàng, chính sách giao hàng Từ đó xây dựng niềm tin, uy tín trong mắt khách hàng.

1.2.3 Đối tượng hướng tới:

 Lứa tuổi: từ 25 đến 45 tuổi, đây là nhóm người thường có thể có thu nhập ổn định, quan tâm đến chất lượng cuộc sống và sức khỏe, và có xu hướng mua sắm trực tuyến.

 Những người quan tâm đến chế độ ăn uống lành mạnh: Đối tượng khách hàng bao gồm cả những người quan tâm đến chế độ ăn uống lành mạnh và muốn sử dụng rau củ tươi trong khẩu phần ăn hàng ngày Họ có thể có một lối sống tích cực, chăm chỉ tập thể dục và quan tâm đến việc chăm sóc sức khỏe cá nhân.

 Gia đình và người chăm sóc trẻ em: Các gia đình và những người chăm sóc trẻ em có thể là một đối tượng quan trọng khác Họ có nhu cầu mua rau củ để cung cấp cho các thành viên trong gia đình một chế độ ăn uống lành mạnh và cung cấp dinh dưỡng cho trẻ nhỏ.

 Ngoài ra, đối tượng khách hàng còn có thể là những người có công việc bận rộn, họ không có thời gian để mua sắm ở cửa hàng truyền thống vì vậy website việc mua sắm trực tuyến sẽ tốt hơn với chính họ.

1.2.4 Các chức năng mà website cung cấp:

 Danh mục sản phẩm: Hiển thị menu bao gồm các sản phẩm như: rau, củ, nấm, trái cây, các sản phẩm đã qua chế biến và các sản phẩm đang được giảm giá.

 Thông tin sản phẩm: Cung cấp thông tin chi tiết về sản phẩm bao gồm nguồn gốc, giá cả, hình ảnh, mô tả,

 Chức năng tìm kiếm: Giúp khách hàng có thể dễ dàng tìm kiếm các sản phẩm thông qua từ khoá.

 Giỏ hàng và thanh toán: Cho phép khách hàng thêm sản phẩm vào giỏ hàng và thanh toán trực tuyến thông qua các phương thức thanh toán như thẻ ATM, ZaloPay hoặc thanh toán trực tiếp khi nhận hàng  Đánh giá: Cho phép khách hàng đánh giá và nhận xét về sản phẩm

cũng như tham khảo được đánh giá của những người mua hàng khác 4

 Tài khoản và thông báo: Cho phép khách hàng đăng ký/đăng nhập tài khoản khi sử dụng website và thông báo qua tài khoản cho họ biết về các chương trình khuyến mãi của cửa hàng, các thay đổi trong quá trình giao hàng,

 Liên hệ: Cung cấp các phương thức liên hệ từ trực tiếp đến trực tuyến để có thể giải đáp thắc mắc, xử lý yêu cầu hoặc giải quyết các vấn đề cho khách hàng một cách nhanh chóng.

 Tích hợp mạng xã hội: Tạo liên kết với các mạng xã hội để khách hàng có thể chia sẻ thông tin về sản phẩm và trải nghiệm mua sắm trên các nền tảng xã hội khác.

1.2.5 Kết quả mong muốn:

 Giao diện website tươi mát, để phù hợp với mục đích bán rau, củ, quả.

II Nội Dung:

 Màu xanh lá cây (#008800): Màu xanh lá cây thường được liên kết với tự nhiên, sự tươi mát và sức sống Đây là một sự lựa chọn phổ biến cho các trang web liên quan đến rau củ và thực phẩm

 Màu đỏ hồng (#E50055): màu đỏ hồng có thể thể hiện sự quyến rũ, tươi mới và độc đáo Chúng có thể được sử dụng làm điểm nhấn cho các chi tiết đặc biệt hoặc để tạo sự cân đối trong một sự kết hợp màu sắc tổng thể.

 Phương pháp phối màu: Phối màu tương phản.

 Lý do chọn phương pháp phối màu tương phản: Sử dụng phương pháp phối màu tương phản nó vì tạo ra sự tương phản mạnh mẽ giữa các màu sắc, tạo ra sự nổi bật và thu hút người dùng

Ø Dễ dàng điều hướng người dùng đến các phần quan trọng của trang web như giá, sản phẩm, hay điều hướng,

Ø Tạo ra sự cân đối và hài hòa bằng cách sử dụng màu sắc đối lập nhau, khiến giao diện web hấp dẫn và trực quan.

6

2.1.4 Sơ đồ liên kết website:

7

2.2 Bố cục layout website:

2.2.1 Bố cục layout trang chủ:

8

2.2.2 Bố cục layout trang con liên hệ:

9

2.2.3 Bố cục layout trang con đăng nhập:

10

2.2.4 Bố cục trang con đăng ký:

11

2.2.5 Bố cục trang con giỏ hàng:

12

2.2.6 Bố cục trang con danh mục sản phẩm:

13

2.2.7 Bố cục trang con chi tiết sản phẩm:

14

2.2.8 Bố cục trang con đặt hàng:

16

2.3 Giao diện chính và các trang con được xây dựng:

2.3.1 Trang chủ:

17

2.3.2 Trang liên hệ:

18

2.3.3 Trang đăng ký:

19

2.3.4 Trang đăng nhập:

20

2.3.5 Trang giỏ hàng:

21

2.3.6 Trang danh mục - Rau:

22

2.3.7 Trang danh mục - Củ:

24

2.3.8 Trang danh mục - Nấm:

25

2.3.9 Trang danh mục - Trái cây:

26

2.3.10 Trang danh mục - sơ chế:

27

2.3.11 Trang danh mục - Giảm giá:

28

2.3.12 Trang chi tiết sản phẩm - Cải bẹ xanh:

29

2.3.13 Trang chi tiết sản phẩm sau khi cho vào giỏ hàng:

30

2.3.14 Trang con đặt hàng:

31

III Kết Luận:

3.1 Kết quả đạt được:

 Thiết kế được một website thương mại điện tử tương đối hoàn thiện Website đã có hầu hết các chức năng như: đăng nhập, đăng ký, tìm kiếm sản phẩm, đánh giá, thông báo,

 Giao diện sử dụng đơn giản nhưng không đơn điệu, các nút điều hướng được thiết kế theo hướng phổ thông phù hợp với đại đa số người dùng, giao diện đơn giản dễ sử dụng.

3.2 Những vấn đề chưa đạt được so với thiết kế ban đầu:

 Phần banner chưa có được những hiệu ứng chuyển động và số lượng banner còn hạn chế vì vậy không tạo được những slideshow như ý tưởng đề ra.

 Trang chủ chưa tích hợp sẵn nút mua hàng mà cần phải vào chi tiết sản phẩm mới có thể được sản phẩm.

3.3 Hướng phát triển:

 Tích hợp chức năng lọc cho thanh tìm kiếm, để người dùng có thể tìm kiếm sản phẩm dựa trên các tiêu chí như giá, xuất xứ, điểm dinh dưỡng,

 Cung cấp nhiều nội dung hữu ích về rau, củ, quả (như công thức nấu ăn, bài viết dinh dưỡng, hướng dẫn chọn và bảo quản rau củ, )

 Tích hợp chức năng giao hàng định kỳ: Khách hàng có thể đăng ký để nhận rau củ quả hàng tháng hoặc hàng tuần với một lịch trình đáng tin cậy, giúp tạo sự thuận tiện và duy trì mối quan hệ lâu dài với khách hàng.

32

IV Tài Liệu Tham Khảo:

TIÊU CHÍ ĐÁNH GIÁ CHUYÊN MÔN BTL Môn học: Thiết kế web

@ Yêu cầu đọc hiểu nguyên tắc thiết kế và trình bày ý tưởng thiết kế và phác thảo về đề tài đã lựa chọn (Trình bày trong báo cáo) Đề cương phải nêu rõ ý tưởng thiết kế về các nội dung sau :

- Ý tưởng và phác thảo bố cục layout của trang chủ - Ý tưởng và phác thảo bố cục layout của trang con - Ý tưởng và phác thảo các thành phần trên trang

web (Logo, hệ thống điều hướng, quảng cáo…)

Báo cáo đề cương không đúng quy định trình bày trừ

@ Sinh viên trình diễn sản phẩm Sản phẩm phải đáp ứng được các yêu cầu sau :

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

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

- Nội dung thông tin: chính xác, phong phú, phù hợp với chủ đề của đề tài

@ Sinh viên trả lời câu hỏi của giáo viên về các vấn đề sau:

- Nguyên lý thiết kế (màu sắc, bố cục, tỉ lệ…)- Hiểu biết về chủ đề đang trình bày

- Khả năng sử dụng công cụ để thể hiện thiết kế trực tiếp trên máy tính.

- Sinh viên trình diễn sản phẩm, trả lời câu hỏi, thực hiện các yêu cầu về thiết kế trực tiếp trên

máy tính tại buổi thi Test BTL

34