BÀI TẬP LỚN THIẾT KẾ GIAO DIỆN WEB Tên đề tài: Thiết kế giao diện web Film

HỌC VIỆN NÔNG NGHIỆP VIỆT NAM
KHOA CÔNG NGHỆ THÔNG TIN

***

BÀI TẬP LỚN
THIẾT KẾ GIAO DIỆN WEB
Tên đề tài: Thiết kế giao diện web Film
STT
1
2
3
4

Sinh viên thực hiện
Nguyễn Trần Cảnh
Hoàng Thị Hịa
Hồng Đức Kiên
Hồng Tuấn Hùng

Mã SV
637606
637634
637837
637639

Giáo viên hướng dẫn: Phạm Thị Lan Anh

Hà Nội 2019

Lớp

K63TH
K63TH
K63TH
K63TH

Điểm


I.

II.

Tìm hiểu
 Do nhu cầu giải trí của mọi người việc xây dựng một website
xem phim online đóng vai trị là kênh truyền thơng kết nối với
những chương trình giải trí, phim ảnh, truyền hình,... và cơng cụ
kinh doanh hàng đầu cho các cá nhân, tổ chức, doanh nghiệp.
 Lợi ích với người sử dụng website: xem phim mọi nơi, mọi lúc,
khơng bỏ lỡ các chương trình đặc sắc trên TV hay chương trình
giải trí nước ngồi
 Lợi ích đối với chủ thiết kế web phim online:
o Mỗi ngày nhận về số lượng người truy cập “khủng” từ
khắp mọi nơi trên đất nước.
o Tỉ lệ tương tác trang web luôn ở mức cao nhờ số lượng
người dùng và đăng kí ngày một nhiều. Điều này sẽ giúp
trang web của bạn được đánh giá cao trên các ơng lớn tìm
kiếm như Google, Bing, Yahoo…
o Khi trang web của bạn đạt thứ hạng cao nhờ lượng khách
hàng thường xuyên truy cập, bạn có thể nhận quảng cáo
cho các bên thứ 3 và nhận thêm nguồn lợi từ việc này.

o Đi xa hơn trong q trình quản lí thành kinh doanh, bạn
có thể thay đổi các chế độ xem để kiếm lợi nhuận. Bạn
nên thêm vào những chương trình bản quyền, chương
trình HD,... để tính thêm phí song song với những
chương trình miễn phí đã có sẵn
Ý tưởng
Dựa trên Microsoft Store

 Một trang web có được lượng truy cập cao khơng khó nhưng duy
trì vững lượng người dùng đó mới là yếu tố quan trọng để tồn tại
và phát triển. Một trang web phim online cần có những chức năng
cơ bản sau đây để làm hài lòng người dùng:


III.

 Tốc độ load nhanh: Tốc độ luôn là yếu tố mà khách hàng dùng để
đánh giá trang web. Một web phim có tốc độ load nhanh, phim
khơng giật, lắc,... chính là điều mà khách hàng mong muốn.
 Hình ảnh sắc nét, HD: Giao diện xem phim cần có nhiều độ phân
giải từ thấp đến cao, đến chuẩn HD, giúp người dùng có nhiều lựa
chọn phù hợp hơn cho mình.
 Các chức năng đăng, tải, sửa, xóa phim: Admin là người có quyền
đăng tải và quản lí các chương trình trên website.
 Phân loại danh mục phim: Phân loại phim thành năm sản xuất, thể
loại, quốc gia, phim điện ảnh, phim truyền hình,... để người dùng
dễ dàng tìm kiếm và sử dụng.
 Quản lí người xem và chế độ thành viên: Hiển thị số người đang
truy cập, cho phép đánh giá phim và để lại những bình luận thể
hiện ý kiến của người dùng.

Chi tiết
1. Màu sắc
 RGB: 131218( mono/ dark)
R: 7%
G: 7%
B: 9%
 Ngồi ra cịn sử dụng màu chữ #0c4853, background header
và Footer màu #000000
2. Hình ảnh
Nguồn ảnh , />3. Font chữ
Website sửa dụng font myriad-pro-cufonfonts
MYRIADPRO-BOLD.OTF

MYRIADPRO-BOLDCOND.OTF

MYRIADPRO-COND.OTF

MYRIADPRO-REGULAR.OTF

MYRIADPRO-BOLDCONDIT.OTF

MYRIADPRO-CONDIT.OTF

MYRIADPRO-BOLDIT.OTF

MyriadPro-Light.otf

MYRIADPRO-SEMIBOLD.OTF

MYRIADPRO-SEMIBOLDIT.OTF

