Có 2 cách để có được kinh nghiệm về một việc gì đó:

• Làm thật nhiều, quen tay thành kinh nghiệm.
• Học kiến thức, áp dụng thành kinh nghiệm.

Dù gọi là cách, nhưng phát triển đến một lúc nào đó chúng ta vẫn phải quay lại bổ sung các kiến thức còn thiếu thì mới khiến cho công việc thuận lợi và đạt được hiệu quả ổn định.

20 nguyên tắc thiết kế đồ họa cơ bản trong 2 bài viết này là những kiến thức minh tìm thấy trên mạng, ghi nhớ và áp dụng chúng vào công việc trong hơn 10 năm qua. Thật sự chúng là những quy tắc nền tảng có giá trị lâu dài có thể áp dụng vào cả lĩnh vực Graphic lẫn UI Design.

Bài viết này hoàn thành 10 nguyên tắc còn lại, không chỉ mô tả mà còn được thêm những suy nghĩ, kinh nghiệm của bản thân mình. Hy vọng có thể là tài liệu tham khảo thêm cho các bạn.

Đọc lại phần 1: https://bit.ly/3y751vp

Xem thiết kế: https://bit.ly/3knKf6x

11. Hierarchy – Phân cấp

Sự phân cấp tồn tại ở tất cả mọi nơi, trong tự nhiên, trong văn hóa, trong cả trong gia đình.

Mục đích của sự phấn cấp là chỉ ra “thứ tự quan trọng” của những đối tượng được phân cấp. Trong thiết kế, phân cấp giúp chỉ ra những thông tin quan trọng và giúp cho người xem dễ dàng tìm ra nội dung mà họ đang tìm kiếm. Với 2 chức năng chính:

• Giúp người dùng điều hướng thiết kế
• Báo hiệu sự quan trọng của các yếu tố thông tin

Người thiết kế có thể tạo ra sự phân cấp bằng các đặc điểm sau:

• Size: Thứ gì lớn hơn thì dễ nhận thấy hơn
• Color: Màu sáng dễ thu hút mắt nhìn hơn màu tối
• Contrast: Tương phản mạnh hơn thì bắt mắt hơn
• Alignment: Yếu tố không căn chỉnh sẽ nổi bật hơn những yếu tố được căn chỉnh
• Repetition: Lặp lại nhiều sẽ gây được sự chú ý
• Proximity: Các yếu tố gần nhau thì liên quan với nhau
• Whitespace: Nhiều khoảng trắng xung quanh sẽ yếu đối tượng dễ chú ý hơn
• Texture và Style: Có phong cách sẽ nổi bật hơn

Xử lý tốt sự phân cấp này, bạn sẽ không cần phải hướng dẫn người dùng nên bắt đầu như thế nào ở thiết kế của bạn nữa.

Xem thiết kế: https://bit.ly/3lEde5m

12. Framing – Đóng khung

Là một kỹ thuật thuộc về thị giác bằng cách trình bày các yếu tố hình ảnh trong một “khung hình”.

“Khung hình” này có thể là khung hình vật lý như khung gỗ của những bức tranh nghệ thuật. Có thể là những hình khối cơ bản như đường viền bao quanh, hay thậm chí là những yếu tố hình ảnh có liên quan tới chủ thể.

Kỹ thuật này tạo ra sự cần bằng và thống nhất về hình ảnh trong một bố cục. Nó có thể được sử dụng để trang trí, làm nổi bật hoặc cắt các yếu tố hình ảnh trong thiết kế, tùy vào mục tiêu của người thiết kế.

Một nhiệm vụ khác của kỹ thuật này là tạo ra hệ thống phân cấp, hướng dẫn hướng nhìn thông qua thu hút sự chú ý vào yếu tố chính, khi nó được làm nổi bật và khác biệt so với môi trường xung quanh. Tránh sự nhàm chán, nhạt nhẽo cho toàn bộ thiết kế.

Các loại đóng khung trong thiết kế UI:

• Margins – Canh lề: là đường viền có độ dày bằng nhau bao trọn các yếu tố hình ảnh
• Bleeds – Tràn lề: khi hình ảnh, yếu tố hình ảnh lấp đầy không gian – kích thước thiết kế
• Partial bleeds – Tràn lề một phần: giống như tràn lề, nhưng hình ảnh có điểm dừng ở một hướng.

Xem thiết kế: https://bit.ly/2ZeP3mA

13. Grid – Lưới

Đây là một trong những nguyên tắc tối quan trọng của mọi thiết kế. Lưới tuy vô hình với người xem, nhưng lại hữu hình với các nhà thiết kế. Nó giúp việc cân nhắc, xếp đặt các yếu tố đồ họa dễ dàng hơn, ngăn nắp và có ý đồ hơn.

