Chào các bạn!
Hôm nay chúng ta sẽ cùng nói về 9 nguyên lý thị giác cơ bản trong thiết kế.
Lúc mình mới bắt đầu tìm hiểu về thiết kế đồ họa, mình hầu như chỉ tập trung học cách sử dụng các công cụ đồ họa như Illustrator, Photoshop,…vì mình cho rằng chỉ cần thành thạo các công cụ đó mình có thể trở thành một graphic designer giỏi. Nhưng đời không như là mơ các bạn ạ 😂 (Mình nghĩ rằng có nhiều bạn cũng từng có quan điểm giống mình ngày trước.)
Càng tìm hiểu, mình càng nhận ra thực sự designer không dừng lại ở việc biết dùng phần mềm mà quan trọng hơn hết chính là TƯ DUY – điều giúp phân biệt giữa một designer giỏi và một designer tệ.
Nguyên lí thị giác chính là một trong những nền móng quan trọng định hình tư duy thiết kế. Lúc chưa biết đến nguyên lý thị giác, mình hầu như thiết kế mọi thứ theo cảm tính và bản năng thị giác mình có. Dẫn đến dù thấy thiết kế đó kỳ nhưng không biết nó kỳ ở đâu, muốn làm nổi bật, nhấn mạnh một element (yếu tố) nào đó nhưng càng “nhấn” nó càng “chìm”🙄🙄😂
Có thể bạn cho rằng chúng ta không nên bó buộc thiết kế vào một khuôn khổ nào vì đặc điểm công việc của một nhà thiết kế là sự sáng tạo. Nhưng mình tin những nguyên lí này sẽ dẫn dắt thiết kế của bạn hoàn thiện hơn vì nó là những quy luật tâm lí đã được thực nghiệm. Hoặc nếu bạn cool hơn thì ít ra bạn cũng phải nắm rõ các nguyên lí để phá vỡ chúng đúng không nào! 😉
Tin mình đi, dù kiến thức nguyên lí thị giác hơi mang tính lí thuyết nhưng nó tuyệt đối không lãng phí thời gian của bạn đâu. Mình đã cố gắng viết dễ hiểu nhất có thể rồi nên hãy theo dõi đến hết bài viết nhé!
Nào, bắt đầu thôi. 😊😊
1. Balance (tính cân bằng)
Đầu tiên, cùng nói về balance (tính cân bằng) – nguyên lý tạo nên tính ổn định và kết cấu trong tổng thể thiết kế.
Để hiểu rõ hơn, hãy tưởng tượng rằng mỗi yếu tố bất kỳ trong thiết kế đều có một trọng lượng nhất định từ các hình dạng, hình ảnh, màu sắc… Vì vậy, hãy tập đo lường và cảm nhận trọng lượng thị giác trên từng yếu tố nhé.
Có 3 loại cân bằng trong thiết kế:
- Cân bằng đối xứng (Symmetrical Balance)
- Cân bằng bất đối xứng (Asymmetrical Balance)
- Mất cân bằng (Off-Balance)
a. Cân bằng đối xứng (Symmetrical Balance)
Đây là loại cân bằng phổ biến nhất mà chúng ta có thể bắt gặp khá nhiều trong tự nhiên lẫn thiết kế.
Tưởng tượng thiết kế có một cái trục ảo, cân bằng đối xứng là loại cân bằng tạo nên hai nửa đối xứng nhau qua trục.
😊Ưu điểm
- Tạo cảm giác thoải mái thị giác
- Cảm giác nghiêm túc, bất động và ổn định
- Sâu hơn nữa là thể hiện nội lực và năng lượng tồn động ẩn đằng sau thiết kế.
🤢Nhược điểm
Dễ gây nhàm chán vì người xem có thể dễ dàng đoán ra nửa còn lại qua trục.
b. Cân bằng bất đối xứng (Asymmetrical Balance)
Các yếu tố trong thiết kế không được phân bố đồng đều như với cân bằng đối xứng nhưng nó vẫn có một cảm giác cân bằng và hấp dẫn mạnh mẽ gọi là cân bằng bất đối xứng.
Mặc dù sự cân bằng này không thực sự là cân bằng hoàn hảo. Tuy nhiên, bằng một cách nào đó, thị giác ta vẫn hợp lí hóa sự cân bằng của nó. Vì vậy, sự sáng tạo có thể sinh ra từ đây và tạo hứng thú hơn so với trường hợp cân bằng đối xứng bên trên.
Ngoài ra, cân bằng bất đối xứng thường được sử dụng trong thiết kế hoặc trong nhiếp ảnh để tạo ra chuyển động, lực căng, sự trẻ trung.
c. Mất cân bằng (Off-Balance)
Mất cân bằng cũng là một dạng cân bằng nha các bạn. Nghe hơi ngộ nghĩnh đúng chứ? 😂🙄
Hiệu ứng mất cân bằng đạt được khi một thiết kế có sức hấp dẫn trực quan mà không có sự cân bằng nào cả.
Nhiều bức ảnh và tác phẩm nghệ thuật vận dụng nguyên lý mất cân bằng để tạo cảm giác chuyển động. Người xem có thể cảm thấy hơi khó chịu hay choáng khi nhìn vào.
Hiệu ứng này có gì đó không hoàn toàn đúng với luật cân bằng nhưng lại hấp dẫn vì sự độc đáo, cảm giác mới lạ nếu được vận dụng một cách khéo léo.
Một lưu ý quan trọng là ranh giới giữa mất cân bằng nghệ thuật và mất cân bằng theo đúng nghĩa đen rất mong manh. Vì vậy, khi bạn quyết định vận dụng nguyên lí này hãy làm cho ro nhé!
2. Proximity (tính kế cận/lân cận)
Tính kế cận trong thiết kế được hiểu như sau:
Các yếu tố thiết kế gần nhau được coi là có liên quan, trong khi các yếu tố cách xa nhau được coi là thuộc các nhóm riêng biệt.
***Đây là một trong ba nguyên tắc thuộc nguyên lí Gestalt được phát hiện vào nửa đầu thế kỷ XX bởi nhóm các nhà tâm lý học Gestalt. Họ nghiên cứu cách mọi người nhìn nhận thế giới một cách trực quan, cách mọi người quyết định một số yếu tố nhất định có thuộc cùng một nhóm hay không.
Phân tích ví dụ trên, ta thấy khoảng trắng phân tách các hình thành hai nhóm riêng biệt thông qua tính kế cận. Ngay cả khi các hình dạng khác nhau trong mỗi nhóm, hai nhóm này vẫn rất rõ ràng.
3. Alignment (Tính căn lề)
Alignment (tính căn lề) là một nguyên tắc thiết kế đề cập đến việc sắp xếp các yếu tố đồ họa trên một thiết kế.
Alignment đóng một vai trò quan trọng trong việc tạo ra một kết nối thị giác liền mạch với các yếu tố khác trong thiết kế.
Có 4 loại căn lề: Căn trái, căn phải, căn giữa, căn hai bên.
Một sự thật thú vị là người xem sẽ không chú ý quá nhiều khi các yếu tố trong thiết kế được căn chỉnh, nhưng họ sẽ nhận ra ngay lập tức nếu thiết kế thiếu sự căn chỉnh.
Một thiết kế thiếu hoặc căn chỉnh không hợp lí sẽ trông lộn xộn, thiếu trật tự và kém chuyên nghiệp. Vì vậy, hãy đặc biệt lưu ý và áp dụng nguyên lí này để thiết kế của bạn trông gọn gàng, dễ đọc và thẩm mỹ hơn nhé!
4. Visual Hierachy (tính phân cấp)
Tính phân cấp là nguyên tắc sắp xếp các yếu tố để thể hiện thứ tự quan trọng của chúng.
Cụ thể, designer sẽ thiết kế, sắp xếp các yếu tố phù hợp với vai trò của nó bằng nhiều cách khác nhau, ví dụ:
- Sử dụng font chữ lớn hơn hoặc đậm hơn để làm nổi bật tiêu đề.
- Đặt thông điệp chính cao hơn các yếu tố thiết kế khác.
- Đặt hình ảnh chính lớn hơn, chi tiết hơn vào vùng thu hút thị giác nhất của thiết kế.
“Hệ thống phân cấp trực quan kiểm soát việc cung cấp trải nghiệm. Nếu bạn gặp khó khăn trong việc tìm nơi xem trên một trang, nhiều khả năng là bố cục của nó đang thiếu một hệ thống phân cấp trực quan rõ ràng.”
Tập đoàn Nielsen Norman
5. Repetion (tính lặp lại)
Repetition (tính lặp lại) chỉ đơn giản là lặp lại nhiều lần một phần tử duy nhất trong một thiết kế
Repetion tạo ra nhịp điệu và củng cố cho tổng thể thiết kế bằng cách kết hợp các yếu tố nhất quán với nhau như logo, màu sắc, font chữ, đường nét, hình dạng, kích thước kết cấu,…làm cho thương hiệu hoặc thiết kế dễ nhận biết ngay lập tức đối với người xem.
6. Contrast (tính tương phản)
Contract (tính tương phản) trong thiết kế được định nghĩa là sự khác biệt giữa hai hoặc nhiều yếu tố trong một bố cục. Sự khác biệt giữa các yếu tố càng nhiều, chúng càng dễ so sánh, dễ hiểu và đó là khi chúng được gọi là tương phản nhau.
Các loại tương phản phổ biến: tối – sáng, hiện đại – cổ điển, lớn – nhỏ,…
Trong thiết kế, chúng ta sử dụng độ tương phản để làm nổi bật những yếu tố quan trọng, tạo ra những đồ họa thú vị và kích thích thị giác.
Cụ thể hơn, thị giác ta rất thích sự tương phản vì nó tạo sự thu hút và tăng tính dễ hiểu.
7. Color (màu sắc)
Lý thuyết màu sắc là một môn khoa học và nghệ thuật. Chỉ bằng việc đơn giản như thay đổi độ bão hòa của một màu bất kỳ có thể gợi lên một cảm giác hoàn toàn khác.
Ngoài ra, sự khác biệt về văn hóa có thể tạo ra những ảnh hưởng tâm lý khác nhau, với một màu sắc vui vẻ và thăng hoa ở một quốc gia có thể trở nên trầm cảm ở một quốc gia khác.
Mình có viết một số bài viết chuyên sâu về nguyên lý màu sắc, các bạn có thể tham khảo thêm bên dưới:
8. Negative Space / White Space (Không gian âm)
Chúng ta đã nói khá nhiều về tầm quan trọng của màu sắc, hình ảnh và hình dạng nhưng phần không gian bị bỏ trống thì sao?
Nó được gọi là “không gian âm”- khu vực giữa hoặc xung quanh các phần tử. Nếu được sử dụng một cách sáng tạo, không gian âm có thể tạo ra hình dạng đặc biệt hoặc làm nổi bật các thành phần quan trọng trong thiết kế.
Không gian âm tạo cảm giác dễ đọc, thoải mái và tăng trải nghiệm cho người đọc
If everything yells for your viewer’s attention , nothing is heard.
– Aarron Walter “Design for Emotion”
(Tạm dịch: Nếu mọi thứ đều kêu lên nhằm thu hút sự chú ý của người xem, thì sẽ không có bất kỳ thứ gì được nghe thấy.)
Có bốn loại không gian âm: Micro space, Macro space, active white space, passive white space
Micro Space
Đây là không gian giữa các phần tử nhỏ như chữ cái, dòng, biểu tượng, biểu mẫu, đoạn văn, các nút và phần tử đồ họa.
Thêm Micro space bất cứ khi nào thiết kế cần thêm một chút không gian nghỉ hoặc tạo trật tự cho các thành tố trong thiết kế.
Macro Space
Đây là thuật ngữ nói về phần khối lượng không gian trắng lớn hơn. Khoảng cách giữa các phần tử lớn hơn như cột văn bản, đồ họa và lề.
Phần không gian trắng này có tác động lớn hơn đến hành trình trải nghiệm khách hàng nên nó được lên kế hoạch và quy định khá rõ ràng trong thiết kế.
Active White Space
Đây là không gian mà designer thêm vào thiết kế một cách có chủ ý để tạo điểm nhấn. Khoảng trắng này thường không đối xứng và tạo cảm giác năng động.
Active white space thu hút sự chú ý để nhấn mạnh các yếu tố nhất định như tiêu đề, biểu tượng hoặc hình ảnh bên trong thiết kế.
Passive White Space
Passive White Space là khoảng cách giữa các vật thể/ đối tượng nhỏ không được chú ý. Designer sử dụng nó để phân tách văn bản, sắp xếp các đoạn văn, biểu tượng.
Passive White Space (Không gian âm bị động) thường xảy ra một cách tự nhiên ví dụ như không gian giữa các từ trên một dòng hoặc khoảng trống xung quanh một phần tử đồ họa.
Mặc dù nó ít khi được chú ý, khoảng trắng này được cố ý thêm vào một cách rất tinh tế, để cho phép thị giác dễ dàng đọc thiết kế / văn bản.
9. Focal point
Focal point là điểm có trọng lượng thị giác (visual weight) lớn nhất trong thiết kế. Cụ thể hơn, nó là yếu tố nổi bật nhất và thu hút thị giác đầu tiên.
Lưu ý: Trong một thiết kế chỉ nên có một focal point. Focal point càng nổi bật càng tốt.
Cuối cùng, một số lưu ý khi tiếp cận với nguyên lý thiết kế
- Tất cả các nguyên lí đều phải được đảm bảo trong một thiết kế
- Các nguyên lí tuyệt đối không phải là luật lệ, các nguyên lí dẫn đường cho thiết kế hoàn thiện hơn.
- Người học cần tập cảm nhận bố cục dựa trên những nguyên lí thị giác.
Ta đa, bài viết cũng đủ dài rồi.
Cảm ơn các bạn đã kiên trì đọc đến đây. Hãy share nếu bạn thấy hữu ích nhé!
Tham khảo thêm:
🟢Tầm quan trọng của typography trong thiết kế. Quá trình lựa chọn font chữ (6 bước)
🟢Typography là gì? Phân loại type và cách sử dụng font chữ
Tưởng tượng thiết kế có một cái trục ảo, Symmetrical (cân bằng đối xứng) là loại cân bằng tạo nên hai nửa đối xứng nhau qua trục.
Các yếu tố trong thiết kế không được phân bố đồng đều như cân bằng đối xứng nhưng nó vẫn có một cảm giác cân bằng và hấp dẫn mạnh mẽ gọi là Không đối xứng (cân bằng bất đối xứng)
Phần không gian bị bỏ trống trong thiết kế được gọi là Negative space / White Space (không gian âm). Nếu được sử dụng một cách sáng tạo, không gian âm có thể tạo ra hình dạng đặc biệt hoặc làm nổi bật các thành phần quan trọng trong thiết kế.
nguyên lý thị giác, nguyên lý thị giác nguyên lý thị giác nguyên lý thị giác nguyên lý thị giác nguyên lý thị giác nguyên lý thị giác nguyên lý thị giác nguyên lý thị giác nguyên lý thị giác
nguyen li thi giac nguyen ly thi giac nguyen li thi giac nguyen ly thi giac
Alignment (căn chỉnh tính) is an nguyên tắc thiết kế cập nhật để sắp xếp đồ họa phần tử trên một thiết kế.
Repetition (Lặp lại) chỉ đơn giản là lặp lại nhiều lần một phần tử duy nhất trong một thiết kế
Proximity (tính kế cận/lân cận): Các yếu tố thiết kế gần nhau được coi là có liên quan, trong khi các yếu tố cách xa nhau được coi là thuộc các nhóm riêng biệt.
Focal point là điểm có trọng lượng thị giác (visual weight) lớn nhất trong thiết kế. Nó là yếu tố nổi bật nhất và có sự thu hút mắt người xem đầu tiên.
Contrast (tính tương phản) trong thiết được định nghĩa là sự khác biệt giữa hai hoặc nhiều yếu tố trong một bố cục. Sự khác biệt giữa các yếu tố càng nhiều thì chúng càng dễ so sánh và dễ hiểu hơn và đó là khi chúng được gọi là tương phản nhau.
Đây là không gian giữa các phần tử nhỏ như chữ cái, dòng, biểu tượng, biểu mẫu, đoạn văn, các nút và phần tử đồ họa.
Đây là thuật ngữ nói về phần khối lượng không gian trắng lớn hơn. Khoảng cách giữa các phần tử lớn hơn như cột văn bản, đồ họa và lề.
Active White Space (không gian âm chủ động) là không gian mà designer thêm vào thiết kế một cách có chủ ý để tạo điểm nhấn. Khoảng trắng này thường không đối xứng tạo cảm giác năng động.
Passive White Space là gì?
Passive White Space (Không gian âm bị động) là khoảng cách giữa các vật thể / đối tượng nhỏ không được chú ý. Designer sử dụng nó để phân tách văn bản, sắp xếp các đoạn văn, biểu tượng.
Passive White Space thường xảy ra một cách tự nhiên ví dụ như không gian giữa các từ trên một dòng hoặc khoảng trống xung quanh một phần tử đồ họa.