Làm thế nào để làm chủ thiết kế bố cục

Hướng dẫn đầy đủ để tìm hiểu kiến ​​thức cơ bản về thiết kế hình ảnh.

Câu hỏi đáng giá triệu đô: bí quyết để có một thiết kế đẹp là gì?

Chúng ta có thể đi sâu vào vấn đề này , nhưng nói chung, 'bí quyết' để có thiết kế tốt nằm ở cách bạn tổ chức các yếu tố hình ảnh của mình, liên quan đến canvas của bạn và với nhau. Về cơ bản, chúng ta vừa mô tả thiết kế bố cục. Khi bạn nghĩ về nó, nó sẽ xuất hiện ở mọi nơi bạn nhìn thấy.

Ví dụ như bố cục của một tạp chí. Thiết kế của họ tuân theo hệ thống lưới cổ điển (chúng ta sẽ tìm hiểu tất cả về lưới trong một phút). Mọi thứ thường được căn trái, phải và ở dưới cùng. Các cột đặc biệt có sự căn chỉnh hợp lý rõ ràng giúp trang không chỉ hấp dẫn về mặt trực quan mà còn dễ đọc và có thẩm quyền. Các tiêu đề lớn thu hút sự chú ý của người xem, trong khi tiêu đề phụ có kích thước tương phản để tạo ra hệ thống phân cấp thông tin trực quan.

Linda Gaom, Behance

Tất cả những phẩm chất này tạo nên trang thiết kế rõ ràng, có cấu trúc và dễ đọc, đồng thời chúng phù hợp với các mẹo mà chúng tôi sẽ đề cập tiếp theo. Nhưng trước tiên, hãy hiểu thêm về bản thân thiết kế bố cục.

Thiết kế bố cục là gì?

Thiết kế bố cục liên quan đến việc sắp xếp các yếu tố đồ họa nhằm thu hút sự chú ý của người đọc và truyền tải một thông điệp cụ thể theo cách hấp dẫn trực quan .

Vì vậy, chúng tôi không nói chuyệnnơi nghỉ ngơi, trong khi các yếu tố khác truyền đạt phương hướng.

Một cách đơn giản để hiểu điều này là lấy ví dụ về trang web của chúng tôi chẳng hạn. Đồ họa được tách biệt rõ ràng khỏi văn bản và lời kêu gọi hành động cũng vậy, vì vậy, sự chú ý của người xem đang chuyển từ cụm thông tin này sang cụm thông tin khác.

Nguyên tắc #5. Sử dụng Độ tương phản

Đảm bảo rằng bạn có đủ độ tương phản trong thiết kế của mình.

Độ tương phản giúp tổ chức thiết kế của bạn và sẽ thiết lập một hệ thống phân cấp rất cần thiết và nhấn mạnh vào những gì quan trọng.

Hơn thế nữa, việc sử dụng tốt độ tương phản cũng làm tăng thêm sự thú vị về mặt hình ảnh trong suốt thiết kế của bạn. Hãy đối mặt với nó, một bố cục mà mọi thứ đều có cùng kích thước, hình dạng hoặc màu sắc sẽ trông nhàm chán. Tạo sự tương phản cho mọi thứ.

Suy nghĩ đầu tiên của bạn có thể là độ tương phản về màu sắc, chẳng hạn như ấm so với mát, tối so với sáng, xanh lam so với cam. Nhưng trong khi màu sắc là một nguyên tắc cực kỳ thiết yếu của sự tương phản, thì cũng có những sự tương phản về loại, căn chỉnh và kích thước. Và hãy nhớ rằng, độ tương phản cũng là tương đối. Nó chỉ có ý nghĩa khi đặt cạnh các yếu tố khác.

Dưới đây là một số ví dụ về bố cục sử dụng quy tắc này một cách thông minh và đẹp mắt. Chú ý đến sự tương phản về kiểu chữ, màu sắc và thậm chí là sự tương phản về kích thước giữa các yếu tố.

Nguồn: Kế hoạch hành động hòa giải IAG

Nguyên tắc #6. Sự lặp lại, Mô hình, Nhịp điệu

Khi nghĩ về sự lặp lại, chúng ta nghĩlặp đi lặp lại cùng một yếu tố.

Nhưng nó khác về thiết kế. Nó chắc chắn không nhàm chán như thế. Khi được sử dụng đúng cách, sự lặp lại thực sự có thể tạo sức mạnh cho thiết kế của bạn.

