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

I.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 ngoà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ìmkiế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 quá 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

II.Ý 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:

 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.

III Chi tiết

1 Màu sắc

 RGB: 131218( mono/ dark)R: 7%

G: 7%B: 9%

 Ngoài ra còn sử dụng màu chữ #0c4853, background header và Footer màu #000000

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òngchữ Update với cài đặt giống với dòng bên trên

+ Icon quả chuông: Hình quả chuông tải trên google, còn hìnhdấ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ớinhững thông số sau:Transformer:

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

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

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útplay:

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 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à