Toán học kì thực cũng rất nghệ thuật. Nghe hơi lạ tai đúng không? Khi mới bắt đầu học thiết kế, tôi cũng có suy nghĩ như vậy. Nhắc đến toán học người ta thường liên tưởng đến sự cứng nhắc và khá nhàm chán, đại loại là như vậy. Bạn hẳn sẽ rất ngạc nhiên khi biết hầu hết những thiết kế đầy tính thẩm mỹ, những tác phẩm nghệ thuật, đồ vật hay thậm chí cả con người, đều có mối liên kết chung là toán học. Nói chính xác hơn là Tỉ lệ vàng (golden ratio), hay còn được biết đến với cái tên Tỉ lệ thần thánh (divine proportion), được chỉ định từ kí tự Φ (phi) trong bảng chữ cái Hy Lạp. Bài dưới đây sẽ ‘mổ xẻ’ cấu tạo và layout của một ρεπλίκα rolex website cũng như sự liên quan của Tỉ lệ vàng với nó.

1.Cấu tạo của một trang Web

 

Các phần tử tạo nên một trang web cũng giống như các cơ quan trong một cơ thể: là điều kiện thiết yếu để đảm bảo website vận hành trơ tru cũng như thỏa mãn nhu cầu thị giác.

 

Đây là những phần tử cơ bản của một trang web. Có rất nhiều cách khác nhau để sắp xếp chúng, ví dụ bên trên là layout cơ bản nhất thường được sử dụng.

 

2.Container (Vật chứa)

 

Tất cả các trang web đều sử dụng một container với cùng một mục đích: chứa các phần tử của trang, tuy nhiên cách thực hiện lại khác nhau. Ví dụ, body tag hoặc div được dùng thường xuyên nhất. Trong quá khứ, thậm chí ngay cả table cũng được sử dụng (không nên chọn table làm container, đây là phương pháp thụt lùi). Hãy coi container như những bức tường bao bên ngoài nhà bạn, sau đó đặt phòng ngủ, bếp, phòng khách…bên trong.

 

Các loại container:

  1. Linh hoạt: Tự giãn ra cho vừa vặn với chiều rộng của cửa sổ trình duyệt.
  2. Cố định: Chiều rộng cụ thể do bạn lựa chọn, không thay đổi theo kich cỡ của cửa sổ trình duyệt.

3.Header

 

Header không hẳn là một phần tử rõ ràng, mặc dù nhiều người vẫn coi nó là vậy. Nó thường được sử dụng khi đề cập đến phần đầu của trang web – nơi đặt logo, navigation, tagline… Nhiều người thích giữ những phần tử này nằm gọn trong một div  để dễ dàng hơn trong việc lựa chọn style, phân chia hoặc giới hạn phần tử. Header cũng có thể được coi là một container, nên có thể chia thành hai loại: linh hoạt hoặc cố định, như đã đề cập ở trên.

4.Logo  

 

Logo là sự nhận diện, là nhãn hiệu của chính bạn. Nó thường được đặt phía bên trái trong phần header. Chúng ta đọc từ trái qua phải, từ trên xuống dưới, vì vậy logo sẽ là thứ đầu tiên người ta nhìn vào.

 

5.Navigation (Điều hướng)

 

Navigation là một trong những phần tử quan trọng nhất, người dùng sẽ cần nó để có thể sử dụng website. Bởi nguyên tắc ‘dễ thấy, dễ dùng’, nó sẽ được đặc trong phần header hoặc ít nhất cũng phải gần đầu trang. Đôi lúc cả hai loại navigation đều được sử dụng cho các website chứ nhiều nội dung.

 

Các loại navigation:

  1. Ngang: Một loạt link được đặt cùng hàng với nhau, thường được gọi là ‘navigation’.
  2. Dọc: Các link được hiện thị theo cột dọc, loại này thường được gọi là ‘menu’.

 

6.Nội dung chính

 

Như chúng ta đã biết: Content is King! (Nội dung chính là vua). Khi truy cập vào site của bạn, đây chính là thứ mà người dùng tìm nhiều nhất. Nó nên được đặt ở vị trí trung tâm để việc tìm kiếm được dễ dàng.

 

7.Sidebar

 

Sidebar là phần tử sẽ đi cùng với nội dung thứ 2 trên website của bạn, ví dụ như quảng cáo, tìm kiếm trên trang, link theo dõi (RSS, Twitter, Email,…), cách thức liên hệ… Mặc dù được nhiều trang sử dụng, nhưng sidebar không hẳn là một phần tử quá cần thiết. Nó thường được đặt bên phải, hoặc ở cả 2 bên (2 sidebar) để tránh ảnh hưởng đến nội dung chính. Với các website sử dụng cả navigation dọc và ngang, sidebar sẽ bị thay thế bởi thanh navigation dọc.

 

