Kiến thức · 15/08/2025
Bố cục trong thiết kế đồ họa: Những nguyên lý cơ bản bạn cần biết

Bố cục trong thiết kế đồ họa đóng vai trò vô cùng quan trọng trong việc truyền tải thông điệp và tạo ấn tượng với người xem. Để tạo ra những thiết kế ấn tượng và hiệu quả, việc hiểu rõ các nguyên lý cơ bản về bố cục là điều cần thiết. Bài viết này sẽ giải thích những nguyên lý cơ bản về bố cục trong thiết kế đồ họa mà bạn cần nắm vững để nâng cao kỹ năng thiết kế của mình.
Trả lời nhanh: bố cục là gì?
Bố cục (tiếng Anh: layout, composition) là cách sắp xếp các phần của một sản phẩm vào một khuôn khổ có giới hạn, để người xem biết phần nào chính, phần nào phụ. Trong thiết kế đồ họa, đó là việc đặt chữ, hình ảnh, màu sắc và khoảng trống lên một trang, một poster hay một màn hình. Từ này cũng dùng cho bài văn (cách chia và xếp các phần của bài viết) và cho tranh, ảnh (cách đặt hình, mảng, màu trong khung). Bài này nói về bố cục trong thiết kế.
Bảng dưới gom các nguyên lý bố cục hay được nhắc tới. Nguồn định nghĩa: trang giáo dục của Bảo tàng Getty, bài 8 nguyên lý thiết kế cơ bản của Adobe Express và Nielsen Norman Group, đọc ngày 14/10/2026.
| Nguyên lý | Nghĩa ngắn gọn | Làm ngay được gì |
|---|---|---|
| Cân bằng (balance) | Phân bố "sức nặng thị giác" để thiết kế có cảm giác vững (Getty) | Kẻ trục giữa trang, xem có bên nào nặng hẳn |
| Nhấn mạnh (emphasis) | Phần bắt lấy sự chú ý nhờ khác đi về cỡ, màu, hình (Getty) | Chỉ chọn một điểm nhấn chính cho mỗi thiết kế |
| Tương phản (contrast) | Hai yếu tố đối lập, như dày và mỏng, kéo mắt tới phần quan trọng (Adobe) | Cho tiêu đề khác hẳn nội dung về cỡ, độ đậm |
| Lặp lại (repetition) | Lặp màu, font, hình để gắn các phần lại với nhau (Adobe) | Dùng lại cùng một bộ màu và font trên mọi trang |
| Căn chỉnh (alignment) | Các yếu tố thẳng hàng, tạo vẻ gọn và có trật tự (Adobe) | Cho mọi khối chữ bám vào cùng một đường lề |
| Gần gũi (proximity) | Thứ liên quan đặt gần nhau thành nhóm (Adobe) | Kéo chú thích sát ảnh của nó, tách xa nhóm khác |
| Khoảng trắng (white space) | Phần để trống, làm nổi thông tin quan trọng (Adobe) | Bớt một yếu tố thay vì thu nhỏ tất cả |

Bảy nguyên lý trong bảng trên, chỉ ra trên một poster, kèm câu “làm ngay được gì” của từng nguyên lý. Mùa chàm và xưởng Đồi Sả là tên ColorME tự đặt. Hình do ColorME tự dựng.
Phần trả lời nhanh và các mục ghi "ColorME bổ sung" được thêm ngày 14/10/2026. Phần còn lại là bài gốc của tác giả.
Bố cục trong thiết kế đồ họa là gì?

