Tài liệu báo cáo môn học thiết kế web cơ bản Đề tài thiết kế website bán thực phẩm thuần chay – gufood

Đối với doanh nghiệp, trang blog tối ưu từ khóa chuẩn SEO giúp website xuất hiện nhiều hơn trên các công cụ tìm kiếm, tiếp cận với nhiều người dùng hơn, thúc đẩy người dùng tương tác bìn

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA ĐA PHƯƠNG TIỆN -*** -

TÀI LIỆU BÁO CÁO MÔN HỌC THIẾT KẾ WEB CƠ BẢN

Đề tài: Thiết kế website bán thực phẩm

thuần chay – GUFOOD

Giảng viên giảng dạy: Ths Vũ Thị Tú Anh

Lớp tín chỉ: Thiết kế Web cơ bản 02 Sinh viên thực hiện: Nguyễn Khánh Linh

Mã sinh viên: B22DCTM054 Nhóm bài tập: 06

LỜI NÓI ĐẦU

Ngày nay, thiết kế web không chỉ là một kỹ năng kỹ thuật mà còn là một nghệ thuật mang ý nghĩa kết nối con người với thế giới thông tin rộng lớn Trong thời đại công nghệ số 4.0 như ngày nay, một trang web không chỉ đơn thuần là nơi truyền tải nội dung mà còn là cánh cửa mở ra trải nghiệm tương tác, sáng tạo và giao tiếp không giới hạn

Môn học "Thiết kế Web căn bản" do cô Vũ Thị Tú Anh giảng dạy là một cơ hội quý giá giúp sinh viên chúng em không chỉ tiếp cận những kiến thức nền tảng mà còn khơi nguồn cảm hứng để khám phá tiềm năng trong việc xây dựng những sản phẩm số

có giá trị Bài tập cá nhân này chính là minh chứng cho sự nỗ lực, sáng tạo và tinh thần học hỏi không ngừng của bản thân em cũng như nhóm trong môn học này

Em xin gửi lời cảm ơn chân thành đến cô Vũ Thị Tú Anh, người đã tận tâm hướng dẫn và tạo điều kiện để chúng em tiếp cận với lĩnh vực đầy thú vị này Hy vọng bài tập này sẽ phản ánh sự nghiêm túc và niềm đam mê mà em dành cho môn học, đồng thời

là một bước tiến nhỏ trong quá trình phát triển của chính bản thân em Mặc dù đã dành nhiều thời gian và nỗ lực để hoàn thành bài tập này, nhưng do sự hạn chế về mặt kiến thức nên bài làm khó tránh khỏi những thiếu sót Chúng em kính mong nhận được những lời góp ý của cô để bài làm ngày càng hoàn thiện hơn

Em xin chân thành cảm ơn ạ!

MỤC LỤC

I Giới thiệu chung 4

1.1 Giới thiệu về website 4

1.1.1 Giới thiệu chung về website 4

1.1.2 Giới thiệu về mong muốn của đối tượng sử dụng 4

1.2 Danh sách chức năng 5

II Thiết kế chức năng/ màn hình 6

2.1 Hiển thị trang blog 6

2.2 Hiển thị trang Hướng dẫn đặt hàng 10

2.3 Hiển thị trang Chính sách Thẻ thành viên – Tích điểm 12

2.4 Hiển thị trang Câu hỏi thường gặp (FAQ) 15

2.5 Hiển thị trang Giới thiệu 18

2.6 Hiển thị trang Đối tác 20

2.7 Hiển thị trang Tuyển dụng 22

2.8 Nộp hồ sơ ứng tuyển 25

2.9 Tra cứu kết quả tuyển dụng 28

2.10 Hiển thị trang Liên hệ hợp tác 30

2.11 Đóng góp ý kiến 32

2.12 Hiển thị trang Chính sách và điều khoản 35

I Giới thiệu chung

1.1 Giới thiệu về website

1.1.1 Giới thiệu chung về website

Trong bối cảnh ngày càng nhiều người quan tâm đến sức khỏe và lựa chọn lối sống bền vững, nhu cầu về các sản phẩm thuần chay, lành mạnh đã tăng lên đáng kể Với ý tưởng đáp ứng xu hướng xanh ấy, chúng em đã thiết kế một trang web bán hàng mang tên "GUFOOD", chuyên cung cấp các sản phẩm đồ ăn thuần chay healthy, hướng tới các giá trị sức khỏe, môi trường và cộng đồng