Có lẽ trong 20 nguyên tắc, lưới là nguyên tắc được ra đời sớm nhất từ những năm 150 trước công nguyên. Những tài liệu đền thờ của người Do thái đã được ghi chép thành từng cột, hàng chữ trong một tài liệu dài, có thể cuộn lại giúp cho việc đọc và cất giữ thuận tiện hơn.

Các ví dụ về lưới:

• Baseline grid – Lưới đường cơ sở: là dạng lưới những đường ngang cách đều nhau xác định vị trí của văn bản. Giống như tập viết ngày xưa của chúng ta.
• Column grid – Lưới cột: đây là dạng lưới phổ biến, chia trang giấy – khung thiết kế theo nhiều cột để căn chỉnh các yếu tố hình ảnh trên đó.
• Modular grid – Lưới mô-đun: một dạng nâng cấp của lưới cột khi cho thêm các hàng, sự giao nhau giữa hàng và cột tạo ra các mô-đun giúp mở rộng sự lựa chọn và bố cục phong phú hơn.
• Manuscript grid – Lưới bản thảo: chủ yếu sử dụng trong việc dàn trang báo, sách để xác định vị trí của văn bản trong một trang
• Pixel grid – Lưới pixel: phần mềm thiết kế đồ họa nào cũng có chức năng hiển thị lưới pixel, nếu thiết kế được xem trên các thiết bị điện tử người thiết kế sẽ phải lưu ý đặt những yêu tố đồ họa trên những lưới này.
• Hierarchical grid – Lưới phân cấp: một dạng lưới nâng cao, có thể là do 2 lưới xếp chồng lên nhau và tính tự do rất cao phục vụ cho mục đích phân cấp.

Xem thiết kế: https://bit.ly/3hMVSlR

14. Randomness – Sự ngẫu nhiên

Không phải cứ gọn gàng, trật tự và trong khuôn khổ thì sẽ gọi xem là “có thiết kế”. Nhưng nhiều lần mình đã nói, thiết kế là những việc làm có chủ đích – bao gồm cả việc tạo ra các yếu tố hình ảnh “trông có vẻ ngẫu nhiên”.

Khi đã hoàn thiện những phần quan trọng của thiết kế, hãy thêm vào đó một chút sự ngẫu nhiên với mục đích tạo ra sự tươi mới và thú vị. Nhưng hãy cẩn thận tiết chế điều này nếu bạn không muốn thiết kế của mình trở nên rối rắm và lộn xộn.

Xem thiết kế: https://bit.ly/3CmS9mA

15. Direction – Điều hướng

Khi làm một việc gì đó dưới “sự dẫn dắt” chúng ta sẽ sử dụng ít năng lượng và thời gian hơn cho việc đó.

Vì thế, nếu chúng ta muốn nhanh chóng thu hút sự chú ý và làm cho người xem ở lại thiết kế của mình lâu hơn. Hãy tạo ra “sự dẫn dắt” cho việc nhìn của người xem.

Hãy bắt đầu bằng hiểu được tập tính và thói quen đọc, phần lớn các ngôn ngữ đều đọc từ trái sang phải, trên xuống dưới. Với các Common scanning pattern – mẫu quét phổ biển: F-shaped, E-shaped, Z-shaped.

Ngoài ra, bạn vẫn có thể sử dụng các nguyên tắc thiết kế như sự phân cấp, đường nét, sự tương phản,… với mục đích là thu hút sự chú ý ngay từ lúc bắt đầu nhìn vào thiết kế. Gọi là kỹ thuật tạo “điểm neo mắt”, rồi từ từ hướng dẫn người xem tới các yếu tố tiếp theo một cách chủ đích.

Xem thiết kế: https://bit.ly/39ichtB

16. Movement – Sự chuyển động

Phương pháp điều hướng hiệu quả nhất là tạo ra cảm giác về “sự chuyển động”, bỏ qua những thiết kế chuyển động theo nghĩa đen, chúng ta có thể áp dụng những kỹ thuật sau để tạo sự chuyển động cho các thiết kế tĩnh:

• Motion lines – Đường chuyển động: các đường gợn sống hoặc zic zac. Đọc lại nguyên tắc thiết kế phần 1.
• Opacity – Làm trong suốt: xếp các shape gần nhau và cho độ trong suất (opacity) giảm dần.
• Blur – Làm mờ: sử dụng hiệu ứng mờ theo phương hướng để tạo sự di chuyển với tốc độ nhanh.

Ngoài ra, sự chuyển động cũng giúp đưa hơi thở vào thiết kế của bạn trở nên sống động hơn.

Xem thiết kế: https://bit.ly/3lEE6SN

17. Depth – Chiều sâu

