Áp dụng tỷ lệ vàng trong thiết kế hiện đại
Trang web lý tưởng vừa có chức năng vừa hài hòa, nhưng ngay cả những nhà thiết kế web dày dạn nhất cũng có thể gặp khó khăn khi nói cho bạn biết điều gì mang lại một thiết kế tự nhiên. Mặc dù màu sắc và lý thuyết điều hướng ngoài kia, đôi khi khía cạnh quan trọng nhất của thẩm mỹ của một trang web hoàn hảo dường như không thể thực hiện được. Chúng tôi không biết tại sao nó hoạt động nhưng đôi khi nó chỉ làm. Tất cả có thể là do một khái niệm đơn giản.
Bằng cách củng cố thiết kế trang web của bạn theo thứ tự tự nhiên, người xem có thể thấy thiết kế của bạn thú vị hơn và dễ chịu hơn. Khái niệm này được gọi là Tỉ lệ vàng, một khái niệm toán học tự nhiên tuân theo và con người chúng ta nhận thức theo tiềm thức như một biểu hiện của sự hoàn hảo.
Cái gì vàng?
Nói một cách đơn giản, tỷ lệ vàng (còn được gọi là tỷ lệ thần thánh hoặc là ý nghĩa vàng), là một hằng số toán học xuất hiện lặp đi lặp lại trong tự nhiên và tác phẩm nghệ thuật.
Được biểu thị như một phương trình, khi một lớn hơn b, (a + b) chia một bằng một chia b (chỉ cần nhìn vào hình ảnh bên dưới), tương đương với khoảng 1.618033987. Con số đó, thường được đại diện bởi ký tự Hy Lạp "phi", là Tỉ lệ vàng.
(Nguồn hình ảnh: mathsisfun.com)
Lý thuyết tương tự có thể được sử dụng để xây dựng một hình chữ nhật, được gọi là hình chữ nhật vàng. Một hình ảnh tuân theo tỷ lệ vàng có thể được đặt ngay ngắn bên trong một hình chữ nhật tuân theo tỷ lệ.
(Nguồn hình ảnh: creativeautomaton.com)
Để tạo hình chữ nhật vàng, chọn một số sẽ là chiều dài của cạnh ngắn của hình chữ nhật. Vì lý do, hãy nói 500 pixel. Nhân số đó với 1.618. Kết quả, 809 pixel, là chiều dài của cạnh dài của hình chữ nhật của bạn. Do đó, hình chữ nhật có kích thước 500 pixel x 809 pixel là hình chữ nhật vàng. Nó tuân theo tỷ lệ vàng.
Vẻ đẹp tự nhiên
Trên thực tế, các nhà khoa học không chắc chắn về tỷ lệ mà con người rất thích. Những gì họ chắc chắn là chúng tôi thích nó như thế nào. Các nghiên cứu cho thấy rằng ngay cả những phút thay đổi đối với một hình ảnh khiến nó trở nên đúng với tỷ lệ vàng có tác động lớn đến não của những người nhìn.
Khuôn mặt của con người cũng tuân theo tỷ lệ, và chúng tôi thấy những người có khuôn mặt trung thực với tỷ lệ hấp dẫn hơn. Vỏ sò, kiệt tác Phục hưng cổ điển, kiến trúc từ thời cổ đại, và thậm chí các bộ phận cơ thể con người được cân đối dựa trên tỷ lệ xuống chính ngón tay.
(Nguồn hình ảnh: in2visualdesign)
Một cái gì đó sâu thẳm trong tâm trí của chúng ta ghi lại tỷ lệ vàng là đẹp, một nghệ sĩ và kiến trúc sư thực tế đã sử dụng trong hàng ngàn năm, dù biết hay không. Đó là ngôn ngữ nguyên thủy trong hình ảnh. Kết quả là hữu cơ, trực quan và chỉ cảm thấy đúng.
Thành phần thần thánh
Làm thế nào để bạn sử dụng số ma thuật này trong thành phần của trang web của bạn? Toán học có vẻ giống như một chiếc hộp ngột ngạt mà sự sáng tạo của bạn sẽ phải vật lộn, nhưng tỷ lệ vàng chỉ đơn giản là một hướng dẫn hữu ích. Có một hướng dẫn cơ bản để xây dựng từ đó có thể giúp bạn có nhiều phòng sáng tạo hơn bằng cách đưa ra một số phỏng đoán ngoài tỷ lệ và vị trí.
Hãy nghĩ về nó như một công cụ thay vì một cái lồng. Ở mức cơ bản nhất, bạn có thể sử dụng tỷ lệ vàng để chỉ định kích thước và vị trí của các khu vực nội dung và thanh bên. Bố cục chiều rộng cố định là ứng dụng dễ nhất. Quyết định kích thước tổng thể của bố cục của bạn thông qua phương pháp tạo hình chữ nhật vàng.
Đối với lưới / khối
Hình vuông được tạo bởi một dòng sẽ là khối nội dung của bạn. Hình chữ nhật nhỏ hơn sẽ là một bên hoặc thanh điều hướng. Khi bạn đã tìm ra kích thước của hình chữ nhật của mình, việc tìm hiểu xem thanh điều hướng của bạn cần rộng đến mức nào là dễ dàng.
- Trong ví dụ này, chúng tôi sẽ nói hình chữ nhật của bạn là 525 pixel bằng 850 pixel.
- 525 là một và 850 là (a + b), và b sẽ là chiều rộng của thanh bên của bạn.
- Để tìm b, chúng tôi chỉ đơn giản là trừ (a + b), đó là 325.
- Do đó, chiều rộng của thanh bên của bạn là 325.
Hãy nhớ rằng hình chữ nhật của bạn có thể được lật xung quanh cho phù hợp với mục đích của bạn, đặt thanh bên ở phía trên, dưới hoặc phía đối diện. Miễn là tỷ lệ giữ, thiết kế của bạn sẽ cảm thấy hài hòa.
Đối với văn bản
Có một cách nhanh hơn để có được các phép đo bạn cần và nó có thể được áp dụng với nội dung văn bản.
- Giả sử văn bản ngữ cảnh của bạn có kích thước 12.
- Nhân 12 với 1.618, tỷ lệ vàng và bạn sẽ nhận được 19.416.
- Kích thước văn bản tiêu đề là 19 hoặc 20 sẽ theo sát tỷ lệ vàng.
Tỷ lệ vàng là ngôn ngữ mà tâm trí bạn hiểu và bằng cách giao tiếp với nó, ý tưởng của bạn sẽ xuất hiện hiệu quả hơn. Bạn không cần phải tuân thủ chính xác; nguyên tắc cơ bản là đủ. Áp dụng tỷ lệ cho kích thước hình ảnh, mối quan hệ giữa vị trí văn bản và hình ảnh và việc tạo các phân mục trong các thanh bên là tất cả các khái niệm có thể.
Lưới làm việc: Quy tắc một phần ba
Nếu toán học không phải là tách trà của bạn, khái niệm tỷ lệ vàng có thể được đơn giản hóa. Các quy tắc một phần ba chi phối vị trí của các điểm quan tâm trong một cảnh. Chia bất kỳ hình ảnh đã cho thành ba phần theo chiều ngang và chiều dọc. Bạn sẽ nhận được 9 lưới.
(Nguồn hình ảnh: kỹ thuật số-nhiếp ảnh-school.com)
Theo quy tắc một phần ba, các đỉnh của các đường đó (nơi các đường giao nhau) là vị trí lý tưởng cho các điểm quan tâm. Những người quét trang có nhiều khả năng nhận thấy những thứ được đặt gần các điểm và bộ phận thoải mái để xem. Thiết kế phức tạp hơn có thể bằng cách chia những phần ba đó thành phần ba tiếp theo.
(Nguồn hình ảnh: net.tutsplus.com)
Nói tóm lại, mắt có thể lười biếng và không phải tìm kiếm các chi tiết quan trọng. Bộ não của chúng ta như thế này. Các hình ảnh chính, hộp tin tức, thanh tìm kiếm và bất kỳ điểm ưa thích nào khác có thể được lồng trên hoặc gần các đỉnh. Phím tắt nhỏ gọn này sẽ mang đến cho bạn một thiết kế vừa dễ nhìn, vừa khiến mọi người bị cuốn hút vào những mẩu dữ liệu quan trọng.
Cột và Kích thước Phông chữ: Chuỗi Fibonacci
Một công cụ đơn giản khác để thiết kế web liên kết với tỷ lệ vàng là Số Fibonacci. Một chuỗi Fibonacci bắt đầu bằng 0 và 1. Hai số trước được cộng lại với nhau để tạo ra số tiếp theo trong chuỗi: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 và v.v..
Một phép toán nhỏ cho chúng ta biết rằng mối quan hệ giữa các số thứ tự Fibonacci liên tiếp rất gần với tỷ lệ vàng - chia số bất kỳ trong chuỗi với số trước nó và bạn sẽ nhận được - bạn đoán nó - 1.618.
Cũng như tỷ lệ vàng, số Fibonacci có thể được sử dụng để xác định mối quan hệ giữa kích thước văn bản tiêu đề và nội dung. Nó cũng có thể được sử dụng để chỉ định chiều rộng của các cột và đặc biệt hiệu quả trong các blog và các bố cục dày đặc văn bản khác. Thành phần cũng có thể được xây dựng dựa trên khái niệm ốp lát Fibonacci, trong đó kích thước ô được xây dựng khi sử dụng chuỗi Fibonacci.
(Nguồn hình ảnh: Wikipedia.org)
Tinh thần vàng và phân cụm nội dung
Một phương pháp khả thi khác để sử dụng cả tỷ lệ vàng và số Fibonacci là xoắn ốc vàng và xoắn ốc Fibonacci. Các hình xoắn ốc vàng trở nên rộng hơn theo hệ số bằng với tỷ lệ vàng cho mỗi lượt quay quý, và các hình xoắn ốc được tạo thành bằng cách sử dụng ốp lát Fibonacci.
Các xoắn ốc đã được sử dụng trong tác phẩm nghệ thuật miễn là số lượng và tỷ lệ. Lý thuyết là các khu vực của không gian âm và quan tâm trực quan phải phù hợp với vòng xoắn ốc. Trong bố cục duyên dáng này, như với quy tắc một phần ba, mắt tự nhiên được kéo vào trung tâm của hình xoắn ốc để tìm kiếm chi tiết.
(Nguồn hình ảnh: fabiovisentin.com)
Các xoắn ốc có thể phục vụ như một hướng dẫn cho mật độ nội dung và phân cụm. Chúng có thể đóng vai trò là nền tảng cho tỷ lệ hình ảnh tiêu đề trang web, thanh tìm kiếm và thanh công cụ của bạn.
Khi chọn hình ảnh lý tưởng cho một trang đầu được xây dựng xung quanh đồ họa lớn, chẳng hạn như lưu trữ trang chủ và trang web nhiếp ảnh, bạn cũng có thể được hưởng lợi từ các hình xoắn ốc vàng và Fibonacci.
Thông điệp mạnh mẽ thường là cao siêu, và tỷ lệ vàng là một trong những quảng cáo thăng hoa nhất của tự nhiên. Bằng cách sử dụng tỷ lệ thiêng liêng, bạn tạo cho mình một lợi thế của logic tự nhiên và ân sủng hữu cơ mà tất cả con người có một sức hút tiềm thức. Tỷ lệ vàng là một công cụ khác theo ý của bạn.
Đọc thêm:
- Áp dụng tỷ lệ vàng cho bố cục và đối tượng web
Ghi chú của biên tập viên: Bài này được viết bởi Chris Pentago cho Hongkiat.com. Chris là một nhà phát triển web, nhà thiết kế và tiếp thị internet có kinh nghiệm quan tâm đến các công nghệ chính để thực hiện công việc kinh doanh trực tuyến của bạn. Bạn có thể tìm thấy anh ấy trên Twitter.
