Basic expertise for site layout design-kiến thức cơ bản cho các bạn mới bắt đầu content marketing.

1. CÁC QUY TẮC THIẾT KẾ LAYOUT
CONTENT – Principles to design
layout content
Prepared by Phuc Thinh Vo
DBA Researcher-UNP

2. Design Flow
• Verbal Flow - con đường thực hiện khi đọc
văn bản trên trang
• Visual Flow - con đường thực hiện khi
nhìn vào hình ảnh và đồ họa trên trang
(Lisa Graham, Basics of design)

3. Các nguyên lý cơ bản
• Trong tiếng Anh & hệ chữ Latin người ta đọc từ trái
sang phải và trên xuống dưới
• Các nguyên tắc để làm cho văn bản trở nên dễ đọc:
– Phát triển phong cách typographic nhất quán - Nhất quán
với việc bạn sử dụng size, face và color; chọn font chữ dễ
đọc
– Các nguyên tắc của sự gần gũi - Đặt tiêu đề gần với văn
bản đọc giả thích, đặt chú thích gần các hình ảnh, . tổ
chức các yếu tố văn bản của bạn để nó rõ ràng với những
gì đang diễn ra
– Đặt độ rộng của cột - Không làm cột để rộng hoặc quá hẹp
sẽ làm cản trở việc đọc
– Nhất quán chiều cao dòng cột & dòng

4. Ví dụ

5. Cải thiện Visual Flow
Dòng chảy thị giác tự nhiên cho người
xem là một mô hình chữ"S" ngược
Nhiều hình ảnh có một hướng. Một
mũi tên, một trỏ tay, một mặt nhìn về một
hướng. mắt của bạn sẽ tăng tốc độ hoặc
làm chậm
Sử dụng các chiều của hình ảnh để
kiểm soát tốc độ và hướng của dòng
mắt
 Tạo rào cản khi bạn muốn đảo ngược
hướng mắt
 Tạo các đường mở để cho phép di
chuyển dễ dàng thông qua các thiết kế
của bạn
Sử dụng màu sắc và hình dạng tương
phản để kéo mắt
phong cách typographic nhất
quán và một sự bố trí mạng
lưới giúp duy trì các pattern
và tăng cường dòng chảy của
trang web của bạn .

6. Gutenberg Diagram
Sơ đồ Gutenberg chia
bố cục thành 4 góc
phần tư:
Khu vực quang học
chính yếu nằm trong
đỉnh trái
Phần ít được chú ý
nhiều nhất nằm trên
góc phải
Phần đích đến nằm
ở góc dưới bên phải

7. Z-pattern layout
Người đọc sẽ bắt đầu
trong top / trái, di chuyển
theo chiều ngang để đầu /
phải và sau đó theo đường
chéo để phía dưới / phải
trước khi kết thúc với một
chuyển động ngang phía
dưới / phải.
Mô hình Z - mô hình đôi
khi được gọi là mô hình S
ngược

8. F-pattern (Jacob Nielsen)
Thông tin quan trọng
nên được đặt trên đầu
trang của các thiết kế
Thông tin ít quan trọng
hơn được đặt dọc theo
cạnh trái của thiết kế
thường tại các điểm
cạnh
Người đọc không đọc
trực tuyến mà họ quét
mắt .