BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

(bìa 1, bìa đóng giấy màu)

BÀI TẬP LỚN

HỌC PHẦN: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

TÊN BÀI TẬP LỚN : KẾT THÚC MÔN HỌC

Sinh viên thực hiện Khóa Lớp Mã sinh viên

Vũ Đình Hiệp *C* K11 CNTT 6 20200869
Đỗ Thị Sao K11 CNTT 6 20201518
Nguyễn Quốc Hưng K11 CNTT 6 20200868

Bắc Ninh, tháng 11 năm 2021

 BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

(trang phụ bìa số 2, bìa mềm)

BÀI TẬP LỚN

HỌC PHẦN: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

Nhóm: Vũ Đình Hiệp, Đỗ Thị Sao, Nguyễn Quốc Hưng

TÊN (BÀI TẬP LỚN): KẾT THÚC MÔN HỌC

Điểm Điểm
Sinh viên thực Mã sinh Ký tên
STT Khóa Lớp bằng bằng
hiện viên SV
số chữ
K11 CNTT
1 Vũ Đình Hiệp 20200869 Hiệp
6
K11 CNTT
2 Đỗ Thị Sao 20201518 Sao
6
Nguyễn Quốc K11 CNTT
3 20200868 Hưng
Hưng 6

CÁN BỘ CHẤM 1 CÁN BỘ CHẤM 2

(Ký và ghi rõ họ tên) (Ký và ghi rõ họ tên)

Bắc Ninh, tháng 11 Năm 2021

 MỤC LỤC
PHÂN CÔNG CÔNG VIỆC......................................................................................ii
MỞ ĐẦU...................................................................................................................... 1
1. Lí do chọn đề tài.................................................................................................1
2. Mục đích nghiên cứu...........................................................................................1
3. Đối tượng nghiên cứu.........................................................................................1
4. Phạm vi nguyên cứu............................................................................................1
5. Nhiệm vụ nghiên cứu..........................................................................................1
NỘI DUNG.................................................................................................................. 2
CHƯƠNG 1: NGUYÊN LÝ THIẾT KẾ TRONG SẢN PHẨM..............................2
1.1. Các kiến thức đã sử dụng.................................................................................2
1.2. Nguyên lý thiết kế trong sản phẩm..................................................................2
CHƯƠNG 2: TRIỂN KHAI VÀ KẾT QUẢ THỬ NGHIỆM..................................3
2.1. Triển khai thử nghiệm......................................................................................3
2.2. Kết quả thử nghiệm:........................................................................................3
KẾT LUẬN..................................................................................................................4
1. Những phần đã làm được....................................................................................4
2. Hạn chế...............................................................................................................4
3. Khó khăn khi làm bài..........................................................................................4
4. Kinh nghiệm rút ra sau bài làm...........................................................................4
5. Thành quả...........................................................................................................5
6. Ứng dụng............................................................................................................7
 PHÂN CÔNG CÔNG VIỆC

Tên thành viên Công việc

Đưa ra ý tưởng đề tài, nguyên lý thiết kế, và

Vũ Đình Hiệp
code chính.

Đỗ Thị Sao Là người làm Word của nhóm.

Cùng Hiệp đưa ra nguyên lý thiết kế và là

Nguyễn Quốc Hưng
người làm PowerPoin của nhóm.
 MỞ ĐẦU
1. Lí do chọn đề tài
Trong hệ thống Marketing hiện nay, việc quảng bá sản phẩm của doanh nghiệp là
vô cùng cần thiết và quan trọng. Đặc biệt ở các doanh nghiệp lớn thì điều đó lại trở nên
rất là cấp bách và cần thiết đóng vai trò đến doanh thu của các doanh nghiệp. Một doanh
nghiệp có được doanh thu lớn là nhờ vào việc quảng bá sản phẩm để khách hàng hiểu rõ
hơn về sản phẩm của mình. Có rất nhiều cách quảng bá sản phẩm. Một trong những cách
mà rất nhiều các doanh nghiệp lớn đang làm đó là quảng bá trên nền tàng google hay còn
gọi là webiste. Vì vậy nhóm em đã nguyên cứu đến việc tạo ra một trang website để
quảng bá nhóm nhạc có tên là” The Band”. Giúp cho người dùng tiếp cận đến nhóm nhạc
một cách nhanh nhất và hiệu quả nhất.
2. Mục đích nghiên cứu
Trang website tạo ra sẽ có rất nhiều tính năng mà người dùng có thể tiếp cận. Có
thể seach để tìm kiếm, có thể xem thông tin về nhóm nhạc, có thể xem hình ảnh, lịch
trình và có thể đặt vé trực tiếp trên website.
3. Đối tượng nghiên cứu
- Ứng dụng được các nguyên lý thiết kế vào trang website.
- Sử dụng được HTML, CSS, JS.
4. Phạm vi nguyên cứu
- Nguyên cứu cách code và chạy chương trình.
5. Nhiệm vụ nghiên cứu
- Đưa ra một bài code hoàn chỉnh, chương trình đầy đủ để tạo ra một trang website
đầy đủ nội dung đã học.
- Đem lại cảm giác thoải mái, ít cần nhớ dữ liệu cho người dùng.
 1

