Sự tương phản mang đến sự hiệu quả tích c trên thiết kế website

Thông thường màu đen và trắng là 2 màu có độ tương phản cao nhất, đỏ và cam thì không. Tạo ra một cấu trúc hiệu quả trên website bằng cách sử dụng kích thước, hình dạng và màu sắc khác nhau nhằm tác động đến trang web và giúp người truy cập dễ dàng đọc nội dung hơn.

Trong bài viết này, chúng tôi sẽ xem xét chi tiết sự tương phản, hình dạng, kiểu chữ lớn nhỏ, sự phân chia rõ ràng, hình ảnh để mang đến trải nghiệm người dùng tốt nhất.

Giới thiệu về sự tương phản

Tương phản có thể được định nghĩa là "sự khác biệt trong các thuộc tính trực quan để tạo ra một đối tượng (hoặc sự thể hiện của nó trong một hình ảnh) có thể phân biệt được với các đối tượng khác và nền.

Đối với các nhà thiết kế, thiết kế logo, đặc biệt là các nhà thiết kế web, sự tương phản là gốc rễ của mọi thứ. Chúng thiết lập hệ thống phân cấp có tầm quan trọng, thu hút mọi người đến các khu vực nhất định của trang và truyền đạt một thông điệp rõ ràng và súc tích ngay tại điểm nổi bật. Tạo mối quan hệ giữa các yếu tố khác nhau trên một thiết kế.

Các ví dụ rõ ràng về sự tương phản là đen và trắng, lớn và nhỏ, nhanh và chậm, dày và mỏng. Sự đối lặp là cách dễ nhất để nắm bắt được sự tương phản, nhưng khi áp dụng sự tương phản với công việc thiết kế, nó không chỉ là màu đen và trắng mà còn nhiều thứ khác. Trong thiết kế, thường các nút "add to cart" và "check out". Đây là nơi mà có mức độ tương phản cao nhất.

Chúng ta hãy xem các loại tương phản khác nhau và một số ví dụ về cách chúng được sử dụng trong thiết kế web.

Tương phản màu sắc

Đây là ví dụ phổ biến nhất của tất cả các loại tương phản khi nói đến thiết kế website và cả thiết kế logo thương hiệu. Nếu nói đến hai màu sắc khác nhau có độ tương phản cao nhất là màu đen và trắng, trong khi màu đỏ và cam thì chúng có độ tương phản thấp hơn.

​

TekRoc sử dụng độ tương phản rất rõ ràng ở đây bằng cách phủ lên hình ảnh sáng và rực rỡ trên nền đen tối tăm. Màu cam sáng và màu xanh rõ ràng là điểm nổi bật ngay lập tức thu hút hơn tất cả những thứ khác trên trang.​

Tim Van Damme đã sử dụng tuyệt vời sự tương phản màu sắc trong thiết kế trang web của GoWalla. Đường biên nhiều màu ở đầu trang không chỉ nổi bật và tạo sự quan tâm trực quan khác với nền nhạt, nhưng ông cũng đã thêm bóng đổ thả xuống cực kỳ tinh tế 1px vào văn bản trên các nút. Màu cam hơi tối hơn thực sự đã tạo ra sự tương phản giữa văn bản màu trắng và nền cam.

Tương phản về size

Hình thức tương phản phổ biến nhất tiếp theo là sử dụng kích thước. Cái gì đó lớn bên cạnh cái gì đó nhỏ thường chỉ ra rằng cái lớn thường quan trọng hơn. Đúng vậy, chúng tôi đang nói rằng kích thước vấn đề quan tâm thứ 2.






MadeByWater là dự án thiết kế của Jordan Vitanov. Anh sử dụng sự tương phản kích thước cực kỳ lớn để ngay lập tức chuyển tải một câu trích dẫn của Lý Tiểu Long, xác định lý do tại sao anh ta lại chọn tự mình tạo ra tên MadeByWater.







