Báo cáo bài tập lớn môn thiết kế web đề tài thiết kế giao diện về game

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (11.85 MB, 21 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>KHOA CÔNG NGHỆ THÔNG TIN</b>

<b>---BÁO CÁO BÀI TẬP LỚN</b>

<b>MÔN THIẾT KẾ WEB</b>

<b>Đề tài: Thiết kế giao diện về game</b>

ThS. Trần Duy Hùng

<b>Giảng viên hướng dẫn : Sinh viên thực hiện : </b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>I.Giới thiệu………3</b>

<b>II.Kế hoạch thực hiện………..4</b>

<b>IV.Ý tưởng thiết kế………..4</b>

<b>V. Giao diện website………...13</b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>I. Giới thiệu</b>

Trò chơi điện tử là một hình thức giải trí vơ cùng phổ biến của con người ngày nay. Chúng được ra đời nhờ sự phát triển vượt bậc của khoa học, công nghệ và kĩ thuật. Tùy thuộc vào từng đối tượng người dùng, các nhà sản xuất sẽ đưa ra những tựa game thuộc nhiều thể loại khác nhau như game hành động, chiến thuật, game âm nhạc, thời trang,… Tất cả đều vơ cùng có sức hút, tạo tiền đề cho sự phát triển không ngừng của ngành cơng nghiệp giải trí này.

Để quảng bá game rộng rãi hơn cũng như để người chơi có thể dễ dàng chọn lọc và tiếp cận đến một tựa game hay, việc có một trang web riêng để giới thiệu về tựa game ấy là một điều cần thiết. Do đó, các cơng ty, nhà sản xuất game cũng cần chú trọng đến vấn đề này.

EA Gaming Studio là một công ty làm game trẻ đầy tiềm năng được TiMi Studio hợp tác để cho ra mắt tựa game âm nhạc thần tượng mới, một bản spin-off của tựa game Liên quân nổi tiếng của hãng này: WaVe

Để có thể quảng bá trò chơi này rộng rãi hơn đến với công chúng, cần phải tạo ra một trang web riêng. Trang web này sẽ cập nhật những thông tin mới nhất và chi tiết nhất về game như tổng quan về trò chơi, lối chơi, những bản cập nhật mới, bản vá lỗi, mục liên hệ với nhà phát triển để được hỗ trợ,… và quan trọng nhất là đường dẫn tải game để thuận tiện cho người chơi muốn trải nghiệm tựa game này nếu cảm thấy hứng thú.

 Phân tích yêu cầu ban đầu, vận dụng tốt kiến thức về nguyên lý thị giác để thiết kế được một trang web hút mắt và tạo ấn tượng đối với người chơi

 Thành thạo sử dụng Photoshop để thiết kế giao diện web

 Sử dụng HTML, CSS để hoàn thành trang web từ bản thiết kế PSD  Bản thiết kế có đầy đủ các chức năng, phân loại các tính năng theo

danh mục

<b>II. Kế hoạch thực hiện</b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

 Từ ngày 18/6 đến ngày 19/6 : Tham khảo tài liệu, website khác  Từ ngày 20/6: Tìm kiếm thư viện ảnh

 Từ ngày 1/7 đến ngày 5/7 : Thiết kế sơ bộ bằng phần mềm MedibangPaintPro, phối màu (đơn sắc), chọn font, cỡ font  Từ ngày 7/7 đến ngày 10/7 : Thiết kế giao diện các trang web bằng

Photoshop, xuất bản thành bản HTML hoàn chỉnh từ bản

 Trình duyệt kiểm thử: Google Chrome, Cốc Cốc

<b>IV. Ý tưởng thiết kế</b>

Số lượng trang: 1 trang chủ và 5 trang con Độ sâu: 3 mức

Gam màu chủ đạo: Tím (#70429b,

#

793e9d

),

Trắng(#ffffff), Xanh(#678aa9)

Trang web sửu dụng quy tắc phối màu tương đồng Analogous hay còn được biết đến là quy tắc phối màu liền kề. Đây là cách sử dụng từ 2-3 màu sơn liền kề trên bánh xe màu sắc, qua đó tạo nên sự cuốn hút và nhã nhặn. Thiết kế sử dụng tơng màu tím chủ đạo gợi sự bí ẩn, cuốn hút, càng phù hợp với chủ đề game lấy bối cảnh vũ trụ, thiên hà.

Font chữ sử dụng :

a) VP-Major Snafu cho logo công ty

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

b) Fixedsys cho Header Top c) Britannic Bold cho Footer

d) Fixedsys, Footlight MT Light, Franklin Gothic Medium Cond cho tất cả phần Content

<b>Bố cục layout của trang chủ, style và cách thức thiết kế:</b>

 Header Top: Logo, Game, Characters, News, Updates, Community, Support

 Content: Chia làm 2 phần là banner hình ảnh game và phần nội dung

 Footer: Privacy Policy, Terms of Service, About Us, Contact Us, Logo nhà phát triển game, liên kết dẫn tới các trang mạng xã hội chính của game

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>Trang chủ</b>

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b> Characters</b>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b> Profile (trang con của Characters)</b>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>Community</b>

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>Sơ đồ phân cấp Website</b>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>V. Giao diện Website</b>

<b>1. Trang chủ</b>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b> 2.2. Characters</b>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b> 2.2. Characters (Trang con)</b>

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b> 2.4. Updates</b>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b> 2.5. Community</b>

</div>