NỘI DUNG
CHƯƠNG 1: NGUYÊN LÝ THIẾT KẾ TRONG SẢN PHẨM
1.1. Các kiến thức đã sử dụng
- Sử dụng ngôn ngữ đánh dấu văn bản html.
- Dùng Form: biểu mẫu nhập dữ liệu.
- Các thẻ bố cục nội dung.
- CSS cơ bản.
- Sử dụng javascript.
- Sử dụng hiệu ứng.
1.2. Nguyên lý thiết kế trong sản phẩm
- Sử dụng hình nền màu trắng trong các khung nền sản phẩm: phù hợp mới chủ đề
nhóm nhac, đây là màu đơn giản và nhẹ nhàng giúp cho hình ảnh hình ảnh được nổi bật,
bắt mắt người truy cập.
- Về màu sắc của chữ: nền trắng – chữ đen, nền đen – chữ trắng: là cặp màu tương
phản cực tốt, hài hòa, không lóa mắt, nền trắng sẽ nhường chỗ cho các chữ đen nổi bật
hơn và ngược lại.
- Hiệu ứng hover khung chữ: đen chuyển xám, xám chuyển đen gây tò mò, thu hút
mắt nhìn
- Kiểu bố cục: bố cục đơn giản, dễ tương tác, chia bố cục đúng theo tiêu chuẩn,
không quá thưa cũng không quá dày.
 Phần đầu:
- Banner sử dụng slider là ý tưởng nổi bật nhất của trang web.
- Với hiệu ứng khung chữ: đen chuyển xám gây tò mò, thu hút mắt nhìn.
 Phần thứ hai:
- Nội dung đầu nói về nhóm nhạc “ The Band” yêu âm nhạc như thế nào.
- Nội dung hai là lịch trình của nhóm nhạc “ The Band” thời gian địa điểm và có
thể đặt vé trực tiếp.
-Nội dung ba là làm việc với nhóm nhạc “ The Band” tại website.
 2
 Phần cuối:
- Nơi người truy cập để biết thêm thông tin của trang web.

CHƯƠNG 2: TRIỂN KHAI VÀ KẾT QUẢ THỬ NGHIỆM

2.1. Triển khai thử nghiệm

- Thực hiện lập trình, xây dựng tạo nên một website hoạt động dựa trên 2 nền tảng
lớn đó là trên mobile (hay còn gọi là điện thoại di động) và PC (hay còn gọi là máy tính,
laptop).
- Đối với PC: chương trình website có tất cả đầy đủ hình ảnh và nội dung để cho
khách hàng (hay còn gọi là người dùng) có một cái nhìn tổng quan nhất về website. Dựa
trên tiêu chí người dùng ít phải nhớ nhiều nội dung, dữ liệu, thì nhóm đã thiết kế website
không quá dài, nhưng vẫn tạo được ấn tượng tốt với khách hàng bởi màu sắc và cách chia
bố cục hợp lý. Tạo cảm giác thoải mái khi dùng và làm cho khách hàng thực hiện mọi
thao tác trên website một cách dễ dàng và đạt được hiểu quả tốt nhất.
- Đối với mobile: Với kiến thức responsive mà nhóm đã được học thì đã giúp cho
website nhóm tương thích với nền tảng mobile, một nền tảng có đông đảo người sử dụng.
Với sự hiểu biết về cảm giác người dùng thì website của nhóm em đã ngắn gọn hơn so
với trên nền tảng PC nhưng không làm mất đi nội dung của web. Nhiều ảnh và danh sách
menu đã được thu gọn, giúp người dùng không có cảm giác nhàm chán và cảm thấy
webiste không có quá nhiều nội dung được nói đến, khiến người dùng không hiểu hết về
website. Qua việc triển khai thử nghiệm, thì nhóm đã rút ra được kinh nghiệm và hoàn
thành website tốt hơn, tạo ấn tượng tốt đối với người dùng.
2.2. Kết quả thử nghiệm:
Nhóm chúng em đã demo và chạy chương trình thành công ở trên 2 nền tảng
Mobile và PC.
3
 KẾT LUẬN
1. Những phần đã làm được
- Sử dụng html, css, js.
2. Hạn chế
- Chưa sử dụng hết các tính năng trong giao diện website.
3. Khó khăn khi làm bài
- Do ảnh hưởng dịch bệnh không thể gặp nhau dẫn đến khó trao đổi trong quá trình
làm bài.
- Tài liệu trên mạng lưu thưa, không đầy đủ.
-Một số thành viên trong nhóm không thể code được html, css.
4. Kinh nghiệm rút ra sau bài làm
- Hiểu biết thêm một số tính năng của js.
- Thuần thục hơn trong việc căn chỉnh và phối màu để có một trang web đẹp và dễ
nhìn.
- Biết tạo ra các điểm đặc biệt và nổi bật cho trang web.
- Luôn tìm tòi, tìm hiểu kiến thức.
- Chủ động trong mọi tình huống trong nhóm.

4
5. Thành quả

5
6
 6. Ứng dụng
Trang web được ứng dụng trong quảng bá nhóm nhạc “ The Band” và cung cấp
thông tin cho người dùng về nhóm nhạc.