Cách dùng Gam màu Pastel ngọt ngào trong thiết kế web

Thứ sáu - 18/12/2015 05:27

Việc sử dụng gam màu pastel trong thiết kế web không chỉ đơn thuần là một xu hướng của hiện tại, đó còn là kỹ thuật thiết kế đã được sử dụng nhiều năm nay nhằm tạo ra hiệu ứng hình ảnh cuốn hút cho website.

Cách dùng Gam màu Pastel ngọt ngào trong thiết kế web

Việc sử dụng gam màu pastel trong trang web không chỉ đơn thuần là một xu hướng của hiện tại, đó còn là kỹ thuật thiết kế đã được sử dụng nhiều năm nay nhằm tạo ra hiệu ứng hình ảnh cuốn hút cho website.

Khi nhắc đến những màu pastel, bạn sẽ nghĩ ngay đến màu hồng nhạt, xanh dương, vàng nhạt…nhưng khi đưa lên các thiết kế , bảng màu pastel còn phong phú hơn như vậy rất nhiều. Sự đậm nhạt, pha trộn, kết hợp giữa các màu sắc tạo nên lựa chọn đa dạng cho các những người làm website.

Dưới đây là 10 cách sử dụng những màu sắc ngọt ngào này trong cách sử dụng gam màu nhẹ nhàng và tinh tế:

Pastel Photography

Pastel Colors Web Design

Những bức ảnh chụp hoàn toàn có thể xử lý qua phần mềm chỉnh sửa ảnh để tạo tông màu pastel trước khi đưa vào một thiet ke trang web. Hoặc ngay các mẫu chụp trong ảnh đã có sẵn màu sắc pastel trước khi lên ảnh. Sử dụng gam màu này trong các bức ảnh cũng giúp tạo ra sự tương phản với các thành phần khác trên website, chẳng hạn như logo hat các nút bấm. 

Pastel Background

Pastel Backgrounds

Tông màu pastel được sử dụng ở background sẽ là cách làm tuyệt vời để biến thiết kế của bạn trở nên bắt mắt hơn trong mắt người dùng web. Tông màu này tạo sự dịu dàng, nhẹ nhàng cho người nhìn, đó là lý do nó được yêu thích. Thông thường chỉ với một màu pastel làm nền của web cũng đủ làm nổi bật các thành phần khác như Typography hay logo…Việc sử dụng chỉ một màu nền cũng giúp website trở nên sáng sủa, gọn gàng hơn. 

Pastel đậm đà

Bold Pastels

Nghĩ đến pastel là nghĩ đến một điều gì đó rất nhẹ nhàng, nhưng việc sử dụng những màu pastel đậm đà thì sao? Nó sẽ mang lại dấu ấn đậm nét hơn cho website. Vẫn là những màu pastel quen thuộc nhưng được nhấn mạnh thêm một chút giúp người dùng web có sự tập trung hơn vào những hình ảnh trên web. 

Pastel cho tâm trạng

Pastels for Mood

Bạn muốn mang lại cảm giác gì cho người dùng web của mình? Pastel có thể giúp tạo ra tâm trạng của người xem một cách đáng ngạc nhiên. Chẳng hạn như nó sẽ khiến người ta cảm thấy dễ chịu hơn, bình tĩnh hơn hay tương tự như vậy. Các chuyên gia thiết kế website chuyên nghiệp đã tận dụng điều này bằng cách bổ sung và kết hợp những màu sắc giúp điều khiển cảm xúc của con người.

Sẽ có màu pastel kích thích cảm giác ngon miệng được dùng trong website về đồ ăn, màu tạo cảm giác ấm cúng thì dùng cho website quảng bá cà phê…

Pastel trong đồ họa

Pastels in Illustrations

Màu pastel cũng được sử dụng hiệu quả trong đồ họa, Những chi tiết đồ họa này được sử dụng ở những nơi mà bạn muốn người dùng web tập trung chú ý. Hiệu quả mang lại sẽ tốt hơn mong đợi. 

Sự tương phản với Pastel

Contrast with Pastels

Như đã nói ở trên, những màu pastel là một cách làm tốt để tạo ra sự tương phản với các yếu tố khác trên website. Chẳng hạn như với website ví dụ dưới đây, màu sắc đó giúp làm sáng bức ảnh và chữ. Có rất nhiều yếu tố mang màu pastel trên website này, nhưng thứ bạn nhìn đầu tiên vẫn là hình ảnh trẻ em và chữ “Smile”, chính nhờ các vùng màu pastel xung quanh đã làm nổi bật các chi tiết đó lên.

Pastel cho Navigation

Pastels for Navigation

Pastel cũng là một công cụ navigation tuyệt vời. Lấy ví dụ trong website  Wonderfully Wild, bức ảnh là thứ đầu tiên bạn chú ý và tương tác với nó. Các yếu tố navigation hòa hợp tốt với khu vực nội dung chính nhưng không cản trở phần hình ảnh chính nhờ sự lựa chọn màu sắc phù hợp. Một phong cách tuyệt vời cho một mẫu thiết kế website du lịch đẹp mà bạn có thể cải tiến.

Pastel trong Flat Design

Pastels in Flat Design

Phần lớn xu hướng sử dụng màu pastel ngày nay bắt nguồn từ thiết kế phẳng. Nhiều màu pastel sáng sủa mà chúng ta thấy là phiên bản của những màu sắc phổ biến trong các thiết kế phẳng. Sử dụng màu sắc loại này trong thiết kế phẳng giúp làm dịu mắt người dùng và làm nổi bật các yếu tố trên thiết kế. 

Pastel Typography

Pastel Typography

Các chuyên gia thiết kế không có giới hạn trong việc sử dụng pastel trong nhiếp ảnh và nền website. Nhưng bạn sẽ ngạc nhiên khi nó cũng được sử dụng cho Typography (với một giới hạn nhất định). Đó là khi bạn dùng màu pastel để tô điểm cho các mẫu typo đậm và to lớn để tạo sự tương phản mạnh mẽ. 

Pastels cho các yếu tố giao diện người dùng UI

Pastels for User Interface Elements

Đây là một cách làm xuất phát từ ý tưởng của thiết kế phẳng, các nút bấm và những yếu tố khác trên website đều có thể dùng màu pastel. Như trong ví dụ mà bạn đang xem, chiếc hộp mang màu sắc pastel thực chất là một nút bấm quá khổ. Màu sắc chính là cách giúp người dùng biết đâu là chiếc hộp và khiến việc click hay tap trở nên dễ dàng hơn.

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Solutions