Tài liệu báo cáo môn học thiết kế web cơ bản Đề tài trang web bán Đồ trang sức kydolpal

Các chức năng trong trang thiết kế với các bài viết phù hợp với nhu cầu thông tin của mình Lọc cácbài Trang tintức Thêm công cụ lọc bài viếtTheo danh mục như "Xuhướng thời trang", "Mẹo b

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

KHOA QUẢN TRỊ KINH DOANH

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

Đề tài: TRANG WEB BÁN ĐỒ TRANG SỨC KYDOLPAL

Giảng viên giảng dạy : Ths Vũ Thị Tú AnhLớp : Thiết kế web cơ bản 01

HÀ NỘI - 2024

MỤC LỤC

LỜI NÓI ĐẦU 3

I Giới thiệu chung 4

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

1.2 Đối tượng sử dụng 4

1.3 Các chức năng trong trang thiết kế  4

II Chức năng lọc bài viết 17

2.1 Mục đích của chức năng 17

2.2 Giao diện của chức năng 17

2.3 Hoạt động của chức năng 17

III Chức năng hiển thị các bài viết nổi bật và liên quan 19

3.1 Mục đích của chức năng 19

3.2 Giao diện của chức năng 20

3.3 Hoạt động của chức năng 21

IV Chức năng hiển thị thông tin về thương hiệu 21

4.1 Mục đích của chức năng 21

4.2 Giao diện của chức năng 21

4.3 Hoạt động của chức năng 22

V Chức năng hiển thị thông tin giới thiệu chất lượng và quy trình chế tác 22

5.1 Mục đích chức năng 22

5.2 Giao diện của chức năng 22

5.3 Hoạt động của chức năng 22

VI Chức năng điều hướng người dùng tới nội dung chi tiết 23

6.1 Mục đích chức năng 23

6.2 Giao diện của chức năng 23

6.3 Hoạt động của chức năng 24

VII Chức năng hiển thị tin tức khuyến mãi 25

7.1 Mục đích của chức năng 25

7.2 Giao diện của chức năng 26

7.3 Hoạt động của chức năng 27

KẾT LUẬN 28

  LỜI NÓI ĐẦU

Bài luận này được thực hiện với mục tiêu thiết kế giao diện trang web cho thươnghiệu trang sức Kydopal, sử dụng công cụ Figma Đây là một phần trong nhiệm vụ họctập, đồng thời cũng là cơ hội để em áp dụng các kiến thức lý thuyết vào thực tế, từ đóphát triển kỹ năng thiết kế giao diện người dùng

2

Trong quá trình thực hiện, em đã được học và ứng dụng các nguyên tắc thiết kế cơ bản, đặc biệt là nguyên tắc Gestalt để tổ chức và sắp xếp bố cục hợp lý, giúp giao diện trở nên trực quan và dễ hiểu Không chỉ đơn thuần là tạo nên giao diện đẹp mắt mà còn phảilàm sao để sản phẩm cuối cùng phục vụ tốt nhất nhu cầu của khách hàng Vì vậy, em tậptrung tối ưu hóa trải nghiệm người dùng (UX) bằng cách tạo ra bố cục logic, các yếu tốtương tác rõ ràng, và đảm bảo mọi thao tác của người dùng được thực hiện một cáchnhanh chóng, thuận tiện.

Dưới sự hướng dẫn tận tình của Thạc sĩ Vũ Thị Tú Anh, em đã có cơ hội học hỏithêm nhiều kỹ thuật và nguyên tắc thiết kế thực tế Đồng thời, sự góp ý và hỗ trợ từ cácthành viên trong nhóm đã giúp em cải thiện và hoàn thiện bài luận của mình một cáchtoàn diện

Bài báo cáo này sẽ tập trung vào việc giới thiệu tổng quan về trang web, phân tíchcác chức năng cụ thể, và trình bày chi tiết phần giao diện mà em đã thiết kế Đây khôngchỉ là bài thực hành giúp em củng cố kiến thức đã học, mà còn mang lại kinh nghiệm quýbáu về việc áp dụng lý thuyết vào thực tế

 Xin gửi lời cảm ơn chân thành đến cô Vũ Thị Tú Anh và các bạn đồng hành đã hỗtrợ tôi trong quá trình thực hiện bài luận này

 

I Giới thiệu chung

1.1 Giới thiệu chung về website

