Đồ án môn thiết kế sản phẩm đa phương tiện, đồ họa tĩnh (11)

GVHD: ThS.Nguyễn Lê Mai
Sinh viên: Nguyễn Hương Giang
Mã SV: B17DCPT059

BÁO CÁO

MÔN THIẾT KẾ ẤN
PHẨM ĐIỆN TỬ
Năm học: 2019-2020


A. MỞ ĐẦU
I. Tổng quan chung
1. Emagazine là gì?
Báo trực tuyến, báo điện tử, báo mạng hay tin tức trực tuyến là loại
hình báo viết được xây dựng theo hình thức một trang web và phát hành
dựa trên nền tảng Internet. Báo điện tử được tòa soạn điện tử xuất bản, cịn
người đọc báo dựa trên máy tính, thiết bị cá nhân như máy tính bảng, điện
thoại di động trung cao cấp,... có kết nối internet.
2. Phân loại

Theo wikipedia

Theo cách thức biên tập và phát hành có thể chia ra:
- Báo lai (hybrid), là bản báo trực tuyến phát hành song song với bản báo
in. Ngày nay tất cả các báo in đều có bản phát hành trực tuyến. Các báo
có đội ngũ phóng viên hùng hậu thì cập nhật tin liên tục và phiên bản trực
tuyến có thể khác hẳn bản in. Khái niệm kỳ phát hành như "báo ngày",
"báo tuần" cũng khơng cịn.
- Chỉ trực tuyến (online-only), phát hành gần như khơng có bản in tương
ứng. Đây là báo do các hãng thơng tấn, phát thanh, truyền hình lập ra.

Trường hợp đơn giản là một báo mới ra đời mà việc phát hành bản in khơng
có khả năng cạnh tranh và không hiệu quả về kinh tế.
- Báo tổng hợp tin tức từ các báo khác (News Aggregators), hoặc đơn giản
là quét các dữ liệu, thông tin từ các trang khác. Người ta gọi chung các báo
điện tử dạng này, theo một cách khác là "Báo tự động cập nhật tin tức".
Theo wikipedia

1


B. SẢN PHẨM
II. Quy trình làm sản phẩm
1. Lên ý tưởng.
Thông qua các sản phẩm báo điện tử chỉ trực tuyến của VTV, kênh
14,... em đã bắt đầu lên ý tưởng về thiết kế lại cho một số bài báo có thiết
kế “chưa ổn” lắm.
Từ đó em lên một mindmap để tìm kiếm nội dung bài mà mình sẽ
thiết kế phần này em viết tay và ngắn gọn ra các cụm từ khóa.

Sau khi nắm chắc hướng mà mình triển khai, em lên nghiên cứu
thêm các mẫu emagazine trên các trang của VTV, kênh 14,... và các ý
tưởng thiết kế trên Behance, Pinterest,... và lập ra moodboard.

2


2. Thiết kế layout
Sau khi có ý tưởng về cả nội dung và hình thức, em lên layout về
trang chủ và trang con. Tuy rằng sau này hình thức trang chủ và trang con
có chút thay đổi nhưng hầu như vẫn bám theo layout đã lên từ trước.

Vì nội dung của các bài viết đều đã thể hiện ở ảnh bìa vậy nên trang
chủ em muốn các phần chỉ cịn hình minh họa, sẽ tiết kiệm được khơng
gian và hiển thị được nhiều bài viết cùng một lúc.
Căn cứ theo luật căn chỉnh, và tương phản trong thiết kế, em cho ra
layout trang chủ như sau, bài viết “hot” luôn nổi bật nhất.

3


2. Thiết kế layout
Đối với phần trang con, ảnh bìa là phần quan trọng nhất, vì nó là
nơi mà người đọc sẽ nhìn vào đầu tiên của mỗi bài báo, vậy nên em sẽ để
cho phần ảnh bìa chiếm tồn bộ (và dài hơn) phần màn hình để người đọc
có thể lăn chuột máy tính (hay lướt điện thoại. tablet) xuống dưới tiếp tục
đọc nội dung. Ngoài ra các khi cuộn trang sẽ ln có một nút bấm quay về
đầu trang (áp dụng những quy tắc về thói quen người dùng)

4


3. Thiết kế sản phẩm
Đối với phần trang bìa, em sử dụng 4 màu chủ đạo và cơ bản vì em
hướng tới một trang báo dành cho giới trẻ vậy. Dựa theo nguyên tắc về tính
lặp lại (về màu sắc và bố cục) và tương phản (trong kích thước và màu sắc)
Phần nút di chuyển giữa các bài báo
Khung tìm kiếm từ khóa
để tìm bài nhanh hơn

typeface : SVN-Gotham

#084054

#ab2f4f

#f89921

#e6f5fc

Sử dụng nguyên tắc căn chỉnh để
làm thông tin gọn gàng hơn

Theo tâm lý người dùng ln muốn
quay lại vị trí cũ hay chuyển sang
trạng thái mới bất kỳ lúc nào.

Sử dụng hiệu ứng lân cận phân tách
thơng tin có liên quan với nhau
Phân cấp thông tin

5


3. Thiết kế sản phẩm
Đối với trang con, em cũng sử dụng 4 màu chủ đạo và đồng thời sử
dụng các thiết kế typography để bài viết nổi bật hơn.
#101923

#ab2223

#2a7f99

#ffffff

Typeface :
Gotham

#deddda

#f8991e

#ef3734

#0e2e3f
Typeface :
A love of thunder
UTM ClassizismAntiqua
UTM A&S Heartbeat

6


3. Thiết kế sản phẩm

Typeface :
Gotham

7


3. Thiết kế sản phẩm

Typeface :
Gotham
UTM ClassizismAntiqua

#2b3d5e

#f26b6b

#567380

#ffffff

Typeface :
Gotham

8


3. Thiết kế sản phẩm
#2b3d5e

#f26b6b

#567380

#ffffff

Typeface :
Gotham
UTM Aptima

4. Masterpage của các trang

Typeface :
Gotham

Cảm ơn thầy cô đã theo dõi

9