/10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo

10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo

Bạn có thể có được những yếu tố đồ hoạ đẹp tuyệt trần, nhưng nếu bố cục của bạn không phù hợp, thì tất cả những yếu tố kia cũng xem như vứt ra cửa sổ.

Vậy nên, có thể nói bố cục khá là quan trọng. Thế thì, chính xác mà nói thì bố cục là gì? Chà, trong vài thuật ngữ đơn giản, thì đó là phần mà mọi yếu tố riêng biệt nhau kết hợp lại để hình thành nên một tổng thể. Khi đó mọi thành phần chữ, đồ hoạ, hình ảnh, màu sắc kết hợp lại và hình thành một thiết kế ăn rơ với nhau.

Khóa học online miễn phí “Tự học để trở thành UX Designer” của tác giả Phạm Khôi với 4 giờ – 40 phút video + tài liệu Designlab.edu.vn, dành cho UI Designer, Product Owner, Developer và sinh viên..

BẮT ĐẦU HỌC

Không cần đăng ký hoặc trả bất cứ chi phí nào! Tất cả đã sẵn sàng!

Một bố cục thành công nghĩa là bạn đã sắp xếp, phân bổ, gióng hàng, và kết hợp thiết kế của bạn theo một kiểu không chỉ trông đẹp mắt mà còn cực kỳ hiệu quả và hoạt động đúng chức năng. Vậy, hãy cùng điểm qua một số mẹo, mánh, và kỹ thuật giúp bạn làm chủ bố cục ngay và luôn nhé.

01. Tìm Điểm Nhấn Của Bạn

Cũng như tất cả chúng ta đều đã học ở trường, tạo điểm nhấn là điều cực kỳ quan trọng. Một yếu tố then chốt trong bất cứ bố cục nào chính là một điểm nhấn mạnh mẽ, vì nó giúp đôi mắt của người xem sẽ tự nhiên chú tâm vào phần quan trọng nhất trong thiết kế của bạn trước tiên.

Khi chọn điểm nhấn của mình, cần nhớ là mục tiêu chủ yếu của bất cứ thiết kế nào chính là việc truyền thông (communication). Dù bạn đang truyền tải một ý tưởng, một thông tin nào đó, hay thuần tuý là một cảm nhận hay cảm xúc, các thiết kế của bạn đang kể một câu chuyện cụ thể nào đó, nên hãy chắc rằng bạn chọn được một điểm nhấn giúp cho câu chuyện này được kể theo một cách hiệu quả nhất và mạnh mẽ nhất.

Một số cách lôi kéo sự chú ý bao gồm các kỹ thuật như phép co dãn thay đổi tỷ lệ (scale), tương phản và các đường dẫn (leading line), tất cả sẽ được thảo luận sâu hơn ở phần sau. Còn giờ thì hãy cùng phân tích một ví dụ.

Ví dụ dưới đây do Matthew Metz sáng tác là sản phẩm dành cho một cửa hàng bán lẻ thời trang tên là Nordstrom, vậy nên điểm nhấn trong tác phẩm này là cô người mẫu và quần áo của cô. Vậy nên, cô được đặt ngay trung tâm, với phần chữ và khối màu được bố trí sao cho làm nổi bật và thu hút sự chú ý vào khuôn mặt cô gái, rồi đến trang phục của cô, cùng với đường leading line trực tiếp từ mắt xuống đến khung ảnh của cô gái và dần dần hướng đến phần thông tin bổ sung.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo

Matthew Metz

Tương tự, thiết kế poster sau đây của Shauna Lynn Panczyszyn đặt điểm nhấn vào bức ảnh chụp người đàn ông. Thiết kế  orients sự chú ý đến tấm hình này bằng cách đặt ông ta vào ngay trung tâm, đóng khung ông ta bằng các hình đồ hoạ và sử dụng các hình hoạ nguệch ngoạc (doodled graphic) để dẫn dắt thị giác người xem hướng vào tấm ảnh.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo

