UI/UX Design, Những điều cần biết .Part 2

Xin chào các bạn !

Như part 1 mình có giới thiệu một vài thủ thuật nhỏ trong thiết kế, hôm nay mình sẽ nói về màu sắc thiết kế

Xem Part 1 tại đây: http://forum.vietdesigner.net/threads/ui-ux-design-nhung-dieu-can-biet-part-1.89186/

Trước khi xác định thiết kế sản phẩm bạn cần xem sản phẩm đó hướng tới đối tượng nào, chủ đề sản phẩm là gì,

1. Thiết kế Cute, dễ thương

Ví dụ: sản phẩm với chủ đề dễ thương, bayby, dành cho trẻ nhỏ thì màu sắc cần tươi sáng, sặc sỡ, Mình khuyên các bạn nên dùng màu ở trong khoảng này



Khi dùng hình hoặc text nếu màu quá khó nhìn mà bạn vẫn muốn giữ nguyên màu đó thì tốt nhất hãy thêm border cho nó, tự nhiên nó sẽ nổi lên ngay



Ví dụ như hình ảnh trên:, chủ đạo với những tông màu sáng, và đối tượng nào cần làm nổi sẽ có border bao quanh,

Lưu ý, background đừng bao giờ để border, chỉ border nhưng đối tượng bạn muốn nó nổi hẳn lên

2. Thiết kế nghiêm túc

Với những ứng dụng thiên hướng về nghiêm túc, cứng rắn, bạn nên dùng càng ít màu càng tốt, giao diện 7 sắc cầu vồng chắc chắn sẽ là thảm họa, và việc lựa chọn ít màu nhưng vẫn chuyên nghiệp và tinh tế không phải là quá khó

Đơn giản như như sử dụng 2 màu cơ bản đen và trắng, Nhưng kinh nghiệm của bản thân tôi muốn chia sẻ vơi các bạn, đừng bao giờ sử dụng màu đen kịt, đừng bao giờ kéo chuột hết vế tận cùng của bảng màu để lấy đen, nó không phải là màu đẹp mà các bạn cần, hãy sử dụng màu sáng hơn một chút với khoảng màu đen trên bảng màu một chút, tôi chắn chắn nó sẽ đẹp hơn



Màu trắng cũng vậy, đôi khi dùng màu xám đi một chút sẽ đẹp hơn là màu trắng tinh, một màu trắng xám nhẹ trên nền đen sẽ có có cảm giác dễ chịu hơn là màu trắng tuyệt đối, bạn cứ thẻ sẽ biết ngay

Tất nhiên là thiết kế ko thể cứ mãi một màu đen trắng được, tôi muốn nhiều lựa chọn hơn nữa, vậy hãy thử nhiệm những màu ở khu vực sau, tôi hay gọi đó là khu vực màu trầm



Dùng màu trầm này kết hợp với bộ màu sáng hơn chút nữa sẽ rât tuyệt, đó chính là khu vực màu sau



Lấy một ví dụ trên mạng mà tôi lượm được, các bạn nhìn vào thiết kế này sẽ nhân ra nhưng gì tôi nói là thật



Background dùng màu hơi xanh xám đậm, và màu đỏ phớt, Tổng thể không hề có màu sáng chói,

text và icon ko dùng màu trắng mà dùng một màu trắng hơi xám nhẹ, trông rất dịu mắt

Tất nhiên với 2 tông màu chủ đạo sẽ xuyên suốt tất cả các screen còn lại

3. Tôi không tìm được màu đẹp

Ban đầu khi tự chọn màu chắc chắn các bạn sẽ thấy thật rối, khó khăn, nhưng làm nhiều rồi sẽ có kinh nghiệm

Nếu khó quá các bạn có thể tham khảo chọn một bộ màu tại trang kuler của Adobe

https://color.adobe.com/explore/newest/



Với 5 màu chủ đạo trong một bộ bạn sẽ không qua lo lắng về việc mình ko thể chọn được màu đẹp

4. Hình ảnh , icon

Sử dụng hình ảnh và icon đúng chủ đề:

ví dụ: thiết kế về nấu ăn: icon cũng phải đúng chủ đề, như icon dao dĩa, mũ đầu bếp, bánh, cốc ,..

Thời trang: icon mũ, áo, giày dép,…

Tích cực sử dụng icon thay cho lời muốn nói: thay vì viết text “giày thể thao”, bạn có thể làm 1 cái icon đôi giày, trông nó sẽ lung linh hơn là dòng text thô cứng, có thể kết hợp vừa icon vừa text nếu không gian thiết kế rộng rãi

Phong cách icon cũng cần đúng tông với toàn bộ thiết kế: với thiết kế dễ thương , baby, icon có thể màu sắc , hoặc giống dạng icon vẽ tay

Với thiết kế đứng đắn: icon nên đơn giản , cùng màu: như icon dạng flat chẳng hạn

5. Lỗi hay gặp

Có nhưng điều mà các bạn nên để ý khi thiết kế

– Cần phải có sự thống nhất và xuyên suốt bộ màu trong cả một dự án, đừng để trang home tông màu xanh , mà vào trang con lại là tông màu vàng

– Thống nhất về font chữ: hạn chế dùng quá nhiều font chữ, cùng lắm là đến 2 font khác nhau, kich thước font đồng đều, có thể cho phép đến tối đa 3 kich thước font khác nhau, đừng nhiều hơn, dùng font chữ phù hợp, có thể dùng font comic-san cho app trẻ con, cute, chứ đùng dùng nó cho app đòi hỏi đứng đắn, nghiêm túc

– Background màu xanh đậm thì đừng để text màu đen hay màu trong khu vực tương tự, hãy để một màu đối lập với nó hoặc ít nhất là màu trắng

– Thống nhất về hình ảnh đại diện và icon

Cảm ơn các bạn đã theo dõi

” Bài tiếp theo mình sẽ nói kỹ hơn về UX “