Mục lục
Trong thiết kế đồ họa, bố cục được xem là “xương sống” của toàn bộ bản thiết kế. Nhiều người do không nắm được bố cục trong thiết kế đồ họa đã khiến cho bản thiết kế thiếu tính logic, chặt chẽ. Từ đó, việc truyền tải thông điệp đến khách hàng gặp nhiều khó khăn. Nhằm giúp việc thiết kế đồ họa được chính xác hơn, trong bài viết dưới đây UNICA sẽ chia sẻ cho bạn những nguyên tắc về bố cục hữu ích nhất.
Bạn đang đọc: Bố cục trong thiết kế đồ họa và các nguyên tắc trọng tâm
Bố cục trong quy trình thiết kế đồ họa được hiểu là việc sử dụng các mẫu, đồ họa hoặc khoảng trống để tạo nên một bản thiết kế hoàn hảo. Đây được xem là công cụ cốt lõi không hề thiếu khi triển khai thiết kế các dạng mẫu sản phẩm khác nhau. Bởi, trải qua việc kiến thiết xây dựng bố cục sẽ giúp cho văn bản, hình ảnh được sắp xếp một cách logic và khoa học .
>>> Xem ngay: Quy trình thiết kế bao bì đơn giản và ấn tượng chi tiết nhất
Bố cục là các mẫu đồ họa để tạo khoảng trống cho một bản thiết kế hoàn hảo
Thông thường, bố cục sẽ được phối hợp cùng với công cụ dàn trang layout để tạo thành những khối thiết kế hoàn hảo. Nếu bản thiết kế không được thiết kế xây dựng trên một bố cục hoàn hảo thì chắc như đinh mẫu sản phẩm của bạn sẽ “ sụp đổ ” trọn vẹn .
Bố cục trong thiết kế đồ họa cần tuân thủ 5 nguyên tắc nhất định, có như vậy bản thiết kế mới đạt được độ tuyệt vời và hoàn hảo nhất tuyệt đối. 5 nguyên tắc đơn cử như sau :
Một trong những yếu tố quan trọng số 1 là bố cục trong thiết kế. Bạn phải tìm ra được một điểm trọng tâm trong bản thiết kế của mình để hoàn toàn có thể lôi cuốn được ánh mắt người xem được trọng tâm bức hình của bạn. Để tìm được trọng tâm bằng cách đơn thuần nhất bạn hoàn toàn có thể sử dụng cách như trải qua các techniques hoặc độ tương phản và các đường lines .
Tương tự như việc bạn chỉ tay về một hướng và muốn người khác nhìn về hướng đó. Khi thiết kế bố cục bạn phải thiết kế sao cho dẫn dắt lôi cuốn được ánh nhìn của người khác khi xem bản thiết kế của bạn. Khi đó bạn buộc phải sử dụng các đường lines sẽ dẫn dắt từ điểm này sang điểm khác theo một cách xuyên thấu .
Hiệu ứng lân cận hay còn được gọi là visual space. Đây là hiệu ứng sử dụng yếu tố cốt lõi là thị giác nhằm mục đích tạo nên những mối link giữa các phần nội dung. Theo đó, bạn cần bảo vệ các phần thông tin được link với nhau .
Không gian trắng là phần khoảng chừng không trong bố cục. Tuy nhiên, nó không mang nghĩa là chỉ có đơn thuần mỗi màu trắng, mà nó hoàn toàn có thể là phần ngoài lề hoặc phần khoảng trống giữa các nội dung hoặc giữa các dòng .
Không gian trắng trong bố cục là phần khoảng chừng trắng giữa các phần với nhau
Căn chỉnh là bước quan trọng so với bố cục trong thiết kế đồ họa. Bước chỉnh sửa cần được triển khai trên các đối tượng người dùng khác nhau, như : text, hình ảnh hoặc text box … Sự chỉnh sửa này cần được triển khai đồng nhất, tránh thực trạng “ đầu voi đuôi chuột ” .
Tương phản trong bố cục của bản thiết kế đồ họa hoàn toàn khác với các kiểu bố cục khác, đó là tập trung vào những điểm khác nhau. Mà bố cục của thiết kế đồ họa sẽ tập trung vào việc tạo điểm nhấn. Điểm nhấn ở đây có thể được xây dựng dựa trên nền tảng màu sắc, hình ảnh, kích cỡ text.
Xem thêm: Các thuật ngữ cơ bản chuyên ngành thiết kế đồ họa
Phân cấp trong bố cục nhằm mục đích giúp cho người xem hoàn toàn có thể phân biệt được đâu là ý chính, đâu là ý phụ của một bản thiết kế hoàn hảo. Hay nói cách khác, đây là cách trình diễn nhằm mục đích tạo nên những điểm nhấn mạnh vấn đề khác nhau .
>>> Xem ngay: Bố cục trong thiết kế là gì? Quy luật sắp xếp bố cục trong thiết kế
Phân cấp ở đây là sự phân biệt giữa phần chính và phần phụ trong bố cục
Để có thêm kinh nghiệm cũng như kiến thức thì bạn có thể tham khảo khóa học “Học thiết kế đồ họa chuyên nghiệp” của giảng viên Bùi Thanh Tùng trên UNICA.
Khóa học ” Học thiết kế đồ họa chuyên nghiệp ” Khóa học học thiết kế đồ họa trực tuyến chuyên nghiệp sâu xa giúp bạn nắm được tư duy thiết kế hình ảnh, thiết kế đồ họa nâng cao, chuyên nghiệp. Bạn sẽ nắm được cách giải quyết và xử lý hình ảnh, thiết kế đồ họa chuyên nghiệp với ứng dụng Photoshop và Illustrator .
Xem thêm : Học thiết kế đồ hoạ chuyên nghiệp
Trong những năm 1920, định luật Gestalt về nhận thức thị giác đã được phát triển. Nó giải thích cách mắt chúng ta xử lý các hình ảnh khác nhau và cách bộ não của chúng ta diễn giải chúng. Bạn có thể đã nghe nói về những thứ như nguyên tắc gần hoặc quy tắc nhóm. Bài viết này đề cập đến một số điểm của lý thuyết Gestalt và nêu bật các khía cạnh thực tế trong nghiên cứu khoa học.
Bài viết của tác giả: Slava Shestopalov – Trưởng thiết kế tại eleks.com
- Hiệu ứng thị giác trong giao diện người dùng [phần 1]
2. Căn chỉnh các hình dạng khác nhau
Căn chỉnh thị giác là nối tiếp của chủ đề cân bằng thị giác. Hãy xem các đường sọc bên dưới. Liệu chúng có dài bằng nhau?
Câu trả lời là “có”. Tuy nhiên, khi nhìn lần đầu, đường sọc dưới trông ngắn hơn phần trên.
Thêm một ví dụ nữa về hai đường sọc này. Bạn có nhận thấy điều gì thay đổi không?
Tôi áp dụng việc căn chỉnh thị giác cho dải dưới. Cho phép các đỉnh nhọn dài thêm 20 pixel so với chiều dài của đường sọc trên. Sự điều chỉnh này làm cho cả hai hình dạng cân bằng về mặt thị giác.
Và bây giờ một số ví dụ phức tạp hơn về các đường sọc có hình dạng khác nhau.
Vì vậy, nếu bạn đang tạo ra một poster với sọc gấp dưới văn bản hoặc bạn đang đặt một dải “giảm giá” trên một thẻ sản phẩm trực tuyến, hãy lưu ý đến hiệu ứng thị giác. Các cạnh nhọn nên dài một chút so với phần còn lại của hình dạng, đặc biệt nếu đó là hình chữ nhật.
Vậy phải căn chỉnh văn bản và đoạn văn có nền như thế nào? Nó phụ thuộc vào mật độ hình ảnh của nền. Nếu đó là nền sáng, bạn có thể căn chỉnh đoạn được đánh dấu với phần còn lại của văn bản.
Vì nền sáng, nó không làm gián đoạn luồng văn bản thông thường.
Một cách tiếp cận khác có thể được sử dụng cho một văn bản dày đặc. Nền đen được căn chỉnh với phần còn lại của văn bản, văn bản màu trắng bên trong nó được đặt thụt lề.
Không giống như trường hợp với nền sáng, màu đen có trọng lượng hiệu ứng thị giác đáng kể. Để chèn một đoạn liền mạch, tốt hơn là căn chỉnh nó theo cách được hiển thị bên dưới.
Nguyên tắc tương tự sẽ hoạt động với các button và các trường nhập. Tất nhiên, nó không phải là một nguyên tắc nào cả, chỉ là một đề xuất dựa trên nhận thức thị giác của con người.
Nền sáng bên trái làm trực quan người dùng không tập trung vào trường nhập. Button “Send” không được căn chỉnh thẳng với cạnh phải của trường nhập vì button này tối hơn và trông nặng hơn từ góc nhìn trực quan.
Ở bên phải, trường nhập có đường viền và tôi căn chỉnh chúng với các nhãn, trường nhập được đưa thụt vào bên trong khung. Button “Send” có cạnh hình tam giác và được di chuyển một chút về phía phải để tạo cân bằng với các trường nhập hình chữ nhật ở trên.
Và ở đây là cách tiếp cận khác của sự căn chỉnh – sự hiệu chỉnh button văn bản và icon. Nhìn vào các button bên dưới. Liệu văn bản có đang ở vị trí trung tâm?
Bí quyết là ở button bên phải, tôi đã di chuyển chữ sang bên trái một chút, vì cạnh phải là hình tam giác. Hơn nữa, button mũi tên rộng hơn 40 pixel để trông bằng hình chữ nhật từ phương diện thị giác.
Không chỉ các button văn bản được căn chỉnh về hàng ngang, mà còn có các căn chỉnh giữa chữ và nền. Phương pháp đầu tiên tôi muốn nói đến được sử dụng trong giao diện của nhiều hệ điều hành, trang web và ứng dụng khác nhau. Đó là căn chỉnh dựa trên chiều cao của một phông chữ hoa [được gọi là cap-height ]. Nó bằng với chiều cao của chữ “H” hoặc “I”.
Về cơ bản, không gian phía trên và bên dưới một chữ cái và khoảng cách hai bên của một button phải bằng nhau. Bởi vì nhiều chữ cái tiếng Anh sẽ có phần trên cao [l, t, d, b, k, h] cũng như cũng có nhiều chữ cái có phần đuôi dài [y, j, g, p].
Một phương pháp khác là căn chỉnh tên và nền, bằng cách sử dụng chiều cao của một chữ thường [được gọi là x-height]. Trong các font chữ có chân và không chân, nó bằng chiều cao của chữ “x”.
Phương pháp này cũng có ý nghĩa bởi vì hiệu ứng thị giác chính của văn bản được tập trung ở khu vực đặt các chữ cái viết thường.
Có sự khác biệt nào giữa các phương pháp này không? Đúng, có một sự khác biệt. Và nó không phải là lớn.
Các ví dụ khác để so sánh bên dưới. Phương pháp cap-height bên cột trái, được sử dụng tốt cho “Cancel” và “OK” – một trong các button được sử dụng rộng rãi – bởi vì “Cancel” không có đuôi và “OK” cũng vậy. Phương pháp x-height được hiển thị ở cột bên phải, chỉ tốt hơn cho nút “Sync”, vì cả phần tử trên và phần dưới đều nằm ngoài; các từ “Cancel” và “OK” dường như bị đặt quá cao.
Đối với các button icon hơi khác so với các button văn bản. Hãy đặt icon “Send” trên nền button tròn. Biến thể nào trông cân bằng trực quan hơn?
Hy vọng bạn đã nhận thấy rằng có điều gì đó sai trái. Nó xảy ra do các phương thức căn chỉnh khác nhau. Icon bên trái nên được xử lý trên hình vuông. Nó chỉ đúng khi bạn gửi tệp SVG hoặc PNG cho lập trình viên, đó là một hình vuông với một chiếc máy bay giấy trên đó. Biến thể phù hợp cho thấy icon được đặt vào hình vuông sẽ có các cạnh sắc nét và khoảng cách bằng nhau so với nền button tròn.
Nếu bạn đang chuẩn bị file cho lập trình viên, bạn cần dành ra một số khu vực trống, bạn có thể căn giữa các icons để đúng theo hiệu ứng thị giác.
Câu chuyện tương tự với button “Play”. Nếu bạn căn chỉnh thẳng hàng các hình dạng này – hình chữ nhật, tròn và hình tam giác – chúng sẽ trông kỳ cục.
Nếu bạn muốn định vị thị giác tốt hơn cho hình tam giác, hãy căn chỉnh nó phù hợp với hình tròn bao quanh.
Những điều cần ghi nhớ
- Hình dạng với các đỉnh nhọn phải lớn hơn hoặc dài hơn để cân bằng với các vật thể hình chữ nhật lân cận.
- Cap-height là phương pháp hiệu quả để định vị các button chữ trên nền.
- Một trong những cách hiệu quả để định vị chính xác một icon hình tam giác trên một nút là căn chỉnh nó trong vòng tròn bao quanh.
—
Còn tiếp…
Biên dịch: Thao Lee
Nguồn: medium
Ảnh bìa: Balraj Chana
- Lời khuyên khi thiết kế UI trên nút CTA [Call To Action]
- Lời khuyên hữu ích cho thiết kế trang home
- Thiết kế Header cho Website: Khái niệm, phân loại và cách ứng dụng