(TIỂU LUẬN) báo cáo học PHẦN tư DUY THIẾT kế vật vờ studio, liên kết đến website vatvostudio vn

PHÂN HIỆU ĐẠI HỌC ĐÀ NẴNG TẠI KON TUM
KHOA CÔNG NGHỆ
------------------------------

BÁO CÁO HỌC PHẦN
TƯ DUY THIẾT KẾ

GVHD : ThS. Lê Thị Bảo Yến
SVTH : Phan Sử Bảo
San Kimlong
Oum Chanmakara
MSSV : 2017480201026
1917480201020
1917480201017
Lớp

: K20TT

Kon Tum, tháng 02 năm 2022


MỤC LỤC
1. GIỚI THIỆU................................................................................................... 1
1.1. Tên website............................................................................................................ 1
1.2. Chủ website........................................................................................................... 1
1.3. Chức năng của website......................................................................................... 1

2. PHÂN TÍCH TƯ DUY THIẾT KẾ................................................................2
2.1. Bố cục website sử dụng......................................................................................... 2
2.1.1. Header............................................................................................................ 2
2.1.2. Footer............................................................................................................. 3

2.2. Quy tắc của sự đơn giản....................................................................................... 4
2.2.1. Xây dựng sản phẩm tập trung vào giá trị cốt lõi của nó...............................4
2.2.2. Loại bỏ những điều khơng cần thiết.............................................................. 4
2.2.3. Quá nhiều lựa chọn sẽ khiến người dùng hoảng sợ.....................................5
2.2.4. Sử dụng màu sắc và typography để thể hiện phân cấp nội dung trên trang
5
2.3. Quy tắc phối màu.................................................................................................. 7
2.3.1. Phối màu đơn sắc (Monochromatic)............................................................. 7
2.4. Các nguyên tắc typography................................................................................. 7

3. ĐÁNH GIÁ THIẾT KẾ..................................................................................8
3.1. Ưu điểm của thiết kế............................................................................................. 8
3.2. Nhược điểm của thiết kế....................................................................................... 8
3.3. Đề xuất giải pháp.................................................................................................. 8


DANH MỤC HÌNH
Hình 1.1 – Vinh Vật Vờ...................................................................................... 1
Hình 2.1 – Bố cục của trang web....................................................................... 2
Hình 2.2 – Logo Vật Vờ Studio.......................................................................... 2
Hình 2.3 – Liên kết đến các trang mạng xã hội................................................ 2
Hình 2.4 – Danh mục bài viết theo từng chủ đề................................................ 3
Hình 2.5 – Thanh tìm kiếm................................................................................ 3
Hình 2.6 – Footer của trang web........................................................................ 3
Hình 2.7 – Tập trung vào giá trị cốt lõi............................................................. 4
Hình 2.8 – Loại bỏ những điều khơng cần thiết................................................ 4
Hình 2.9 – Quá nhiều lựa chọn sẽ khiến người dùng hoảng sợ.......................5
Hình 2.10 – Phân cấp nội dung trên trang........................................................ 6
Hình 2.11 – Phối màu đơn sắc............................................................................ 7
Hình 2.12 – Typography trong tên danh mục và tiêu đề..................................7

Hình 2.13 – Typography trong nội dung........................................................... 8


1.

GIỚI THIỆU

1. 1. Tên website
Vật Vờ Studio, liên kết đến website: vatvostudio.vn.
1. 2. Chủ website
Trần Xuân Vinh (Vinh Vật Vờ).

Hình 1.1 – Vinh Vật Vờ
Vinh Vật Vờ được biết đến là một blogger nổi tiếng trong lĩnh vực công nghệ.
Anh chuyên làm các video đưa ra bình luận, review về các thiết bị mới, đặc biệt là
điện thoại của các thương hiệu khác nhau như: Apple, Samsung, Xiaomi... Tất cả sản
phẩm, thiết bị mới trên thị trường đều được anh cùng đội ngũ nhân viên của mình
nhanh chóng cập nhật và đưa ra nhận xét khách quan, chi tiết để người dùng có thêm
thơng tin tham khảo.
1.3. Chức năng của website
Vật Vờ Studio là một trong những kênh công nghệ hàng đầu Việt Nam với những
nội dung đánh giá chi tiết chất lượng cao về các sản phẩm như: điện thoại thơng minh,
máy tính bảng, laptop, PC, nhà thơng minh, đồ gia dụng… Ngoài ra, cập nhật tin tức,
thủ thuật, đánh giá hàng ngày về các sản phẩm công nghệ. Các bài viết đều được đầu
tư trau chuốt từ nội dung cho tới hình ảnh.

