Báo cáo bài tập lớn môn thiết kế web Đề tài thiết kế giao diện website chơi game online

3.Mục tiêu của đề tài:-Xây dựng nền tảng giải trí trực tuyến: Phát triển một website chơi game trực tuyến, tạo điều kiện cho người dùng dễ dàng truy cập và trải nghiệm các trò chơi đadạ

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

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO BÀI TẬP LỚN

MÔN: THIẾT KẾ WEB

ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE CHƠI GAME ONLINE

Chuyên ngành: Công nghệ thông tin

Giảng viên hướng dẫn: Dương Chí Bằng

Sinh viên thực hiện: Nguyễn Anh Dũng

Lớp: 2310A01

Mã sinh : 23A1001D0084

Hà Nội - Năm 2023

I.Mở đầu:

1.giới thiệu đề tài: Trong thời đại kỹ thuật số hiện nay, nhu cầu giải trí trực

tuyến ngày càng trở nên phổ biến và đa dạng Các trang web chơi game online không chỉ là nền tảng để người dùng trải nghiệm những trò chơi thú vị mà còn làkhông gian giao lưu, kết nối cộng đồng game thủ toàn cầu Báo cáo này sẽ tập trung vào việc nghiên cứu và thiết kế một website chơi game online với mục tiêu mang đến giao diện thân thiện, tối ưu hóa trải nghiệm người dùng, và đảm bảo khả năng tương tác mượt mà Bên cạnh đó, báo cáo cũng phân tích các côngnghệ và ngôn ngữ lập trình phù hợp, đồng thời đưa ra các phương pháp tối ưu đểxây dựng một nền tảng web hiệu quả, đáp ứng xu hướng và nhu cầu giải trí hiện nay

2.Lý do chọn đề :

-Thế giới ngày càng phát triển , đời sống con người ngày càng hiện đại hoá, nhu cầu về đời sống vật chất và tinh thần mỗi ngày một cao và có nhiều đòi hỏi khắt khe hơn

-Hằng ngày mỗi người trong chúng ta đều rất bận rộn dành thời gian cho công việc, gia đình và cuộc sống nên ít nhiều cũng gặp rất nhiều stress từ đó cũng cần có nhu cầu giải tỏa căng thẳng sau những ngày căng thẳng

-Hiện nay thì nhu cầu giải trí online ngày càng phát triển, nhu cầu chơi game trực tuyến và live stream 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 giải trí online 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ừ nhưng lý do trên em quyết ịnh chọn đề tài “ thiết kế website mua bán game” ,xây dựng thử nghiệm web mua bán game 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ả

3.Mục tiêu của đề tài:

-Xây dựng nền tảng giải trí trực tuyến: Phát triển một website chơi game trực

tuyến, tạo điều kiện cho người dùng dễ dàng truy cập và trải nghiệm các trò chơi đadạng, từ đó nâng cao trải nghiệm giải trí trực tuyến

- Tối ưu hóa trải nghiệm người dùng (UX/UI): Thiết kế giao diện thân thiện và

dễ sử dụng, đảm bảo người dùng có thể dễ dàng thao tác và trải nghiệm trò chơi một cách thuận tiện, mượt mà

- Ứng dụng các công nghệ hiện đại: Sử dụng các công nghệ và ngôn ngữ lập trình

phổ biến như HTML, CSS, JavaScript, hoặc các framework như React, Angular để đảm bảo website hoạt động ổn định, có tính tương tác cao và đáp ứng yêu cầu bảo mật

- Đảm bảo hiệu suất và tốc độ tải trang: Tối ưu hóa hiệu suất để trang web tải

nhanh, giảm thiểu độ trễ khi người dùng trải nghiệm trò chơi, đảm bảo trải nghiệm không bị gián đoạn

- Phát triển tính năng kết nối và chia sẻ: Xây dựng các chức năng như đăng

nhập, lưu trữ tiến độ chơi, chia sẻ thành tích, và kết nối người dùng, nhằm thúc đẩy

