Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

Phương pháp phối màu đỉnh cao trong thiết kế Landing page

Chủ đề thuộc danh mục 'Kinh nghiệm / Kiến thức dành cho designer' được đăng bởi Ezimar, 7/10/18.

Lượt xem: 1,401

  1. Ezimar Mới đăng kí

    Màu sắc đóng vai trò khá quan trọng trong bất cứ Landing page nào, chúng làm cho bản thiết kế trở nên sinh động và nổi bật hơn bao giờ hết.
    Việc ứng dụng, kết hợp màu sắc thực sự tinh tế giúp cho Landing page trở nên chuyên nghiệp hơn khá nhiều so với đối thủ của bạn. Ngoài 7 yếu tố đã chia sẻ từ trước, trong bài viết này Ezimar tặng bạn 6 lời khuyên bổ ích về màu sắc khi thiết kế và xây dựng một Landing page chuyên nghiệp.

    [​IMG]
    1. Phương pháp dùng màu đơn sắc cho Landing page (Monochromatic Color)

    Đơn sắc thật ra rất khó để thực hiện mà cũng rất dễ và đơn giản để thực hiện cho một trang Landing page. Làm Landing page chỉ đơn giản 2 màu trắng và đen đôi khi khá đơn giản nhưng để đạt được mức độ tinh tế thì lại khác, nhưng nếu bạn làm được hiệu quả sẽ vô cùng bất ngờ bởi sự kết hợp màu sắc đơn giản giữa từng khu vực và hài hòa tổng thể để tạo ra sự cộng hưởng cần thiết.

    [​IMG]
    Trong thiết kế, đơn sắc còn được kết hợp tạo ra một trang web đơn giản tạo cảm giác dễ chịu cho người xem và không quá phức tạp trong cách thức thể hiện nội dung. Bạn có thể dễ dàng nhận ra phong cách này với ví dụ minh họa bên trên.

    2. Phương pháp dùng màu tương đồng (Analogous)

    [​IMG]

    Cách phối màu tương đồng

    Sự khác biệt lớn nhất của phố màu tương đồng với cách phối màu đơn sắc cho Landing page là sự đa dạng hơn về màu sắc sử dụng trên nhưng cũng có sự khác biệt nhất định. Sự khác biệt lớn nhất là tông màu chủ đạo cho Landing page so với các màu còn lại, cách thức này thường được sử dụng khá nhiều trong toàn bộ các thương hiệu do logo sử dụng nhiều màu sắc khác nhau nhưng có một tông màu chủ đạo sẽ xuyên suốt.​



    [​IMG]

    Màu tương đồng thường được bố cục trong các trang có logo mà số lượng màu sắc từ 3 trở lên, khi đó nhà thiết kế buộc lòng phải lựa chọn 1 tông màu chủ đạo, và các màu sắc còn lại đặt làm các điểm nhấn khác trên các khối nội dung

    3. Phương pháp xen kẽ màu sắc (Split-complementary)

    [​IMG]
    Cách phối màu bổ túc trực tiếp

    Đây là một phương pháp được nhiều designed lựa chọn cho trang web của mình, vì dễ tạo cảm giác ấn tượng đến khách truy cập và hưng phấn với mỗi nội dung. Đây là phương pháp phối màu được tạo ra dựa trên ba màu và thuộc ba vị trí khác nhau. Ở một số bản thiết kế, bạn có thể sử dụng màu thứ 4 nhưng màu này phải tạo đối xứng với 1 trong 2 màu còn lại, thông thường thì cách phối màu này sử dụng 2 màu đen, trắng và một số màu nổi bật khác.

    [​IMG]
    Đây là ví dụ về phối màu theo phương pháp xen kẽ.
    4. Phối màu bổ túc bộ ba (Triadic)
    Đây là phối màu an toàn nhất trong các phối màu. Phối màu này được hình thành với ba màu nằm ở ba góc khác nhau của vòng tròn màu và tạo nên một hình tam giác đều.

    [​IMG]
    Cách phối màu bổ túc bộ ba

    Vì ba màu nằm ở ba góc khác nhau trên vòng tròn màu nên chúng kết hợp và bổ sung với nhau tạo nên một sự cân bằng cho phối màu này. Cũng chính vì sự cân bằng này, tuy có đến ba màu được sử dụng nhưng bạn sẽ thỉnh thoảng thấy phối màu này khá đơn điệu, an toàn và thiếu sáng tạo.

    [​IMG]

    Giao diện của DocReady
    Phối màu này rất khó sử dụng khi các bạn muốn tạo điểm nhấn trên Landing page của mình. Tuy vậy, một số nhà thiết kế lại rất thích phối màu này vì chúng thường giúp tiếp nhận và nhận được nhiều phản hồi tốt từ người sử dụng vì sự hài hoà và cân bằng của các màu được sử dụng.

    5. Phối màu bổ túc xen kẽ (Split-complementary)

    Nếu bạn muốn Landing page của mình thu hút và gây ấn tượng mắt đến người dùng ngay từ lúc đầu thì phối màu bổ túc xen kẽ này sẽ là sự lựa chọn hoàn hảo cho bạn.

    [​IMG]

    Cách phối màu bổ túc xen kẽ

    Phối màu này được tạo bởi ba màu nằm ở ba góc khác nhau trên vòng tròn màu và tạo nên một hình tam giác cân. Đôi lúc, bạn có thể sử dụng thêm một màu thứ tư; màu này phải đối xứng với một trông hai màu tạo nên đáy của hình tam giác cân đó.

    Chính vì sự linh hoạt trong việc chọn màu mà phối màu này thường mở ra cho các nhà thiết kế rất nhiều cơ hội khám phá và tìm được các cặp màu lạ và độc đáo cho Landing page của mình.

    [​IMG]
    Giao diện webiste Shopify

    Ngày này, có rất nhiều nhà thiết kế chuộng phối màu này. Chủ yếu họ sử dụng màu đen và trắng làm những màu chủ đạo, tô điểm bằng các màu thứ 3 bắt mắt như đỏ và xanh với các chi tiết phụ. Phối màu này đơn giản và an toàn nhưng vô cùng hiệu quả. Tuy nhiên, để thử thách bản thân cũng như muốn Landing page của mình trở nên cầu kì hơn, bạn có thể sử dụng những màu bậc nhất (vàng, đỏ, lam) cho mùa chủ đạo.
    Shopify's 2014 Commerce Report (Tuy là 1 website) là ví dụ điển hình của việc sử dụng phối màu bổ túc xen kẽ này.

    6. Phối màu bổ túc bộ bốn (Rectangular Tetradic hay Compound Complementary)
    Đây là phối màu phức tạp nhất trong sáu phối màu cơ bản. Nhưng nếu bạn chịu bỏ công sức và thời gian để chọn lựa màu sắc kỹ càng, phối màu này sẽ như một phần thưởng khi nó sẽ mang đến cho Landing page của bạn sự hiện đại và mới mẻ, rất phù hợp với nhiều xu hướng thiết kế hiện nay.

    [​IMG]
    Cách phối màu bổ túc bộ bốn.

    Phối màu này được hình thành với hai cặp màu bổ túc trực tiếp. Những sự đối nghịch cũng như bổ sung giữa hai cặp màu này chính là điểm mành và khác biệt đặc trưng của phối màu này. Các cặp màu trong phối màu này thoạt nhìn thì rất khó để có thể phối hợp và sử dụng chúng đúng cách, vì thế bạn sẽ mất khá nhiều thời gian cho khâu chọn lọc và lên màu cho Landing page của mình. Mẹo để chon màu cho phối màu này cũng khá cơ bản khi bạn cần chú ý cân bằng thật tốt giữa hai gam màu nóng (đỏ, cam hay vàng) và lạnh (xanh, tím).

    [​IMG]
    Giao diện website Formlets

    Formlets đã sử dụng phối màu này một cách xuất sắc khi cách họ chọn màu và cân bằng chúng với nhau vô cùng bắt mắt và ấn tượng.

    Khi bạn muốn phối màu cho thiết kế đơn giản như thiết kế phẳng, hãy lưu ý đến những phối màu đơn sắc, tương đồng hay bổ túc trực tiếp. Trong khi những thiết kế phức tạp nhiều layer hơn cần những phối màu phức tạp và cầu kì hơn. Nên nhớ, sự lựa chọn vẫn thuộc về bạn – nhà thiết kế chính.

    Nguồn: Ngôi Sao Số

Ủng hộ diễn đàn