GUFOOD không chỉ là nơi người tiêu dùng tìm thấy các sản phẩm thuần chay chất lượng cao, mà còn là nguồn cảm hứng cho lối sống xanh thông qua các bài viết chia sẻ kiến thức dinh dưỡng, công thức nấu ăn, Với giao diện thân thiện, hiện đại và tối ưu trải nghiệm người dùng, GUFOOD hi vọng có thể mang đến sự thuận tiện tối đa khi mua sắm trực tuyến, giúp khách hàng tiết kiệm thời gian và tận hưởng trải nghiệm mua sắm tốt nhất

1.1.2 Giới thiệu về mong muốn của đối tượng sử dụng

- Đối tượng sử dụng mà website hướng tới:

 Khách hàng

 Quản lý

 Nhân viên bán hàng

- Mong muốn của đối tượng sử dụng:

Em được phụ trách thiết kế một số chức năng dành cho đối tượng sử dụng là khách hàng Đối tượng này có những mong muốn cụ thể như:

 Khách hàng muốn tìm hiểu về các thông tin, kiến thức mẹo hay, về các chủ

đề sức khỏe, dinh dưỡng, các công thức nấu ăn, nguyên liệu, thực phẩm thuần chay

 Khách hàng muốn được đáp ứng các dịch vụ khách hàng như hướng dẫn các bước mua hàng trực tuyến, giải đáp các thắc mắc, khó khăn trong quá trình đặt hàng, và chính sách thẻ thành viên – tích điểm để tận dụng được các ưu đãi, khuyến mãi tốt nhất khi mua hàng

 Khách hàng muốn biết về doanh nghiệp, đối tác và các chính sách, điều khoản của doanh nghiệp nhằm đảm bảo các quyền lợi của khách hàng khi mua sắm trực tuyến

 Người dùng muốn tìm hiểu về mảng tuyển dụng và muốn ứng tuyển vào làm các vị trí trong doanh nghiệp

 Khách hàng muốn hợp tác, liên kết với doanh nghiệp và cần thông tin để liên lạc để được tư vấn,

 Khách hàng muốn gửi ý kiến đóng góp, phàn nàn, khiếu nại về sản phẩm, dịch

vụ, đơn hàng, và cần sự hỗ trợ từ doanh nghiệp

8 Nộp hồ sơ

ứng tuyển

Giúp ứng viên dễ dàng nộp hồ sơ trực tuyến mà không cần phải đến tận nơi hay gửi email thủ công, tiết kiệm thời gian cho cả hai bên khi đồng thời các hồ sơ trực tuyến sẽ được lưu trữ và tổ chức một cách khoa học, giúp bộ phận nhân sự dễ dàng theo dõi

Giúp ứng viên có thể tra cứu nhanh chóng kết quả xét duyệt hồ

sơ hoặc các giai đoạn trong quy trình tuyển dụng (như phỏng vấn, chờ quyết định, trúng tuyển hay không trúng tuyển)

11 Gửi ý kiến

đóng góp

Giúp thu thập những phản hồi, ý kiến và đề xuất từ người sử dụng, gồm các khía cạnh như cải thiện chất lượng sản phẩm, dịch vụ, giao diện website, hay các vấn đề khác mà khách hàng gặp phải

II Thiết kế chức năng/ màn hình

2.1 Hiển thị trang blog

- Mục đích:

Đối với khách hàng, trang blog nhằm cung cấp các thông tin, kiến thức hữu ích cho khách hàng như cách hiểu đúng về đồ ăn eat clean, các công thức chế biến, mẹo hay về giảm cân, tăng cơ, detox, Đối với doanh nghiệp, trang blog tối ưu từ khóa chuẩn SEO giúp website xuất hiện nhiều hơn trên các công cụ tìm kiếm, tiếp cận với nhiều người dùng hơn, thúc đẩy người dùng tương tác (bình luận, chia sẻ), tạo hiệu ứng EWOM trong marketing, thúc đẩy doanh số bán hàng trong việc liên kết các sản phẩm vào bài viết