sự tương tác và kết nối cộng đồng game thủ

- Phân tích và đánh giá trải nghiệm người dùng: Thực hiện khảo sát và thu thập

ý kiến để đánh giá hiệu quả của thiết kế, từ đó cải thiện và phát triển website đáp ứng tốt hơn nhu cầu của người dùng

4.phạm vi sử dụng:

-Người chơi cá nhân: Website hướng đến đối tượng người chơi cá nhân, giúp họ

truy cập dễ dàng vào các trò chơi online đa dạng Người chơi có thể trải nghiệm cáctrò chơi ngay trên trình duyệt mà không cần cài đặt thêm phần mềm

-Người dùng đăng ký: Đối với người dùng có tài khoản, website sẽ cung cấp các

tính năng bổ sung như lưu trữ tiến độ chơi, tùy chỉnh hồ sơ cá nhân, xếp hạng và theo dõi thành tích

-Cộng đồng game thủ: Website tạo môi trường giao lưu, kết nối và cạnh tranh

giữa các game thủ thông qua bảng xếp hạng, chia sẻ thành tích và hệ thống bạn bè, tạo nên một cộng đồng trực tuyến tương tác cao

-Thiết bị sử dụng: Website sẽ được tối ưu hóa để có thể hoạt động trên nhiều thiết

bị khác nhau, bao gồm máy tính để bàn, laptop, máy tính bảng và điện thoại di động, giúp người dùng dễ dàng truy cập và chơi game ở bất kỳ đâu

-Quốc gia và khu vực: Hướng đến người dùng ở nhiều khu vực địa lý khác nhau,

website sẽ có thể được tích hợp nhiều ngôn ngữ để phục vụ cho người dùng toàn cầu, không giới hạn ở một quốc gia hay khu vực cụ thể

-Nhà phát triển và quản trị viên: Phạm vi sử dụng cũng bao gồm nhà phát triển

và quản trị viên, những người sẽ quản lý nội dung, cập nhật game, và duy trì hoạt động của website để đảm bảo trải nghiệm người dùng luôn tốt nhất

II.Cơ sở lý thuyết:

1 Thiết kế Web

Thiết kế web là quá trình tạo ra giao diện trực quan và chức năng của một trang web Thiết kế web bao gồm việc sắp xếp các thành phần như hình ảnh, văn bản, màu sắc, và điều hướng trên trang nhằm mang lại trải nghiệm người dùng tối ưu Một thiết kế web tốt không chỉ đảm bảo tính thẩm mỹ mà còn dễ sử dụng, thân thiện với người dùng và đảm bảo tốc độ tải nhanh, đặc biệt là trên các thiết bị di động

Các thành phần chính trong thiết kế web bao gồm:

 Giao diện người dùng (UI): Tạo sự dễ sử dụng, bắt mắt và thân thiện.

mái khi truy cập

 Responsive Design: Đảm bảo trang web tương thích trên các loại thiết bị và

kích thước màn hình

2.Nguyên lý màu sắc

Màu sắc là yếu tố quyết định cảm xúc và phong cách của trang web Việc lựa chọn

và kết hợp màu sắc phù hợp giúp tạo nên bản sắc và tác động mạnh mẽ đến người dùng Nguyên lý màu sắc trong thiết kế web bao gồm:

 Màu chủ đạo: Là màu chính được sử dụng để tạo điểm nhấn và nhận diện

thương hiệu

 Màu bổ trợ: Hỗ trợ và tạo sự cân bằng cho màu chủ đạo.

 Sử dụng màu sắc hợp lý: Sử dụng bảng màu từ 3-5 màu để tránh sự rối mắt.

Các quy tắc và công cụ hỗ trợ trong việc chọn màu, như bánh xe màu, giúp kết hợp màu sắc hài hòa và truyền tải được cảm xúc mong muốn.

3.Nguyên lý bố cục

