Tips for life, tips for tech

Linkos-design

1.Spacing – khoảng cách:

Một trong những yếu tố cốt lõi của một trang web quyết định những thành phần còn lại chính là layout, mà layout thì chỉ gói gọn trong những vấn đề sau: khoảng cách, bố cục và kích thước. Trong mục này ta sẽ nói về spacing, dịch ra tiếng Việt là khoảng cách.

Nói sơ về khoảng cách: đó là cách bố trí những điểm và elements trong một website chứng tỏ sự thông minh và sự gọn gàng cũng như minh bạch của người thiết kế, chú ý đến khoảng cách của các elements sẽ gây một ảnh hưởng lớn đến khả năng cảm thụ của những người thưởng thức và có thể tạo ra những cách nhìn khác nhau mà không cần thay đổi về màu sắc hay hình dáng.

Một trong những spacing hợp lý là Good.is

Ở đây tạm không bàn về typo và image, ta sẽ bàn về spacing thôi, như trong hình (hoặc có thể trực tiếp đến site good.is mà xem) thì những khoảng cách mà site này đã dùng tạo cảm giác khá gọn gàng (giữa đoạn văn và khung viền chẳng hạn), làm cho người đọc muốn tìm một nội dung gì đó hay đọc một cái gì đó trở nên dễ dàng hơn nhiều vào không làm họ bị rối. Vậy ta nên nhớ ở đây là không nên ki bo với khoảng cách giữa texts và images với border.

Một ví dụ đẹp nữa về spacing là Digital Mash:

Spacing tốt sẽ làm cho người dùng có cảm giác rộng rãi dễ sử dụng, không có gì khó chịu hơn là click lộn link này qua link khác và thấy mọi thứ có vẻ chồng chéo lên nhau nhức cả mắt.

Để spacing tốt, trong design, ta có những techniques sau:

  • Thiết kế sử dụng grid (hệ thống lưới kẻ ô vuông): sử dụng tốt grid sẽ giúp ta hiểu tốt hơn về spacing, cũng như mọi thứ dễ dàng hơn trong việc spacing.
  • Làm lại và làm lại: Ta sẽ làm đi làm lại, cho đến khi nào mãn nhãn ta thì thôi.
  • Một khoảng trắng không phải là một chỗ lãng phí: Trên site của chúng ta có khoảng trắng, không có nghĩa là ta sẽ điền gì vào đó như môn Anh Văn. Không mà có, đó chính là giá trị của spacing.
  • Ít nhưng tinh tốt hơn là nhiều mà cùi bắp: đừng cố gắng nhét đủ mọi thừ vào site khi design, thêm nhiều khoảng trống, và chỉ để những thông tin mang tính cốt lõi.

2.Pixel perfect:

Đây cũng chúng là kỹ thuật pixel popping mà tôi đã link từ trước, có một số kỹ thuật thêm 1 line rộng 1px vào phần border của các table để làm có các table gây cảm giác “pop” ấn tượng và bắt mắt (eye-catching). Chúng ta xem một ví dụ ở đây:

Ta sẽ để ý những phần được phóng to: ở phần trên, miền xanh lá cây được thêm một line màu xanh nhạt, tương tự, vùng xám ở dưới cũng có một line màu trắng sữa ở trên. Những đường line này tạo cảm giác 3 chiều cho mắt, cũng như làm cho thiết kế “thật” hơn.

Vậy những bài học mà ta rút ra từ kỹ thuật pixel là gì (còn how to do it, đề nghị xem lại bài pixel popping)

  • Sử dụng yếu tố “tinh tế”: những chi tiết nhỏ hỗ trợ tốt cho nội dung.
  • Chú ý từng pixel một: bất kể dùng kỹ thuật gì: borders, gradient hay stroke, không phải cứ TO là tốt.
  • Before and After: luôn so sánh những kết quả mới với kết quả cũ để rút ra những tiến bộ mà ta đã áp dụng.

3. Web typo:

Tôi hay nhắc đến typo, typo ở đây không có gì cao sang, không phải nhất thiết dùng nghệ thuật chữ để làm một artwork mới là typo, typo trong site chỉ đơn giản là sắp chữ, font gì, màu font sao, font side bao nhiêu, khoảng cách giữa các hàng và cột trong một đoạn văn quyết định rất lớn đến tính bắt mắt của một site. Những kỹ thuật như vậy không chỉ giới hạn trong PS mà còn là (chủ yếu là) trong CSS.

Một chuẩn về typo

Một “chuẩn” về typo

Techniques:

  • Muốn hù người khác và muốn đuổi họ đi? Dễ ợt, dùng font khó đọc, sít sít nhau và bold hết lên là xong.
  • Quên mất spacing ở trên? Đừng nghĩ gì về master of webdesign nữa.
  • Font phù hợp ngữ cảnh không? Luôn tự hỏi câu hỏi đó, và luôn kiểm tra xem font có phù hợp với những thiết kế khác không.

4.Bố cục, sắp xếp yếu tố, hoàn tất layout:

Khi mà mọi thứ đã đẹp, nhưng trộn lung tung chúng với nhau thử xem, chả ai khen là đẹp nữa, việc bố trí tốt cũng giống như một căn phong có tổ chức; và gọn là một chuyện, dễ dùng tiện dụng là chuyện khác, chẳng ai thích vào một trang mà khung tìm kiếm giấu đâu xa lắc ở một góc nào đó của site cả (ví dụ vui thế).

Luôn tự đặt cho mình những yêu cầu sau:

  • Mình đang thiết kế cho nội dung gì?
  • Lại grid
  • Bố trí các phần tử, đặt mình là vai trò người xem coi nó ra sao, có dễ xài không, có gây nổi khùng không?😄
  • Nếu một phần tử không cần thiết, thì đừng bỏ nó vào.
  • Cân bằng chú ý: không nên có một yếu tố quá “tỏa sáng” mà làm “lu mờ” các yếu tố khác.

Còn một số kỹ thuật khác nữa, nhưng chúng ta sẽ tự phát hiện ra khi thực hành và tự tìm tòi thêm.😉

Reply in English

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: