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

Phần 1: Những yếu tố trong thiết kế thị giác

Bất kì một sản phẩm nào – từ trang web, phần mềm đến máy sấy tóc hay lò nướng bánh – đều có thể được phân tích thành những phần nhỏ hơn tượng trưng cho các yếu tố trong thiết kế thị giác. Quan điểm này được thể hiện bởi Alan Hashimoto – giáo sư bộ môn thiết kế đồ họa và khoa học máy tính tại Đại học bang Utah, và Mike Clayton – giám đốc kiêm giáo sư bộ môn nghệ thuật thiết kế đồ họa trường Đại học Incarnate Word, trong quyển sách Visual Design Fundamentals: A Digital Approach (Nền tảng của thiết kế thị giác: Cách tiếp cận kĩ thuật số). Những yếu tố này là công cụ mà các nhà thiết kế thị giác thường sử dụng, do đó kiến thức cơ bản về chúng là điều tất yếu trong công việc.


1. Đường thẳng

Những đường thẳng có nhiệm vụ kết nối 2 điểm và là yếu tố cơ bản nhất trong thiết kế thị giác. Chúng ta có thể sử dụng chúng để tạo ra hình dạng, và khi được lặp đi lặp lại theo một kiểu nhất định, chúng có thể tạo ra texture.

Một đường thẳng là một yếu tố cơ bản nhất trong thiết kế, giúp kết nối 2 điểm lại với nhau.

Nghe có vẻ đơn giản nhưng đường thẳng có thể giúp ta truyền tải được nhiều giá trị và ý nghĩa. Ví dụ, đường thẳng có thể mỏng hoặc dày, thẳng hoặc cong, chiều rộng cố định hoặc thay đổi, có hình dạng tùy chỉnh (ví dụ như hình dưới đây, đường thẳng dường như được vẽ bằng thước hoặc bằng tay).

Đường thẳng trông có vẻ đơn giản nhưng có quyền năng  truyền tải cảm xúc nếu được khai thác hợp lý.

Một đường thẳng có thể tạo ra sự liên kết vô hình giữa các yếu tố. Trong logo của tổ chức thiết kế tương tác – Interaction Design Foundation, dòng chữ “Interaction Design Foundation” tạo ra hình bán nguyệt chìm.

Từ “Interaction Design Foundation” tạo ra hình bán nguyệt ngầm trong logo.


2. Hình dạng

Hình dạng là vùng chứa, được cấu thành bởi những đường thẳng (mặc dù chúng ta có thể tạo ra hình ảnh bằng màu sắc, cấu trúc và sắc thái). Một hình dạng có 2 yếu tố: chiều dài và chiều rộng.

Chúng ta có thể tạo ra hình dạng bằng các đường kẻ (như hình phía trên), hoặc sử dụng màu sắc, texture và sắc thái.

Chúng ta có xu hướng xác định hình dáng chung của vật thể, chỉ khi nhìn kĩ hơn thì chúng ta mới chú ý đến các chi tiết như đường thẳng, màu sắc và texture. Đây chính là lý do vì sao hình dạng là phương thức giao tiếp nhanh chóng mà các nhà thiết kế thường hay sử dụng.


3. Không gian âm

Không gian âm (khoảng cách trắng) là vùng rỗng xung quanh một hình. Mối quan hệ giữa hình dạng và khoảng cách được gọi là figure/ground, trong đó hình dạng là figure còn không gian xung quanh là ground. Chúng ta nên biết rằng khi thiết kế hình dạng thì việc xuất hiện của không gian âm là điều cần thiết. Không gian âm và hình dạng đều quan trọng như nhau – bởi vì nó sẽ phân tách phần không gian dương và giúp bố cục được cân bằng.

Một vài thiết kế ứng dụng không gian âm để tạo ra hiệu ứng hình ảnh thú vị. Ví dụ, logo nổi tiếng từ tổ chức Quỹ bảo vệ thiên nhiên quốc tế (WWF) áp dụng hiệu ứng này để tạo ra hình ảnh của con gấu trúc.

Logo của WWF không thể hiện quá rõ ràng hình ảnh của một chú gấu trúc: Nhà thiết kế đã khéo léo sử dụng không gian âm xung quanh phần màu đen để thể hiện tổng thể một con gấu trúc.

  • 20 logo sử dụng không gian “âm” thông minh.

4. Volume

Volume được áp dụng trong hình ảnh 3 chiều với các thông số dài, rộng và cao. Chúng ta hiếm khi sử dụng chúng trong thiết kế hình ảnh, bởi vì hầu hết những sản phẩm digital đều được thể hiện màn hình hai chiều, mặc dù vẫn có một vài phần mềm và trang web sử dụng tính năng trình chiếu đồ họa 3D. (Cơ bản thì hình ảnh 3D nếu xem trên màn hình 2D thì vẫn được xem là hình ảnh 2D).

