Toán học thì tuyệt đẹp. Điều này nghe có vẻ lạ, đúng không? Chắc chắn là tôi đã từng nghĩ như vậy khi bản thân bước những bước đầu tiên trong nghiệp thiết kế. Toán học thì khá là khô cứng và thường chán ngán vì thế tôi đã từng có ý nghĩ như trên. Bạn sẽ thấy ngạc nhiên nếu để ý rằng những thiết kế, tác phẩm nghệ thuật hay thậm chí con người có vẻ đẹp thẩm mỹ đáng ngưỡng mộ nhất có những đặc điểm về toán học chung. Cụ thể hơn thì đó là Tỷ lệ Vàng còn được kí hiệu ở kí tự Hy Lạp Φ (phi). Trong bài hướng dẫn này, chúng tôi sẽ cùng các bạn mổ xẻ cấu trúc và cách sắp xếp của một trang web cũng như Tỷ lệ Vàng được áp dụng như thế nào.
- Cấu trúc của một trang web
Những chi tiết, thành phần của một trang web cũng giống như những cơ quan nội tạng của con người, chúng là cực kì cần thiết để trang web có được một vẻ thẩm mỹ mong muốn và hoạt động một cách trơn tru
Hình vẽ kèm theo đây là những thành phần 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 nhưng đây có lẽ là cách bố cục phổ biến nhất hiện nay online.
- Container
Tất cả các trang web hiện nay đều sử dụng 1 container và cho cùng một mục đích chung: để chứa đựng nội dung và thành phần cho trang web; nhưng cách mà container hoạt động cho mỗi trang web có thể khác nhau nhau. Trong quá khứ, thậm chí người ta còn sử dụng bảng (table) thông thường để làm container nhưng tất nhiên bạn không nên sử dụng bảng vì đó là một cách tiếp cận thụt lùi! Hãy nghĩ về container như những bức tường ngoài căn nhà của bạn nơi bạn sẽ sắp đặt phòng ngủ, phòng khách, bếp,…
Những loại container chính:
2.1. Container động: Mở rộng để tràn đầy độ rộng của cửa sổ trình duyệt web
2.2. Cố định: Có một chiều rộng cụ thể do bạn chọn và vì thế không thể thay đổi bất chất nó được duyệt trên màn hình có kích thước và độ phân giải như thế nào
- Tiêu đề (Header)
Trong khi nhiều người xem tiêu đề như là một thành phần của thiết kế trang web thì một vài người khác không nghĩ như vậy. Nói chung thì tiêu đề được dùng hơn để nhắc tới phần trên cùng của trang web nơi mà bạn đặt logo, điều hướng, tagline,… Nhiều ý kiến ưu tiên việc giữ những yếu tố này trong cùng một phần để có được phong cách thiết kế linh hoạt hơn, tách biệt giữa chúng cũng rõ ràng và dễ dàng hơn. Tiêu đề cũng là một dạng của container nên chúng có hai kiểu chính để bạn lựa chọn: cố định hoặc động.
- Logo
Logo không những là nhận dạng mà còn là thương hiệu của bạn. Sự sắp xếp phổ biến nhất của logo là đặt bên trong khung tiêu đề và được căn trái. Chúng ta đọc từ trái sang phải, trên xuống dưới, vì vậy logo của bạn là yếu tố dễ được người xem chú ý tới đầu tiên.
- Điều hướng trong trang web
Điều hướng trang là một trong những yếu tố thiết kế quan trọng nhất, người xem website của bạn cần nó để tận dụng tiện ích của trang web. Chúng nên dễ tìm kiếm và sử dụng và đó là lý do vì sao chúng luôn được đặt trong cùng phần của tiêu đề hoặc ít nhất là gần mặt trên của trang web. Đôi khi thì cả hai kiểu điều hướng được sử dụng đối với những trường hợp có nhiều nội dung.
Những kiểu điều hướng chủ yếu:
5.1. Điều hướng ngang: Một loại các liên kết (link) được hiển thị trong dòng, thường được nhắc tới như là “điều hướng”.
5.2. Điều hướng dọc: Một loạt các liên kết xếp chồng nhau theo chiều dọc, thường được gọi là “Menu”
- Nội dung chính
Như là mọi người biết (và nên biết), nội dung là con bài chủ chốt của trang web! Khi người ta ghé thăm trang của bạn, đó chính là yếu tố chủ yếu mà họ tìm kiếm. Nó nên là tiêu điểm khi mà người xem duyệt trang web của bạn thì họ sẽ tìm thấy nó nhanh nhất có thể.
- Sidebar
Sidebar là yếu tố sẽ chứa đựng những nội dung thứ cấp của bạn bao gồm quảng cáo, tìm kiếm trong trang, những link tới mạng rat rang web bên ngoài, thông tin liên hệ,… Yếu tố này không thực sự cần thiết cho dù rất nhiều trang web sử dụng tới chúng. Thường thì sidebar được xếp vào bên phải nhưng cũng có thể đặt ở bên trái hoặc cả hai bên (2 sidebar) miễn là chúng không làm gián đoạn việc xem nội dung của trang web. Đối với những trang web sử dụng điều hướng ngang và dọc thì sidebar thường được thay thế bởi yếu tố điều hướng dọc.
- Footer
Phần cuối của mỗi trang web thường dùng footer để cho người xem biết họ đã đi tới điểm kết thúc của một trang web. Cũng như tiêu đề (header), nó không hẳn là một phần của nội dung mà giống một container hơn. Trong footer, thường bao gồm các thông tin như bản quyền, pháp lý và thông tin liên hệ. Sẽ là một ý kiến hay nếu bạn cũng để kèm một vài đường link tới những phần thú vị hoặc quan trọng khác của website của bạn như là phần đầu, trang chủ, trang thông tin liên hệ,… Một vài trang web lại tận dụng phần này như là một cơ hội nhắc tới những thông tin quan trọng khác hoặc những nội dung liên quan khác.
- Những “Khoảng trắng”
Chúng là bất cứ những không gian nào trong trang web mà không chứa kí tự hay những nội dung khác. Bạn có thể cảm nhận được sự cảnh báo rằng hãy điền kín thật nhiều khoảng trắng cho trang web của mình càng tốt nhưng đừng làm thế! Những khoảng trắng đơn giản chỉ quan trọng giống như nội dung đối với sự thành công của một trang web. Bạn có thể tham khảo trang web của NetTuts để thấy họ đã sử dụng những khoảng trắng hiệu quả như thế nào để dẫn dắt người truy cập tới với nội dung của trang web, tạo ra cân bằng trong trình bày của trang và mang lại một cảm nhận tốt về cách bố trí và phân loại nội dung.
Phía trên đã trình bày cấu trúc của một trang web, chúng ta hãy cùng đi tới tìm hiểu cách mà Tỷ lệ Vàng có thể áp dụng cho những thành phần đó.
- Tỷ lệ Vàng
Bạn có nhớ trước đó tôi đã nói rằng toán học thật đẹp không? Chúng ta nhận thức được vẻ đẹp hình ảnh dựa trên sự cân xứng về tỷ lệ (tỷ lệ Vàng chẳng hạn). Hàng nghìn năm qua những nghệ sĩ, nhà thiết kế, kiến trúc sư,…đã một cách có chủ đích hay vô tình sử dụng một tỷ lệ chung khiến cho những tác phẩm của họ thẩm mỹ một cách hoàn hảo. Con số kì diệu đó là bao nhiêu? 1.62 (thực ra là 1.618…). Tôi không biết nguồn gốc của nó nhưng tôi sẽ chỉ cho bạn cách sử dụng nó.
Việc sử dụng tỷ lệ Vàng rất đơn giản. Chẳng hạn bạn muốn tìm chiều rộng của cột nội dung chính và sidebar của mình. Bạn có thể lấy tổng độ rộng của khu vực nội dung của bạn (chúng ta có thể lấy 900px cho ví dụ này) và chia cho 1.62. Như được minh họa ở ví dụ phía trên, chúng ta lấy 900 chia cho 1.62 và kết quả thu được là 555.55px. Chúng ta không cần thiết phải chính xác tuyệt đối nên chúng ta có thể làm tròn nó thành 556px. Bây giờ thì bạn đã biết được độ rộng của phần nội dung chính sẽ là 555px trong khi độ rộng của sidebar sẽ là 345px, thật dễ dàng phải không?
Nhưng đợi đã, những điều thú vị chưa chấm dứt ở đây! Bạn có thể áp dụng tỷ lệ Vàng cho độ rộng của những yếu tố thiết kế tương đối với độ cao của chúng hoặc ngược lại. Điều này tạo ra những thành phần có tính thẩm mỹ cao với tỷ lệ Vàng!
- Sử dụng khung lưới
Nếu bạn giống hầu hết mọi người thì có lẽ bạn sẽ không thích việc phải rút máy tính ra mỗi khi muốn sử dụng tỷ lệ thần thánh này. Để đơn giản hóa quá trình ứng dụng nó, chúng ta có thể sử dụng một khung lưới đơn giản. Tất cả những việc bạn cần làm là chia chiều rộng hoặc chiều cao các thành phần của mình làm 3 phần (như hình ảnh minh họa dưới đây).
Mỗi ô nhỏ có thể chia nhỏ hơn, tạo ra một khung lưới chi tiết hơn nữa. Nếu bạn có đọc bài viết trước đó của chúng tôi, các bạn có thể thấy được Blueprint CSS đã sử dụng những khung lưới hiệu quả như thế nào trong quá trình bố cục thiết kế của họ. Sử dụng khung lưới không chỉ giúp việc thiết kế dễ dàng và nhanh chóng hơn mà nó còn mang lại một bố cục sắp xếp thẩm mĩ tuyệt vời. Nếu bạn chưa sử dụng khung lưới để thiết kế thì đây chính là thời điểm thích hợp để thử phương pháp này. Bạn có thể tải xuống những khung lưới mẫu từ địa chỉ https://960.gs – nơi vốn là một bộ khung CSS tuyệt vời khác sử dụng khung lưới.
Như các bạn có thể thấy, Tuts+ tuân thủ khá tốt theo Tỷ lệ Vàng, ô phần ba trên cùng được chia thêm thành 3 phần nhỏ hơn để cho thấy phần Tiêu đề (header) đã được bố cục đẹp như thế nào khi chia nhỏ thành những phần nhỏ hơn và tỷ lệ giữa chúng khá hoàn hảo theo tỷ lệ Vàng. Thật không ngạc nhiên lắm khi NetTuts lại nổi bật như vậy!
Nếu bạn là người mới bắt đầu trong nghiệp thiết kế, tôi khuyến nghị bạn nên tìm một trang web nổi tiếng nào đó, đánh giá cách bố cục những thành phần của họ và đánh giá tỷ lệ bố cục sử dụng tỷ lệ Vàng và những khung lưới. Sau đó hãy dành chút thời gian để rèn luyện sử dụng tỷ lệ Vàng với những yếu tố thiết kế của bạn và đặt chúng trong bố cục của chính bạn sử dụng một khung lưới mà chúng tôi có gợi ý trên đây!
Nguồn: code.tutsplus.com