Shauna Lynn Panczyszyn

02. Dẫn dắt ánh mắt (Direct the Eye) bằng các đường dẫn

Giống như khi bạn chỉ vào một thứ gì đó khi bạn muốn người khác nhìn vào nó, bằng cách bố trí một số đường và khối hình học nhất định theo những cách nhất định, bạn có thể kiểm soát được viewpoint (điểm nhìn) trong thiết kế của bạn, hay còn gọi là nơi ánh mắt người xem sẽ di chuyển theo khi họ nhìn vào thiết kế của bạn.

Có một cách dùng phổ biến của các đường dẫn mà bạn có thể khá là thân quen rồi, đó là trong các flowchart (lưu đồ). Lưu đồ sử dụng các đường nét để dẫn dắt ánh mắt của bạn từ điểm này đến điểm kia theo một cách trực quan. Hãy xem qua thiệp nhắc đám cưới (save the date card) được sáng tác bởi Paper and Parcel, sử dụng các đường dẫn vào lưu đồ để thể hiện thông tin theo một cách vui nhộn và độc đáo.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Paper and Parcel

Các đường dẫn còn có thể dẫn dắt bạn đến various tiers hay các points of information. Như đã nói ở trên, bạn muốn ánh mắt trước hết phải tập trung vào điểm nhấn chủ đạo, nhưng sau đó thì ánh mắt sẽ chuyển đến đâu? Bằng cách bố trí và điều chỉnh các đường dẫn, bạn không chỉ có khả năng dẫn dắt ánh mắt tập trung vào điểm nhấn trong thiết kế của mình mà còn đi xuyên suốt phần còn lại trong tác phẩm của bạn.

Lấy ví dụ, hãy xem thiết kế poster sau của Design By Day , thiết kế này sử dụng các đường dẫn đậm nét để dẫn dắt ánh mắt trước hết tập trung vào điểm nhấn chủ đạo (tựa đề), rồi sau đó hướng đến những hàng thông tin khác nhau.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Design By Day

Lẽ tất nhiên, không phải mọi thiết kế bạn tạo ra sẽ phải có những đường nét trực quan như vậy để bạn có thể dẫn dắt điểm nhìn, nhưng điều này không có nghĩa là bạn đã lâm vào tình thế tiến thoái lưỡng nan. Hãy tìm các khối hình học và đường nét bên trong ảnh chụp và các yếu tồ đồ hoạ của bạn và sử dụng chúng để dẫn dắt ánh mắt người xem theo những phương thức nhất định.

Một ví dụ cho việc này là tấm poster sau, do 1 Trick Pony sáng tác, sử dụng đường nét dọc theo cánh tay trái của người đàn ông để dẫn dắt ánh mắt đến và đi khỏi logo để đáp xuống phần còn lại của tấm hình. Bằng cách này, các khối hình học của tấm hình được sử dụng để dẫn dắt ánh mắt.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
1 Trick Pony

03. Co dãn tỷ lệ và Phân cấp (Scale and Hierarchy)

Co dãn tỷ lệ và phân cấp thị giác (visual hierarchy) là một số trong những nền tảng sáng tạo thực sự có thể tạo nên hay phá vỡ thiết kế của bạn, cho nên việc kiểm soát tốt chúng là một điều hết sức quan trọng để đảm bảo một bố cục thành công.

Để giải thích hết sức ngắn gọn thì phân cấp là sự sắp xếp và thiết kế các yếu tố nhằm báo hiệu tầm quan trọng một cách trực quan. Vậy nên bạn có thể làm cho một yếu tố quan trọng hơn sẽ lớn hơn và đậm nét hơn so với yếu tố kém quan trọng hơn, sẽ được làm nhỏ đi và nhạt hơn.

