Thiết kế UI - Màu sắc & Font chữ

Cùng ColorME tìm hiểu các tips hữu ích xoay quanh 'cặp đôi bài trùng' này, để giao diện website hài hòa và hợp thẩm mỹ hơn, bạn nhé!

1. Màu sắc

Trước khi bắt đầu, bạn xem lại các quy tắc cơ bản về Màu sắc tại đây nhé.

Chọn màu chủ đạo: Một tông màu nhất quán và chủ đạo sẽ đại diện cho cả hình ảnh thương hiệu, hãy lựa chọn thật thông minh!

Lựa chọn tint và shade: Dựa trên màu chủ đạo, bạn có thể điều chỉnh tone sáng hoặc tối hơn, giúp thiết kế không bị nhàm chán. Ở ví dụ dưới đây, với màu cam sáng chủ đạo, nút Call-to-action được nổi bật bằng sắc cam shade đậm hơn, tăng tính kêu gọi hành động.

Quy tắc 60-30-10: Trong một trang thiết kế, 60% nên dành cho màu chủ đạo, 30% cho màu thứ cấp và 10% còn lại là màu trang trí. Thông thường, màu trang trí là những gam màu mạnh, nổi bật. Tỉ lệ này giúp các thiết kế hài hòa, hợp thẩm mỹ và tạo sự dễ chịu cho mắt người nhìn.

Tương phản: Bạn có thể phối 2 màu đối chọi nhau, hoặc điều chỉnh mức độ đậm nhạt (tint, shade). Nhưng cẩn thận nhé! Nếu sử dụng Contrast quá cao trên toàn bộ website, sẽ rất khó đọc và gây chói mắt người nhìn đấy.

‘Cặp kè’ cùng hình ảnh: Việc phối nhiều hình ảnh với nhau đôi khi khá khó nhằn, vì bạn phải ‘xoay sở’ để màu sắc các ảnh khớp nhau, tạo ra sự hài hòa cho tổng thể. 

Một vài tips 'cứu cánh' cho bạn:
    + Mix cùng gam màu neutral: Những màu trung tính như màu be, xám hoặc trắng là cách hiệu quả để cân bằng các hình ảnh rực rỡ.
   + Tạo lớp phủ gradient: Việc làm mờ bằng 1 lớp phủ Gradient, giúp giảm độ bão hòa (Saturation) của hình ảnh, giúp tổng thể hài hòa và đồng đều hơn.

   + Chuyển ảnh sang thang màu xám: Những hình ảnh rực rỡ khi cùng kết hợp, dễ tạo sự rối mắt. Đưa tất cả sang thang màu xám giúp bạn nhấn vào trọng tâm nội dung hình ảnh, thay vì bị màu sắc của chúng lấn át.

2. Typography 

Một bộ Typography của Brand thường bao gồm typefaces, font size và phân cấp phông chữ. Để thiết kế của bạn chuyên nghiệp hơn, tham khảo một số lưu ý dưới đây nhé:

Font chữ phù hợp với Brand

Tưởng tượng nhé, nếu bạn sở hữu một cửa hàng vintage, hãy thử phông chữ Arvo đầy cổ điển. Hoặc nếu bạn là một công ty luật, muốn thể hiện sự chuyên nghiệp, bạn có thể sử dụng một loại phông Serif gọn gàng như Playfair Display.

Như vậy, điều quan trọng không phải lựa chọn Typefaces gì, mà loại phông nào phù hợp với cá tính thương hiệu của bạn nhất.

Phối hợp các loại font: Với nhiều nội dung, chắc hẳn bạn cần tới nhiều loại font chữ khác nhau. Nếu vậy, bạn nên 'nằm lòng' những tips sau, để các font chữ phối hợp hài hòa hơn:

+ Không sử dụng nhiều hơn 3 phông chữ trong một thiết kế

+ Đảm bảo các phông chữ hòa hợp nhau

+ Luôn phân cấp thông tin cho chúng 

Để minh họa, hãy nhìn ví dụ sau: Đầu tiên, một phông chữ bắt mắt như Rubic Black hoặc Nunito sẽ giúp tiêu đề nổi bật hơn. Ở phần Body text, bạn nên chọn loại font dễ đọc như Noto Sans. Còn với nút CTA, mình sẽ sử dụng Monserrat giúp tạo sự dễ chịu, cân bằng thiết kế.

Phông chữ và ảnh hưởng tới thị giác: Hãy lựa chọn thật thông minh nhé, phông chữ có tác động rất lớn tới người nhìn đó. Bạn thử xem 2 thiết kế sauĐủ thấy chúng mang tới 2 cảm giác trải ngược như nào rồi nhỉ? 

Với phông sans serif góc cạnh, thiết kế của Satoshi Nation mang tới cảm giác hiện đại, trong khi thương hiệu cà phê Wallenford lại sử dụng font serif thanh lịch, giúp nhấn mạnh phong cách sang trọng của thương hiệu. Đó là sức mạnh của typography.

Tạm kết

Hi vọng bài viết hữu ích cho bạn trong quá trình thiết kế màu sắc và phông chữ websites. Những quy tắc này dù đơn giản nhưng là ‘con át chủ bài’, quyết định sản phẩm có đẹp và hài hòa hay không, bởi vậy cùng nằm lòng chúng và áp dụng vào website của bạn ngay thôi nào

Nguồn:

https://99designs.com/blog/web-digital/web-design-colors/

https://99designs.com/blog/web-digital/choosing-fonts-for-web-design/