to tell you a better story.
I prefer you visit
my site on
the desktop.
20 Nguyên tắc Thiết kế đồ họa cơ bản khi áp dụng vào UI Design
Để thực sự làm trọn vẹn Product – UX/UI Design đòi hỏi bạn tiếp thu và áp dụng rất đa dạng kiến thức chuyên nghành (Domain Knowledge) từ Business, Human Psychology, Usability Pattern, Technology tới cả những kỹ năng mềm để khai thác và phân tích thông tin.
Hẳn sẽ rất choáng ngợp đối với những bạn mới bắt đầu ở lĩnh vực này vì quá nhiều thứ phải học, rồi đến khi học xong lại không biết phải áp dụng vào công việc hàng ngày như thế nào.
Lời khuyên của mình là hãy bắt đầu từ những cái cơ bản nhất, làm đi làm lại cho đến khi nào không còn là kiến thức phải nhớ lại mỗi khi cần, mà trở thành một loại thông tin giống như “trí nhớ cơ bắp”. Biến nó trở thành một điều hiển nhiện mỗi khi bắt tay thực hiện thiết kế nào đó.
Bây giờ bắt đầu với UI Design, hãy ngồi ôn lại 20 nguyên tắc thiết kế cơ bản và cách mà mình áp dụng chúng vào những thiết kế của mình.
Đọc thêm nếu bạn quan tâm về các Domain Knowledge khác:
1. Line & Stroke
Nếu vật chất được tạo bởi đơn vị nhỏ nhất là phân tử, thì những hình ảnh chúng ta đang nhìn thấy được tạo bởi các điểm. Có 2 điểm nối lại ta sẽ được 1 đường, các loại đường thẳng, cong, góc cạnh kết hợp lại với nhau sẽ tạo ra được những yếu tố mà thiết kế sử dụng.
Các kiểu đường nét khác nhau sẽ thể hiện ra những loại cảm xúc khác nhau, đọc thêm ở đây nhưng nhìn chung, đường nét sẽ có 3 chức năng chính:
- Giúp điều hướng mắt người xem
- Tạo ra sự nhấn nhá, tiêu điểm
- Mang lại cảm giác chuyển động cho thiết kế tĩnh
Trong thiết kế trang chủ cho InteractiveLabs, mình đã sử dụng nét chéo ngay giữa màn hình để giúp cho phần họa tiết logo thêm nổi bật, đồng thời tăng thêm tính dynamic của cả phần header trang web.
2. Scale & Size
Thiết kế tốt là thiết kế có tỷ lệ phù hợp với cách con người nhìn sự vật.
Có thể định nghĩa đơn giản tỷ lệ là việc xác định kích thước các yếu tố trong thiết kế 1 cách có chủ đích.
Việc xác định này sẽ giúp:
- Thu hút sự chú ý tới các yếu tố đã xác định
- Tạo ra sự nhấn mạnh, kịch tính cho thiết kế
Với thiết kế trang thông tin của các hành tinh trong hệ mặt trời, người xem sẽ nhanh chóng bị thu hút bởi cụm chữ Jupiter và quả cầu ngay giữa màn hình. Kích thước của quả cầu này nổi trội hơn hẳn các yếu tố còn lại khiến cho thiết kế trở nên ấn tượng hơn.
3. Color Scheme
Không cần phải nhắc lại tầm quan trọng của màu sắc, có thể ví nó như nước có thể đẩy thuyền cũng có thể làm lật thuyền.
Vì thế hãy cẩn thận chọn lựa và tạo ra một bảng màu tốt nhất có thể, đừng quên sử dụng các nguyên lý màu sắc và những màu ý nghĩa trong máy tính như:
- Xanh lá, thành công
- Xanh dương, đang xử lý
- Vàng, cảnh báo
- Đỏ, đã có lỗi
Trong ví dụ minh họa, mình đã chọn những màu đủ khác để phân biệt các loại thông tin, mà vẫn hài hòa khi xếp chung với nhau. Các thiết kế còn lại giữ sắc độ trung tính giúp người xem có thể scan nhanh thông tin của Pie chart.
4. Repetition
Lợi ích lớn nhất của sự lặp lại đó là thể hiện được yếu tố thương hiệu một cách nhấn quán và ghi nhớ vào tâm trí người xem thiết kế.
Ngoài ra, lặp lại được sử dụng khéo léo cũng sẽ giúp kết nối những thành phần riêng lẻ lại mà không cần nhiều các linking-elements (yếu tố liên kết) có thể khiến cho thiết kế trở nên rườm rà.
Ở thiết kế này, mình đã cố tình lặp lại rất nhiều các hình tròn nhỏ màu đỏ, vàng, xanh để tạo ra sự nhất quán với phong cách minh họa ở phần đầu. Hãy bấm vào link bên dưới để xem thêm ý đồ chuyển động giúp điều hướng mắt người xem khi họ scroll xuống trang web.
5. Negative Space
Không gian âm là khu vực, khoảng cách giữa các phần tử thiết kế và nhờ những phần tử này mà đôi khi không gian này cũng có hình dạng và mục đích của riêng nó.
Không gian âm thường được sử dụng nhiều bởi các Logo Designer, những người rất giỏi trong việc sử dụng phương pháp sáng tạo ẩn dụ và hoán dụ (6 phương pháp tạo ra ý tưởng).
Trong UI Design, ta dùng không gian ẩn để tạo ra các khoảng thở cho mắt và tạo được ấn tượng cho chủ thể.
Lại là con chym huyền thoại (như các bạn hay nói) của Enginethmes, 1 team thiết kế và lập trình các web ứng dụng nền tảng WordPress. Đây là một trong những thiết kế thời đầu tâm đắc nhất của mình. Mình dùng shape logo con chim ruồi để thể hiện sự kết hợp giữa thiết kế và lập trình, và để lại rất nhiều khoảng trống xung quanh nó để gây ấn tượng.
6. Symmetry
Mắt người cảm thấy dễ chịu và bị thu hút bởi các cấu trúc đối xứng. Sự đối xứng càng hoàn hảo, chúng ta lại càng thấy đẹp.
Chính vì thế, bố cục đối xứng thường là lựa chọn an toàn, tuy nhiên đôi khi mặt trái của nó lại khiến cho thiết kế của bạn trở nên nhàm chán.
Màn hình home của ứng dụng Savy (ứng dụng để mở sổ tiết kiệm theo mục tiêu của ngân hàng TPBank) được thiết kế thể hiện các gói tiết kiệm đối xứng, giúp người xem dễ chịu khi theo dõi thông tin và bố cục cũng thuận mắt hơn.
7. Transparency
Độ trong suốt giúp các yếu tố có thể tương tác với nhau để tạo ra các hiệu ứng thị giác thú vị. Nó cũng giúp tạo ra sự chuyển động trong thiết kế khi xếp lớp các hình ảnh khác nhau theo cùng một hướng.
Để chữ có thể đọc rõ ràng nhưng không đơn điệu, trong ví dụ minh họa mình đã sử dụng một mảng màu lớn có tone màu phù hợp với hình nền và độ trong suốt vừa phải. Đồng thời duplicate hình nền thêm lần nữa và cố tình xếp nó lệch đi so với hình lớn, kết quả thu được cũng khá ấn tượng.
8. Texture Pattern
Kể từ khi phong cách thiết kế tả thực (Skeuomorphism) biến mất thì việc sử dụng texture hay pattern cũng ít được quan tâm vì những bất cập nhất định của nó như: rối mắt, tăng dung lượng ứng dụng,… Nhưng đôi khi nếu biết khéo léo sử dụng nó có chủ đích, có thể giúp cho thiết kế của bạn trở nên sinh động hơn khi có chiều sâu và gợi xúc giác bề mặt.
Với trang login cho ứng dụng liên quan tới du lịch, mình đã sử dụng pattern giống như những tấm bản đồ địa lý. Vừa tăng sự thú vị, vừa thể hiện được tinh thần sản phẩm.
9. Balance
Đối xứng là sự cân bằng cùng tính chất như kích thước, độ dài, hình dáng,… Tuy nhiên để tạo ra sự cân bằng thị giác thì không nhất thiết phải cùng khía cạnh với nhau.
Một thứ dài nhưng nhỏ sẽ có thể cân bằng với thứ khác ngắn nhưng to hơn. Đây được gọi là “trọng lượng thị giác”, giúp cho tổng thể thiết kế hài hòa mà không nhàm chán.
Ở Khu vực cuốn sách trên trang landing page này mình đã làm độ dài line, số lượng gấp khúc và vị trí gần xa khác nhau để đạt sự cân bằng thị giác.
10. Contrast
Ở trên vừa nói cân bằng xuống đây nói tương phản, thiết kế thật phức tạp.
Đúng vậy, thiết kế là công việc phức tạp nhưng lại cực kỳ thú vị. Cái thú vị của nó là không có chuẩn chung cho tất cả, đòi hỏi người thiết kế phải rất tinh tế điều chỉnh các nguyên lý cho phù hợp ngữ cảnh sử dụng.
Nhìn chung, tương phản là sự khác nhau về mật độ, màu sắc, hình dáng của những yếu tố thiết kế đứng cạnh nhau. Có ảnh hưởng lên tính dễ đọc, tạo sự nhấn mạnh giúp thiết kế nổi bật hơn.
Khi thiết kế nền tối, cần phải rất lưu ý tới độ tương phản của chữ so với nền để có thể dễ đọc, giữa các loại thông tin cũng cần tạo sự khác biệt để người xem dễ tìm thấy thông tin cần thiết trên cùng một khu vực.
Thật tế có những ví dụ, khi làm mình không hoàn toàn nhớ và suy nghĩ rõ như bây giờ viết lại. Nhưng như đầu bài mình có chia sẻ, thực hành những nguyên tắc này đủ lâu nó sẽ trở thành bản năng thiết kế. Giúp chúng ta tiết kiệm thời gian và tạo ra những sản phẩm tốt hơn. Chờ đọc tiếp 10 nguyên tắc cuối cùng nhé!
đọc thấy hay? share ngay cho bạn bè cùng đọc