Phân cấp là điều cực kỳ quan trọng khi nhắc đến phần chữ (type). Để bàn luận chi tiết và đầy đủ hơn về thứ bậc văn bản (typographical hierarchy), hãy đảm bảo xem qua bài viết vì sao mọi thiết kế cần có ba thứ bậc văn bản – why every design needs three levels of typographic hierarchy. (vì sao mọi thiết kế đều cần 3 cấp độ văn bản)

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Why Every Design Needs Three Levels Of Typographic Hierarchy

Co dãn tỷ lệ thường được dùng để giúp truyền tải sự phân cấp bằng cách lôi kéo sự chú ý hướng đến và rời khỏi những yếu tố nhất định, do đó biểu thị tầm quan trọng của chúng khi truyền tải thông điệp.

Lấy ví dụ, thiết kế poster của Jessica Svendsen đã dùng một hình phóng lớn như một yếu tố lớn nhất và giúp nó lôi cuốn sự chú ý và tạo điểm nhấn nhất. Phần tiêu đề là một mảnh chữ lớn và đậm nét nhất, như thể đó là phần thông tin văn bản quan trọng nhất  đối với kiểu truyền tải thông điệp cụ thể này, và phần body copy (nội dung mô tả) nhỏ hơn nhiều. Do đó, phép co dãn được sử dụng để báo hiệu điểm nhấn, và duy trì các cấp độ về văn bản.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Jessica Svendsen

Phép co dãn cũng là một công cụ thuận tiện không ngờ, giúp cho các thiết kế của bạn có được các tỷ lệ và cảm thức (sense) về  kích thước. Bạn có thể làm cho các thứ trở nên chi tiết, phức tạp và bé xíu đến không ngờ, hoặc bạn có thể làm cho chúng trông to lớn và trang trọng.

Lấy ví dụ, thiết kế poster sau của Scott Hansen sử dụng một bóng đen ngược sáng nhỏ, đã giảm tỷ lệ của 2 người để giúp truyền tải một khung cảnh đồ sộphía trước họ. Điều này ngay lập tức cho người xem có được cảm giác về một sự hùng vĩ và kích thước của khung cảnh.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Scott Hansen

Bằng cách tạo sự tương phản giữa một yếu tố thu nhỏ bên cạnh một yếu tố phóng lớn trong bố cục của bạn, bạn có thể tạo ra một số hiệu ứng khác nhau.

04. Cân Bằng Các Yếu Tố Trong Thiết Kế

Cân bằng là một điều khá là quan trọng trong nhiều mặt, và thiết kế của bạn tuyệt đối không phải ngoại lệ.

Nhưng làm thế nào mà chúng ta đạt được sự cân bằng hoàn hảo trong thiết kế của mình? Hãy cùng nhau điểm qua 2 kiểu cân bằng phổ biến và cách để nắm vững chúng.

Trước hết, chúng ta có cân bằng đối xứng (symmetrical balance). Cân bằng đối xứng thực hiện cân bằng theo chính nghĩa đen trong tên gọi của nó – nó cân bằng thiết kế của bạn nhờ phép đối xứng. Bằng cách phản chiếu các yếu tố thiết kế nhất định từ phải sang trái hoặc từ trên xuống dưới, bạn có thể tạo ra một cảm giác mạnh mẽ về sự cân bằng.

Sau đây là một ví dụ về sự cân bằng đối xứng. Bản thiết kế thiệp mời dự tiệc cưới sau đây của  Jennifer Wick sử dụng một bố cục đối xứng bằng cách phản chiếu vị trí chữ và các yếu tố đồ hoạ. Nhờ dùng phép đối xứng, thiết kề này trở nên thanh thoát, sạch sẽ và cân xứng thật đẹp mắt.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Jennifer Wick

Một kiểu cân bằng khác, và là kiểu được cho là phổ biến hơn, đó là cân bằng bất đối xứng. Cân bằng bất đối xứng cũng là thuật ngữ đã tự giải thích cho chính nó, theo nghĩa: nó tạo ra sự cân bằng không nhờ vào phép đối xứng.

