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 đề và mô tả 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 vào nội dung, đưa nội dung
lên hàng đầu. Mỗi bài viết đều có hình ảnh minh họa, tiêu đề được phóng to tạo sự nởi
bật, cộng với vài dịng mơ tả và thơng tin đi kèm. Từ đó sẽ giúp cho người dùng có thể
dễ dàng lựa chọn 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ơ tả rất ngắn gọn trong khoảng từ 2 đến 3 dòng và
cùng với đó là chủ đề 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 dùng có được cho mình một trải nghiệm tớt hơn vì dễ
xác định được thơng tin muốn hướng tới, không bị 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 trình bày với format
dọc, trên một dòng chỉ gồm khoảng 10-13 từ, giúp người đọc lướt từ trên xuống dưới
mà không phải đảo mắt nhiều, tăng hiệu suất đọc.

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