Những thành tố cơ bản làm nên một thiết kế tuyệt vời (Phần 2)

Phần 2: Những nguyên lý thiết kế

Những thành tố trong thiết kế hình ảnh – đường thẳng, hình dạng, không gian âm, volume, sắc thái, màu sắc và texture – là những phần quan trọng để có được thiết kế thẩm mỹ. Mặt khác, nguyên lý thiết kế sẽ chỉ ra cách phối hợp những yếu tố trên để có được kết quả tốt nhất. Những nguyên lý dưới đây có mối liên hệ mật thiết và hỗ trợ cho nhau.

Vậy tầm quan trọng của nguyên lý thiết kế trong công việc của một nhà thiết kế thị giác là gì? Một nhân viên nghiên cứu và phát triển đối tác tại Viện quản lý Khoa học ứng dụng đã có viết trong quyển sách Universal Principles of Design:

“Những nhà thiết kế giỏi đôi khi không quan tâm đến nguyên lý thiết kế. Tuy nhiên, nếu không tuân theo những nguyên lý ấy thì vẫn có được những lợi ích nhất định bên cạnh những rủi ro tiềm ẩn. Trừ khi nắm rõ được bản chất vấn đề, bạn nên tuân theo những nguyên lý thiết kế sẵn có.” – William Lidwell.

1. Tính thống nhất

Tính thống nhất liên quan đến việc tạo ra sự hài hòa giữa các yếu tố. Các yếu tố trong một trang được sắp xếp kĩ lưỡng theo tiêu chí hình ảnh hoặc concept sẽ có được sự thống nhất.

Thiết kế mà không có tính thống nhất có thể tạo ra sự hỗn loạn. Những gì mắt ta nhìn thấy sẽ ảnh hưởng đến đánh giá của chúng ta.

Khi thiết kế trang web, chúng ta có thể tận dụng hệ thống lưới để có được sự thống nhất. Đó là bởi vì những yếu tố được sắp xếp theo dạng lưới sẽ tuân theo một trật tự nhất định. Tuy nhiên, chúng ta cần phải có sự đa dạng trong trong thiết kế để cân bằng được tác phẩm của mình.


2. Gestalt

Gestalt liên quan đến cách nhìn nhận một sự vật như một tổng thể thay vì từng chi tiết tách rời. Cách mà não và mắt người xem xét một hình dạng thống nhất sẽ khác với cách mà họ nhìn nhận từng chi tiết của nó. Cụ thể, chúng ta có xu hướng nhìn tổng quan vật thể trước, sau đó mới đến các chi tiết nhỏ cấu thành (đường thẳng, chất liệu, vâng vâng).

Gestalt là lý do giải thích vì sao chúng ta nhận ra đường các hình vuông, tròn và tam giác mặc dù các đường nét chưa hoàn thiện hoặc bị gãy khúc. Chúng ta sẽ nhìn nhận tổng thể hình dạng cấu thành bởi những đường gấp khúc, sau đó mới chú ý đến những đường gấp khúc trong mỗi hình.

Như đã nói phía trên, logo WWF là một ví dụ điển hình cho ứng dụng của gestalt để tạo ra thiết kế độc đáo. Thông qua việc ghép những bộ phận của con gấu trúc lại, thiết kế này đã tận dụng xu hướng nhìn nhận tổng thể trước thay vì các yếu tố riêng lẻ, do đó nó cho ta thấy hình ảnh một chú gấu trúc.

Gestalt có vai trò quan trọng, khiến cho những chi tiết rời rạc trong một trang web trở nên nổi bật bằng cách gia tăng khoảng cách giữa chúng. Đối với nhà thiết kế, chúng ta nên chắc chắn rằng những thành phần trong một trang web mà ta đã áp dụng lý thuyết gestaltđể nhóm chúng lại cần phải có concept giống nhau – chẳng hạn như nếu chúng ở gần nhau, ta nên sử dụng hình dạng hoặc kích thước tương tự. Nếu nhóm các chi tiết “một cách tùy hứng” thì người dùng sẽ cảm thấy bối rối khi nhìn vào thiết kế của bạn.