1


2.

PHÂN TÍCH TƯ DUY THIẾT KẾ

2. 1. Bố cục website sử dụng
Bố cục được sử dụng là bố cục dọc. Màn hình được chia thành 2/3 với phần lớn
tập trung vào những nội dung đáng chú ý. Các bài viết mới nhất được đăng kèm với
hình ảnh minh họa, tiêu đê va mô ta ngắn gọn cho người dùng lựa chọn. Phần nhỏ hơn
ở bên phải được dùng để giới thiệu những thủ thuật về công nghệ hoặc dành cho
quảng cáo.

Hình 2.2 – Bố cục của trang web
2.1.1. Header
Phần đầu web, logo Vật Vờ Studio được đặt chính giữa màn hình, gây sự chú ý:

Hình 2.3 – Logo Vật Vờ Studio
Phía bên trái là đường liên kết đến các trang mạng xã hội khác của studio:

2


Hình 2.4 – Liên kết đến các trang mạng xã hội
Tiếp đến là những danh mục các bài viết:

Hình 2.5 – Danh mục bài viết theo từng chủ đề
Cuối cùng là nút tìm kiếm, khi ấn vào thì thanh tìm kiếm sẽ hiện ra cho người
dùng nhập và tìm bài viết mình muốn.

Hình 2.6 – Thanh tìm kiếm
2.1.2. Footer
Cuối trang web là liên kết đến các trang mạng xã hội cũng như thơng tin liên hệ.

Hình 2.7 – Footer của trang web

3


2.2. Quy tắc của sự đơn giản
2.2.1. Xây dựng sản phẩm tập trung vào giá trị cốt lõi của nó
Vật Vờ Studio là trang web có mục đích chính là đánh giá các thiết bị công nghệ.
Như vậy, đa phần các bài viết đều sẽ tập trung phần lớn vao nôi dung, đưa nôi dung lên
hang đâu. Mỗi bài viết đều có hinh anh minh hoa, tiêu đê đươc phóng to tạo sự nơi bât,
cộng với vài dịng mơ ta và thơng tin đi kèm. Từ đó sẽ giúp cho ngươi dung co thê dê
dang lưa chon nội dung mà mình muốn tìm hiểu hơn.

Hình 2.8 – Tập trung vào giá trị cốt lõi
2.2.2. Loại bỏ những điều không cần thiết
Mỗi bài viết đều có phần mơ ta rất ngắn gon trong khoảng từ 2 đến 3 dòng và
cùng với đó là chu đê của bài viết. Đơi khi, phần thơi gian và tác giả bài viết cũng sẽ
được lược bớt đi. Do đó, ngươi dung co được cho mình một trai nghiêm tơt hơn vì dêễ
xác định được thơng tin muốn hướng tới, không bi phân tâm bơi nhưng điều thưa thãi.

Hình 2.9 – Loại bỏ những điều khơng cần thiết
4


2.2.3. Quá nhiều lựa chọn sẽ khiến người dùng hoảng sợ
Khi có bài viết mới được đăng lên, người thiết kế của website sẽ sắắ́p xếp chúng
một cách khoa học theo từng danh mục, chủ đề riêng. Như vậy sẽ vừa tiết kiệm được
thời gian cho người dùng, vừa được tránh sự choáng ngộp khi trước mặt họ là quá
nhiều sự lựa chọn.

Hình 2.10 – Quá nhiều lựa chọn sẽ khiến người dùng hoảng sợ

5


2.2.4. Sử dụng màu sắc và typography để thể hiện phân cấp nội dung trên
trang
Để thể hiện phân cấp nội dung trên trang, các nhà thiết kế đã áp dụng hiệu quả
màu sắắ́c và typography. Điều này không những giúp cho bài viết có thể truyền tải được
nội dung một cách thu hút mà cịn khiến nó trở nên dêễ dàng nhận diện hơn và đáng
nhớ hơn.

Hình 2.11 – Phân cấp nội dung trên trang
Trong hình minh họa, đầu tiên ta thấy phần danh mục của bài viết đã được
chuyển thành màu đỏ để tạo sự khác biệt. Tiêu đề được in đậm và sử dụng font chữ có
chân (serif) để tăng tính nổi bật của nó. Chưa hết, nơi dung đươc trinh bay vơi format
doc, trên môt dong chỉ gồm khoang 10-13 tư, giup ngươi đoc lươt tư trên xuông dươi
ma không phai đao mắt nhiêu, tăng hiêu suât đoc.

6


2.3. Quy tắc phối màu
2.3.1. Phối màu đơn sắc (Monochromatic)
Sử dụng một màu chủ đạo hoặc sử dụng nhiều kiểu sắắ́c độ khác nhau trong cùng
một màu để chúng cộng hưởng với nhau. Ở đây là chữ đen trên nền trắắ́ng, hoặc chữ
trắắ́ng trên nền đen. Vì khơng q cầu kì và phức tạp, nên kiểu phối màu đơn sắắ́c nhìn
rất dêễ chịu với người nhìn.

Hình 2.12 – Phối màu đơn sắc
2.4. Các nguyên tắc typography
Đầu tiên là phần tên danh mục của bài viết. Việc sử dụng font sans-serif, in hoa
tồn bộ (UPPERCASE) và thu nhỏ sẽ khiến nó khơng thu hút q nhiều sự chú ý.
Tiếp đó, phần tiêu đề bài viết sử dụng font Times News Roman Bold (serif), với
kích cỡ lớn. Kiểu cách khá cổ điển và thông dụng của con chữ là một lựa chọn tuyệt
vời để nó trở nên nổi bật trong mắắ́t người đọc.

Hình 2.13 – Typography trong tên danh mục và tiêu đề

7


Cuối cùng là phần nội dung của bài viết. hong cách hiện đại, sạch sẽ và rõ ràng
của font sans-serif cùng với cỡ chữ thơng dụng (12), giãn cách dịng vừa phải sẽ giúp
cho người xem trên màn hình máy tính có thể đọc dêễ dàng và hiệu quả hơn.

Hình 2.14 – Typography trong nội dung

3.

ĐÁNH GIÁ THIẾT KẾ

3. 1. Ưu điểm của thiết kế
- Bố cục và nội dung phù hợp với mục tiêu của website, đơn giản, dêễ tiếp
cận
-

Vận dụng hợp lý những quy tắắ́c thiết kế

-

Dêễ thao tác và điều hướng

- Tương thích tốt với những màn hình nhỏ hơn như điện thoại và máy tính
bảng.
3. 2. Nhược điểm của thiết kế
-

Màu sắắ́c chủ đạo của phông nền là màu trắắ́ng sáng, thoạt tiên thì có vẻ dêễ nhìn,

sạch sẽ. Nhưng đọc lâu sẽ khiến người dùng dêễ bị mỏi, nhức mắắ́t
-

Chưa có phần bình luận để người dùng nêu quan điểm, đánh giá, nhận xét, góp

ý cá nhân về bài viết hoặc về những thông tin được cung cấp
-

Đơn giản nhưng cũng khá đơn điệu, chưa có quá nhiều những danh mục bài

viết cho người dùng tìm tịi thêm.
3. 3. Đề xuất giải pháp
-

Có thể thay đổi màu nền thành một màu khác đỡ sáng hơn, hoặc thêm chủ để

tối (dark theme) để phù hợp cho những người dùng phần lớn thời gian làm việc trong
điều kiện thiếu ánh sáng
-

Thêm phần bình luận cuối mỗi bài viết

-

Thêm một số danh mục con để tiết kiệm thời gian tìm kiếm.


8