Tỷ lệ vàng trong thiết kế website

Là một designer, chúng ta thường cân nhắc rất nhiều khi bắt đầu một dự án. Một trong những phân đoạn quan trọng nhất là làm việc với các layout và các hệ thống để tạo không gian trống. Thông thường, các nhà thiết kế web sẽ dùng thư viện grid-spaced CSS nhưng có rất nhiều cách để tạo những layout đầy sáng tạo. Hôm nay, chúng ta sẽ cùng tìm hiểu về tỷ lệ vàng và cách mà bạn có thể áp dụng những bài học đơn giản vào thiết kế của mình. Hầu hết các kỹ thuật thảo luận trong bài viết đều được áp dụng trên cả phạm vi rộng lớn của cả nghệ thuật và thiết kế, nhưng chúng ta sẽ tập trung hơn vào khía cạnh kỹ thuật. Ngoài tỷ lệ vàng là những công cụ hữu ích khác có thể hỗ trợ cho layout của trang web

Divine Propotion (Tỷ lệ thần thánh)

Các nghệ sĩ thời kỳ này cân nhắc sử dụng tỷ lệ nhằm tạo sự lôi cuốn và sức mạnh huyền bí khi kết hợp vào công việc thiết kế. Hàng trăm năm trước, tỷ lệ này thường được sử dụng cho kiến trúc, điêu khắc và tranh nghệ thuật, nhưng ngày nay chúng ta có thể sử dụng những kỹ thuật tương tự trong nghệ thuật số hiện đại.

Tỷ lệ này được mô tả một cách chính xác bằng hằng số toán học. Có vẻ khá khó hiểu nhưng chúng ta có thể thay thế các biến trong phương trình bằng cách sử dụng con số thực tế. Chúng ta chỉ có 2 biến với tên gọi là a và b. Các yếu tố sẽ đạt được tỷ lệ vàng khi a+b/a tương đương với a/b.

Bạn có thể thử với bất kỳ giá trị nào của 2 biến để xem sẽ nhận được gì. Cuối cùng, bạn đều có kết quả là hằng số 1.61803398 (hay chỉ là 1.618). Khi không có giá trị cụ thể, chúng ra có thể áp dụng công thức tỷ lệ vàng để tạo ra những giá trị tương đương. Sử dụng công thức tỷ lệ vàng giúp công việc thiết kế trở nên linh hoạt và thấy được sự liên hệ giữa kích thước hơn là việc chọn lựa trong hàng tá con số.

Các chức năng toán học của tỉ lệ

Một thủ thuật thú vị là có thể chỉ dùng tỷ lệ để biến đổi toàn bộ hệ thống. Ví dụ hệ thống 960 grid chia thành 2 cột. Chúng ta không biết mỗi cột nên rộng bao nhiêu để layout trong phạm vi tỷ lệ thần thánh, nhưng chúng ta hoàn toàn có đủ số liệu để tìm ra tỷ lệ đó.

960 (đơn vị điểm ảnh) tương đương giá trị a+b. Vì vậy chúng ta có sẽ chia 960 cho 1.618 để có được chiều dài, đại diện cho biến a. Trong trường hợp này 960/1.618 là 593 px.

Sử dụng thông tin này, chúng ta có thể lấy 960 trừ 593 để có chiều rộng của cột là 367 px. Bạn có thể kiểm tra lại câu trả lời bằng cách lấy 593 + 367 (960) và chia cho 593. Dựa trên cách tính toán của tôi, bạn sẽ nhận được giá trị tương đương 1.618, chính xác bằng tỷ lệ vàng.

Việc sử dụng kỹ thuật này là hoàn toàn cần thiết khi phát triển hệ thống layout cho các website động. Tỷ lệ thần thánh giúp mọi thứ được sắp xếp theo một cách tự nhiên và cơ hữu nhất. Ngoài ra bạn có thể bố trí thiết kế thành 3 hay 4 cột layout nến bạn muốn. Với lựa chọn này, bạn cần kiểm tra chính xác những gì bạn đang làm và tổng kích thước có thể của layout.

Nếu bạn gặp khó khăn trong việc tìm ra tỷ lệ cố định cho trang web, đừng phí công sức với những yếu tố quá nhỏ. Tỷ lệ vàng chỉ có tác dụng hướng dẫn cho bạn như một designer. Miễn là thiết kế của bạn đạt được mục đích riêng của nó và giữ được giá trị tương đương cho cho toàn bộ trang.

Tương tự như quy luật ngón cái phổ biến, bạn có thể sử dụng tỷ lệ 5:3- dù không chính xác như tỷ lệ vàng nhưng nó đủ để giúp bạn tránh những lỗi không đáng có.

Tỷ lệ hình chữ nhật vàng

Tên của tỷ lệ cho thấy có thể tạo một hình chữ nhật vàng bằng cách áp dụng tỷ lệ mà chúng tôi đã thảo luận về phương diện hình học. Chiều dài hình chữ nhật nên có giá trị lớn hơn hoặc có thể dùng giá trị nhỏ hơn cho biến số b. Hình chữ nhật cũng có thể được áp dụng cho thiết kế các layout và các yếu tố đồ họa khác bao gồm logo và các icon nhỏ hơn.

Những phần đặc biệt của hình học có thể giúp bạn định hướng layout hoặc các yếu tố khác. Cụ thể là bạn có thể phác thảo kho hình ảnh hiển thị với Flash mà không cần nội dung. Những hình chữ nhật này cũng được sử dụng cho footer hoặc sidebar cho các yếu tố các nhân hoặc các widget.