Kydopal là nền tảng trực tuyến dành riêng cho trang sức cao cấp, nơi hội tụ nhữngthiết kế tinh xảo và đẳng cấp Website được xây dựng với giao diện hiện đại, gồm cácphần chính như trang chủ giới thiệu bộ sưu tập nổi bật, danh mục sản phẩm đa dạng, chitiết sản phẩm trực quan, cùng quy trình đặt hàng nhanh chóng Kydopal không chỉ mang

đến trải nghiệm mua sắm dễ dàng mà còn là nơi tôn vinh vẻ đẹp và phong cách riêng củatừng khách hàng.

- Tiếp cận nhanh chóng với các bài viết phù hợp với nhu cầu thông tin của mình,khám phá thêm nội dung hữu ích, tiết kiệm thời gian tìm kiếm, cập nhật xu hướng trangsức mới

- Nhận được cảm giác kết nối với thương hiệu thông qua các câu chuyện, cam kếtchất lượng, và phong cách độc đáo với nội dung rõ ràng, đáng tin cậy

- Tìm hiểu chi tiết về chương trình khuyến mãi mà doanh nghiệp đang áp dụng.1.3 Các chức năng trong trang thiết kế 

với các bài viết phù hợp

với nhu cầu thông tin

của mình

Lọc cácbài

Trang tintức

Thêm công cụ lọc bài viết(Theo danh mục như "Xuhướng thời trang", "Mẹo bảoquản trang sức", "Câuchuyện thương hiệu", v.v.)

2 Khám phá thêm nội

dung hữu ích, tiết kiệm

thời gian tìm kiếm, cập

nhật xu hướng trang

sức mới

Hiển thịbài viếtliên quan

và nổi bật

Trang tintức

Thêm gợi ý các nội dungliên quan để khám phá thêm,giúp khách dễ dàng tiếp tụctìm hiểu thông tin hữu ích

4

3 Mong muốn tìm hiểu

chi tiết bài viết bất kì,

giao diện trực quan,

nhanh chóng mà không

mất nhiều thao tác

Điềuhướngngườidùng tớinội dungchi tiết

- Trangtin tức-Trangbài viếtchi

Cung cấp các nút bấm tiệnlợi như “ Xem thêm”, “Hiểnthị thêm” khuyến khích hànhđộng cụ thể từ khách hàng,giúp tìm hiểu thêm về sảnphẩm, hoặc sự kiện đượcgiới thiệu trong bài viết

4 Nhận được cảm giác

kết nối với thương hiệu

thông qua các câu

về thươnghiệu

Tranggiới thiệu

Trình bày hình ảnh chuyênnghiệp và minh bạch vềthương hiệu bằng cách cungcấp cái nhìn tổng quan và rõràng về thương hiệu, baogồm lịch sử hình thành, sứ mệnh, và giá trị cốt lõi

và quytrình chế tác

Tranggiới thiệu

Bài viết nhấn mạnh sự tậntâm và kỹ năng vượt trộitrong việc thiết kế và chế táctrang sức, quy trình sản xuấttiên tiến cũng như ấn tượngtốt về đội ngũ chuyên gia tàinăng

6 Tìm hiểu chi tiết về

chương trình khuyến

mãi mà doanh nghiệp

đang áp dụng

Hiển thịtin tứckhuyếnmãi

- Trang

ưu đãi

- Trangtin tức

- Trình bày chương trình ưuđãi như giảm giá phần trăm

- Sử dụng tiêu đề lớn, màusắc bắt mắt để làm nổi bậtthông điệp chính

- Kết hợp hình ảnh sản phẩmđược áp dụng ưu đãi

Giao diện trang giới thiệu

6

 Hình 1 Giao diện trang giới thiệu

Giao diện bài viết tin tức 1

 Hình 2 Giao diện bài viết tin tức 1.

 Giao diện bài viết tin tức 2

8

 Hình 3.1 Giao diện bài viết tin tức 2 (1)

 Hình 3.2 Giao diện bài viết tin tức 2 (2)

Giao diện trang ưu đãi

10

 Hình 4.1 Giao diện trang ưu đãi (1)

 Hình 4.2 Giao diện trang ưu đãi (2)

 Giao diện trang bài viết chi tiết

 Hình 5.1 Giao diện trang bài viết chi tiết (1)

12

 Hình 5.2 Giao diện trang bài viết chi tiết (2)

   Hình 5.3 Giao diện bài viết chi tiết (3)

14

 Hình 5.4 Giao diện bài viết chi tiết (4)

