Thiết kế trực quan là việc tạo ra và làm cho tính thẩm mỹ chung của sản phẩm trở nên nhất quán. Để tạo ra phong cách thẩm mỹ của trang web hoặc ứng dụng, chúng tôi làm việc với các yếu tố cơ bản của thiết kế trực quan, sắp xếp chúng theo nguyên tắc thiết kế. Những yếu tố và nguyên tắc này cùng nhau tạo thành các khối xây dựng của thiết kế trực quan và sự hiểu biết chắc chắn về chúng là rất quan trọng trong việc tạo ra thiết kế trực quan của bất kỳ sản phẩm nào.
Ở đây, chúng tôi sẽ giới thiệu cho bạn các yếu tố của thiết kế trực quan: đường nét, hình dạng, khoảng âm/khoảng trắng, khối lượng, giá trị, màu sắc và kết cấu. Mặc dù việc kiểm tra chặt chẽ từng thành phần thường không cần thiết trong công việc hằng ngày của bạn với tư cách là nhà thiết kế, nhưng các nguyên tắc thiết kế — cách đặt các thành phần lại với nhau để xây dựng trang và màn hình ứng dụng một cách tối ưu — đóng một vai trò quan trọng trong vai trò của bạn. Học cách đạt được sự thống nhất, hình thức, thứ bậc, sự cân bằng, độ tương phản, quy mô, sự thống nhất và sự tương đồng sẽ mang lại cho bạn nhiều lợi ích. Tại đây, chúng tôi cũng sẽ chỉ cho bạn cách bạn nên cân nhắc việc đặt các yếu tố hình ảnh không thể thiếu này để tạo ra tác động tối đa. Vì vậy, hãy bắt đầu.
Các yếu tố của thiết kế trực quan
Bất kỳ sản phẩm nào – từ sản phẩm phần mềm như trang web và ứng dụng đến sản phẩm phần cứng như máy nướng bánh mì và máy sấy tóc – đều có thể được chia thành các yếu tố cơ bản của thiết kế trực quan, như mô tả của Alan Hashimoto, phó giáo sư Thiết kế Đồ họa và Nghệ thuật Máy tính tại Đại học Bang Utah, và Mike Clayton, giám đốc và phó giáo sư về Nghệ thuật Đồ họa Máy tính tại Đại học Ngôi Lời Nhập thể, trong cuốn sách của họ, Nguyên tắc cơ bản về thiết kế hình ảnh: Phương pháp tiếp cận kỹ thuật số . Những yếu tố này là những công cụ cơ bản mà các nhà thiết kế hình ảnh của chúng tôi sử dụng trong công việc hàng ngày và việc hiểu cơ bản về chúng chắc chắn là điều kiện tiên quyết cho công việc.
Đường kẻ
Đường thẳng là những nét nối hai điểm và là thành phần cơ bản nhất của thiết kế trực quan. Chúng ta có thể sử dụng chúng để tạo ra các hình dạng và khi lặp lại chúng, chúng ta có thể tạo thành các mẫu tạo ra họa tiết.
Teo Yu Siang và Tổ chức thiết kế tương tác , CC BY-NC-SA 3.0
Một đường nối hai điểm và là yếu tố đơn giản nhất của thiết kế. Nói theo cách này, bạn không thể loại bỏ bất kỳ vật thể nào thấp hơn một vật thể một chiều trong thế giới thiết kế. (Trong khoa học thì bạn có thể, nhưng đó lại là một câu chuyện khác.)
Mặc dù đơn giản nhưng các đường nét có thể sở hữu rất nhiều thuộc tính cho phép chúng ta truyền tải nhiều biểu thức khác nhau. Ví dụ: các đường có thể dày hoặc mỏng, thẳng hoặc cong, có chiều rộng đồng đều hoặc giảm dần, có dạng hình học (nghĩa là chúng trông giống như được vẽ bằng thước kẻ hoặc la bàn) hoặc hữu cơ (nghĩa là chúng trông giống như được vẽ bằng tay) .
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Đường nét rất đơn giản nhưng có thể truyền tải những cảm xúc khác nhau bằng cách sử dụng các thuộc tính khác nhau.
Một đường cũng có thể được ngụ ý: nghĩa là được gợi ý bằng cách hình thành một kết nối vô hình giữa các phần tử khác. Ví dụ: trong logo của Tổ chức Thiết kế Tương tác, dòng chữ “Tổ chức Thiết kế Tương tác” xung quanh cây kết nối với nhau để tạo ra một đường ngụ ý hình bán nguyệt.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Dòng chữ “ INTERACTION DESIGN FOUNDATION ” tạo thành một đường hình bán nguyệt ngụ ý trong logo của chúng tôi.
Hình dạng
Hình dạng là các khu vực khép kín, thường được hình thành bằng các đường (mặc dù chúng cũng có thể được hình thành bằng cách sử dụng màu sắc, giá trị hoặc kết cấu khác). Một hình có hai chiều: chiều dài và chiều rộng.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Chúng ta có thể tạo hình bằng cách sử dụng các đường nét (như trên) hoặc bằng cách sử dụng sự khác biệt về màu sắc, kết cấu hoặc giá trị.
Chúng ta có xu hướng xác định các vật thể bằng hình dạng cơ bản của chúng và chỉ tập trung vào các chi tiết (chẳng hạn như đường nét, giá trị, màu sắc và kết cấu) khi kiểm tra kỹ hơn. Vì lý do này, hình dạng là yếu tố quan trọng mà các nhà thiết kế chúng tôi sử dụng để giao tiếp nhanh chóng và hiệu quả.
Khoảng trắng/âm bản
Không gian âm (còn được gọi là khoảng trắng) là vùng trống xung quanh hình (dương). Mối quan hệ giữa hình dạng và không gian được gọi là hình/mặt đất , trong đó hình dạng là hình và diện tích xung quanh hình là mặt đất. Chúng ta nên lưu ý rằng khi thiết kế các hình khối tích cực, chúng ta đồng thời cũng đang thiết kế các không gian âm. Không gian âm cũng quan trọng như chính hình dạng tích cực — bởi vì nó giúp xác định ranh giới của không gian dương và mang lại sự cân bằng cho bố cục.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Không gian âm, còn gọi là khoảng trắng, là vùng trống xung quanh hình dương. Bạn có thể chọn xem đây là một quả bóng màu xanh đặt trên một hình chữ nhật màu xanh nhạt – hoặc nó là một hình chữ nhật màu xanh nhạt có một lỗ trên đó?
Một số thiết kế tận dụng không gian âm để tạo hiệu ứng hình ảnh thú vị. Ví dụ: logo nổi tiếng của Quỹ Bảo vệ Thiên nhiên Thế giới (WWF) đã tận dụng sự nhầm lẫn giữa hình dạng dương và không gian âm để tạo ra hình ảnh một chú gấu trúc.
Quỹ Bảo vệ Thiên nhiên Thế giới (WWF), Sử dụng Hợp pháp
Logo của WWF không vẽ rõ ràng toàn bộ con gấu trúc: nó khéo léo sử dụng không gian âm (màu trắng) xung quanh các hình dạng màu đen để gợi ý phần còn lại của con gấu trúc.
Âm lượng
Âm lượng áp dụng cho hình ảnh ba chiều và có chiều dài, chiều rộng và chiều sâu. Chúng tôi hiếm khi sử dụng âm lượng trong thiết kế hình ảnh vì hầu hết các sản phẩm kỹ thuật số đều được xem trên màn hình 2D, mặc dù một số ứng dụng và trang web sử dụng mô hình và đồ họa 3D. (Tuy nhiên, về mặt kỹ thuật, hình ảnh 3D được xem trên màn hình 2D vẫn là hình ảnh 2D.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Khối lượng có 3 chiều: chiều dài, chiều rộng và chiều sâu. Hình ảnh này là sự mô phỏng âm lượng trong đồ họa 2D.
Giá trị
Giá trị, khá đơn giản, mô tả ánh sáng và bóng tối.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Giá trị sáng so với giá trị tối: giá trị mô tả độ sáng và độ tối.
Một thiết kế có độ tương phản cao về các giá trị (tức là thiết kế sử dụng các giá trị sáng và tối) sẽ tạo ra cảm giác rõ ràng , trong khi một thiết kế có các giá trị tương tự sẽ tạo ra cảm giác tinh tế . Ví dụ: chúng ta cũng có thể sử dụng giá trị để mô phỏng âm lượng ở dạng 2D bằng cách sử dụng các giá trị sáng hơn trong đó ánh sáng chiếu vào vật thể và giá trị tối hơn cho bóng.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Sự khác biệt về giá trị tạo ra các thiết kế rõ ràng, trong khi các thiết kế sử dụng các giá trị tương tự có xu hướng trông tinh tế hơn.
Màu sắc
Màu sắc là một yếu tố của ánh sáng. Lý thuyết màu sắc là một nhánh của thiết kế tập trung vào việc pha trộn và sử dụng các màu sắc khác nhau trong thiết kế và nghệ thuật. Trong lý thuyết màu sắc, có sự khác biệt quan trọng giữa các màu được trộn theo kiểu trừ và các màu được trộn theo kiểu cộng.
Trong sơn, màu sắc trộn lẫn một cách trừ vì các sắc tố trong sơn hấp thụ ánh sáng. Khi các sắc tố khác nhau được trộn lẫn với nhau, hỗn hợp sẽ hấp thụ phạm vi ánh sáng rộng hơn, dẫn đến màu tối hơn. Sự kết hợp trừ của màu lục lam, đỏ tươi và vàng sẽ tạo ra màu đen. Sự kết hợp trừ màu trong sơn và in tạo ra hệ màu CMYK (tức là C yan, M Agenta, Y ellow và blac K ).
Trong thiết kế kỹ thuật số, nơi sản phẩm hiển thị trên màn hình, màu sắc sẽ được trộn lẫn với nhau vì màn hình phát ra ánh sáng và các màu sắc sẽ cộng hưởng với nhau theo đó. Khi các màu khác nhau được trộn với nhau trên màn hình, hỗn hợp này sẽ phát ra phạm vi ánh sáng rộng hơn, dẫn đến màu nhạt hơn. Sự kết hợp phụ gia của các màu đỏ, xanh dương và xanh lục trên màn hình sẽ tạo ra ánh sáng trắng. Sự kết hợp màu sắc phụ gia trên màn hình kỹ thuật số tạo ra hệ màu RGB (tức là R ed , G reen, B lue).
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Sự kết hợp trừ màu trong sơn và in tạo ra hệ màu CMYK. Sự kết hợp màu sắc phụ gia trên màn hình kỹ thuật số tạo ra hệ màu RGB.
Chúng tôi sử dụng màu sắc trong thiết kế hình ảnh để truyền tải cảm xúc, đồng thời tăng thêm sự đa dạng và thú vị cho thiết kế của mình, tách biệt các khu vực riêng biệt trên trang và phân biệt tác phẩm của chúng tôi với đối thủ cạnh tranh.
Kết cấu
Kết cấu là chất lượng bề mặt của một vật thể.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Họa tiết có thể được tạo bằng một mẫu đường lặp lại hoặc bằng cách sử dụng các hình ảnh họa tiết xếp chồng lên nhau. Ở trên, các đường chéo thêm hiệu ứng ‘bám’ vào hình chữ nhật ‘mượt mà’.
Là một nhà thiết kế, bạn có thể làm việc với hai loại kết cấu: kết cấu xúc giác , nơi bạn có thể cảm nhận được kết cấu và kết cấu ngụ ý , nơi bạn chỉ có thể nhìn thấy — tức là không cảm nhận được — kết cấu. Hầu hết các nhà thiết kế hình ảnh sẽ làm việc với các kết cấu ngụ ý, vì màn hình (ít nhất là theo công nghệ tiên tiến đã thúc đẩy chúng vào giữa những năm 2010) không thể tạo ra các kết cấu xúc giác.
Thiết kế biểu tượng ứng dụng trong iOS 6 trở về trước bắt chước kết cấu bóng loáng của kính để kích động người dùng chạm vào chúng. Sau đó, Apple đã nổi tiếng khi giới thiệu kết cấu vải lanh cho phần lớn giao diện người dùng của mình . Với sự phổ biến của thiết kế phẳng (phong cách tối giản có không gian sạch sẽ và hình minh họa phẳng, hai chiều), việc sử dụng họa tiết trong thiết kế trực quan sẽ giảm đáng kể vào giữa những năm 2010 – mặc dù chúng vẫn có thể rất hữu ích.
Không xác định, sử dụng hợp lý
Các biểu tượng ứng dụng iOS 1-6 có kết cấu bóng loáng để chúng trông giống như các nút thực tế.
Không xác định, sử dụng hợp lý
Khoảng năm 2011, Apple đã giới thiệu việc sử dụng rộng rãi kết cấu vải lanh (xuất hiện lần đầu trên iOS) trong tất cả các hệ điều hành của mình.
Nguyên tắc thiết kế trực quan
Các yếu tố của thiết kế trực quan – đường nét, hình dạng, khoảng âm/khoảng trắng, khối lượng, giá trị, màu sắc và kết cấu – mô tả các khối xây dựng nên tính thẩm mỹ của sản phẩm. Mặt khác, các nguyên tắc thiết kế cho chúng ta biết những yếu tố này có thể và nên kết hợp với nhau như thế nào để mang lại kết quả tốt nhất. Nhiều nguyên tắc dưới đây có liên quan chặt chẽ và bổ sung cho nhau.
Các nguyên tắc thiết kế quan trọng như thế nào đối với công việc của một nhà thiết kế hình ảnh? Đối tác và giám đốc nghiên cứu và phát triển tại Viện Khoa học Quản lý Ứng dụng William Lidwell, trong cuốn sách mang tính bước ngoặt và được tham khảo rộng rãi Nguyên tắc chung của thiết kế , giải thích:
“Những nhà thiết kế giỏi nhất đôi khi coi thường các nguyên tắc thiết kế. Tuy nhiên, khi họ làm như vậy, thường họ sẽ nhận được một số giá trị đền bù xứng đáng với cái giá phải trả cho hành vi vi phạm. Trừ khi bạn chắc chắn làm được điều đó, tốt nhất hãy tuân thủ các nguyên tắc.” – William Lidwell
Thống nhất
Sự thống nhất liên quan đến việc tạo ra cảm giác hài hòa giữa tất cả các thành phần trong một trang. Một trang có các thành phần được sắp xếp trực quan hoặc mang tính khái niệm với nhau sẽ có khả năng tạo ra cảm giác thống nhất.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Sự thiếu thống nhất trong thiết kế có thể tạo ra cảm giác bất an, hỗn loạn. Đôi mắt của chúng ta chi phối sự phán xét của chúng ta.
Khi thiết kế trang web, chúng ta có thể sử dụng lưới để đạt được cảm giác thống nhất, vì các phần tử được tổ chức trong lưới sẽ tuân theo sự sắp xếp có trật tự. Tuy nhiên, chúng tôi cần đưa ra một số sự đa dạng trong tác phẩm của mình để đạt được sự cân bằng giữa thiết kế nhàm chán và hỗn loạn
Gestalt
Gestalt đề cập đến xu hướng nhận thức tổng thể của tất cả các bộ phận thay vì các yếu tố riêng lẻ của chúng ta. Mắt và não con người cảm nhận được một hình dạng thống nhất theo một cách khác với cách chúng cảm nhận từng phần riêng lẻ của những hình dạng đó. Đặc biệt, chúng ta có xu hướng cảm nhận hình dạng tổng thể của một vật thể trước khi cảm nhận các chi tiết (đường nét, họa tiết, v.v.) của vật thể đó.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Gestalt là lý do khiến chúng ta có thể nhìn thấy hình vuông, hình tròn và hình tam giác dù các đường nét không hoàn chỉnh. Trước tiên, chúng ta nhìn thấy tổng thể được hình thành bởi các đường chấm trước khi cảm nhận được các đường chấm riêng biệt trong mỗi hình ảnh.
Logo WWF, được trình bày trước đó, là một ví dụ về việc sử dụng nguyên tắc hình thái để tạo ra các thiết kế thú vị. Bằng cách đặt các bộ phận của một con gấu trúc gần nhau một cách có chiến lược, thiết kế tận dụng xu hướng xem toàn bộ hình ảnh thay vì các bộ phận của nó, từ đó tạo ra ảo giác về một con gấu trúc.
Ví dụ: Gestalt rất quan trọng trong việc tạo ra các phần riêng biệt của trang web bằng cách tăng khoảng trắng giữa chúng. Với tư cách là nhà thiết kế, chúng ta nên đảm bảo rằng các phần của trang web mà chúng ta nhóm lại với nhau bằng cách sử dụng nguyên tắc cử chỉ – tức là nếu chúng ở gần nhau, có cùng hình dạng và/hoặc có kích thước tương tự nhau – thực sự được nhóm lại với nhau về mặt khái niệm. Việc nhóm các phần tử “vô tình” không giống nhau về mặt khái niệm sẽ khiến người dùng bối rối.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Các thiết kế có các phần rõ ràng sẽ dễ xử lý và quét hơn những thiết kế không có sự phân biệt rõ ràng giữa các phần – đặc biệt nếu các phần có sự khác biệt về mặt khái niệm.
Hệ thống cấp bậc
Hệ thống phân cấp cho thấy sự khác biệt về tầm quan trọng của các thành phần trong thiết kế. Màu sắc và kích thước là những cách phổ biến nhất mà chúng ta có thể tạo thứ bậc — ví dụ: bằng cách làm nổi bật nút chính hoặc sử dụng phông chữ lớn hơn cho tiêu đề. Các mục xuất hiện ở đầu trang hoặc ứng dụng cũng có xu hướng được xem là có thứ bậc cao hơn các mục xuất hiện bên dưới.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Cỡ chữ và kiểu chữ là một trong những cách để thiết lập hệ thống phân cấp.
Sự cân bằng
Cân bằng là nguyên tắc chi phối cách chúng ta phân bổ đồng đều các yếu tố của một thiết kế . Các thiết kế cân bằng có xu hướng mang lại vẻ điềm tĩnh, ổn định và tự nhiên, trong khi các thiết kế mất cân bằng khiến chúng ta cảm thấy khó chịu.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Các thiết kế cân bằng có vẻ ổn định, trong khi các thiết kế không cân bằng có vẻ thiếu bền vững và thiếu tự nhiên.
Sự cân bằng có thể đạt được bằng cách có tính đối xứng trong thiết kế (ví dụ: có một trang web với văn bản và hình ảnh tập trung). Tuy nhiên, bạn cũng có thể đạt được sự cân bằng mà không cần tính đối xứng – có lẽ không có gì đáng ngạc nhiên khi điều này được gọi là sự cân bằng bất đối xứng. Chúng ta đạt được sự cân bằng bất đối xứng khi sắp xếp các phần tử có kích thước khác nhau theo cách mang lại sự thống nhất. Chúng ta có thể tưởng tượng điểm trung tâm của thiết kế và phân bổ các yếu tố theo cách tạo ra sự cân bằng.
Sự tương phản
Chúng tôi sử dụng độ tương phản để làm nổi bật một yếu tố bằng cách điều chỉnh sự khác biệt về màu sắc, giá trị, kích thước và các yếu tố khác. Ví dụ: với tư cách là nhà thiết kế (có thể là thiết kế logo, thiết kế giao diện người dùng, v.v.), chúng ta thường sử dụng màu đỏ để làm nổi bật một số yếu tố nhất định. Trong iOS, màu đỏ thường xuất hiện trong hành động “Xóa” để biểu thị rằng một hành động (thường) không thể thay đổi sắp xảy ra. Mặt khác, màu xanh lá cây thường là thứ chúng ta sử dụng (ít nhất là trong thiết kế phương Tây) trong những hành động tích cực như “Đi” và “Chấp nhận” – do đó nhấn mạnh rằng chúng ta không thể bỏ qua ý nghĩa văn hóa của màu sắc khi thiết kế theo độ tương phản. Nếu bạn đang thiết kế cho một khách hàng ở một vùng đất xa xôi, hãy tìm hiểu và điều chỉnh công việc của mình để phù hợp với những cân nhắc về văn hóa. Ví dụ, hãy tự hỏi bản thân: “Màu đỏ của họ là may mắn hay tức giận?” hoặc “Người da đen của họ có tính kinh doanh hay tang lễ?”
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Màu đỏ, màu có độ tương phản cao, được sử dụng rộng rãi trong iOS cho chức năng “Xóa”.
Tỉ lệ
Tỷ lệ mô tả kích thước tương đối của các phần tử trong một thiết kế. Bằng cách sử dụng tỷ lệ để làm cho một phần tử lớn hơn các phần tử khác xuất hiện cùng với nó, bạn có thể nhấn mạnh phần tử đó. Bạn không chỉ có thể làm nổi bật một yếu tố theo cách này—bạn còn có thể sử dụng tỷ lệ để tạo cảm giác về chiều sâu (vì các vật thể ở gần có vẻ lớn hơn đối với mắt người). Tỷ lệ phóng đại của hình ảnh cũng tạo thêm mức độ thú vị và kịch tính nhất định cho chúng.
Teo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Tỷ lệ có thể được sử dụng để tạo hệ thống phân cấp và thêm điểm nhấn cho các yếu tố nhất định trên thiết kế.
Sự thống trị
Sự thống trị tạo ra sự tập trung vào một yếu tố duy nhất . Chúng ta có thể sử dụng màu sắc, hình dạng, độ tương phản, tỷ lệ và/hoặc vị trí để đạt được điều này. Ví dụ: hầu hết các trang web đều có hình ảnh “anh hùng” chính, sử dụng sự thống trị để thu hút người dùng, thu hút họ một cách tự nhiên.
eo Yu Siang và Tổ chức thiết kế tương tác, CC BY-NC-SA 3.0
Sự thống trị có thể được thiết lập bằng cách sử dụng vị trí, hình dạng và màu sắc, cùng nhiều yếu tố khác.
Khi làm việc trong lĩnh vực thiết kế trực quan, chúng ta nên đảm bảo rằng chúng ta sử dụng sự thống trị trong khi vẫn duy trì sự thống nhất và cân bằng của các trang web – nếu không, thiết kế có khả năng tạo ra trải nghiệm mất phương hướng cho người dùng.
Ví dụ về các yếu tố và nguyên tắc thiết kế trực quan
Với các yếu tố của thiết kế trực quan và nguyên tắc thiết kế , chúng tôi sẽ phân tích một số trang web để xem chúng kết hợp với nhau như thế nào và tại sao các thiết kế lại hoạt động.
Trang chủ của Google
Trang chủ của Google là một trong những trang được truy cập nhiều nhất trên thế giới. Sự đơn giản thô sơ của trang này một phần là lý do tại sao nó được thiết kế tốt đến vậy, nhưng đây là những yếu tố khác khiến trang này hoạt động xuất sắc:
Google Inc., Sử dụng hợp pháp.
Sự thống trị : Biểu trưng lớn của Google và hộp tìm kiếm mang lại cho nó sự thống trị, khiến nó trở thành trọng tâm cốt lõi (và đối với hầu hết, duy nhất) của toàn bộ trang.
Độ tương phản (và màu sắc) : Biểu trưng của Google sử dụng các màu sáng (chủ yếu là màu chính) và các màu này kết hợp hài hòa, tạo thành một biểu tượng đẹp mắt. Logo cũng có đủ độ tương phản trên nền trắng, làm cho nó nổi bật trên trang.
Hình dạng : Hộp tìm kiếm sử dụng hình chữ nhật để phân định trường tìm kiếm, làm cho nó rất dễ sử dụng .
Không gian âm : Trang chủ của Google chủ yếu được tạo từ không gian âm, khiến hộp tìm kiếm (chức năng chính của trang) trở thành trung tâm của sự chú ý. Không gian âm cũng hoạt động tốt cho trang vì nó hoạt động giống như một tờ giấy trắng trước khi người dùng nhập cụm từ tìm kiếm của họ.
Cân bằng : Trang gần như đối xứng theo chiều dọc, mang lại cảm giác cân bằng, rất dễ chịu và êm dịu khi nhìn vào.
Quartz’s homepage
Quartz là hãng thông tấn ưu tiên kỹ thuật số và di động với khán giả toàn cầu, được ra mắt vào năm 2012 bởi Atlantic Media, đơn vị cũng xuất bản The Atlantic . Nó có một trang chủ táo bạo đặt các câu chuyện tin tức nổi bật ở vị trí trung tâm. Đây là cách các nguyên tắc thiết kế và các yếu tố thiết kế kết hợp với nhau:
Quartz, sử dụng hợp lý.
Thật dễ dàng để chiêm ngưỡng toàn bộ hiệu ứng mà không cần nhìn qua các chi tiết nhỏ—các yếu tố được kết hợp với nhau rất ăn ý và theo các nguyên tắc lâu đời để tạo ra hiệu ứng ‘wow’ đó.
Sự thống trị : Tin tức chính ngay lập tức thu hút sự chú ý của bạn vì phông chữ lớn, đậm khiến nó chiếm ưu thế trên trang chủ.
Hệ thống phân cấp : Trang chủ sử dụng hệ thống phân cấp rõ ràng để thiết lập tầm quan trọng tương đối của các yếu tố khác nhau. Câu chuyện chính có văn bản lớn nhất và đậm nét nhất, có thứ bậc cao nhất. Bốn câu chuyện tiếp theo, được đặt bên dưới câu chuyện chính, có phông chữ nhỏ hơn để hiển thị thứ bậc cấp dưới của chúng trong câu chuyện chính.
Tỷ lệ, giá trị và màu sắc : Trang chủ của Quartz có chữ “Q” lớn (chiều cao toàn trang), là mặt nạ của hình ảnh anh hùng cho câu chuyện chính. Chữ “Q” lớn nhanh chóng thiết lập danh tính của trang web (vì “Q” là viết tắt của “Quartz”) bằng cách sử dụng tỷ lệ. Tuy nhiên, giá trị ánh sáng tương đối và màu thang độ xám của chữ “Q” làm cho nó mờ dần vào nền, do đó thay vào đó tập trung vào tiêu đề của câu chuyện chính.
Không gian âm : Hầu hết trang chủ là không gian âm, cho phép nội dung tỏa sáng. Khi đưa chuột qua tiêu đề câu chuyện chính, mặt nạ “Q” sẽ biến mất, lấp đầy khoảng trống bằng hình ảnh đặc trưng. Đây là một ví dụ về cách sử dụng không gian âm độc đáo có thể kích thích sự quan tâm đến thiết kế của trang web.
Sự thống nhất : Quartz sử dụng hệ thống lưới trong trang web của mình để tạo cảm giác thống nhất. Ví dụ, bốn tầng có chiều rộng bằng nhau và cách đều nhau, tạo cảm giác ngăn nắp và có cấu trúc.
Tóm lại
Các yếu tố của thiết kế trực quan tạo nên các khối xây dựng cơ bản của sản phẩm. Mặc dù chúng tôi với tư cách là nhà thiết kế hình ảnh không thực sự cần phải kiểm tra chặt chẽ từng yếu tố trong công việc hàng ngày của mình, nhưng các nguyên tắc thiết kế — cách đặt các yếu tố lại với nhau để xây dựng trang và màn hình ứng dụng một cách tối ưu — đóng một vai trò quan trọng trong những gì chúng tôi làm. Học cách đạt được sự thống nhất, hình thức, thứ bậc, sự cân bằng, độ tương phản, quy mô, sự thống trị và sự tương đồng sẽ cực kỳ hữu ích khi bạn làm việc trong lĩnh vực thiết kế trực quan.
Vì vậy, sử dụng các yếu tố của bạn, cụ thể là:
Đường kẻ
Hình dạng
Không gian âm
Âm lượng
Giá trị
Màu sắc
Kết cấu
và hướng chúng xung quanh các nguyên tắc, cụ thể là:
Đoàn kết
Gestalt
Hệ thống cấp bậc
Sự cân bằng
Sự tương phản
Tỉ lệ
Sự thống trị
sẽ cho phép bạn tạo ra những kết quả thắng lợi một cách nhất quán.
Tài liệu tham khảo & Nơi tìm hiểu thêm
Alan Hashimoto và Mike Clayton, Nguyên tắc cơ bản về thiết kế hình ảnh: Phương pháp tiếp cận kỹ thuật số , 2004
William Lidwell, Nguyên tắc thiết kế phổ quát , 2003
Phòng Truyền thông Kỹ thuật số thuộc Bộ Y tế và Dịch vụ Nhân sinh Hoa Kỳ,Cơ bản về Thiết kế Hình ảnh.
Nguồn: https://www.interaction-design.org/literature/article/the-building-blocks-of-visual-design
Tham khảo thêm các dịch vụ thiết kế tại đây