Sau đây là ví dụ về cân bằng bất đối xứng thành công. Thiết kế poster sau do Munchy Potato sáng tác, sử dụng phép cân bằng bất đối xứng bằng cách phân tán và co dãn tỷ lệ các yếu tố theo chủ đích.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Munchy Potato

Trong thiết kế trên đây, ba vòng tròn ở giữa là các yếu tố lớn nhất trong mẫu thiết kế, nhưng chúng được cân bằng nhờ vào không chỉ phần chữ mà còn cả phần đường nét mảnh, và một vòng tròn nhỏ phủ vân phức tạp (heavy texture) ở góc phía dưới.

Một kỹ thuật tốt để thành thạo phép cân bằng bất đối xứng là hãy xét đến từng yếu tố đều có một “trọng lượng riêng”. Các khối nhỏ hơn co thể nhẹ ‘cân’ hơn các khối lớn hơn, và các yếu tố phủ vân rối rắm có thể nặng ‘cân’ hơn những yếu tố được tô bằng mảng màu thuần tuý. Dù thiết kế của bạn có rơi vào trường hợp nào thì hãy nhớ cân bằng các yếu tố có trọng số như vậy cho đến khi bạn đạt được một trạng thái cân bằng hiệu quả.

05. Sử dụng các Yếu Tố Bổ Khuyết (Complement) cho các Yếu Tố Khác

Bạn đã nghe nói về màu bù (complementary color), còn các yếu tố thiết kế bù thì sao? Một yếu tố chủ chốt làm nên một bố cục thành công và hiệu quả là dành thời gian để chọn lựa có chủ đích và thật cẩn thận từng yếu tố trong thiết kế của bạn sao cho từng phần bổ khuyết vào tổng thể.

Một lỗi phổ biến trong các bố cục là việc sử dụng các hình ảnh không bù khuyết cho nhau. Vậy nên, khi sử dụng nhiều hơn một hình ảnh trong bố cục của bạn, hãy cố gắng đảm bảo rằng tất cả chúng đều trông hiệu quả và cohesive khi được nhóm lại với nhau. Có rất nhiều cách khác nhau để đạt được điều này, và sau đây là một vài pointers.

Sử dụng các hình chụp từ cùng một phiên chụp (photoshoot). Đây là một cách dễ dàng để đảm bảo các hình chụp của bạn trông dính kết vì chúng chắc chắn là được thực hiện dưới cùng một chỉ đạo nghệ thuật và phong cách nhiếp ảnh. Hãy xem qua tờ đôi thiết kế tạp chí dưới đây của Jekyll & Hyde và Elena Bonanomi, trong đó chỉ sử dụng các hình ảnh chụp từ cùng một phiên chụp để tạo nên một bố cục (layout) đẹp mắt.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Jekyll & Hyde and Elena Bonanomi

Tô màu cho các hình chụp tương đồng nhau. Với sự phổ biến của các công cụ lọc màu và chỉnh sửa ảnh, bạn có thể  tô màu và điều chỉnh hình chụp của mình để đạt được các bảng phối màu dính kết và bổ túc cho nhau hơn. Hãy xem qua thiết kế sau đây của A is a Name , thiết kế này áp một bộ lọc đơn sắc lên từng tấm ảnh chụp để liên kết từng tấm ảnh lại vào nhau theo một cách tự nhiên hơn.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
A is a Name

Chọn ra các tấm hình được chụp theo những cách thức tương tự nhau. Cố gắng chọn ra những tấm hình có phong cách và  tính thẩm mỹ tương đồng nhau, lấy ví dụ, nếu một tấm hình mang đậm phong cách tối giản, hãy chọn các tấm khác cũng mang hơi hướng tối giản như vậy để bổ khuyết vào. Hãy xem qua thiết kế website sau đây do Feint sáng tác, tác giả đã chọn ra những tấm ảnh sao cho tất cả có cùng  tính thô ráp nhất định với đủ loại texture (vân bề mặt), thớ gỗ và những tôn màu lạnh hơn.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Feint