Hãy cố gắng xác định và sử dụng lại một họa tiết xuyên suốt bố cục của bạn để các khu vực khác nhau có cảm giác được kết nối và là một phần của cùng một bố cục. Nó sẽ giúp thiết kế của bạn có chủ đề. Bằng cách lặp lại các yếu tố, bạn không chỉ phân phối theo mong đợi của khán giả mà còn cải thiện trải nghiệm người dùng. Tính nhất quán giúp người dùng cảm thấy thoải mái hơn.

Bạn có thể thực hiện việc này bằng cách lặp lại các hình hoặc biểu tượng. Hoặc thậm chí là một bảng màu, một kiểu chữ và cùng một phong cách nói chung.

Một thói quen tốt cần hình thành là sử dụng một kiểu chữ có nhiều dòng chữ. Giới hạn số lượng mẫu, độ dày/kiểu đường và màu sắc khác nhau, đồng thời lặp lại xuyên suốt. Ngoài ra, hãy cố gắng giữ nguyên phong cách của hình ảnh và đồ họa. Ví dụ: sử dụng hình minh họa của cùng một nghệ sĩ.

Nguồn: Thepentool.co

Chỉ vậy thôi. Đây là sáu nguyên tắc sẽ giúp bạn tổ chức thiết kế của mình và đạt được bố cục gọn gàng, chuyên nghiệp hơn và cân đối hơn.

Nhưng hành trình của bạn không kết thúc tại đây. Thiết kế đồ họa không phải là một môn khoa học chính xác và nó không nên bị giới hạn trong các thủ thuật và nguyên tắc. Như đúng trong mọi lĩnh vực sáng tạo, không có quy tắc cứng nhắc nào. Phá vỡ những lời khuyên này theo những cách tinh tế sẽ thêm chiều sâu và sự đa dạng chothiết kế của bạn.

Tuy nhiên, chúng là điểm khởi đầu tuyệt vời và chúng tôi khuyến khích bạn thử dùng chúng. Và cho chúng tôi biết cách chúng hoạt động!

Tải xuống Vectornator để bắt đầu

Đưa thiết kế của bạn lên một tầm cao mới.

Tải tệp xuống về thiết kế logo ở đây. Tuy nhiên, thiết kế của tài liệu in, như báo, tạp chí, áp phích và các đối tác kỹ thuật số của chúng, cũng như thiết kế web, ứng dụng hoặc UX/UI.

Từ 'bố cục' cho chúng ta rất nhiều gợi ý. Nó có nghĩa là sự sắp xếp các thành phần được xác định trước trên một trang.

Khi một bố cục hiệu quả, nó sẽ trông đẹp mắt và hướng dẫn người xem hiểu được thông điệp mà thiết kế đang cố gắng truyền tải. Do đó, việc hiểu bố cục là chìa khóa để tạo bố cục hấp dẫn, hiệu quả, thân thiện với người dùng và dễ chịu.

Nếu bố cục không truyền tải tốt thông điệp của nó tới người xem, hay nói cách khác, bố cục đó không "đọc tốt ”, thiết kế sẽ không hiệu quả cho dù trông hợp thời trang đến đâu. Trong lĩnh vực thiết kế bố cục, nội dung thay thế các xu hướng và mánh lới quảng cáo.

Mục đích của thiết kế bố cục

Để truyền tải thông điệp nhanh chóng

Đây là chìa khóa. Thiết kế bố cục thiết lập mối quan hệ giữa các nội dung đồ họa để đạt được luồng chuyển động mượt mà của mắt nhằm mang lại hiệu quả và tác động tối đa.

Xem thêm: 20 Bộ Phim Anime Hay Nhất Mọi Thời Đại

Để tạo sự cân bằng

Sử dụng các nguyên tắc của thiết kế bố cục là cách đơn giản nhất để tạo cảm giác cân bằng và đối xứng trong các dự án thiết kế của bạn mà không trở nên nhàm chán.

Để tạo sự gắn kết

Bố cục giúp bạn sắp xếp nhiều yếu tố trong thiết kế của mình theo cách dễ hiểu, gắn kết và hợp lý.

Để tạo nên vẻ đẹp

Cân đối và cấu trúc tạo nên vẻ đẹp một cách tự nhiên.Nếu thiết kế bố cục của bạn được thực hiện chính xác, nó sẽ tự động trở nên hấp dẫn trực quan đối với người xem. Người xem càng tốn ít công sức để hiểu thông điệp thì thiết kế của bạn càng có vẻ hấp dẫn.

Nhà thiết kế của Frank Philippin cho cuốn sách 'Tôi từng là sinh viên thiết kế: Sau đó - Hiện nay.' Nguồn: DesignBoom

Các yếu tố của thiết kế bố cục

Văn bản

Điều này không chỉ bao gồm nội dung văn bản hoặc đoạn văn mà còn cả tiêu đề, tiêu đề phụ, đầu trang và chân trang. Sự lựa chọn của bạn về kiểu chữ, màu sắc và kích thước sẽ đạt được các hiệu ứng khác nhau về cách bố cục của bạn sẽ truyền tải tới người xem.

Hình ảnh

Các loại hình ảnh phổ biến nhất là ảnh chụp, hình minh họa hoặc đồ họa thông tin.

Hình dạng

Các hình dạng có thể là hình học, rất góc cạnh hoặc chúng có thể có tổ chức, bắt chước thế giới tự nhiên. Chúng cũng có thể trừu tượng. Các hình dạng trừu tượng đã rất thịnh hành trong năm qua, vì chúng tôi đã thấy các nhà thiết kế web kết hợp chúng vào các bố cục phức tạp và trải dài.

Các hình dạng có thể thay thế hình ảnh. Hoặc chúng có thể được sử dụng để thêm các thành phần đồ họa vào trang, đánh dấu văn bản hoặc phân định khoảng cách giữa các thành phần hình ảnh khác.

Khoảng trắng

Bất kỳ thiết kế bố cục nào cũng sẽ có một lượng khoảng trắng nhất định điều đó sẽ cho phép các yếu tố của bạn tự thở và nổi bật.

Nguyên tắc vàng của thiết kế bố cục

Bạn sẽ nhận thấy rằng các nguyên tắccủa thiết kế bố trí tuân theo rất nhiều nguyên tắc cơ bản của thiết kế. Chẳng hạn như sử dụng màu sắc theo một cách nhất định, kiểu chữ, sự lặp lại, độ tương phản, thứ bậc và sự cân bằng.

Nguyên tắc #1. Sử dụng Lưới

Lưới giúp các nhà thiết kế định vị các yếu tố thiết kế khác nhau như văn bản và hình ảnh theo cách có vẻ nhất quán và dễ theo dõi.

Lưới mang lại cảm giác trật tự, giúp các yếu tố không lấn át lẫn nhau và quan trọng nhất, lưới cũng sẽ điều chỉnh căn chỉnh của bạn. Làm cho công việc của bạn gọn gàng và chuyên nghiệp hơn.

Nguồn: hgmlegal.com

Cấu tạo của lưới

Bạn có thể nghĩ rằng đó chỉ là các đường thẳng đứng và ngang, nhưng một lưới được tạo thành từ một số phần. Nhiều, trên thực tế. Đây là thuật ngữ quan trọng nhất bạn cần biết trong lưới cơ bản:

• Định dạng là toàn bộ khu vực thiết kế cuối cùng của bạn. Vì vậy, nếu bạn thiết kế thứ gì đó để in, thì định dạng là trang và nếu bạn là nhà thiết kế web thì định dạng là trang web hoặc cửa sổ trình duyệt.
• Lề là những khoảng trống có chủ ý giữa định dạng và thiết kế.
• Dòng chảy là các đường ngang phân tách bố cục của bạn thành các phần song song. Dòng chảy giúp thiết kế của bạn dễ đọc và hướng dẫn người đọc theo dõi nội dung một cách chính xác.
• Mô-đun là các khối được tạo bởi các đường ngang và dọcdòng chảy của bất kỳ lưới nào. Nếu bạn nghĩ về nó, chúng là các khối xây dựng của bất kỳ lưới nào. Tất cả các mô-đun dọc của bạn tạo ra các cột của bạn, trong khi tất cả các lưới ngang của bạn tạo ra các hàng của bạn.
• Các vùng là các nhóm mô-đun được kết nối, theo chiều dọc hoặc chiều ngang. Không có quy tắc nào về cách bạn quyết định sắp xếp những thứ này.

Nguồn: Radversity

Các loại lưới

Lưới bố cục lần đầu tiên được sử dụng để sắp xếp chữ viết tay trên giấy.