Link thiết kế : (https://www.figma.com/design/S6CbbgmAScx7b2Gj9jy2c5/File-chung?node-id=0-1&t=S3KafXAyIAQrLwep-1)

II Chức năng lọc bài viết

2.1 Mục đích của chức năng

Giúp người dùng nhanh chóng tìm thông tin liên quan đến sở thích hoặc nhu cầu,như xu hướng, mẹo chọn trang sức, hoặc đánh giá sản phẩm, không chỉ nâng cao sự hàilòng của khách hàng mà còn khuyến khích họ tương tác lâu dài với trang web

Cho phép lọc bài viết theo chủ đề, từ khóa hoặc danh mục để người dùng dễ dàngtìm thấy nội dung phù hợp

Cải thiện sự hài lòng của người dùng bằng cách giúp họ tiếp cận thông tin nhanhchóng và hiệu quả

Đối với doanh nghiệp, chức năng giúp thu hút khách hàng, nâng cao tính chuyênnghiệp và hình ảnh thương hiệu

2.2 Giao diện của chức năng

 Hình 6 Giao diện chức năng lọc bài viết 

   Nguyên tắc gần nhau (Proximity)

Các tùy chọn lọc được đặt gần nhau trong một dãy hàng ngang, tạo sự liên kết trựcquan và giúp người dùng hiểu rằng chúng thuộc cùng một nhóm chức năng

   Nguyên tắc đường dẫn (Continuation)

Việc sắp xếp các tùy chọn theo một hàng ngang dẫn mắt người dùng từ trái sangphải (hoặc ngược lại), đảm bảo họ không bỏ sót bất kỳ lựa chọn nào

   Nguyên tắc tương đồng (Similarity)

Các nút hoặc danh mục lọc có cùng kích thước, màu sắc, và kiểu chữ, giúp ngườidùng dễ dàng nhận diện và sử dụng

2.3 Hoạt động của chức năng

1) Khi khách hàng nhấp vào một danh mục trên thanh ngang (ví dụ: BỘ SƯUTẬP MỚI), hệ thống sẽ kích hoạt lệnh lọc bài viết

16

 Hình 7 Hình ảnh minh họa vị trí nhấp chuột vào chức năng lọc bài viết 

2) Giao diện thay đổi để hiển thị chỉ các bài viết thuộc danh mục được chọn.3) Các danh mục được chọn sẽ được gạch chân

 Hình 8 Giao diện của chức năng lọc bài viết sau khi nhấp chuột

4) Khách hàng có thể nhấp vào một danh mục khác để thay đổi nội dung hiển thị

III Chức năng hiển thị các bài viết nổi bật và liên quan

 Hình 9 Giao diện chức năng hiển thị bài viết nổi bật và liên quan

  Quy tắc tương đồng (Similarity)

- Hai khung hình có kích thước và bố cục tương tự nhau, giúp người xem nhận biếtchúng là các thành phần đồng nhất trong cùng một danh mục

- Font chữ và cách trình bày tiêu đề phía dưới hai hình ảnh giống nhau, tăng tínhliên kết

  Quy tắc liên tiếp (Continuity)

Hướng mắt của người xem được dẫn dắt từ tiêu đề “BÀI VIẾT NỔI BẬT” xuốnghai hình ảnh, rồi đến phần mô tả bên dưới Bố cục được tổ chức theo dòng chảy tự nhiên,giúp người xem dễ dàng theo dõi nội dung

  Quy tắc chính và phụ (Figure and BackGround)

Các hình ảnh nổi bật được đặt trên nền trắng đơn giản, làm chúng trở thành tiêuđiểm chính Điều này giúp người xem tập trung vào nội dung chính mà không bị phântâm bởi các yếu tố nền

3.3 Hoạt động của chức năng

- Khi người dùng nhấp vào bài viết nổi bật, hệ thống điều hướng đến bài viết chitiết

- Gợi ý thêm các bài viết liên quan cuối bài viết để giữ chân người đọc

IV Chức năng hiển thị thông tin về thương hiệu

4.2 Giao diện của chức năng

 Hình 10 Giao diện của chức năng hiển thị thông tin về thương hiệu

  Quy tắc sự khép kín (Closure)

Hình ảnh và văn bản được đặt gần nhau để giúp khách hàng tự suy diễn về quytrình chế tác

  Quy tắc tương đồng(Similarity)

Các đoạn văn bản, tiêu đề và hình ảnh được kết nối mạch lạc, tạo ra sự liên kết vềthông tin

4.3 Hoạt động của chức năng

