Những điều cơ bản cần biết về tỷ lệ vàng trong thiết kế

Hiểu đơn giản nhất có thể nhé! Tỉ lệ vàng ( còn được gọi là Golden Section, Golden Mean, Divine Proportion hoặc Greek letter Phi) tồn tại khi lấy 1 đường thẳng chia làm 2 và đoạn thẳng dài hơn (a) chia đoạn nhỏ hơn (b) sẽ bằng tổng chiểu dài 2 đoạn (a+b) chia cho a , kết quả là con số 1.618

Nhưng đừng để tính toán làm nản lòng vội. Trong thiết kế, Tỉ lệ vàng hướng đến tính thẩm mĩ, kiến tạo và nâng tầm cái đẹp thông qua sự hài hòa và tỉ lệ.Khi áp dụng vào thiết kế, Tỉ lệ vàng mang đến tính thẩm mĩ như một nhân tố X. Sự hài hòa và tính ước lệ này đã được khám phá hàng thế kỉ trước: từ kim tự tháp Giza tới đền Parthenon ở Hi Lạp; từ The Creation of Adam của Michelangelo trên trần nhà nguyện Sistine đến bức Mona Lisa; và logo Pepsi đến logo Twitter. Khuôn mặt và cơ thể của chúng ta cũng tuân theo tỉ lệ này:

Ngoài ra, não của chúng ta có vẻ được lập trình để ưa chuộng những vật thể và hình ảnh có Tỉ lệ vàng. Nó gần như là sự thu hút tự nhiên và hình ảnh dù có chút tùy chỉnh gần đúng Tỉ lệ vàng đều có tác động lớn tới trí óc của chúng ta.

Tỉ lệ vàng cũng có thể áp dụng vào hình học. Lấy một hình vuông và nhân 1 cạnh với 1.618, ta có một hình chữ nhật có tỉ lệ hài hòa như sau:

Bây giờ, nếu chồng hình vuông lên hình chữ nhật, 2 khối sẽ cho ta Tỉ lệ vàng :

Nếu tiếp tục dùng công thức Tỉ lệ vàng cho hình chữ nhật mới ở phần bên phải của hình trên, dần dần bạn có một mô hình với các hình vuông nhỏ dần:

Chà! Cần nghỉ chút không? Chờ chút, chỉ một tí hại não nữa thôi. Nếu lấy sơ đồ Tỉ lệ vàng phía trên của chúng tôi, vẽ một vòng cung từ một góc đến góc đối diện của mỗi hình vuông, bạn sẽ vẽ đường cong đầu tiên của Xoắn ốc Vàng ( hay Dãy số fibonacci) – 1 dãy số mà mỗi số là tổng của 2 số trước nó. Bắt đầu từ số 0, dãy sos là: 0,1,1,2,3,5,8,13,21,34,55,89,144,….

Bằng việc thêm vòng cung vào mỗi hình vuông, chúng ta đã có sơ đồ của Đường xoắn ốc Vàng

Bạn sẽ tìm thấy tạo vật tuyệt đẹp này trong thiên nhiên – dương xỉ, hoa, vỏ sò biển, thậm chí bão – đó có lẽ là lý do tại sao chúng ta thấy nó rất hấp dẫn. Bởi vì nó, thực sự tự nhiên nhất.

Đi xa hơn và vẽ 1 vòng tròn trong mỗi hình vuông – bạn sẽ có những đường tròn theo tỉ lệ 1: 1.618 và tỉ lệ cân bằng với nhau.

Giờ thì chúng ta có các hình vuông, hình chữ nhật và hình tròn theo Tỉ lệ vàng và rải những con số kì diệu lên thiết kế của bạn.

Xong với giải thích khái niệm rồi nhé!

5 cách áp dụng Tỉ lệ vàng vào thiết kế của bạn

Bây giờ khi bạn đã thấm mệt với lý thuyết Tỉ lệ vàng, hãy bắt đầu tìm các sử dụng nó vào thiết kế của bạn.

Bạn có thể áp dụng Tỉ lệ vàng vào mọi thành phần trong thiết kế, bao gồm layout, không gian, content, hình ảnh và hình dáng.

01. Layout – Xác định kích thước với Tỉ lệ vàng

Tham khảo Tỉ lệ vàng là một cách định hướng hữu ích để xác định kích thước cho layout. Một cách dễ dàng áp dụng Tỉ lệ vàng là dùng tỉ lệ 1:1.618 cho xác định kích thước.

Ví dụ: với chiều ngang (width) 960 pixel, bạn chia nó cho 1.618 và chiều cao (height) của bạn sẽ là 594 pixel.

Bây giờ, dùng layout đó chia thành 2 cột theo Tỉ lệ vàng và ta có thành phẩm. Làm việc trong 2 khối này thì layout của bạn sẽ tuân thủ tỉ lệ hài hòa cuả Tỉ lệ vàng.