28Thiers là một quán bar thượng hạng hấp dẫn ở Pháp. Trang web của họ sử dụng tuyệt vời kích thước tương phản để thu hút sự chú ý ngay lập tức vào bức ảnh lớn của Martini với các thành phần khác nhau bao quanh nó. Rõ ràng rằng đây là yếu tố quan trọng nhất trên trang và nhà thiết kế muốn bạn nhìn vào hình ảnh đó với cơ sở cực kỳ sang trọng.

Tương phản hình dạng

Tương phản về hình dạng có nghĩa là làm cho một số thứ đáng chú ý bởi sự khác biệt trong hình dạng so với những thứ khác trên trang. Ở mức cơ bản nhất, điều này có thể được sử dụng trong những việc như thêm góc tròn cho các nút, nhưng được thực hiện ở mức độ cực đoan hơn, nó có thể thu hút nhiều sự chú ý hơn.






Anebstar sử dụng hình dạng tương phản để giới thiệu ba hình ảnh quan trọng trong tiêu đề. Bởi vì hầu hết mọi thứ trên web là hình chữ nhật, một trong những cách dễ nhất để đạt được độ tương phản hình dạng là sử dụng một vòng tròn. Tất nhiên ví dụ này cũng có một chút tương phản về kích thước lẫn nhau nhưng bạn có thể thấy rõ các phần tử tròn nổi bật như thế nào so với mọi thứ khác trên trang.

Tương phản vị trí

Tạo tương phản trong vị trí là cách rất gọn để tạo ra một hệ thống phân cấp các yếu tố hoàn toàn bằng cách sử dụng các liên kết khác nhau. Trong thời gian gần đây kỹ thuật này đã được phổ biến bởi Elliot Jay Stocks, họ đã sử dụng nó trên trang web gần đây nhất.






Elliot Jay Stocks sử dụng lưới chi tiết để xác định sự liên kết của tất cả các phần tử trên trang. Sự chú ý được gọi đến các khu vực cụ thể bởi chúng được thụt lề bên trái hoặc bên phải. Trong ảnh chụp màn hình đặc biệt này, đoạn văn giới thiệu thực sự nổi bật bởi vì nó nằm ở vị trí xa nhất ở bên trái, nơi mà đôi mắt nhìn đầu tiên để đọc một cái gì đó. Cách sắp xếp này đã "lấy cảm hứng" cho nhiều nhà thiết kế khác trong 12 qua để tạo ra các thiết kế có độ tương phản vị trí trong cùng một kiểu dáng.







Trang SimpleBits dường như không có bất kỳ sự tương phản vị trí nào, tuy nhiên khi bạn bắt đầu di chuyển, tất cả sẽ trở nên rõ ràng. Trong khi một số người sử dụng hình nền cố định để tạo hiệu ứng kiểu gọn, Dan đã tạo logo và điều hướng hoàn toàn được cố định ở vị trí sao cho bất kể bạn di chuyển đến đâu, nó vẫn ở cùng một vị trí trên màn hình. Đây là một ví dụ tuyệt vời về độ tương phản vị trí không chuẩn

KẾT LUẬN

Có nhiều điểm tương phản hơn là "ánh sáng và bóng tối" - đó là một trong những nguyên tắc quan trọng nhất trong thiết kế và bạn hầu như có thể khai thác hết hiệu quả từ chúng, nếu bạn sử dụng đúng cách.

Thiết kế của bạn không chỉ sử dụng các góc tròn và đổ bóng cho mọi thứ, mà đó là tìm ra các cách thức tốt hơn và hiệu quả hơn để truyền đạt thông điệp đằng sau thiết kế.

Khám phá chi tiết sự tương phản và sử dụng nó với đầy đủ tiềm năng sẽ là một trong những cách tốt nhất để làm điều này.

tuyệt vời

đó là web có đầu tư thôi, chứ làm web giá rẻ như mình cần đơn giản gọn lẹ, hài hòa nữa là dc

Bài viết về Tương Phản khá thú vị, có nhiều ý niệm mới đáng để thử..