- Giao diện:

- Hoạt động:

 Khi đang ở màn hình Trang chủ,

người dùng nhấn vào thành phần

“BLOG” trên thanh menu

Hoặc nhấn vào biểu tượng mũi tên để

lựa chọn chủ đề blog cụ thể mà người

dùng muốn tiếp cận

 Khi nhấn “BLOG” sẽ mở ra trang

blog tổng hợp, gồm các bài viết từ nhiều

chủ đề, thời gian, độ phổ biến khác

nhau

Bên trái bao gồm thanh chuyển

trang với nhiều lựa chọn giải quyết các

nhu cầu khác nhau khi tìm đọc trang blog

của người dùng Thanh chuyển trang tạo

ra các link giúp người dùng nhấp vào để

xem tiếp các trang khác

Bên phải là danh sách các bài viết

được bố trí theo một kiểu thống nhất

gồm hình ảnh minh họa, tiêu đề, thời

gian đăng tải, lượt xem, mô tả ngắn

Cuối góc phải là góc phải thanh

đếm số trang giúp người dùng tìm đọc

bài viết ở các trang tiếp

 Lướt sang trang bên

Khi người dùng muốn xem thêm

các bài viết khác sẽ chọn số tiếp theo

hoặc biểu tượng đẩy trang tại thanh đếm

số trang

 Sắp xếp theo chủ đề

Khi lựa chọn chủ đề blog cụ thể

từ thanh menu hoặc từ thanh phân trang

ở góc trên cùng bên trái, người dùng sẽ

được dẫn đến trang blog được sắp xếp

theo chủ đề đã chọn

 Sắp xếp theo thời gian đăng tải

Khi người dùng muốn đọc các bài

viết mới nhất nhất, sẽ chọn vào “SẮP

XẾP – Mới nhất”

 Sắp xếp theo độ phổ biến

Khi người dùng muốn đọc các bài

viết phổ biến, được quan tâm nhiều nhất,

sẽ chọn vào “SẮP XẾP – Phổ biến nhất”

 Tìm kiếm bài viết theo từ khóa

Khi người dùng muốn tìm đọc

các bài viết theo từ khóa, sẽ chọn vào

“TAGS” (thẻ từ khóa) mà mình quan

tâm, từ đó dẫn tới loạt các bài viết có liên

quan tới từ khóa mà người dùng tìm

kiếm

 Nhấp đọc bài viết chi tiết

Khi muốn đọc một bài viết, người

dùng nhấp vào ảnh minh họa, tiêu đề

hoặc thành phần “Đọc tiếp” để mở ra

trang bài viết chi tiết

Trang bài viết chi tiết:

Phần bên trái, gợi ý các danh mục

sản phẩm kinh doanh của shop và phía

dưới là gợi ý “BÀI VIẾT LIÊN QUAN”

hướng người đọc tới các bài viết cùng

chủ đề, mới phát hành hoặc gắn “TAGS”

liên quan

Phần bên phải là bài viết chi tiết

Phía cuối liệt kê các “TAGS” được gắn

trong bài viết, nút chia sẻ trên các nền

tảng mạng xã hội hoặc chia sẻ bằng link

bài viết, phần bình luận, người dùng có

thể để lại ý kiến của mình về bài viết

Phía cuối có đề xuất các bài viết liên

quan với các thành phần: hình ảnh minh

họa, tiêu đề, thời gian đăng tải, lượt xem,

mô tả ngắn Người xem có thể tiếp tục

bấm vào các bài đăng đó để đọc tiếp các

bài viết cùng chủ đề, hoặc cùng thẻ tags

từ bỏ việc mua sắm, đặc biệt với những đối tượng khách hàng lớn tuổi hoặc không rành công nghệ

- Giao diện

- Hoạt động

 Khi đang ở màn hình Trang chủ,

người dùng nhấn vào biểu tượng mũi

hàng Thanh chuyển trang tạo ra các link

giúp người dùng nhấp vào để xem tiếp

các trang khác

Bên phải là hướng dẫn đặt hàng

chi tiết cùng với các lưu ý trong quá trình

mua hàng và giao dịch thanh toán trên

2.3 Hiển thị trang Chính sách Thẻ thành viên – Tích điểm