Tạo ra một bố cục cố kết còn có nghĩa là ghép cặp phần chữ với phần hình sao cho chúng bổ khuyết cho nhau. Mỗi kiểu chữ khác nhau khi được sử dụng dưới những hoàn cảnh đúng đắn sẽ có được những dáng vẻ và ý tưởng đi cùng với nó – lấy ví dụ, một kiểu chữ thảo chi li với nhiều nét uốn lượn có thể báo hiệu cho một sự tinh tế và tao nhã. Do đó, hãy lựa chọn kiểu chữ (typeface) có chủ đích và định hướng.

Lấy ví dụ, tấm poster sau đây do Adam Hill  sáng tác dành cho một sự kiện “celebrating the inextricable liên kết giữa hình xăm và good old fashioned rock ‘n roll.” và việc sử dụng hình ảnh mang hơi hướng vintage truyền thống được bổ khuyết bởi một tiêu đề uốn lượn đậm nét và một phần thông tin nội dung dùng kiểu chữ slab serif đậm nét. Một kiểu chữ sans-serif tinh giản, gầy gò và gọn gàng sẽ không phù hợp với sự rung động của rock & roll thô ráp hơn mà phần hình và concept đã phát triển trước đó.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Adam Hill

06. Tăng (hoặc Giảm) Độ Tương Phản

Tương phản là một công cụ hữu ích đến không ngờ cho cả việc nhấn mạnh lẫn ẩn giấu đi những yếu tố nhất định trong thiết kế của bạn. Bằng các tăng độ tương phản hoặc sử dụng một màu đặc trưng với độ tương phản cao, bạn có thể giúp cho một yếu tố nổi bật hẳn và lôi kéo sự chú ý. Tương tự, bằng cách giảm đi độ tương phản, bạn có thể làm cho một yếu tố chìm vào phông nền.

Ví dụ sau đây do Thebault Julien thiết kế sử dụng các màu sắc tương phản cao để đóng khung và nhấn mạnh hình ảnh tâm điểm, và sử dụng các kiểu chữ dày hơn để nhấn mạnh các thông tin then chốt. Nhưng tác giả cũng sử dụng cả phần chữ nhạt hơn và mảnh hơn để đẩy các yếu tố khác ra khỏi vùng tiêu điểm một chút.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Thebault Julien

Mặc dù màu vibrant(màu rực) trong trường hợp ban nãy giúp nhấn mạnh cho thiết kế, thì ví dụ kế tiếp lại dùng một màu vibrant để ẩn đi một yếu tố khỏi mẫu thiết kế.

Tấm poster sau do Melanie Scott Vincent sáng tác sử dụng một kẹp ghim màu vàng trên phông nền vàng, tạo ra một sự khác biệt tương phản thấp giữa đối tượng và phần phông nền. Dù điều này thường là một thứ nên tránh, nhưng ở đây, nó củng cố cho tên sự kiện ‘bị phớt lờ mỗi ngày’.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo

Bằng cách này, tương phản cũng có thể được dùng để “ẩn giấu” những yếu tố nhất định trong thiết kế của bạn cũng như tạo nên ý nghĩa bên trong chúng. Cho nên, hãy sử dụng phép tương phản có mục đích cho thiết kế của bạn, dù đó là điều chỉnh sự chú ý vào một yếu tố hay phân tán khỏi nó.

07. Lặp lại Yếu tố trong Thiết kế

Hãy lặp lại theo tôi nào: “Repetition makes for successful compositions.” (Lặp lại tạo nên bố cục hoàn hảo)

Để duy trì sự nhất quán và một bố cục logic (mạch lạc và chặt chẽ), hãy thử chọn ra những yếu tố cụ thể từ một phần nào đó trong thiết kế của bạn và áp nó lên những phần khác. Có thể một kiểu dáng chữ có thể được áp dụng cho nhiều hơn một phần trong thiết kế của bạn, hoặc có thể là một graphic motif có thể được sử dụng nhiều hơn một lần. Do đó, hãy thử liên kết thiết kế của bạn lại với nhau bằng cách yếu tố được lặp lại.