Bố cục là cách sắp xếp yếu tố thiết kế để truyền tải thông điệp rõ ràng và hài hòa (Nguồn: Behance)
Bố cục trong thiết kế đồ họa là cách sắp xếp các yếu tố như hình ảnh, văn bản, màu sắc và các đối tượng khác trong một không gian nhất định để tạo ra một thiết kế hài hòa và hiệu quả. Mục tiêu của bố cục là không chỉ giúp các yếu tố thiết kế được sắp xếp hợp lý mà còn giúp truyền tải thông điệp một cách rõ ràng và ấn tượng. Trong thiết kế đồ họa, bố cục có thể được áp dụng cho các sản phẩm như poster, trang web, bao bì, và nhiều loại hình thiết kế khác.
Một bố cục tốt giúp người xem dễ dàng tiếp cận thông tin và cảm nhận được sự cân đối trong tổng thể thiết kế. Các yếu tố trong thiết kế không chỉ cần phải đẹp mắt mà còn phải có sự kết nối chặt chẽ để tạo ra một trải nghiệm người dùng mượt mà và dễ chịu.
>> Xem thêm: SKILL SET - Set combo 3 kỹ năng tối ưu theo career path
Tại sao bố cục lại quan trọng trong thiết kế đồ họa?
1. Bố cục giúp tạo sự cân bằng và hài hòa

Bố cục giúp cân bằng yếu tố, khiến thiết kế dễ nhìn, dễ hiểu và hài hòa (Nguồn Leanhnghi)
Bố cục trong thiết kế đồ họa giúp tạo ra sự cân bằng giữa các yếu tố trong thiết kế. Khi bạn sử dụng các nguyên lý về bố cục, bạn có thể đảm bảo rằng các yếu tố được phân bổ đều và hợp lý, giúp người xem dễ dàng theo dõi và tiếp nhận thông tin. Sự cân bằng này giúp làm cho thiết kế trở nên dễ nhìn và không gây cảm giác lộn xộn hay khó chịu.
Các yếu tố trong thiết kế có thể được sắp xếp theo nhiều cách khác nhau để tạo ra sự cân bằng. Bạn có thể sử dụng cân bằng đối xứng (symmetrical balance), nơi các yếu tố được đặt đối xứng qua một trục trung tâm, hoặc cân bằng không đối xứng (asymmetrical balance), nơi các yếu tố có trọng lượng khác nhau nhưng vẫn tạo ra cảm giác cân đối.
2. Bố cục tốt sẽ tăng khả năng truyền tải thông điệp

Bố cục tốt làm nổi bật nội dung quan trọng và truyền tải thông điệp rõ ràng, ấn tượng (Nguồn: Hưng Lương)
Một bố cục tốt không chỉ làm cho thiết kế trở nên đẹp mắt mà còn giúp truyền tải thông điệp một cách hiệu quả. Khi bạn biết cách sử dụng bố cục đúng cách, bạn có thể làm nổi bật những yếu tố quan trọng và dẫn dắt mắt người xem đến những phần mà bạn muốn họ chú ý. Các yếu tố như tiêu đề, hình ảnh, và nội dung sẽ được sắp xếp sao cho dễ dàng nhận diện và dễ hiểu.
Bố cục cũng có thể tạo ra những điểm nhấn, giúp người xem tập trung vào những phần quan trọng nhất của thiết kế. Khi thông điệp được truyền tải một cách rõ ràng và dễ dàng tiếp nhận, thiết kế của bạn sẽ có tác động mạnh mẽ và ấn tượng hơn.
3. Tạo bố cục hợp lý để tối ưu trải nghiệm người dùng