Việc phân chia rõ ràng khi thiết kế sẽ khiến cho người dùng cảm thấy dễ dàng hơn khi lướt qua phần nội dung – đặc biệt là khi phần nội dung ấy có nhiều điểm tương đồng.


3. Tầng lớp

Tầng lớp sẽ cho bạn biết mức độ quan trọng của các chi tiết thiết kế. Màu sắc và kích thước là những công cụ để chúng ta tạo ra sự phân cấp tầng lớp – ví dụ như chúng ta có thể làm điều này bằng cách in đậm một cái nút hay sử dụng phông chữ lớn hơn cho phần heading. Những chi tiết xuất hiện trên đầu trang web hoặc phần mềm thường sẽ quan trọng hơn chi tiết phía dưới.

Kích cỡ phông chữ và phong cách là một trong những công cụ để phân chia tầng lớp.


4. Sự cân bằng

Cân bằng là kim chỉ nam trong việc phân bố các yếu tố đều đặn. Thiết kế cân bằng thường mang tính ổn định và tự nhiên, và thiết kế không cân bằng sẽ khiến ta nhìn nó không thuận mắt lắm.

Thiết kế cân bằng sẽ cho ta tính ổn định, trong khi thiết kế không có tính cân bằng sẽ mất cân đối và không tự nhiên.

Chúng ta có thể có thể tạo ra một thiết kế cân bằng bằng cách ứng dụng hệ trục đối xứng trong thiết kế (ví dụ như canh giữa phần văn bản và hình ảnh trong một trang web). Tuy nhiên, bạn cũng có thể tạo ra thiết kế cân bằng mà không dùng hệ trục đối xứng – hay còn gọi là hệ trục không đối xứng. Chúng ta có thể tạo ra tính chất này khi sắp xếp những yếu tố có kích cỡ khác nhau. Chúng ta có thể ước lượng được điểm chính giữa của thiết kế và bố trí các yếu tố xung quanh để tạo ra cân bằng.


5. Độ tương phản

Chúng ta sử dụng tính tương phản để khiến cho một yếu tố nào đó trở nên nổi bật bằng cách ứng dụng những màu sắc, cường độ, kích thường và những yếu tố khác để có được sự khác biệt. Ví dụ, với vai trò của một nhà thiết kế (chẳng hạn như thiết kế logo hay UI), chúng ta thường sử dụng màu đỏ để khiến một chi tiết nổi bật. Trong hệ điều hành iOS, lệnh “Delete” thường được gắn với màu đỏ để ám chỉ rằng bạn sắp thực hiện một hành động cần cân nhắc. Mặc khác, chúng ta thường sử dụng màu xanh để ám chỉ các lệnh “Go” và “Accept” (thường thấy ở các thiết kế phương Tây) – điều này có nghĩa là bạn không thể xem nhẹ ý nghĩa của màu sắc trong ngữ cảnh và văn hóa khác nhau khi thiết kế.

Nếu nhận thiết kế cho một khách hàng ở đất nước khác, bạn cần phải cân nhắc các yếu tố văn hóa liên quan và điều chỉnh thiết kế sao cho phù hợp. Ví dụ, bạn cần hỏi mình “Màu đỏ sẽ thể hiện sự may mắn và giận dữ đây?” hoặc “Màu đen có giúp chúng trông chuyên nghiệp hơn hay muốn ám chỉ đám tang?”.


6. Kích thước

Kích thước là sự tương quan về độ lớn của các yếu tố trong một thiết kế. Bạn có thể nhấn mạnh một chi tiết trong thiết kế bằng cách điều chỉnh kích thước của nó. Thông qua đó, bạn không chỉ có thể khiến cho một yếu tố trở nên nổi bật mà còn tạo ra chiều sâu cho thiết kế (những yếu tố càng gần sẽ càng lớn trong nhãn quan con người). Hình ảnh nếu được điều chỉnh lớn hơn sẽ tạo ra sự kích thích và thúc đẩy người xem.

Kích thước có thể tạo ra sự phân cấp tầng lớp và nhấn mạnh một chi tiết trong thiết kế.


7. Dominance

Đây là yếu tố trong thiết kế giúp cho 1 chi tiết trở nên nổi bật. Chúng ta có thể sử dụng màu sắc, hình dạng, tính tương phản, kích thước hoặc sắp xếp vị trí để có được tính nổi trội này. Ví dụ, đa số trang web có một hình ảnh “chủ đạo” để thu hút người dùng một cách tự nhiên nhất.