- Khách hàng đọc nội dung để hiểu thêm về thương hiệu, từ đó đưa ra quyết địnhmua hàng

- Nội dung chi tiết giúp khách hàng cảm thấy gần gũi và tin tưởng

V Chức năng hiển thị thông tin giới thiệu chất lượng và quy trình chế tác

 5.2 Giao diện của chức năng

 Hình 11 Giao diện chức năng hiển thị thông tin giới thiệu chất lượng và quy trình chế tác

  Quy tắc chính và phụ (Figure-Ground)

Các hình ảnh chất lượng cao được đặt trong không gian thoáng, nổi bật giữa nộidung xung quanh

  Quy tắc đối xứng (Symmetry)

Hình ảnh được sắp xếp cân đối để mang lại cảm giác hài hòa và chuyên nghiệp

5.3 Hoạt động của chức năng

Người dùng sẽ thấy hình ảnh và chữ viết mô tả chi tiết về các tiêu chuẩn chấtlượng của sản phẩm và quy trình chế tác để cảm nhận sự tinh xảo

VI Chức năng điều hướng người dùng tới nội dung chi tiết

tỷ lệ chuyển đổi và thúc đẩy doanh thu

Đối với doanh nghiệp, chức năng này giúp tăng tương tác, giữ chân khách hànglâu hơn, và thúc đẩy họ tiến gần hơn đến quyết định mua hàng

6.2 Giao diện của chức năng

 Hình 12 Giao diện chức năng điều hướng người dùng tới nội dung chi tiết 

   Nguyên tắc gần kề (Proximity)

- Các nút điều hướng được đặt gần nội dung liên quan, chẳng hạn như bên dướiđoạn mô tả hoặc hình ảnh, giúp người dùng dễ dàng kết nối giữa nút và thông tin cần xemtiếp

- Sự gần gũi này khiến người dùng hiểu rằng nút điều hướng là hành động tiếp theo

tự nhiên

   Nguyên tắc tương đồng (Similarity)

Các nút điều hướng thường có thiết kế đồng bộ về màu sắc, kích thước, và phôngchữ trên toàn bộ trang web Điều này giúp chúng nổi bật và dễ nhận biết trong giao diện,tạo cảm giác quen thuộc và nhất quán cho người dùng

   Nguyên tắc chính và phụ (Figure-Ground)

Các nút điều hướng thường có màu sắc tương phản với nền, ví dụ như nút sángtrên nền tối hoặc nút đậm trên nền nhạt Điều này giúp người dùng dễ dàng xác định nơicần nhấp chuột mà không bị phân tâm

   Nguyên tắc khép kín (Closure)

22

Thiết kế nút thường có khung viền rõ ràng hoặc các góc bo tròn, giúp tạo cảm giác

"hoàn chỉnh" và dễ nhận diện Người dùng sẽ hiểu ngay rằng đây là một khu vực nhấn đểthực hiện hành động

6.3 Hoạt động của chức năng

- Nhấp chuột hoặc chạm vào liên kết (nút hoặc hình ảnh):Người dùng sẽ click vàocác nút như “Xem thêm”, “Tìm hiểu thêm”, hoặc một hình ảnh, tiêu đề bài viết để đượcchuyển hướng đến trang chi tiết

- Tương tác với nội dung chi tiết: Khi đến trang chi tiết, người dùng đọc nội dung

mô tả, xem hình ảnh hoặc thông tin bổ sung như giá cả, ưu đãi, điều kiện áp dụng, thông

số kỹ thuật

 Hình 13 Hình ảnh minh họa về vị trí nhấp chuột trên các nút có chức năng điều hướng người dùng đến nội dung chi tiết .

VII Chức năng hiển thị tin tức khuyến mãi

7.1 Mục đích của chức năng

Nhằm thu hút sự chú ý của khách hàng bằng thiết kế bắt mắt và thông tin giảm giáhấp dẫn, thúc đẩy hành động mua sắm thông qua các nút CTA như "Mua ngay" hoặc

"Thêm vào giỏ hàng"

Đối với doanh nghiệp, chức năng giúp tăng khả năng tương tác với thương hiệu,định hướng khách hàng đến sản phẩm cụ thể, và cải thiện trải nghiệm mua sắm bằngthông tin rõ ràng và giao diện thân thiện

24

7.2 Giao diện của chức năng

 Hình 14 Giao diện chức năng hiển thị tin tức khuyến mãi

   Nguyên tắc tương đồng (Similarity)

