5 yếu tố làm nên sự tương phản thông minh trong thiết kế web

Bạn có thể tạo sự chú ý cho một vật thể bằng cách sắp xếp một cách tinh tế các yếu tố xung quanh nó. Chúng ta có thể đơn giản hóa các hình thức tương phản trên các website phổ biến thành 5 loại:

Màu sáng và màu tối

Hình thức dễ nhận biết nhất của tương phản là màu đen và trắng, nhưng tương phản giữa sáng và tối cũng là cách tương phản phổ biến. Là người sáng lập của Usaura Dmitry, Fadeyev cho chúng ta thấy rằng các thiết kế website đẹp có thể sử dụng ánh sáng và bóng tối để hiển thị độ sâu (như với nút bấm có ấn và không ấn)

Xung đột màu sắc: mỗi màu sắc đều có màu tương phản và đặt chúng cạnh với nhau sẽ gây sự chú ý cho chúng.

Kích thước 

Các chi tiết với kích thước lớn sẽ nổi bật hơn, xong chúng lại chiếm nhiều diện tích của trang. Để làm nổi bật những yếu tố này thì phải giảm diện tích của những yếu tố khác. Tuy nhiên có một biện pháp khác đã được áp dụng, đó là bố trí bố cục để người xem chú ý đến cả những yếu tố nhỏ lẫn lớn. 

Đó là về sự tương phản của màu sắc, sự tương phản còn được thấy ở những mục sau:

Các yếu tố tương tác

Icon, nút bấm và các bức ảnh chụp bản thân nó đã chúa những màu sắc ý nghĩa là kích thước riêng để kết hợp  vào một hệ thống phân cấp trực quan phong phú.

Background và Foreground

Sự tương phản xuất hiện ở các thành phần đứng cạnh nhau trên một mặt phẳng, tương đồng nhau. Ngoài ra, các thành phần trên cùng một mặt phằng này có thể tương phản với các thành phần trên mặt phẳng khác. Trường hợp này xảy ra với phần Background và Foreground của bạn. Chăm chút cho phần nền thật tốt sẽ là cách làm nổi bật phần trước của website. 

Typography

Kích cỡ chữ và màu sắc, cũng như bản thân các phông chữ, có thể tương phản với nhau, hoặc thậm chí với các background/ foreground như một tổng thể.

Nếu chỉ dùng lý thuyết để miêu tả thì sẽ là không đủ để bạn hình dung. Hãy cùng chúng tôi khám phá những ví dụ đẹp mắt dưới đây để xem cách họ áp dụng lý thuyết về sự tương phản như thế nào: 

• Le Printemps du Polar’s La Femme Fatale

Bạn không cần phải biết tiếng Pháp để hiểu được hình ảnh của infographic tương tác này, nó đã kể chi tiết lịch sử của nhân vật trong phom. 

Trang web sử dụng lối tương phản đa dạng

Để bắt đầu, phần nền màu hoa cà đã khiến người xem tập trung được vào hình người phụ nữ màu xanh, tiếp đến là màu xanh lá cây nhạt của typography, tạo thành bộ 3 màu tương phản. Độ sáng tối cũng làm nổi rõ đâu là background/foreground. Đồng thời, sự thay đổi trong kích thước làm cho nhân vật được đứng ở trung tâm sân khấu, còn các thành phần xung quanh không quan trọng. 

• Land Rover’s Well Storied

Thiết kế website công ty Land Rover microsite kể câu chuyện về hành trình của công ty đó, đồng thời tận dụng được sự tương phản của sáng và tối.  

Các màu sắc mang lại cảm giác tương tự nhau là gợi ra sự gồ ghề và không gian ngoài trời, nhưng điều khác biệt là sắc thái của từng màu đó. Menu ở phía bên trái là phần sáng nhất, rõ ràng nhất, trong khi các phần còn lại có màu tối, mặc nhiên sự tập trung dồn về nơi có màu sáng hơn. 

Khi click vào một câu chuyện nào đó thì menu popup hiện ra. Hãy chú ý tới cách xuất hiện của từng câu chuyện, chúng tối hơn so với phần nền, do đó một lần nữa sự tập trung lại dồn về câu chuyện thay vì nền. 

• HBM FiberSensing

Sức hấp dẫn chính của website nằm ở hình ảnh động bên trong, chúng tôi vẫn muốn chỉ ra sự tương phản đáng lưu ý của nó. 

Dựa vào kích thước, chúng ta có thể biết nội dung “Bringing light to measurement” là trọng tâm của trang này. Nhưng thêm vào đó còn có dòng chữ “FiberSensing is an HBM Brand” nhỏ hơn ở ngay bên trên, sự tương phản về kích thước to và nhỏ của hai dòng chữ này đã bổ sung cho nhau, đồng thời chính chính đã tự làm nổi bật giá trị của mình. Đây là cách làm rất phù hợp với các headline website. 

• Joris Rigerl

Sự tương phản không phải lúc nào cũng dùng cho những thành phần nổi bật và sặc sỡ, đôi khi nó còn dùng để quảng bá sự tối giản. 

Không có nhiều thứ để ngắm nhìn trên website của Rigerl, sự tương phản giữa màu trắng và đen có phần ảm đạm đã hướng sự chú ý ngay tức thì của người xem vào 6 lựa chọn ở bên trái.

Phần nền trong suốt cũng làm nổi bật phần chữ ở trên đó. Bạn sẽ để ý cách dùng tiêu đề và tên dự án có sự tương phản về kích thước to nhỏ khác nhau. Nhưng thế chưa phải là hết, đã có một sự đảo lộn kích thước thông thường giữa tiêu đề chính và tiêu đề phụ ở đây, đó cũng là một cách tạo sự chú ý hiệu quả đến tên dự án. 

• Vaughn’s V76

Trang web V76 được thiết kế bởi Vaughn cho thấy tầm quan trọng của kích thước và sức mạnh của việc đa dạng hóa nó.

4 yếu tố có thể click vào của trang này có sự tương phản về kích thước, được sắp xếp theo kiểu xoắn ốc (to rồi nhỏ dần) có mục đích. Phần bên trái nổi bật hơn do có sự chênh lệch kích thước với phần bên phải. Sự tương phản còn phụ thuộc vào từng loại trang web khác nhau, đối với thiết kế website khách sạn hay nhà hàng độ tương phản rất quan trọng để tạo nên cá tính cho trang web, chúc bạn thành công !