Hai cột layout rất hợp với thiết kế web và bạn sẽ thấy nhiều online content trong dạng này. iZdesigner cũng chấp nhận layout dạng này và làm website rất thoáng, dễ đọc và sắp xếp gọn chỉnh chu. chúng tôi nghĩ rằng, làm như vậy sẽ cung cấp cho độc giả một cảm giác tự nhiên của trật tự, cân bằng và có sự phân cấp.

02. Không gian – layout với mô hình tỉ lệ vàng

Không gian là một nhân tố quan trọng hàng đầu trong mọi thiết kế, để nó trở thành việc sử dụng không gian âm dương , và nó thường quyết định thành bại của thiết kế.

Ước lượng các khoảng cách có thể tốn rất nhiều thời gian, thay vào đó, hãy dùng mô hình Tỉ lệ vàng và để những hình vuông chỉ cho bạn vị trí đặt mỗi thành phần. Điều này đảm bảo cho khoảng cách và tỉ lệ một cách chính xác, không phải “ước chừng”, những thay đổi nhỏ đạt đến Tỉ lệ vàng có thể tạo nên sự khác biệt.

Thêm vào đó, nếu bạn có quá nhiều thành phần, bạn có thể đặt nhiều mô hình tỉ lệ vàng để đạt tỉ lệ hài hòa trong toàn bộ thiết kế của bạn.

Studio Moodley thiết kế một bộ nhân diện thương hiệu cho Lễ hội nghệ thuật trình diễn Bregenzer Festspiele bao gồm logo, logotype và collage design áp dụng cho các chương trình, biểu ngữ quảng cáo và các chiến dịch ngoài trời. Biểu ngữ quảng cáo có sự góp mặt của nhiếp ảnh, nghệ thuật cắt dán minh họa và một logo gợn sóng với không gian rỗng bên trong.. Tỉ lệ vàng được sử dụng để xác định kích thước và vị trí từng yếu tố để đảm bảo cover được cân đối.

Agency thiết kế của Singapore – Lemon Graphic đã tạo nên nhận diện hình ảnh cho Terkaya Wealth Management. Tại đây, 3 yếu tố thiết kế của tấm name card– con đại bàng nhỏ, text và con đại bang lớn – đều nằm gọn vào từng không gian khác nhau của Tỉ lệ vàng.

Thêm vào đó, khi đặt một Tỉ lệ vàng trên con đại bàng nhỏ, ta cũng thấy nó vừa vặn theo tỉ lệ vàng khác.

03- Content – lần theo Đường xoắn ốc vàng

Đường xoắn ốc vàng có thể được dùng để hướng dẫn nơi đặt content. Mắt chúng ta luôn hướng về tâm đường xoắn ốc một các tự nhiên, nơi nó tìm những chi tiết, vậy hãy tập trung thiết kế của bạn tại tâm đường xoắn ốc và đặt điểm hấp dẫn thị giác bên trong đường này.

Nếu bạn truy cập website của National Geographic và bạn sẽ nhận ra một logo nhỏ thứ 2 ở gần tung tâm đường xoắn ốc. Đó là một nơi tuyệt hảo để nhân đôi hình ảnh thương hiệu bởi vì đôi mắt sẽ vô thức lướt về đây. Cao siêu quá đúng không. Đường xoắn ốc vàng làm được điều đó đấy!

Website cá nhân này của graphic designer Tim Roussilhe thoạt nhìn có vẻ dày đặc content nhưng thực ra lại được sắp xếp rất tốt theo tỉ lệ vàng và Đường xoắn ốc vàng được tập trung tại khu vực đỉnh bên trái của website. Mắt bạn sẽ bắt đầu đi từ phần trung tâm phía trên với dòng chữ “Bonjour My Name is Tim.”. Sau đó mắt sẽ lướt xuống phần miêu tả Tim làm gì, đi lên thanh menu, chạm ngay tại logo ở góc trên bên trái, sau đó đến phần khoảng trống, hấp thụ mọi mọi chi tiết nó cần.

Content rõ ràng trở nên dày đặc dàn theo đường xoắn ốc trong thiết kế này của Saastamoisen säätiö . Kích thước từng con chữ cũng như khoảng cách giữa chúng giảm dần khi mắt lướt càng gần xoắn ốc. Các chữ không cần đọc theo thứ tự nhưng có đủ sự lặp lại để chúng dần trở nên quen thuộc.

Helms Workshop thiết kế thương hiệu này cho Fullsteam Brewery và dùng Tỉ lệ vàng cùng Đường xoắn ốc vàng cho layout và content. Rất nhiều chi tiết trong thiết kế này nằm vừa vặn trong các hình vuông và hướng mắt lướt qua nhân vật chính, tới con tem, chữ ABV và dừng tại tên nơi sản xuất.

Ý tưởng của Helms Workshop cho Fullsteam là tạo nên một “ nhãn hiệu xung quanh câu chuyện của người chủ nông trại bán công nghiệp với một cái tên xa lạ…”, Đường xoắn ốc vàng giúp tạo định hướng trên nhãn bằng cách tập trung các chi tiết xung quanh ông ta và thương hiệu.