Bố cục giúp sắp xếp các thành phần trên trang một cách hợp lý và trực quan, giúp người dùng dễ dàng theo dõi nội dung Một bố cục tốt cần:

 Đảm bảo tính cân đối và trực quan: Các thành phần được sắp xếp hài hòa,

không quá dày đặc hay rời rạc

 Tuân theo quy tắc lưới (Grid System): Sử dụng lưới 12 cột là chuẩn phổ

biến giúp căn chỉnh các thành phần theo tỷ lệ đồng nhất

giúp tạo sự thoáng đãng và dễ nhìn cho trang web

 Quy tắc bố cục 1/3: Chia trang thành 3 phần giúp tạo điểm nhấn.

Nguyên lý bố cục giúp tạo nên trật tự thị giác và dẫn dắt người dùng di chuyển qua từng phần của trang một cách tự nhiên

4 Typography trong thiết kế web

Typography là nghệ thuật sắp xếp chữ để truyền tải thông điệp một cách hiệu quả

và thẩm mỹ Typography trong thiết kế web bao gồm:

 Chọn font chữ: Phải rõ ràng, dễ đọc và phù hợp với phong cách trang web.

 Phân cấp kiểu chữ: Dùng các loại kích thước, độ đậm và kiểu font khác

nhau để tạo ra phân cấp nội dung, giúp người dùng dễ nắm bắt thông tin chính

 Khoảng cách giữa các chữ và dòng (Line-height, letter-spacing): Giúp

văn bản thoáng đãng, dễ đọc

Typography tốt không chỉ giúp nội dung dễ đọc mà còn tăng tính chuyên nghiệp vàphong cách của trang web

5 Tỷ lệ và sự cân bằng trong thiết kế

Tỷ lệ và cân bằng là các yếu tố quan trọng để giữ cho thiết kế hài hòa và thu hút người dùng

 Tỷ lệ: Tỷ lệ vàng (Golden Ratio) và quy tắc 1/3 là các nguyên tắc phổ biến

giúp xác định kích thước của các thành phần sao cho hài hòa

o Cân bằng đối xứng: Các thành phần được sắp xếp đều nhau qua một

trục trung tâm

o Cân bằng bất đối xứng: Các thành phần khác nhau nhưng vẫn tạo sự

cân bằng nhờ màu sắc, kích thước và vị trí

6 Nguyên lý Hình ảnh trong Thiết kế Website

Hình ảnh là một phần quan trọng giúp tạo ấn tượng thị giác và nâng cao trải

nghiệm người dùng Các nguyên lý liên quan đến hình ảnh bao gồm:

 Chất lượng và độ phân giải: Hình ảnh cần có độ phân giải cao để đảm bảo

chất lượng hiển thị tốt trên mọi màn hình mà không bị vỡ nét

WebP nên được tối ưu hóa để đảm bảo tốc độ tải trang nhanh và tương thích tốt

 Kích thước tệp và tối ưu hóa: Để đảm bảo tốc độ tải trang, các hình ảnh

cần được nén kích thước mà không giảm chất lượng quá nhiều

 Ý nghĩa và tính phù hợp: Hình ảnh phải phù hợp với nội dung và mục tiêu

của trang web, giúp người dùng hiểu rõ hơn về nội dung

7 Tối ưu hóa SEO (Search Engine Optimization) trong Thiết kế Website

SEO là tập hợp các kỹ thuật giúp website đạt thứ hạng cao trên các công cụ tìm kiếm Đây là yếu tố quan trọng để tăng khả năng tiếp cận của website Một số yếu

tố SEO trong thiết kế website bao gồm:

hiểu

 Thẻ tiêu đề và thẻ mô tả: Mỗi trang cần có thẻ tiêu đề và thẻ mô tả phù hợp,

chứa từ khóa để thu hút người dùng

 Thẻ heading (H1, H2, H3 ): Sử dụng đúng thẻ heading giúp các công cụ

