Rất
nhiều Template đã không được chấp nhận trên Themeforest vì mắc phải một
số sai lầm tương tự nhau: Typography (Font, chiều cao của dòng, khoảng
cách các chữ, màu sắc), sự liên kết (dạng lưới – grid), và khoảng cách
(padding- đệm). Trong hướng dẫn này, chúng ta sẽ xem xét kỹ hơn để tìm
ra cách làm thế nào tránh được những lỗi thông thường này.
Typography
Bạn phải hiểu được các Font chữ tác động như thế nào đến thiết
kế trang và độc giả của bạn. Rất lấy làm tiếc, bạn đã bị hạn chế chỉ sử
dụng một vài Font chữ cho trang web an toàn, những Font chữ này có sẵn
trên hầu hết các hệ thống. Thậm chí, với danh sách nhỉ này, có thể trở
thành một thách thức đối với việc quản lý chúng theo một cách chính xác
với User Experience tốt nhất.
Đừng kết hợp quá nhiều Font chữ
Chọn một Font cho các tiêu đề, và một Font chữ khác cho phần
nội dung. ĐỪNG sử dụng quá hai Font chữ khác nhau trong phần nội dung.
Hãy coi đây là một nguyên tắc chung. Chẳng hạn, bạn có thể sử dụng
IMPACT” cho các tiêu đề, và “ARIAL” cho phần nội dung. Hãy nhớ mỗi Font
chữ được thiết kế với Baseline, x-Height, Cap – Height v.v… riêng của
nó. Bạn có thể so sánh các Font chữ với Typetester. Đấy thực sự là một công cụ phát triển độc đáo và hữu dụng của người bạn thân, người Croatia Marko Dugonjic của tôi.
Xấu
Tốt
Đừng kết hợp các Font Sans Serif với Serif
Ok, bây giờ, đây không phải là một quy tắc. nhưng đối với những
người mới bắt đầu trong nghề thiết kế, tôi khuyên chân thành đừng nên
thực hiện như vậy. Không dễ dàng như mình nhìn thấy. Một ví dụ lý tưởng
về việc 2 loại Font chữ này được kết hợp một cách chính xác, đó là Một
danh sách bên ngoài.
Chọn kích thước Font chữ chính xác.
Chúng ta thường xác định kích thước Font chữ của chúng ta với
CSS bằng cách sử dụng tỷ lệ phần trăm, Ems, hay Pixel . Tôi thường xác
định kích thước Font chữ của phần nội dung là 62.5%; và tôi sử dụng Ems.
Một Em tương đương với 10px khi chúng ta sử dụng nó theo phương pháp
này. Khi chọn kích thước Font chữ, hãy chú ý đến sự cân bằng tổng thể
trong thiết kế và tính dễ đọc của trang web.
Để dễ đọc hơn, bạn có thể sử dụng kích thước 14px hoặc 1.4 Em. Một số
phần của thiết kế, chẳng hạn như Tag- line hay tiêu đề, sẽ cần thiết lập
một kích thước Font chữ lớn hơn như 18px hoặc thậm chí 24px.
Xấu
Tốt
Điều chỉnh Line-height
Đặc tính Line-height thiết lập khoảng cách giữa các dòng. Khi
thiết kế layout trong Photoshop, tôi thường thiết lập kích thước Font
chữ của tôi lên 12px và Line- height là 16px hoặc 18px. Ngoài ra, tất cả
phần nội dung được thiết lập “antialias: none”- vì vậy, chúng ta xem
trước một Pixel thực xem nó trông như thế nào trong cửa sổ trình duyệt.
Chọn màu sắc Font chữ phù hợp
Vấn đề chính cần phải xem xét ở đây là làm cho text của bạn dễ
đọc trên bất kỳ một Background nào. Sự tương phản là then chốt.
Xấu
Tốt
Vấn đề có thể xuất hiện trong việc lựa chọn bảng màu không hợp lý.
Xấu
Để giải quyết vấn đề này, hãy sử dụng một số công cụ trực tuyến có thể giúp bạn chọn màu sắc phù hợp: Adobe Kuler, Colorlovers v.v…
Căn chỉnh
Sự căn chỉnh là chỉnh sửa một Object trong mối liên hệ với
Object khác, hoặc định hướng trạng thái một số object hay thiết lập các
object trong mối liên hệ với các object khác. Sự căn chỉnh cung cấp
framework có cấu trúc của một thiết kế. Việc căn chỉnh có thể tác động
đến tâm trạng của trang cũng như tính hiệu quả khi nhận thông điệp gửi
qua.
Sử dụng hệ thống Grid.
Sử dụng hệ thống Grid sẽ giúp bạn căn chỉnh các yếu tố trên trang web của bạn tốt hơn. Tôi khuyên bạn nên sử dụng 960 Grid System, vì nó cung cấp cả thiết kế và các Coding Template (.psd, .ai, .css, .html v.v…).
Hãy nhất quán
Hãy nhất quán trong việc căn chỉnh của bạn. Đừng căn chỉnh một
yếu tố sang bên trái, rồi một yếu tố sang bên phải; điều này chỉ sẽ làm
gây nên sự nhầm lẫn. Nếu bạn căn chỉnh tất cả Text của bạn sang bên
trái, sau đó căn chỉnh các tiêu đề, và các yêu tố khác cũng theo hướng
đó. Khi bạn thành thạo hơn, bạn có thể phá bỏ các quy tắc này; nhưng nếu
bạn muốn an toàn, hãy chỉ sử dụng một sự căn chỉnh.
Xấu
Tốt
Không gian (đệm)
Theo W3C, các thuộc tính CSS padding – đệm CSS xác định không
gian giữa Border của yếu tố và nội dung của nó. Không gian, phần đệm hay
không gian trắng có thể giúp bạn tạo một layout cân bằng.
Không nên chen lấn các yếu tố
Hãy tạo khoảng cách cho các yếu tố của bạn. Tối thiểu là 10px
giữa các Box nội dung hay các yêu tố riêng biệt – như là một quy tắc
chung.
Xấu
Tốt
Đừng kéo giãn các yếu tố
Ngoài ra, không nên để khoảng cách giữa các yếu tố quá xa, từ
yếu tố này sang yếu tố khác- vì bạn có thể End up các lỗ hổng trong
thiết kế của bạn. Layout của bạn phải trông đầy đủ và nhất quán.
Xấu
Tốt
Nhất quán với không gian
Nếu bạn chọn không gian cho tất cả các yếu tố, phần đệm là 10px
thì thật lý tưởng. Nhưng đừng tạo phần đệm cua Sidebar là 10px, nội
dung chính là 30px. Hơn nữa, nếu bạn sử dụng hệ thống 960 Grid, không
gian giữa các yếu tố sẽ tự động thiết lập theo cách tốt nhất. Chúng ta
cùng xem một số ví dụ.
0 nhận xét:
Đăng nhận xét