8.Footer

 

Phần cuối của website nên sử dụng footer để người dùng biết họ đã xem hết trang. Giống như header, footer cũng không phải một phần tử cụ thể, mà giống một container hơn. Bên trong footer chủ yếu sẽ bao gồm bản quyền, tính pháp lý và thông tin liên lạc. Thêm vào một số link dẫn đến các phần quan trọng của site như về đầu trang, trang chủ, gửi liên hệ đến trang… Một vài website sử dụng khu vực này để giới thiệu người dùng đến các tài liệu liên quan hoặc thông tin quan trọng khác.

 

9.“Whitespace” (Khoảng trắng)

 

Đây là vùng trống của website không chứa bất kì nội dung gì. Bạn có thể cảm thấy mình cần phải lấp đầy những vùng này càng nhiều càng tốt, nhưng đừng làm vậy! Khoảng trống cũng quan trọng như chính nội dung bạn sử dụng vậy. Bạn có thể thấy cách mà trang NetTuts sử dụng các khoảng trống đầy hiệu quả, chỉ dẫn người đọc đi xuyên suốt nội dung của trang, tạo sự cân bằng và cảm giác phân chia nội dung được hợp lý.

 

Vừa rồi là toàn bộ phân tích về cấu tạo một trang web, tiếp theo chúng ta sẽ xem Tỉ lệ vàng có liên quan thế nào với các phần tử này.

 

10.Tỉ lệ vàng và sử dụng lưới

 

Còn nhớ tôi nhắc đến việc toán học cũng cực kì nghệ thuật? Thị giác của chúng ta nhìn nhận đều dựa trên tỉ lệ (ví dụ như Tỉ lệ vàng trong bài). Hàng ngàn năm qua, các nghệ sĩ, nhà thiết kế, kiến trúc sư…dù cố tình hay vô tình, đều sử dụng một tỉ lệ chung trong các tác phẩm của họ để đảm bảo tính thẩm mỹ. Vậy con số ma thuật đó là gì? 1,62 (thực ra là 1,618…). Chúng ta không bàn về nguồn gốc của con số đó, mà là cách dùng nó.

 

Sử dụng Tỉ lệ vàng rất đơn giản. Chẳng hạn như bạn muốn tìm chiều rộng cho phần nội dung chúng và cột Sidebar của mình, hãy lấy tổng chiều rộng của vùng hiện thị nội dung (ở đây tôi sẽ chọn 900px làm ví dụ) rồi chia cho 1,62. Ta sẽ được kết quả 555px, cũng là chiều rộng của phần nội dụng chính, như vậy sidebar của bạn sẽ rộng 900 – 555 = 345px! Quá đơn giản đúng không?!

 

Nhưng hãy từ từ, trò vui còn ở phía trước. Bạn cũng có thể áp dụng Tỉ lệ vàng với chiều rộng các phần tử khác, dựa trên chiều cao của chúng hoặc ngược lại. Điều này giúp bạn có được một thiết kế thỏa mãn được yêu cầu thị giác tốt nhất.

 

11.Dùng lưới

 

Giống như những người khác, bạn sẽ không muốn chốc chốc lại phải rút máy tính ra khi sử dụng tỉ lệ này. Để đơn giản hóa quá trình, chúng ta sẽ dùng lưới. Tất cả những gì bạn cần phải làm, là chia chiều dài hoặc rộng ra làm ba.

 

Mỗi một khu lại có thể chia làm ba tiếp, sẽ có một tấm lướt chi tiết hơn nữa. Kẻ ô như thế này không chỉ giúp việc thiết kế nhanh gọn hơn, mà còn giúp tạo thành một layout cân đối hài hòa! Nếu bạn chưa quen với việc dùng lưới khi thiết kế thì nên bắt đầu thử đi. Template lưới cho best swiss replica watches fireworks, photoshop và các ứng dụng khác có thể được download từ trang http://960.gs/.

 

Dễ thấy Tuts+ tuân theo Tỉ lệ vàng khá tốt. Phần trên cùng tiếp tục được phân làm 3, thể hiện phần header được chia đều thành 3 hàng nhỏ rất gần với Tỉ lệ vàng. Đó là lí do vì sao thiết kế của NetTuts rất kích thích thị giác!

 

Nếu bạn mới chập chững học thiết kế, tôi đề nghị hãy tìm những sites nổi tiếng, phân tích layout các phần tử của họ và cách họ sử dụng tỉ lệ vàng cũng như kẻ ô. Sau đó dành thời gian thực hành áp dụng tỉ lệ vàng với các phần tử của mình, thử sắp xếp chúng trên layout bằng cách sử dụng lưới.