Tính lặp là nhân tố chủ chốt khi bàn đến các bố cục nhiều trang. Việc lặp lại các yếu tố trong bố cục và/hoặc thiết kế của bạn sẽ giúp cho mỗi trang flow sang trang kế tiếp, tạo ra một tập hợp trang cố kết với nhau.

Lấy ví dụ, hãy xem qua những thiết kế tờ đôi tạp chí do Mauro De Donatis và Elizaveta Ukhabina thiết kế. Trong thiết kế này, bố cục của từng layout tương tự nhau, điểm khác biệt duy nhất là ở nội dung văn bản, màu sắc và các hình ảnh được sử dụng. Bố cục lặp đi lặp lại này giúp người đọc nhanh chóng nhận diện được định dạng và do đó tự họ trở nên quen thuộc với nội dung nhanh hơn.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Mauro De Donatis and Elizaveta Ukhabina

Để biết thêm nhiều mánh, mẹo và ví dụ nữa về việc này, nhớ xem qua designer’s checklist for creating multi page layouts (danh mục kiểm tra dành cho thiết kế viên khi tạo bố cục nhiều trang)

Tính lặp còn là nhân tố chủ chốt khi nói đến thiết kế bố cục một trang. Bằng việc lặp lại các yếu tố đồ hoạ, bạn có thể giữ cho thiết kế của mình có được sức mạnh và sự cố kết giống như tấm poster của Jessica Hische.

Poster này lặp lại một số kiểu dáng chữ , yếu tố đồ hoạ, và độ dày nét nhất định xuyên suốt thiết kế để duy trì được tính hiệu quả và dính kết của nó. Giả như nó bất ngờ dùng một yếu tố đồ hoạ có đường viền màu hồng, đậm đà và dày nét đâu đó ở phần trung tâm, thì sự cố kết ban đầu sẽ mất đi. Do đó, bằng cách giữ cho bảng phối màu và phối chữ thật nhỏ và các kiểu dáng đồ hoạ đơn giản và tương tự nhau, thiết kế trở nên đẹp đẽ và mạnh mẽ. (trường hợp ngược lại: tấm mandala, phong cách nghệ thuật Ấn, Hồi giáo cũng đẹp đẽ không kém, -ND)

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Jessica Hische

Khi thiết kế, hãy lưu lại một bảng tra các kiểu chữ, độ dày nét, màu sắc, v.v… mà bạn đã dùng, và thử lặp lại chúng đâu đó xuyên suốt trong thiết kế của mình để kết dính các mảnh lại với nhau thành một khối toàn thể.

08. Đừng Quên Khoảng Trắng

Cách dễ dàng nhất để xúc phạm khoảng trắng là nói nó là “khoảng trống”. Sự trống trải hàm ý rằng nó nên chứa đầy thứ gì đó, nghĩa là nó không thực hiện công việc của nó, nhưng đấy không phải là chỗ cần bàn.

Khoảng trắng được sử dụng theo một chiến lược nhất định có thể giúp tăng cường sự rõ ràng và cái nhìn bao quát trong thiết kế của bạn bằng cách cân bằng các phần phức tạp và đông đúc trong bố cục của bạn với khoảng không giúp cho thiết kế của bạn dễ thở.

Lấy ví dụ, hãy xem thiết kế sau của Cocorrina, đã sử dụng khoảng trắng để cân bằng phần hình ảnh, vân và chữ để giúp thiết kế được sạch sẽ và tinh tế.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Cocorrina

Vậy thì, làm sao để dùng khoản trắng trong thiết kế của mình đây?