- Mục đích

Cung cấp thông tin chi tiết, minh bạch về cách hoạt động của chương trình thẻ thành viên và tích điểm: cách thức đăng ký, sử dụng thẻ thành viên và cách tích lũy, sử dụng

điểm, các điều kiện, quy định cụ thể liên quan đến quyền lợi, hạn mức, hoặc thời gian

sử dụng điểm, hướng dẫn khách hàng cách sử dụng điểm tích lũy, đổi quà, hoặc nhận

ưu đãi để tận dụng tối đa các lợi ích mà chương trình mang lại Từ đó, tạo động lực để khách hàng quay lại mua sắm thường xuyên, đảm bảo các chính sách liên quan đến thẻ thành viên và tích điểm được trình bày công khai, rõ ràng, tránh hiểu lầm hoặc tranh chấp

- Giao diện

- Hoạt động

 Khi đang ở màn hình Trang chủ,

người dùng nhấn vào biểu tượng mũi

hàng Thanh chuyển trang tạo ra các link

giúp người dùng nhấp vào để xem tiếp

2.4 Hiển thị trang Câu hỏi thường gặp (FAQ)

- Mục đích

Cung cấp thông tin nhanh chóng, giúp giải đáp ngay các thắc mắc phổ biến của khách hàng mà không cần chờ đợi phản hồi từ đội ngũ hỗ trợ, tiết kiệm thời gian cho cả hai bên Tăng khả năng chuyển đổi do khách hàng có thể được giải quyết thắc mắc nhanh chóng để tiếp tục quy trình mua sắm hoặc sử dụng dịch vụ, thay vì rời khỏi website do thiếu thông tin Đồng thời bằng cách trả lời trước những câu hỏi thường gặp, FAQ giảm lượng yêu cầu hỗ trợ trực tiếp qua email, điện thoại hoặc chat, giúp đội ngũ tập trung xử

lý các vấn đề phức tạp hơn

- Giao diện

- Hoạt động

 Khi đang ở màn hình Trang chủ,

người dùng nhấn vào biểu tượng mũi

tên cạnh thành phần “KHÁCH HÀNG”

trên thanh menu, nhấn chọn “Câu hỏi

thường gặp (FAQ)”

 Khi nhấn chọn, sẽ mở ra trang

Câu hỏi thường gặp (FAQ)

Bên trái là thanh chuyển trang tới

các trang thuộc mảng dịch vụ khách

hàng Thanh chuyển trang tạo ra các link

giúp người dùng nhấp vào để xem tiếp

các trang khác

Bên phải là danh sách các câu hỏi

thường gặp liên quan đến sản phẩm, dịch

vụ giao nhận, đặt hàng và thanh toán

 Nhấn vào câu hỏi để thấy câu trả

lời

Khi người dùng tìm thấy câu hỏi

và nhấn vào đó thì phía dưới câu hỏi sẽ

hiện lên câu trả lời giải đáp cho thắc

mắc của khách hàng

- Phân tích về số liệu

Đây là chức năng cập nhật số liệu Cụ thể, số liệu được chức năng cập nhật là thông

tin giải đáp cho các câu hỏi thường gặp

Chức năng khai thác số liệu tương ứng là Bài viết – Câu hỏi thường gặp Chức

năng này chưa được thiết kế, nên em xin phác thảo như sau:

2.5 Hiển thị trang Giới thiệu

- Mục đích

Cung cấp thông tin tổng quan về doanh nghiệp, thương hiệu như tầm nhìn, sứ mệnh,

và giá trị cốt lõi của doanh nghiệp, nhằm tạo ấn tượng đầu tiên và xây dựng lòng tin với khách hàng Không chỉ vậy, nó còn thể hiện sự minh bạch và chuyên nghiệp thông qua thông tin về lịch sử hình thành, thành tựu hoặc đối tác tiêu biểu, từ đó gây ấn tượng với các đối tác và ứng viên tiềm năng, mở ra cơ hội hợp tác và phát triển trong tương lai đối với doanh nghiệp

- Giao diện

- Hoạt động

 Khi đang ở màn hình Trang chủ,

người dùng nhấn vào biểu tượng mũi

Bên trái là thanh chuyển trang tới