tìm kiếm hiểu rõ cấu trúc nội dung

 Tốc độ tải trang: Tốc độ tải trang là yếu tố quan trọng ảnh hưởng đến xếp

hạng SEO; các yếu tố như hình ảnh tối ưu, sử dụng CDN và tối ưu hóa mã nguồn giúp cải thiện tốc độ

 Thiết kế responsive: Trang web cần tương thích với mọi thiết bị (điện thoại,

máy tính bảng, PC) vì Google ưu tiên xếp hạng cao cho các trang web có thiết kế thân thiện với di động

8 Thiết kế Responsive (Responsive Design)

Responsive Design là phương pháp thiết kế giúp website hiển thị tốt trên mọi loại thiết bị, bao gồm máy tính, máy tính bảng và điện thoại di động Các nguyên lý cơ bản trong thiết kế responsive:

 Grid Layout (Bố cục lưới): Sử dụng bố cục dạng lưới linh hoạt để dễ dàng

điều chỉnh kích thước và sắp xếp nội dung

 Media Queries: Dùng media queries trong CSS để điều chỉnh kiểu dáng

website phù hợp với kích thước màn hình của thiết bị

 Fluid Images: Hình ảnh linh hoạt tự điều chỉnh kích thước và tỉ lệ theo

khung chứa để hiển thị tối ưu

 Flexible Text: Sử dụng đơn vị kích thước linh hoạt như em, rem, % để chữ

có thể tự điều chỉnh kích thước phù hợp với màn hình.

III Phân tích thiết kế và xây dựng ý tưởng thiết kế:

1 Xác định và phân tích yêu cầu:

1.1 Đối tượng độc giả xem website:

• Lứa tuổi: Từ 16 trở lên

• Giới tính: Cả nam và nữ

• Văn hóa: Trên toàn thế giới

• Đối tượng: Đối tượng của một trang web chơi game onl có thể là những người yêu thích chơi game và muốn chơi trực tiếp các tựa game mới, hoặc những tựa game cổ điển ngay Người chơi có thể bán/trao đổi các vật phẩm trong các tựa game hiện có của mình Đây có thể là những game thủ cá nhân, nhóm bạn chơi game, hoặc cả các doanh nghiệp trong lĩnh vực game Trang web mua bán game cung cấp một nền tảng ể người dùng có thể giao dịch mua bán, trao ổi hoặc chia sẻ các tựa game và các sản phẩm liên quan như phiên bản mở rộng, thẻ nạp, trang phục, vật phẩm trong game, và nhiều hơn nữa

1.2 Các chủ ề chính của website:

+Trang chủ

+Xếp Hạng

+Thể Loại

+Liên Hệ

+nạp thẻ

1.3.Các chức năng cần có của website

• Danh sách sản phẩm: Hiển thị danh sách các game có sẵn để chơi, bao gồm tiêu đề, hình ảnh, mô tả số lượng và người chơi trực tuyến

• Tìm kiếm và lọc sản phẩm: Cung cấp công cụ tìm kiếm để người dùng có thể tìm kiếm theo tên game, thể loại, hãng phát triển hoặc hệ máy console

• Chi tiết sản phẩm: Cung cấp thông tin chi tiết về từng sản phẩm, bao gồmphiên bản, yêu cầu hệ thống, ngày phát hành và đánh giá của người dùng

• Quản lý tài khoản: Đăng ký và đăng nhập cho người dùng, cung cấp trang

cá nhân để người dùng theo dõi tài khoản, lưu trữ thông tin thanh toán và thiết lập thông tin cá nhân

• Thanh toán: Hỗ trợ các phương thức thanh toán an toàn và tiện lợi, bao gồm ví điện tử, chuyển khoản ngân hàng và thông qua cổng thanh toán trực tuyến

• Hỗ trợ khách hàng: Cung cấp hệ thống hỗ trợ khách hàng qua email, chat trực tiếp hoặc số điện thoại để giải đáp thắc mắc và xử lý các vấn đề liên quan đến đơn hàng