Hãy thu nhỏ các yếu tố đồ hoạ của bạn xuống. Bằng cách thu nhỏ phần hình, chữ và các yếu tố đồ hoạ,v.v…, bạn có thể tạo ra một khoảng trắng sang trọng nào đó quanh cách tâm điểm của bạn khi chúng nằm bên trong khung đồ hoạ ban đầu (staying within the frame of your original graphic). Ví dụ, hãy xem qua mẫu thiết kế thẻ công thức nấu ăn sau đây  của Serafini Creative , tác giả đã thu nhỏ thiết kế trung tâm để tạo ra một khung khoảng trắng đẹp đẽ bao quanh thiết kế.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Serafini Creative

Đừng lấp đầy mọi khoảng không bằng nội dung. Như đã nói ở trên, khoảng trắng không phải là khoảng trống, nó thực hiện chức năng riêng của nó và phục vụ cho mục đích của nó, vậy nên đừng cảm thấy thôi thúc cần phải lấp đầy bất cứ khoảng trắng nào bạn có với nhiều nội dung hơn.

Lấy ví dụ, hãy xem qua thiết kế website sau đây do Creative Web Themes thiết kế, họ sử dụng một tấm hình để thể hiện sản phẩm, một tiêu đề in đậm, 2 dòng mô tả nhỏ, và sau đó là liên kết đến nội dung chi tiết. Nhờ vào bố cục đơn giản này, và cách mà mọi khoảng không không bị lấp đầy nội dung, thiết kế có đủ chỗ cho khoảng trắng thực hiện chức năng của đó và giúp cho từng yếu tố thở được, ngăn nắp và hiệu quả.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Creative Web Themes

Khi thiết kế, bạn hãy tự hỏi xem các yếu tố trong thiết kế của mình có nhất thiết 100% cần đến hay không. Bạn có cần đến tất cả phần chữ, phần tiêu đề màu xanh sáng, hay cần đến những 3 tấm hình khác nhau? Bằng cách loại trừ những mảng, miếng không cần thiết trong thiết kế của mình, bạn có thể tạo ra một thiết kế trực tiếp hơn và tận dụng hết sức mạnh của khoảng trắng.

09. Canh Lề Các Yếu Tố

Khi thiết kế một bố cục có nhiều thành phần trong đó, đừng ném bừa chúng vào hết một trang rồi bảo rằng thế là xong, vì việc canh lề (gióng) các yếu tố là một cách dễ dàng và nhanh chóng để biến thiết kế của bạn từ tồi tàn sang bảnh bao.

Gặp rắc rối với chuyện canh lề các yếu tố ư? Canva sẽ loại bỏ rắc rối này cho bạn trong một nốt nhạc với công cụ gióng hàng tự động ngay trong tầm tay. Chỉ cần kéo thả các thành tố của bạn trên trang và Canva sẽ gióng tự động chúng với các yếu tố khác và đặt vào đúng vị trí, y như phép màu. (Các bạn có thể học hỏi cách gióng các đôi tượng đồ hoạ trong photoshop, illustrator nếu muốn-ND)

Hãy xem qua ví dụ về tờ đôi tạp chí được canh lề đẹp mắt do Huck thiết kế. Canh lề với mức độ mạnh giữa các yếu tố của nó tạo ra một bố cục sắc nét, gọn gàng và hiệu quả giúp định hướng dễ dàng và dịu mắt.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Huck

Canh lề các yếu tố theo một cách mạnh mẽ và logic cũng giúp bạn tạo ra thứ tự giữa nhiều yếu tố. Do đó, nếu bạn sử dụng rất nhiều hình, nhiều chữ và/hoặc nhiều yếu tố đồ hoạ, canh lề sẽ là người bạn thân nhất của bạn.

Canh lề cũng rất quan trọng khi nói đến chữ. Có nhiều cách để canh lề phần chữ, nhưng một quy tắc thực nghiệm cho những phần nội dung dài hơn là cứ canh lề trái, vì đó là cách dễ nhất để mắt người định hướng và nhận biết.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
20 Design Rules You Should Never Break