Các hình ảnh, màu sắc và kiểu chữ trên trang đều có sự đồng nhất, giúp ngườidùng dễ dàng nhận ra các yếu tố thuộc cùng một nhóm (như chương trình khuyến mãihoặc thông tin liên quan)

   Nguyên tắc gần kề (Proximity)

Các phần nội dung liên quan được sắp xếp gần nhau, chẳng hạn như thông tingiảm giá đi kèm hình ảnh sản phẩm Điều này giúp người dùng nhanh chóng hiểu nộidung mà không cần tìm kiếm

   Nguyên tắc liên tục (Continuity)

Thiết kế trang được xếp theo chiều dọc một cách liền mạch, hướng ánh nhìn củangười dùng từ phần nội dung này sang phần khác mà không bị gián đoạn

   Nguyên tắc chính và phụ (Figure and Ground)

Sử dụng khoảng trắng xung quanh nội dung chính để làm nổi bật thông tin giảmgiá và hình ảnh sản phẩm Người dùng dễ dàng phân biệt giữa nội dung chính và nền.

   Nguyên tắc về khép kín (Closure)

Các khung nội dung như hình ảnh và văn bản được thiết kế thành các cụm, giúpngười dùng hình dung rõ ràng một khu vực nội dung dù không có đường viền

7.3 Hoạt động của chức năng

Người dùng truy cập trang và tìm kiếm các chương trình khuyến mãi nổi bật,chẳng hạn như giảm giá, ưu đãi đặc biệt Họ có thể lướt qua các hình ảnh, tiêu đề và mô

tả ngắn về các sản phẩm khuyến mãi

26

KẾT LUẬN

Quá trình thực hiện bài tập thiết kế giao diện trang web trang sức Kydopal trênnền tảng Figma đã mang đến cho em nhiều trải nghiệm hữu ích, đặc biệt trong việc xâydựng và tối ưu hóa các chức năng cho trang tin tức và trang giới thiệu

Trước hết, em đã thành thạo trong việc thiết kế các chức năng cơ bản nhưng hiệuquả cho cả hai trang Đối với trang tin tức, em tập trung vào việc sắp xếp bố cục hợp lý,hiển thị bài viết theo danh mục và tối ưu hóa tính năng tìm kiếm thông tin Từng chi tiếtnhư hệ thống thẻ tin tức, trình bày tiêu đề, hình ảnh minh họa và các liên kết bài viết đềuđược thiết kế nhằm đảm bảo tính trực quan và dễ sử dụng cho người dùng Trong khi đó,trang giới thiệu được xây dựng với trọng tâm là truyền tải hình ảnh thương hiệu Kydopal,thông qua việc kết hợp hài hòa giữa nội dung giới thiệu, hình ảnh sản phẩm nổi bật và cácnút kêu gọi hành động (CTA) nhằm hướng người dùng đến các mục tiêu cụ thể như khámphá sản phẩm hoặc liên hệ

Trong quá trình thực hiện, em cũng gặp một số khó khăn đáng kể Đặc biệt, việcxây dựng các chức năng phù hợp đòi hỏi phải nghiên cứu kỹ lưỡng về hành vi ngườidùng và tìm kiếm giải pháp thiết kế tối ưu Ban đầu, em mất khá nhiều thời gian để thử nghiệm và chỉnh sửa nhằm đảm bảo rằng các chức năng không chỉ đáp ứng nhu cầu sử dụng mà còn dễ dàng thao tác Thêm vào đó, việc làm quen với các tính năng phức tạpcủa Figma, như tạo prototype để mô phỏng chức năng, cũng là một thách thức lớn.Mặt khác, Figma đã mang lại nhiều thuận lợi, giúp em triển khai các ý tưởngnhanh chóng và dễ dàng chỉnh sửa khi cần thiết Công cụ này cho phép em thiết kế giaodiện tương tác, kiểm tra trước khi hoàn thiện và trực tiếp nhận phản hồi từ giảng viên vàbạn học Đồng thời, các tài nguyên và tài liệu tham khảo sẵn có cũng hỗ trợ em rất nhiềutrong việc tối ưu hóa các chức năng trên cả hai trang

Thông qua bài tập này, em không chỉ hoàn thiện được kỹ năng thiết kế giao diện

mà còn hiểu rõ hơn về cách phát triển các chức năng để đáp ứng nhu cầu sử dụng thực tế.Đây là cơ hội quý báu để em tích lũy kinh nghiệm và tự tin hơn trong việc thực hiện các

dự án thiết kế phức tạp hơn trong tương lai