Bố cục web tốt giúp người dùng dễ tìm thông tin và sử dụng (Nguồn: Freepik)
Đặc biệt trong thiết kế web và giao diện người dùng (UI), bố cục đóng vai trò quan trọng trong việc hướng dẫn người dùng qua các trang web hoặc ứng dụng. Một bố cục hợp lý sẽ giúp người dùng dễ dàng tìm thấy thông tin họ cần và có trải nghiệm mượt mà, không bị rối mắt. Bố cục còn giúp bạn tạo ra một giao diện dễ sử dụng, nơi người dùng có thể điều hướng và tương tác một cách thuận tiện.
Một giao diện web hay ứng dụng có bố cục tốt sẽ tạo ra sự thuận tiện cho người dùng, giúp họ nhanh chóng tiếp cận các tính năng mà họ cần mà không gặp phải sự rối loạn hay khó khăn khi sử dụng.
Các loại bố cục thường gặp trong thiết kế (ColorME bổ sung)
Không có danh sách "chuẩn" về các loại bố cục. Dưới đây là những kiểu thường được dạy, có thể kết hợp với nhau.
| Loại bố cục | Nhận ra bằng cách nào | Hay dùng khi |
|---|---|---|
| Bố cục đối xứng | Hai nửa quanh một trục gần như soi gương nhau, cho cảm giác ổn định (Getty) | Thiệp mời, bìa trang trọng, logo đặt giữa |
| Bố cục bất đối xứng | Hai bên khác nhau nhưng vẫn cân, ví dụ phần đậm cân bằng phần nhạt (Adobe); thường gợi cảm giác chuyển động (Getty) | Poster, banner, trang bìa tạp chí |
| Bố cục căn giữa | Mọi thứ xếp theo trục dọc ở giữa, một dạng đối xứng | Thiết kế ít chữ: bìa, trích dẫn, màn hình chào |
| Bố cục chính phụ | Một yếu tố lớn giữ vai chính, các yếu tố nhỏ hỗ trợ: phân cấp thị giác bằng kích thước | Poster sự kiện, ảnh quảng cáo sản phẩm |
| Bố cục một phần ba | Khung chia thành 9 ô bằng nhau, chủ thể đặt ở một giao điểm (Adobe) | Ảnh chụp, banner có ảnh nền |
| Bố cục theo lưới | Nội dung bám vào các cột và hàng của một hệ lưới | Website, catalogue, tạp chí, tài liệu nhiều trang |

Sáu kiểu bố cục trong bảng trên, cùng chữ và cùng tấm vải, chỉ cách sắp xếp thay đổi. Hình do ColorME tự dựng.
Cột "Hay dùng khi" là thói quen thường gặp, không phải quy định. "Căn giữa" và "chính phụ" là cách gọi quen trong giảng dạy, không có định nghĩa chính thức.
Những nguyên lý cơ bản của bố cục trong thiết kế đồ họa
1. Nguyên lý bố cục cân đối (Balance)

Bố cục cân đối (Nguồn: Gayoung Cho)
Cân bằng là nguyên lý cơ bản và quan trọng nhất trong bố cục. Cân bằng đảm bảo rằng các yếu tố trong thiết kế được phân bố một cách hợp lý để tạo ra một tổng thể hài hòa. Cân bằng có thể được chia thành hai loại chính: cân bằng đối xứng và cân bằng không đối xứng. Cân bằng đối xứng mang đến sự ổn định và dễ chịu cho mắt người xem, trong khi cân bằng không đối xứng tạo ra sự động và thú vị, nhưng vẫn duy trì sự hài hòa tổng thể.
2. Nguyên lý bố cục nhấn mạnh (Emphasis)

Bố cục nhấn mạnh (Nguồn: Hamoda)
Nhấn mạnh là nguyên lý giúp bạn tạo ra các điểm nhấn trong thiết kế, giúp thu hút sự chú ý của người xem vào những yếu tố quan trọng nhất. Để làm điều này, bạn có thể sử dụng màu sắc tương phản, kích thước lớn hơn, hoặc đặt các yếu tố quan trọng vào các vị trí nổi bật trong bố cục.
Khi bạn biết cách áp dụng nguyên lý nhấn mạnh đúng đắn, bạn có thể giúp người xem nhận diện nhanh chóng các yếu tố quan trọng trong thiết kế, như tiêu đề, lời kêu gọi hành động, hoặc sản phẩm chính.
3. Nguyên lý bố cục lặp lại (Repetition)

Bố cục lặp lại (Nguồn: Remy Loraine)
Lặp lại là việc sử dụng các yếu tố thiết kế như màu sắc, kiểu chữ, hình ảnh hoặc các họa tiết một cách đều đặn trong thiết kế để tạo ra sự nhất quán và gắn kết. Khi bạn lặp lại một số yếu tố nhất định trong thiết kế, nó giúp tạo ra sự nhận diện mạnh mẽ và dễ dàng ghi nhớ cho người xem. Lặp lại giúp củng cố thông điệp và tạo ra một phong cách đồng nhất cho sản phẩm thiết kế của bạn.
4. Nguyên lý bố cục liên kết (Alignment)

Bố cục liên kết (Nguồn: Canva)
Liên kết trong bố cục giúp các yếu tố trong thiết kế có sự kết nối chặt chẽ, tạo ra một dòng chảy tự nhiên và dễ dàng để mắt người xem di chuyển từ phần này sang phần khác. Việc căn chỉnh các yếu tố một cách chính xác sẽ giúp thiết kế trở nên gọn gàng và dễ nhìn hơn, tránh cảm giác rối mắt.
Ghi chú của ColorME (14/10/2026): nguyên lý "Alignment" ở mục 4 trong nhiều tài liệu tiếng Việt còn được gọi là căn chỉnh hoặc căn lề. Bảng ở đầu bài dùng tên "căn chỉnh" cho cùng nguyên lý này.
5. Nguyên lý bố cục không gian âm (White Space)

Bố cục không gian âm (Nguồn: Hudkar Shashank M)
Không gian âm, hay còn gọi là không gian trắng, là khu vực không có các yếu tố thiết kế. Việc sử dụng không gian âm một cách hợp lý giúp tạo ra sự thông thoáng và làm nổi bật các yếu tố trong thiết kế. Không gian âm còn giúp giảm sự rối mắt và tạo ra cảm giác thoải mái, giúp người xem dễ dàng tập trung vào thông điệp chính.
Thuật ngữ trong bài: Đối xứng, Điểm nhấn, Lặp lại (giải thích trong thư viện thuật ngữ thiết kế của ColorME).
Những nguyên lý và công cụ khác hay đi cùng bố cục (ColorME bổ sung)
Bố cục chỉ là một phần của bộ nguyên lý thiết kế. Bài 7 nguyên tắc thiết kế phải nắm lòng tóm tắt các nguyên lý còn lại như cân bằng, nhấn mạnh và lặp lại, kèm checklist trước khi gửi bài.
Tương phản (contrast)
Theo Adobe Express, tương phản xuất hiện khi hai yếu tố đối lập nhau, và độ tương phản cao dẫn mắt tới phần quan trọng nhất trước. Với chữ trên nền, tiêu chí WCAG 2.2 mục 1.4.3 của W3C yêu cầu tỉ lệ tương phản ít nhất 4,5:1 cho chữ thường và 3:1 cho chữ cỡ lớn. Cách chọn màu có trong bài các cặp màu tương phản phổ biến.
Phân cấp thị giác (visual hierarchy) và tỉ lệ
NN/g mô tả phân cấp thị giác là thứ dẫn mắt tới những yếu tố quan trọng nhất trên trang, tạo ra bằng khác biệt về màu, tương phản, kích thước và cách nhóm. Nguyên lý tỉ lệ (scale) trong bài 5 nguyên lý thiết kế thị giác của NN/g là dùng kích thước tương đối để báo mức quan trọng: thứ quan trọng hơn thì lớn hơn. Để chọn chữ, xem bài 10 font chữ kinh điển.

Trước và sau khi xếp hạng nội dung bằng kích thước: thứ quan trọng hơn thì lớn hơn, như nguyên lý tỉ lệ của NN/g ở trên. Hình do ColorME tự dựng.
Về tỉ lệ vàng: theo Adobe, đó là một tỉ lệ giữa hai số xấp xỉ 1,618. Cũng trang này ghi không có bằng chứng cho thấy dùng tỉ lệ vàng tốt hơn các tỉ lệ khác.
Quy tắc một phần ba
Trang hướng dẫn nhiếp ảnh của Adobe giải thích quy tắc một phần ba: chia khung thành 9 ô bằng nhau rồi đặt điểm chính vào các giao điểm. Một nhiếp ảnh gia được trích trong bài nói đây là gợi ý chứ không phải luật.