10. Chia Thiết Kế Thành Ba Phần

Quy tắc một phần ba là kỹ thuật đơn giản, trong đó, nhà thiết kế chia thiết kế của họ làm ba cột và ba dòng, và ở các điểm giao nhau của các đường dọc và ngang là nơi bạn nên đặt các điểm nhấn vào.

Designer William Beachy vận dụng quy tắc này vào các thiết kế của anh như bạn có thể thấy trong ví dụ dưới đây. Bằng cách đặt các điểm nhấn vào mỗi chỗ giao nhau giữa các đường, thiết kế của anh trở nên nổi bật và hiệu quả. Beachy cũng lưu ý rằng “Bằng cách tránh một thiết kế đặt ngay vào trung tâm, bạn có thể thêm vào một chuyển động và sự thú vị nào đó.”

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Go Media

Sử dụng quy tắc 1/3 là cách tuyệt vời để khởi đầu cho bố cục của bạn vì nó cho bạn một chỉ dẫn nhanh chóng để xác định và đóng khung các yếu tố của bạn.

Hãy xem qua thiết kế website của Gajan Vamatheva cho National Geographic và dành ít phút để tưởng tượng nơi các đường 1/3 giao nhau. Bạn có thể thấy rằng các đường sẽ giao nhau ở các điểm nhấn của từng tấm hình – hai nhà leo núi trong tấm hình đầu tiên, và con chim to nhất trong tấm thứ hai. Các đường cũng sẽ giao nhau tại các điểm quanh các ô văn bản, lôi kéo mắt nhìn vào các điểm này.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Gajan Vamatheva

Một cách tuyệt vời để khởi đầu thiết kế của bạn, đặc biệt là trong trường hợp bạn vận dụng quy tắc 1/3 để khởi đầu với ô lưới. Ô lưới có thể giúp bạn canh lề các yếu tố theo một cách logic hơn và giúp tạo ra một sự hiểu biết rõ ràng hơn về nơi đặt (các) điểm nhấn trong bố của của bạn. Nhớ xem qua bài viết check out this tutorial on using Canva’s grid tools (hướng dẫn dùng công cụ quản lý grid của Canva) để giúp thiết kế của bạn có thêm chút kết cấu và trật tự.

Bài sưu tầm Kỹ thuật thiết kế Tâm sự  10 quy tắc thiết kế mà mọi nhà thiết kế đều tuân theo
Using Canva Grids

Khi tìm được một thiết kế mà bạn nghĩ nó rất hiệu quả, hãy thử phân tích nó có ý thức và xác định kết cấu bên dưới làm nên thiết kế đó. Nó có được dựng lên dựa trên quy tắc 1/3? Hay nó vận dụng một ô lưới cụ thể nào khác? Cách nào đi nữa, hãy mổ xẻ những ví dụ truyền cảm hứng và bắt chước họ bất cứ khi nào bạn có thể.

Dành cho Bạn

Có nhiều thứ phải quan tâm khi nói về bố cục thiết kế của bạn. Đặc biệt là khi bạn mới là tập tễnh vô nghề, việc này có thể đòi hỏi bạn một ít nỗ lực, và tốn nhiều thời gian để chuyển dịch cái này cái nọ sang chỗ này chỗ kia, thay đổi kích thước các thành phần và sau đó lại dời chỗ đi lần nữa, nhưng hãy cứ làm vậy.

Bạn có bất cứ mánh hay mẹo bí mật nào để nắm vững quy tắc bố cục không? Hay bạn có thể đã thấy được một vài ví dụ về thiết kế sử dụng bố cục thật sự hiệu quả? Dù là gì thì xin hãy thoải mái chia sẻ trí tuệ của bạn vào phần bình luận phía dưới!

Software Product Designer Mobile: +84 981-911-011 Email: khoipn@uxvietnam.com Skype: khoipn - Always Online