04- Hình ảnh – Tỉ lệ vàng (hoặc Luật 1/3)

Bố cục rất quan trọng với hình ảnh, dù nó truyền đạt thông tin quan trọng hay tạo tính thấm mĩ cho bức hình. Tỉ lệ vàng giúp bố cục có thể dẫn dụ cái nhìn đến các chi tiết quan trọng của tấm hình. Dùng Tỉ lệ vàng, bạn chia bức hình thành 3 phần không bằng nhau, sau đó dùng các đường thẳng và các điểm giao nhau để chia bố cục.

Tỉ lệ là 1:0.618:1 – để chiều ngang của cột dọc thứ nhất và thứ ba là 1, chiều ngang cột ở giữa là 0.618. Tương tự với các hàng ngang: chiều cao của cột ngang thứ nhất và thứ ba là 1 và cột ngang ở giữa là 0.618. Giờ dùng các đường và các điểm giao nhau để dẫn dắt hướng nhìn và sự chú ý của người xem. Điều này còn tạo sức hút và thêm vào sự thú vị cùng năng lượng cho bố cục.

Một cách khác đơn giản hơn để cắt hình theo Tỉ lệ vàng là dùng Luật 1/3. Nó không chính xác như Tỉ lệ vàng như cũng cho bạn một kết quả tương đối. Với luật này, đặt tất cả đoạn dọc và ngang theo tỉ lệ 1:1:1 để các khoảng bằng nhau. Sắp xếp các chi tiết quan trọng của hình xung quanh hình chữ nhật trung tâm.

Đây là cover của tạp chí Complex, người mẫu là Solange Knowles, đã sử dụng Tỉ lệ vàng để xác định sự cân đối của không gian âm dương. Trên phần đỉnh của mũi và trán Solange chạm vào đỉnh của vùng giao nhau, trong khi mũi và mắt nằm trên 2 cột dọc của hình chữ nhật trung tâm.

Jason mildren thiết kế cover cho tạp chí Pilot và nó tuân theo Luật 1/3. Những chi tiết đều nằm nằm xung quanh phần cạnh hình chữ nhật, còn phần tung tâm gần như trống rỗng. Con mắt của người mẫu đặt ngay tại 1 góc, vừa vặn nhìn thấu người xem.

Cover của tạp chí Feld dùng Tỉ lệ vàng để khoanh vùng phần mắt của người mẫu. Điều đó đạt hiệu quả tốt vì anh ta không nằm ở vị trí trung tâm và một phần khuôn mặt gần như thẳng hàng với đường thẳng định hướng bên trái.

Và xét theo tổng thể, layout của trang bìa này tuân theo Tỉ lệ vàng và Đường xoắn ốc vàng. Phần nội dung tập trung bên trong xoắn ốc và càng đến gần tâm xoắn ốc thì thông tin càng chi tiết hơn.

05. Hình dáng – Vòng tròn vàng

Tỉ lệ vàng có thể mở rộng để tạo ra hình vuông và hình chữ nhật theo những tỉ lệ hài hòa thì ta cũng có thể áp dụng với các đường tròn. Một vòng tròn hoàn hảo trong mỗi hình vuông của mô hình sẽ tuân theo tỉ lệ 1:1.618 so với vòng tròn hình vuông liền kề.

Sử dụng các Vòng tròn Vàng sẽ tạo nên không chỉ tạo sự hài hòa và tỉ lệ hợp lí mà còn tạo sự nhất quán trong cả hình dáng. Hãy xem logo của Pepsi và Twitter dưới đây:

Logo Pepsi dựa trên 2 vòng tròn giao nhau hoàn toàn theo Tỉ lệ vàng. Vòng trong nhỏ hơn không thực sự hiện diện nhưng lại định dạng cho dải đai trắng nằm dọc trung tâm logo.

Logo Twitter sử dụng hình học và hoàn toàn dựa trên các đường tròn. Có một chút thiếu chính xác khi gắn với Tỉ lệ vàng nhưng phần lớn của logo có vẻ dùng Tỉ lệ vàng để tạo sự cân bằng, sắp xếp và hòa hợp.

Đến lượt bạn rồi!

Bạn có thể dùng nhiều yếu tố của Tỉ lệ vàng để thiết kế tốt hơn. Các chỉnh sửa có thể khó nhận ra, nhưng chỉ cần như vậy cũng đủ làm thiết kế tuyệt vời hơn, nhất là trong mắt người xem.

György Dóczi đã viết trong The Power of Limits: “ Sức mạnh của Tỉ lệ vàng trong việc tạo nên sự hài hòa bắt nguồn từ khả năng độc đáo của nó khi kết hợp các thành phần thành 1 thể, khiến cho mỗi chi tiết vẫn giữ được chất riêng mình nhưng hòa hợp được với tổng thể chung của tác phẩm.”

Những điều cơ bản cần biết về tỷ lệ vàng trong thiết kế