Quy tắc một phần ba và tỉ lệ vàng xấp xỉ 1,618 vẽ chính xác trên mẫu tự đặt. Theo Adobe, chưa có bằng chứng tỉ lệ vàng tốt hơn các tỉ lệ khác. Hình do ColorME tự dựng.
Lưới (grid)
Theo NN/g, lưới gồm ba thành phần: cột, khoảng cách giữa các cột (gutter) và lề (margin), với ba kiểu hay dùng cho giao diện là lưới cột, lưới mô-đun và lưới phân cấp. Đọc kỹ hơn ở bài grid là gì. Khi cần con số cụ thể, công cụ Tính lưới cột của ColorME tự giới thiệu: "Nhập khung, số cột, gutter và lề, nhận ngay độ rộng từng cột."
Cách dựng một bố cục theo 5 bước (ColorME bổ sung)
Một trình tự gợi ý để luyện tập, không phải quy trình bắt buộc.
- Xếp hạng nội dung: thứ gì người xem phải thấy đầu tiên, thứ hai, thứ ba.
- Chọn khung và lưới: kích thước, lề, số cột. Kích thước từng loại ấn phẩm có trong bài về banner và catalogue.
- Đặt điểm nhấn: cho yếu tố số một kích thước và độ tương phản lớn nhất.
- Gom nhóm và căn hàng: thứ liên quan đặt gần nhau, mọi khối bám vào đường lưới.
- Bớt đi và kiểm tra: bỏ thứ không cần, rồi nheo mắt nhìn như Adobe gợi ý: thông điệp quan trọng nhất có dễ đọc nhất không?

Năm bước ở trên áp vào một poster, từ danh sách nội dung tới bản cuối. Hình do ColorME tự dựng.
Hãy giữ cả bản phác bố cục để đưa vào hồ sơ, xem bài tạo portfolio chuyên nghiệp.
Câu hỏi thường gặp về bố cục (ColorME bổ sung)
Bố cục và layout có khác nhau không?
Trong thiết kế đồ họa, hai từ thường được dùng như nhau. "Layout" hay dùng cho trang in và giao diện, "composition" hay gặp trong hội họa và nhiếp ảnh. Đây là thói quen dùng từ.
Có mấy loại bố cục trong thiết kế?
Không có con số cố định. Các kiểu thường gặp là đối xứng, bất đối xứng, căn giữa, chính phụ, một phần ba và theo lưới.
Bố cục cân bằng là gì?
Là bố cục có sức nặng thị giác phân bố đều để thiết kế vững. Theo Adobe, cân bằng không bắt buộc phải đối xứng.
Bố cục bài văn là gì?
Là cách chia và sắp xếp các phần, các đoạn của bài viết theo một trình tự rành mạch. Trong nhà trường, bài văn thường được dạy theo ba phần: mở bài, thân bài, kết bài.
Tổng kết
Bố cục trong thiết kế đồ họa không chỉ là yếu tố quyết định sự hài hòa của một sản phẩm thiết kế mà còn giúp truyền tải thông điệp một cách hiệu quả và dễ hiểu. Việc nắm vững các nguyên lý cơ bản như cân bằng, nhấn mạnh, lặp lại, liên kết và không gian âm sẽ giúp bạn tạo ra những thiết kế ấn tượng, dễ dàng thu hút sự chú ý của người xem và tăng khả năng nhận diện thương hiệu. Một bố cục hợp lý sẽ không chỉ giúp cải thiện chất lượng thẩm mỹ mà còn nâng cao trải nghiệm người dùng, đặc biệt trong các thiết kế web và giao diện người dùng (UI).
Để nắm vững các nguyên lý cơ bản về bố cục và nâng cao kỹ năng thiết kế đồ họa, bạn có thể tham gia khóa học Thiết kế chuyên sâu tại colorME. Khóa học này sẽ giúp bạn hiểu rõ và áp dụng hiệu quả các nguyên lý bố cục trong các dự án thiết kế thực tế. Với chương trình đào tạo từ cơ bản đến nâng cao, bạn sẽ được trang bị đầy đủ kỹ năng để tạo ra những thiết kế ấn tượng và chuyên nghiệp.
Tác giảThanh Thảo