Thiết kế đồ họa – UI thông thường là 2 chiều, các thiết kế được đặt trên một mặt phẳng là màn hình máy tính. Tạo thêm chiều sâu trong thiết kế giúp người xem cảm giác thiết kế trải dài vào không gian, sống động hơn và mang lại sự thú vị về mặt thị giác. Các kỹ thuật:

• Size and scale – Kích thước và tỷ lệ: ghi nhớ câu thần chú “Gần rõ xa mờ”
• Overlapping objects – Chồng chéo các đối tượng: một cách gọi khác là kỹ thuật “Layering”, tạo ra nhiều lớp đối tượng để tạo chiều sâu.
• Layering transparent objects – Phân lớp các đối tượng trong suốt: tương tự như kỹ thuật trên, sử dụng hiệu ứng trong suốt để tạo thêm sự thú vị.
• Perspective – Phối cảnh: góc nhìn 3/4, fish eye view,… những phối cảnh dạng này sẽ tạo ra yếu tố 3 chiều. Nhớ thời điểm khi người ta đã quá chán với thiết kế phẳng, những hình minh họa isometric đã tạo ra một xu hướng tiếp cận thú vị hơn rất nhiều.
• Các hiệu ứng khác: Drop shadow, Texture, Pattern, Horizon lines,…

Xem thiết kế: https://bit.ly/3AresXN

18. Typography – Chữ

Tuy não bộ xử lý hình ảnh nhanh hơn chữ, nhưng chữ lại có tính dễ hiểu và trực quan rõ ràng hơn rất nhiều.

Vì thế typography là nền tảng quan trọng cốt lõi trong thiết kế, đặc biệt là những định hướng thiết kế tối giản, sạch sẽ. Với định hướng này, tài nguyên thiết kế sẽ rất hạn chế, có thể làm tốt phần typography sẽ giúp ích rất nhiều cho bạn.

Có rất nhiều điều cần nói về typography, nhưng có vài tips nhỏ để lưu tâm:

• Canh trái luôn giúp đoạn văn dài của bạn dễ đọc hơn
• Đừng dùng quá nhiều font trong một thiết kế
• Font có chân thì trang trọng truyền thống, Font không chân thì hiện đại
• Đừng nhỏ quá – khó đọc, đừng to quá – khó chịu
• Tỷ lệ size tương phản an toàn nhất là 1.618. Ví dụ: headlines 20pt thì body là 12pt hoặc 13pt (20/1.618 = 12.36)

Xem thiết kế: https://bit.ly/3zspnPE

19. Composition – Bố cục

Hãy xem đây là nguyên tắc tổng hợp sử dụng 18 nguyên tắc trước để sắp xếp nội dung trên thiết kế. Hãy ghi nhớ mục đích của thiết kế, áp dụng các nguyên tắc với những cách kết hợp khác nhau, thứ tự khác nhau, số lượng khác nhau sẽ tạo ra nhiều bố cục khác nhau.

Miễn là các bố cục này vẫn đảm bảo được mục đích ban đầu của thiết kế, thì chúng sẽ tạo ra những options – sự lựa chọn khác nhau cho khách hàng, team sản phẩm của bạn.

Như Princess Shuri trong Black Panther có nói: “Just because something works doesn’t mean it can’t be improved”

Nếu còn đủ thời gian, hãy thử nghiệm cho dự án của bạn nhiều nhất có thể.

20. Break the Rules – Phá Luật

Kết hợp giữa game xếp hình đã rất lâu đời để làm cho màn hình scan Face ID trở nên thú vị hơn, tại sao không?

Xem thiết kế: https://bit.ly/39m087e

Để có thể phá luật, bạn phải thật hiểu luật.

Có thể bạn sẽ nói nguyên tắc này là một lời xúi bậy. Nhưng hãy thử để ý, có một điểm chung của những người đạt được những vị trí cao trong lĩnh vực của họ, được sự công nhận của cộng đồng.

Khi được hỏi về cách họ tìm ra phong cách cá nhân, hay nguồn cảm hứng cho công việc sẽ có những câu trả lời khác nhau. Điều này nghĩa là ở một thời điểm nào đó, mỗi người họ đều đã bước ra khỏi những khuôn khổ cơ bản, và tìm ra thứ phù hợp cho chính họ.

Những nguyên tắc thiết kế mình viết ở đây, hy vọng sẽ giúp các bạn có được những nền tảng khởi đầu để dựa vào đó liên tục áp dụng, thực hành để chúng trở thành một loại thông tin giống như “trí nhớ cơ bắp”.

Và đến một lúc nào đó với sự tự tin, sự am hiểu sâu sắc những nguyên tắc này, bạn có thể “phá luật” để tạo ra hướng đi riêng cho những thiết kế của mình. Chúc bạn thành công!