Chúng có từ đầu thế kỷ 13, khi nghệ sĩ người Pháp Villard De kết hợp hệ thống lưới với tỷ lệ vàng để tạo bố cục trang in có lề. Bạn có thể thấy hệ thống lưới này cho đến ngày nay, như phần lớn các bố cục sách và tạp chí in đã chứng minh. Các nhà xuất bản, biên tập viên và nhà thiết kế thích sử dụng lưới tiêu chuẩn không chỉ vì chúng trông đẹp mắt mà còn vì người đọc mong đợi các thành phần thiết kế nhất định ở một vị trí cụ thể.

Lưới có thể được thiết kế theo hai cách: đối xứng hoặc không đối xứng. Lưới đối xứng theo một đường tâm, trong đó các vùng dọc và ngang bằng nhau; và các cột có cùng chiều rộng.

Trong lưới không đối xứng , như tên cho thấy, các lề và các cột không hoàn toàn giống nhau.

Dựa trên cách phân loại này, có 5 loại lưới bố cục chính được sử dụng trên toàn thế giới mà bạn có thể dựa vào:

Bản thảolưới là loại lưới phổ biến nhất cho tài liệu. Chúng phân tách đầu trang, chân trang và lề, đồng thời về cơ bản tạo một hình chữ nhật bên trong định dạng (hoặc trang) cung cấp ranh giới cho văn bản của bạn. Chúng là cơ sở cho các tạp chí, báo và sách. Vì vậy, đây có lẽ là bố cục mà bạn quen thuộc nhất.

Nguồn: UXplanet

Nguồn: Radversity

Lưới cột là một mục yêu thích khác trong xuất bản tạp chí. Bố cục tạp chí điển hình sử dụng lưới cột để phân tách văn bản thành các phần dễ đọc. Nhưng chúng cũng rất phổ biến cho các trang web. Bạn có thể sử dụng bất cứ thứ gì từ hai đến sáu lưới. Nhiều hơn là có thể, nhưng không phổ biến. Một điều rất quan trọng về lưới cột là khoảng cách giữa các cột hoặc các rãnh cách đều nhau.

Ví dụ: lưới cột đối xứng được sử dụng bởi các tờ báo, trong khi lưới cột không đối xứng được ưu tiên trong thiết kế web .

Nguồn: UX Planet

Nguồn: Radversity

Lưới mô-đun tương tự như lưới cột, nhưng chúng cũng chiếm các dòng chảy ngang. Loại lưới này là cần thiết khi bạn phải sắp xếp các thành phần khác nhau trong bố cục của mình và lưới cột đơn giản là không đủ.

Lưới mô-đun có các mô-đun có kích thước bằng nhau giúp dễ dàng hình dung các vùng không gian của bạn theo các cách khác nhau.

Nguồn: UXPlanet

Nguồn: Radversity

Lưới đường cơ sở rất tuyệt vời cho các tác phẩm dựa trên văn bản. Đường cơ sở là dòng nơi văn bản nằm khi bạn nhập và đầu là khoảng cách giữa hai đường cơ sở. Bạn đang băn khoăn không biết tiêu đề hoặc tiêu đề phụ của mình nên lớn đến mức nào?

Lưới đường cơ sở ở đây để giúp tạo cho văn bản của bạn một nhịp điệu trôi chảy.

Nguồn: UX Planet

Nguồn: Fragaria

Lưới phân cấp trông ít giống lưới hơn tất cả đối tác. Tuy nhiên, chúng rất hữu ích khi tổ chức các yếu tố thiết kế theo thứ tự quan trọng của chúng. Lưới phân cấp có thể dựa trên lưới mô-đun hoặc thậm chí bạn có thể tạo lưới của riêng mình. Các trang web sử dụng lưới này rất nhiều, đặc biệt là báo và tạp chí kỹ thuật số có xu hướng dựa nhiều hơn vào lưới phân cấp hơn là lưới cột trong quá trình chuyển đổi sang kỹ thuật số.

Nguồn: UX Plane

Nguyên tắc #2. Sử dụng Không gian Âm

Chúng ta thường nghĩ rằng sự trống rỗng, tĩnh lặng hoặc thiếu màu sắc là điều xấu. Nhưng chúng tôi không xem xét chúng là nền tảng vững chắc của sự tương phản như thế nào.