4. Bố cục
Dựa vào chuẩn Bootstrap Grid System Photoshop Action – 1170px


5.
Chi tiết từng trang
1. Tạo file mới (File > New) với kích thước 1600x2450 và
72 dpi. Sử dụng màu background là #131218
2. Tạo phần header với công cụ Rectangle Tool với màu là
#000000

3. Thêm icon Home vào


4. Thêm các chữ là Discover, Movie, TV series, Kids với các thông số
sau

5. Với phần bên phải
+ Tạo thanh search với công
cụ Rounded Retangle Tool với cài đặt

+ Thêm icon Search tải trên Google
+ Thêm dòng chữ “Search: movie’s name, director, year...” với cài đặt

+ Với icon Update cũng tải trên Google + dòng
chữ Update với cài đặt giống với dòng bên trên


+ Icon quả chng: Hình quả chng tải trên google, cịn hình

dấu chấm thì tạo bởi cơng cụ Ellipse Tool với Fill màu đỏ

+ Hình Avatar:
Sử dụng cơng cụ Ellipse Tool vẽ 1 hình trịn với cài
đặt:

Giữ phím Shift để vẽ hình trịn

Tải thêm trên google hình ảnh bất kì

Giữ phím Alt và cho chuột vào giữa 2 layer để thêm ảnh vào bên trong
hình trịn


B, Phần Main:

1, Sử dụng công cụ New Guid Layout để chia trang



Với cài đặt sau:

Chia trang ra làm nhiều phần: Main, Trending TV Show, 2019 Top Movie,
Series Movie
1, Phần Main:


Tải một ảnh vào phần main:

Kéo layer ảnh vào phần add layer mask

Trơng nó sẽ giống thế này sau khi
kéo


Sử dụng công cụ gradient tool kéo từ dưới lên để tạo độ mờ cho ảnh

Tạo chữ cho ảnh:
Thêm 2 dịng chữ này với
những thơng số sau:
Transformer:

Action, Fantasy, Drama | 2014 | USA | 165 min
với Opacity layer là 80%


Tạo nút button với công cụ Rounded Retangle Tool và cài đặt sau
Để tạo button WATCH NOW

Button Playlist

Phần Poster

Tạo thêm 1 lớp phủ màu đen vào 5 bức ảnh và xóa phần bức ảnh của
Transformer với layer Fill
53%
Thêm phần khung màu xanh
cho ảnh Transfomer


Cuối cùng trông như này:

Đến phần Trending TV Show:

Tạo chữ với định dạng sau:

Chữ “Today”


Thêm ảnh với Guide Layout đã tạo từ trước

Sử dụng pentool để vẽ hình tam giác
Với cài đặt sau:

Thêm lớp phủ dưới ảnh để ghi tên phim bằng công cụ Rectangle Tool Fill màu
đen. Chữ với định dạng như sau:

Tạo button với công cụ Ellipce Tool với cài đặt sau để vẽ nút
play:

Hình tam giác lấy trên Google:


Tạo chữ load more với công cụ Rectangle Tool với Fill #1a191f

Phần 2019 Top movie

Cũng sử dụng Guide Layer để tạo

Thêm Add vector map vào 2 ảnh trái phải và sử dụng công cụ Gradient Tool để
tạo độ mờ cho 2 ảnh

Thêm 2 nút button với tên của phim


Tạo tên chủ đề :
Đường kẻ thì sử dụng cơng cụ pen tool để vẽ với fill bằng none và Stroke màu
trắng 1px

Phần series Movies

Tạo series như cài đặt ở bước trên

Tạo 3 poster


Tạo khung với công cụ Rectangle Tool với cài đặt Fill None, màu stroke
#3fbcef với kích thước 3px. Sử dụng pen tool để vẽ hình tam giác với Fill màu
#3fbcef và khơng có stroke


Thêm 1 lớp phủ vào ảnh để chèn chữ:

Thêm các chữ vào trong ảnh
Với hình ngơi sao là icon lấy trên Google.
Với thông số các chữ lần lượt từ trên xuống


Tạo thêm 2 nút button bằng công cụ Rounded Rectoggle Tool với radius = 10px:

Với cài đặt như sau:

Thêm độ mờ cho 2 hình ảnh bên cạnh

Tạo tấm poster lớn bên cạnh
1, Dùng công cụ toggle tool với cài đặt như sau:


Để vẽ phần khung

Thêm 1 bức ảnh vào bên trong

Và sử dụng để đè lên phần khung của ảnh

Thêm nút play vào bức ảnh
.


3, Phần Footer

Tạo các chữ màu xanh với thông số sau:

Chữ “Copyright …” với thông số

Tạo thanh search


Với phần khung là