các trang thuộc mảng doanh nghiệp

Thanh chuyển trang tạo ra các link giúp

người dùng nhấp vào để xem tiếp các

trang khác

Bên phải là hàng loạt thông tin

giới thiệu về doanh nghiệp (tầm nhìn, sứ

2.6 Hiển thị trang Đối tác

- Mục đích

Hiển thị các đối tác, nhà cung cấp hoặc tổ chức hợp tác giúp khẳng định uy tín và

độ tin cậy của doanh nghiệp, giúp khách hàng cảm thấy an tâm hơn về chất lượng sản phẩm và dịch vụ thông qua sự liên kết với các đối tác uy tín Không những vậy, còn thể hiện quy mô và sức mạnh của mạng lưới hợp tác, từ đó nâng cao giá trị thương hiệu trong mắt khách hàng và đối tác tiềm năng, thu hút các doanh nghiệp, tổ chức khác có nhu cầu hợp tác thông qua thông tin về các đối tác hiện có và các lợi ích hợp tác mà website mang lại

- Giao diện

- Hoạt động

 Khi đang ở màn hình Trang chủ,

người dùng nhấn vào biểu tượng mũi

tên cạnh thành phần “DOANH

NGHIỆP” trên thanh menu, nhấn chọn

“Đối tác”

Hoặc nếu đang ở các trang trong

phần DOANH NGHIỆP, nhấn vào thành

phần “Đối tác” trên thanh chuyển trang

 Khi nhấn chọn, sẽ mở ra trang

Giới thiệu

Bên trái là thanh chuyển trang tới

các trang thuộc mảng doanh nghiệp

Thanh chuyển trang tạo ra các link giúp

người dùng nhấp vào để xem tiếp các

trang khác

Bên phải là hàng loạt thông tin về

đối tác của doanh nghiệp

2.7 Hiển thị trang Tuyển dụng

- Mục đích

Giúp ứng viên dễ dàng tiếp cận thông tin về các vị trí tuyển dụng, yêu cầu công việc, thời gian ứng tuyển, và các bước trong quy trình tuyển dụng, và môi trường làm việc tại doanh nghiệp Cung cấp cổng tiếp nhận hồ sơ ứng tuyển để ứng viên dễ dàng gửi hồ sơ

và trao đổi với bộ phận tuyển dụng Công khai minh bạch kết quả ứng tuyển thông qua cổng tra cứu với thao tác đơn giản và nhanh chóng, nâng cao hình ảnh chuyên nghiệp của doanh nghiệp

- Giao diện

- Hoạt động

 Khi đang ở màn hình Trang chủ,

người dùng nhấn vào biểu tượng mũi

tên cạnh thành phần “DOANH

NGHIỆP” trên thanh menu, nhấn chọn

“Tuyển dụng”

Hoặc nếu đang ở các trang trong

phần DOANH NGHIỆP, nhấn vào thành

phần “Tuyển dụng” trên thanh chuyển

trang

 Khi nhấn chọn, sẽ mở ra trang

Tuyển dụng

Trang tuyển dụng cung cấp các

thông tin về vị trí việc làm đang được

tuyển dụng tại doanh nghiệp, các mô tả

về môi trường làm việc, các tiêu chuẩn

làm việc, quy trình ứng tuyển rất chi tiết

và rõ ràng

 Nhấn vào “XEM TẤT CẢ VIỆC

LÀM”

Bên cạnh các vị trí việc làm mới

đang được đề xuất, ứng viên cần nhấn

vào nút dưới cùng ở mục Các vị trí đang

tuyển dụng để xem danh sách tất cả các

vị trí việc làm

 Khi nhấn chọn, sẽ mở ra trang

Các vị trí tuyển dụng chi tiết nhất

Danh sách các vị trí tuyển dụng

được trình bày theo một form thống nhất

gồm: Tên việc làm, địa điểm, mức

lượng, mô tả ngắn, nút nộp hồ sơ, nút

xem mô tả chi tiết việc làm

 Nhấn vào “Mô tả ngắn”

Người dùng muốn xem qua mô tả

công việc, sẽ nhấn vào dòng “Mô tả

ngắn” ở mỗi cuối bên trái mục vị trí việc

làm