Volume sẽ có 3 yếu tố: dài, rộng và cao. Phía trên là hình ảnh mô phỏng của volume trong đồ họa 2D.


5. Sắc thái

Sắc thái sáng và tối: sắc thái cho chúng ta biết mức độ đậm nhạt.

Một thiết kế có sự tương phản sắc thái cao sẽ tạo ra sự rõ ràng trong khi thiết kế sử dụng các sắc thái tương đồng sẽ tạo ra sự mờ ảo. Chúng ta có thể sử dụng sắc thái để mô phỏng volume trong đồ họa 2D bằng cách áp dụng sắc thái sáng cho hướng hứng sáng và sắc thái tối để thể hiện phần bóng.

Sự khác biệt về sắc thái sẽ tạo ra thiết kế rõ ràng, và thiết kế sử dụng các mức sắc thái giống nhau sẽ tạo ra thiết kế mờ ảo hơn.


6. Màu sắc

Màu sắc được trích từ ánh sáng. Thuyết màu sắc là một nhánh của thiết kế, tập trung vào việc phối hợp và sử dụng màu sắc trong thiết kế và nghệ thuật. Trong lý thuyết màu sắc, có 2 cách phối màu cơ bản là kiểu phối bù trừ và bổ sung.

Trong hội họa, màu được phối theo kiểu bù trừ là do màu sắc sử dụng có thể hút sáng. Khi phối các màu sắc khác nhau lại thì hỗn hợp đó sẽ hút nhiều loại ánh sáng, do đó màu sắc sẽ tối hơn. Kiểu phối màu bù trừ gồm màu lục lam, đỏ đậm và vàng sẽ cho kết quả là màu đen. Kiểu phối bù trừ sử dụng trong hội họa và in ấn sẽ tạo ra hệ thống màu CMYK (màu ngọc lam, đỏ tươi, vàng và đỏ).

Trong thiết kế digital, nơi các sản phẩm được thể hiện trên màn hình, màu sẽ được phối theo kiểu bổ sung. Khi phối hợp nhiều màu khác nhau trên màn hình, chúng sẽ phản sáng để tạo nên tổ hợp sáng hơn. Phối ba màu đỏ, xanh lục và xanh lam sẽ tạo ra vùng màu trắng trên màn hình. Kiểu phối màu bổ sung trên màn hình kĩ thuật số sẽ tạo ra hệ thống màu RGB (R-đỏ, G-xanh lục, B-xanh lam).

Kiểu phối màu bù trừ trong hội họa và in ấn tạo ra hệ thống màu CMYK. Kiểu phối bổ sung trên màn hình máy tính tạo ra hệ thống màu RGB.

Chúng ta ứng dụng màu sắc trong thiết kế hình ảnh để truyền tải cảm xúc và khiến cho thiết được mang tính đa dạng và tạo nhiều hứng thú cho người xem. Đồng thời nó cũng giúp ta phân chia các phần nội dung trong một trang và khiến cho thiết kế nổi bật hơn.


7. Texture

Texture là chất liệu bề mặt của vật thể.

Texture được tạo ra bằng cách lặp đi lặp lại 1 yếu tố theo kiểu mẫu nhất định, hoặc sử dụng hình ảnh mờ. Ở hình trên, chúng ta sẽ thấy một lưới được tạo ra từ những đường chéo.

Với vai trò của một nhà thiết kế, bạn có thể sử dụng hai loại texture: loại xúc giác, nơi mà bạn có thể cảm nhận được và implied texture, nơi bạn chỉ có thể nhìn thấy và không thể cảm nhận được nó. Đa số những nhà thiết kế hình ảnh sẽ sử dụng implied texture, vì màn hình kĩ thuật số không thể nào tạo ra texture xúc giác.

hiết kế biểu tượng phần mềm trong IOS 6 được thiết kế theo hướng kích thích người dùng nhấn vào đó. Sau đó, Apple đã giới thiệu một texture kiểu linen áp dụng cho hầu hết giao diện người dùng. Trong thời đại mà thiết kế phẳng ngày càng phổ biến (một phong cách thể hiện sự gọn gàng và minh họa 2 chiều), ứng dụng của texture trong thiết kế hình ảnh ngày bị giới hạn vào giữa năm 2010 – mặc dù chúng vẫn rất hữu dụng.

Biểu tượng phần mềm iOS từ bản thứ 1 đến 6 là loại texture khiến người dùng phải nhấn vào.

Khoảng 2011, Apple đã tung ra một kiểu texture linen (xuất hiện lần đầu tiên trên iOS) áp dụng cho toàn bộ hệ thống.

Nguồn: iDesign