• Tin tức và thông báo: Cập nhật tin tức game mới nhất, giảm giá, sự kiện trong game và thông báo về các cập nhật sản phẩm

2 Xây dựng ý tưởng thiết kế:

Giao diện web được thiết kế với chủ đề game, sử dụng màu sắc tươi sáng và bố cục rõ ràng Phần banner nổi bật giới thiệu trò chơi mới, cột tin tức cung cấp thông tin sự kiện, và danh sách game phổ biến giúp người dùng dễ dàng lựa chọn Các tính năng như lịch sử chơi, thanh điều hướng tiện lợi, và footer đầy đủ thông tin tạo

sự thân thiện và chuyên nghiệp, hướng đến người yêu thích game trực tuyến

các ký hiệu về đầu trang hay kéo xuống các sản phẩm, danh mục tiếp theo

Mục tìm kiếm cũng là một phần chức năng giúp khách hàng điều hướng +Bố cục lưới (Grid Layout): Trang web được chia thành các khu vực rõ ràng, bao

gồm thanh điều hướng, khu vực giới thiệu hình ảnh game, danh sách game, và một sidebar chứa các tin tức bên phải Sử dụng bố cục lưới giúp trang trông ngăn nắp,

dễ nhìn và dễ dàng theo dõi các phần thông tin khác nhau

+Phân cấp nội dung (Hierarchy): Các phần nội dung được sắp xếp với mức độ

quan trọng giảm dần từ trên xuống dưới Hình ảnh nổi bật của game chiếm phần lớn màn hình ngay đầu trang để thu hút sự chú ý Các phần "Play History" và "Top Games" được đặt phía dưới, giúp người dùng dễ dàng tìm thấy các trò chơi phổ biến

+Cân bằng (Balance): Sự phân chia cân đối giữa các phần như hình ảnh, danh

sách game, và phần tin tức bên phải tạo nên sự hài hòa, giúp trang không bị lệch về một phía và mang lại cảm giác thoải mái khi duyệt web

2.2.Ý tưởng màu sắc:

+Màu chủ đạo: Xanh dương(#0000FF) và trắng(#FFFFFF) là tông màu chính, tạo

cảm giác hiện đại, sạch sẽ và phù hợp với chủ đề game Màu xanh dương còn gợi lên sự tin cậy và cảm giác dễ chịu cho người dùng, giúp họ có thể duyệt web trong thời gian dài mà không bị mỏi mắt

+Tương phản (Contrast): Sử dụng màu trắng nền cùng các màu sắc nổi bật trên

hình ảnh game tạo ra sự tương phản mạnh mẽ, làm cho các mục nổi bật, dễ nhìn Các nút chức năng có màu sắc nổi bật để thu hút sự chú ý, giúp người dùng dễ dàngnhận diện các khu vực có thể nhấn vào

+ Tính nhất quán (Consistency): Trang web giữ sự nhất quán về màu sắc ở tất cả

các khu vực, tạo nên một phong cách trực quan, giúp người dùng nhận diện thương hiệu tốt hơn và có trải nghiệm mượt mà khi chuyển từ khu vực này sang khu vực khác

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

-Tạo ra sự cân ối và thu hút sự chú ý cho tác phẩm hoặc thiết kế Khi sử dụngmàu sắc tương phản, các màu sẽ tỏa sáng và nổi bật lên nhờ sự giao ộng mạnh giữa chúng Điều này có thể tạo ra một ấn tượng mạnh mẽ và tạo iểm nhấn cho một phần tử cụ thể trong thiết kế

-Phối màu tương phản cũng tạo ra sự rõ ràng và dễ nhìn Những màu có ộ tương phản cao khi ược ặt cạnh nhau tạo ra một ranh giới rõ ràng giữa chúng,giúp mắt dễ dàng nhận biết và phân tách các yếu tố khác nhau trong thiết kế

-Hơn nữa, phối màu tương phản cũng mang lại sự hài hòa và ồng iệu Bằng cách chọn các màu nằm ở hai ầu ối lập trên bán vòng màu, ta có thể tạo ra một sự cân ối tự nhiên và ồng bộ giữa các yếu tố màu sắc trong thiết kế Điềunày giúp tạo ra một trải nghiệm hài hòa và thú vị cho người xem.

-Tóm lại, phương pháp phối màu tương phản mang lại hiệu quả trong việc tạo ra sự nổi bật, rõ ràng và hài hòa cho tác phẩm hoặc thiết kế Bằng cách sửdụng màu sắc tương phản, ta có thể tạo ra một trải nghiệm màu sắc ộc áo và thu hút sự chú ý của người xem

2.3.Typography:

-Sử dụng font chữ đơn giản, dễ đọc:

 Chọn font chữ sans-serif: Font sans-serif được dùng để tạo cảm giác hiện

đại và dễ đọc trên màn hình Đây là lựa chọn lý tưởng cho trang web nhắm đến người dùng trẻ và đam mê game Với kiểu chữ không có các chi tiết phức tạp, sans-serif làm cho các chữ cái trở nên dễ nhận biết, giúp người dùng nhanh chóng lướt qua nội dung mà không gặp khó khăn trong việc đọc

-Phân cấp typographic (Typographic Hierarchy):

 Tiêu đề và các phần chính: Những phần quan trọng như "Play History" hay

"Top Games" được in đậm và có kích thước lớn hơn các văn bản phụ, tạo sự nổi bật và giúp người dùng dễ dàng nhận ra các phần chính Điều này không chỉ làm cho thông tin quan trọng dễ nhận biết mà còn tăng cường trải nghiệmduyệt trang, giúp người dùng nhanh chóng tìm thấy nội dung mình cần

 Nút bấm như "PLAY": Các nút hành động được đặt trong khung riêng với

thiết kế nổi bật và dễ nhận diện, nhằm thu hút người dùng Thiết kế này giúp nút bấm có sức hấp dẫn trực quan, khuyến khích người dùng nhấn vào

- Sự nhất quán trong Typography:

 Thống nhất font chữ và kiểu dáng: Toàn bộ trang web giữ sự nhất quán

trong việc sử dụng cùng một loại font chữ cho các phần khác nhau, với kích thước và kiểu dáng thích hợp cho từng loại nội dung Tiêu đề, nút bấm và văn bản chính đều được phân biệt rõ ràng nhưng lại hài hòa với nhau Việc duy trì sự nhất quán này giúp trang web trở nên liền mạch và dễ theo dõi, mang lại một trải nghiệm thị giác dễ chịu và chuyên nghiệp cho người dùng

2.4.Tỷ lệ sử dụng:

+ Tỷ lệ hợp lý giữa các phần nội dung: Trang web phân chia không gian một

cách hài hòa giữa các phần nội dung Phần hình ảnh game nổi bật chiếm một tỷ lệ lớn ở đầu trang, tạo ấn tượng mạnh mẽ ngay từ đầu và giúp người dùng dễ dàng nhận ra nội dung chính của trang

+ Khoảng trắng (white space) được tận dụng hiệu quả: Các khoảng trắng xung

quanh các ô game và phần nội dung giúp trang trông thoáng và dễ nhìn, đồng thời tạo cảm giác thoải mái cho người dùng khi tìm kiếm thông tin mà không bị rối mắt

+ Tỷ lệ kích thước nút và ô trò chơi: Các nút "PLAY" và các ô game đều có kích

thước phù hợp và thống nhất, không quá to hoặc quá nhỏ, giúp người dùng dễ thao tác mà không gặp khó khăn Tỷ lệ này giúp tạo ra một trải nghiệm mượt mà và thânthiện cho người dùng

2.5.Nguyên lý Tỷ lệ và Cân bằng (Proportion and Balance)

 Tỷ lệ hợp lý: Kích thước của các phần tử như nút "PLAY", ô game, và các

phần nội dung khác được phân chia đều và đồng nhất, giúp người dùng dễ dàng thao tác và tìm kiếm thông tin Hình ảnh game nổi bật chiếm diện tích lớn trên trang, tạo ra điểm nhấn chính trong trải nghiệm duyệt web

 Khoảng trắng (White Space): Khoảng trắng giữa các mục, đặc biệt là giữa

các ô trò chơi và các phần khác, được sử dụng hợp lý để tránh gây cảm giác chật chội Điều này giúp người dùng dễ dàng tập trung vào từng nội dung màkhông bị rối mắt

 Cân bằng giữa các thành phần: Sidebar chứa tin tức bên phải được đặt cân

đối với phần nội dung chính, giúp tạo ra sự hài hòa trong thiết kế và mang đến một trải nghiệm duyệt web dễ chịu cho người dùng

3.Phác thảo Wireframe:

3.1.Trang chủ:

Ý tưởng:

Header Top

o Đặt ở góc phải phía trên cùng của trang, các chức năng này cho phép người dùng dễ dàng truy cập vào tài khoản cá nhân hoặc tìm kiếm trò chơi và thông tin nhanh chóng

o Ý tưởng: Các nút "Đăng ký" và "Đăng nhập" nổi bật với màu sắc khác

biệt, khuyến khích người dùng nhấn vào Thanh tìm kiếm được thiết

kế đơn giản, dễ nhận diện, và cho phép người dùng nhanh chóng tìm thấy nội dung mong muốn.

Header Menu

o Đặt ở dưới Header Top và trải dài theo chiều ngang, tạo thành thanh điều hướng chính Người dùng dễ dàng chuyển đổi giữa các mục quan trọng của trang web

o Ý tưởng: Header Menu có phong cách hiện đại, phông chữ dễ đọc, và

khi người dùng di chuột qua từng mục, màu sắc hoặc gạch chân có thể thay đổi để tạo phản hồi trực quan Điều này giúp trang web trông chuyên nghiệp và dễ sử dụng

Content

o Danh sách game hay: Phần này hiển thị các game nổi bật, với hình

ảnh đại diện của từng game Khi người dùng di chuột vào hình ảnh, một bảng nhỏ sẽ xuất hiện, cung cấp tên game và phần giới thiệu ngắn gọn về trò chơi đó

o Ý tưởng: Sử dụng hình ảnh trò chơi lớn và màu sắc thu hút để kích

thích sự chú ý Hiệu ứng di chuột làm cho trang thêm phần tương tác, giúp người dùng hiểu rõ hơn về game mà không cần nhấp vào từng mục

thông tin về các trò chơi nổi bật và các bản tin cập nhật Người dùng

có thể dễ dàng nắm bắt được xu hướng và các game phổ biến nhất trong các khung thời gian khác nhau

o Ý tưởng: Sử dụng cấu trúc dạng thẻ để hiển thị tin tức và game top

một cách ngắn gọn, dễ nhìn Phần này giúp trang web trông gọn gàng

và chuyên nghiệp, với thông tin cập nhật nhanh chóng

Footer

o Giúp đỡ người dùng: Phần này cung cấp thông tin hỗ trợ, hướng dẫn

sử dụng, và giải đáp thắc mắc cho người dùng

thiệu công ty, các chính sách bảo mật và điều khoản sử dụng

o Địa chỉ công ty và phương thức thanh toán: Đưa ra địa chỉ liên hệ

trực tiếp của công ty và các phương thức thanh toán được chấp nhận trên trang

o Ý tưởng: Footer được thiết kế tối giản và thân thiện, với tông màu

trầm để không làm phân tán sự chú ý khỏi nội dung chính ở phía trên Các mục rõ ràng giúp người dùng dễ dàng tìm thấy các thông tin cần thiết và cảm thấy an tâm hơn khi sử dụng trang web