Còn được gọi là khoảng trắng, không gian âm là khu vực trong thiết kế của bạn không có bất kỳ yếu tố thực tế nào. Đó là khu vực bị bỏ trống. Nó không chỉ bao quanh tài sản của bạn mà còn tạo ra những mối ràng buộc cần thiết giữa chúng. Do đó, không gian âm là một yếu tố thiết kế phù hợp và có tác động lớn đến hiệu quả bố cục của bạn.thiết kế là

Không gian âm tốt và không gian xấu

Không gian âm sẽ giúp phân tách các khu vực khác nhau trong thiết kế của bạn, đồng thời mang lại sự thông thoáng cho bố cục của bạn. Nó giúp phân cấp thị giác và cân bằng thị giác; nó đặt sự tập trung của người dùng vào các yếu tố cốt lõi; nó làm giảm mức độ mất tập trung; và cuối cùng, nó bổ sung thêm phong cách và sự sang trọng cho thiết kế của bạn.

Các nhà thiết kế thiếu kinh nghiệm có thể có xu hướng lấp đầy khung vẽ của họ càng nhiều càng tốt, bằng cách phóng to văn bản hoặc thổi phồng logo hoặc hình ảnh. Nhưng việc tạo khoảng trống cho các yếu tố của bạn cho phép người xem chọn một số tín hiệu thông tin nhất định nhanh hơn và thoải mái hơn.

Nếu mọi thứ thu hút sự chú ý của người xem thì sẽ không có gì được nghe thấy.

– Aaron Walter, 'Thiết kế cho cảm xúc'

Một cách dễ dàng để xác định không gian âm của bạn là sử dụng lưới mô-đun. Bằng cách đặt nó lên trên thiết kế của mình, bạn có thể dễ dàng hình dung mô-đun nào có thể để trống và mô-đun nào cần được điền vào.

Nhà thiết kế của Brunswicker, Nguồn: Codedesignmag.com

Nguyên tắc #3. Chọn một tiêu điểm duy nhất

Đã bao giờ khách hàng yêu cầu bạn làm cho logo to hơn chưa? Và sau đó làm cho dòng tiêu đề lớn hơn nữa?

Bạn không thể nhấn mạnh mọi thứ. Nó đánh bại điểm của thiết kế tốt. Cũng giống như thời gian, tiêu điểm là tương đối. Để một yếu tố nổi bật, yếu tố khác phải làm nền. Một số yếu tố cần chiếm ưu thế hơn những yếu tố khác để thiết kế của bạn hiển thịmột hệ thống phân cấp trực quan.

Xem thêm: Cyberpunk: Cách làm chủ phong cách tương lai Tiêu điểm trong một thiết kế là một yếu tố có trọng lượng trực quan lớn nhất. Đó là yếu tố thu hút ánh nhìn đầu tiên, hơn bất cứ thứ gì khác trong bố cục của bạn.

Một tiêu điểm sẽ thông báo cho khán giả của bạn nơi hành trình xem của họ bắt đầu trên thiết kế của bạn. Vì vậy, đó là phần mở đầu của câu chuyện mà bạn đang kể.

Điều này thường có thể đạt được bằng cách sử dụng một hình ảnh lớn hoặc một nguồn kiểu chữ lớn. Lưu ý mức độ hiệu quả của tiêu điểm bên dưới

Được thiết kế bởi Braulio Amado cho Bloomberg Businessweek, Nguồn: Thật tuyệt khi

Tuy nhiên, trong khi tiêu điểm sẽ thu hút sự chú ý của khán giả, quy tắc tiếp theo sẽ giúp hướng dẫn nó.

Nguyên tắc #4. Nghĩ về Sự gần gũi và Dòng chảy

Nguyên tắc của sự gần gũi rất đơn giản. Đảm bảo rằng các thành phần có liên quan với nhau được đặt cùng nhau.

Khoảng cách gần nhau cho thấy rằng các thành phần trực quan được kết nối và trở thành một đơn vị trực quan giúp tổ chức bố cục của bạn.

Vì vậy, chỉ các nội dung thiết kế theo nhóm có mối quan hệ với nhau và sử dụng các nhóm thông tin về thiết kế của bạn để hướng dẫn khán giả của bạn đến phần nội dung có liên quan mà họ cần xem. Đây còn được gọi là nguyên tắc dòng chảy.

Nguồn: Satori Graphics

Một thiết kế với dòng chảy tốt sẽ dẫn dắt mắt người xem xuyên suốt bố cục, từ phần tử này sang phần tử khác một cách dễ dàng. Tiêu điểm của bạn sẽ thu hút ánh nhìn và trở thành