Chúng ta có thể khiến cho yếu tố trở nên nổi bật bằng những cách như sắp xếp, hình dạng và màu sắc.

Khi thiết kế hình ảnh, chúng ta nên có yếu tố nổi bật nhất định và giữ được sự nhất quán và cân bằng cho trang web – nếu không, thiết kế của bạn sẽ làm rối người dùng.


C – Những ví dụ về các yếu tố và nguyên lý thiết kế

Khi đã nắm được các yếu tố và nguyên lý thiết kế, chúng ta sẽ phân tích một vài trang web để thấy được ứng dụng của chúng.

Trang chủ của Google

Trang chủ của Google là một trong những trang web có lượt xem nhiều nhất trên thế giới. Sự tối giản là lý do tại sao trang web được thiết kế, dưới đây là những yếu tố khác khiến cho trang web này lại hoạt động hữu hiệu như vậy:

  • Dominance: Logo Google lớn được đặt cạnh khung tìm kiếm khiến cho nó có được sự nổi bật, trở thành trung tâm của trang web.
  • Sự tương phản (và màu sắc): Logo của Google sử dụng những màu sáng và phối hợp ăn ý với nhau để tạo thành tổng thể hài hòa. Phần nền màu trắng cũng tạo ra mức tương phản phù hợp.
  • Hình dạng: Khung tìm kiếm hình chữ nhật hỗ trợ tối đa tính năng tìm thông tin.
  • Không gian âm: Trang chủ của Google ứng dụng phần không gian âm khá nhiều, do đó khung tìm kiếm trở thành trung tâm của trang web. Không gian âm hoạt động khá hiệu quả, nó giống như một mảnh giấy trắng đặt giữa trang web.
  • Tính cân bằng: Trang web được thiết kế đối xứng theo chiều dọc, cho người dùng cảm giác cân bằng, dịu mắt.

Trang chủ của Quartz

Quartz là một tổ chức quốc tế về công nghệ số và di động đầu tiên ra đời vào năm 2012 bởi Atlantic Media, cũng là chủ nhân của The Atlantic. Đây là trang web đăng tải nội dung được định dạng căn giữa. Dưới đây là phân tích về những nguyên lý thiết kế được áp dụng:

Trang web là một tổng thể thống nhất. Các yếu tố được sắp xếp theo trật tự khá tốt và áp dụng nhuần nhuyễn các nguyên lý thiết kế khiến người xem phải kinh ngạc.

  • Dominance: Nội dung văn bản chính giữa thu hút người xem ngay lập tức vì được sửng dụng với phông chữ lớn và in đậm.
  • Phân chia tầng lớp: Các yếu tố được phân chia khá rõ ràng nhằm thể hiện mức độ quan trọng của từng thành phần. Phần nội dung được in đậm và có cỡ chữ lớn nhất là quan trọng nhất. 4 phần nội dung khác bên dưới sử dụng phông chữ nhỏ hơn, thể hiện chức năng hỗ trợ cho phần chính.
  • Kích thước, sắc thái và màu sắc: Trang chủ của Quartz có chữ “Q” lớn tượng trưng cho yếu tố chủ đạo. Nó là chi tiết đại diện cho toàn bộ trang web (Q viết tắt của Quartz). Tuy nhiên, sắc thái sáng và màu sắc tối khiến nó chìm trong hình nền, do đó người xem sẽ chú ý vào phần nội dung chính hơn.
  • Không gian âm: không gian âm được vận dụng triệt để, khiến cho phần nội dung được nổi bật. Khi con trỏ chuột di chuyển đến phần headline, chữ “Q” sẽ biến mất và hình ảnh sẽ hiện ra. Đây là ví dụ cho ứng dụng của không gian âm trong việc kích thích hứng thú người dùng trong thiết kế trang web.
  • Sự thống nhất: Quartz sử dụng hệ thống lưới để có được sự nhất quán. Ví dụ, 4 phần văn bản được phân chia đều nhau về chiều rộng và cách đều nhau, điều này tạo ra trật tự và cấu trúc tốt.

Nguồn: iDesign