Alignment - Nguyên tắc cơ bản trong thiết kế
Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những nguyên tắc cơ bản nhất trong thiết kế: Alignment. Chủ đề tưởng chừng như đơn giản này lại khá phức tạp và là một trong những thiếu sót mà các designer ngày nay cần lưu ý.
Cần nắm vững cách sử dụng và biết được khi nào việc sử dụng alignment sẽ giúp bạn trở thành một designer giỏi hơn và đó cũng sẽ là nền tảng cho quá trình phát triển sự nghiệp của bạn.
Giới thiệu về Alignment
Đối với nhiều người, một cuộc thảo luận về alignment giống như một bài tập dư thừa. Lý thuyết thiết kế này dường như chỉ dành cho những người chưa bao giờ thiết kế bất cứ thứ gì, nó không dành cho một cộng đồng thiết kế chuyên nghiệp thường xuyên có những trang web như vậy. Điều đó có đúng không?
Bản thân tôi sẽ đưa ra lập luận cho rằng những cuộc thảo luận như vậy sẽ rất giúp ích cho những người mới bắt đầu, để họ có một kiến thức vững chắc, là nền tảng cho tất cả các kiểu thiết kế. Một khi đã nắm bắt được kiến thức, bạn sẽ dễ dàng sử dụng cho mỗi layout như một designer.
Mặc dù có ý kiến cho rằng những concept này phụ thuộc vào cốt lõi những gì designer làm, dường như alignment vẫn là nguyên nhân cốt lõi tạo ra các thiết kế khá xấu trên web ngày nay mà tôi đã thấy.
Các designer thường sử dụng alignment theo trực giác nhưng điều này có thể mang lại thất bại khi không nắm vững kiến thức.
Sắp xếp mọi thứ
Ý tưởng cơ bản của alignment đơn giản chỉ là: sắp xếp mọi thứ. Ngoài thiết kế cơ bản, với những chủ đề hoàn toàn khác nhau, mỗi yếu tố mà bạn sử dụng trên trang web cần được suy nghĩ kỹ càng khi đặt ở một vị trí nào đó.
Có thể thấy đây là một kỹ thuật cơ bản và mọi người đều có thể làm được, điều đó có đúng không?. Hoàn toàn sai. Lưu ý rằng trang web sau đã được dùng làm gợi ý cho thư viện CSS của chúng tôi. Tôi sử dụng thư viện không chỉ để truyền cảm hứng mà còn như công cụ giảng dạy. Designer là người biết nắm bắt cơ hội của mình, luôn nâng cao kỹ năng mỗi ngày và ham học hỏi.
Đây là một ví dụ rất điển hình và là chính xác những gì mà bạn có thể thấy mỗi ngày trong thư viện của chúng tôi. Giá trị thẩm mỹ ở đây không tệ. Gam màu sắc tươi sáng và texture thú vị thu hút sự chú ý của bạn. Tuy nhiên, alignment ở đây thật sự không đẹp.
Những vấn đề này có thể khó đối với nhiều người. Vì lý do này, tôi luôn khuyên bạn nên đơn giản hóa một thiết kế để thấy được các khối hình dạng cơ bản. Bạn có thể thấy tôi thường xuyên làm điều này trong một số bài viết mà tôi đã đăng và bạn cũng nên thử với một vài thiết kế của bạn.
Bây giờ, chúng ta thấy những khối đồ họa trong mô hình đơn giản hóa, chúng ta có thể dễ dàng phân tích không gian mà những khối đồ họa chiếm giữ và giải quyết vấn đề có liên quan.
Lưu ý rằng các yếu tố trên trang nằm khá rải rác. Khu vực nội dung chính ở phía dưới không thẳng hàng với banner ở phía trên bên trái hoặc các yếu tố rải rác bên phải. Hơn nữa, logo Facebook dường như khá nhỏ và không nổi bật, headline lệch so với navigation, vì vậy nó lệch so với phần nội dung.
Mặt dù thiết kế khá đẹp khi nhìn lướt qua nhưng chúng tôi thấy cần cấu trúc lại. Có 2 thứ cần điều chỉnh là alignment và negative space.
Những concept này gắn kết khá chặt chẽ với nhau. Đối với negative space, cần tập trung vào những khoảng trống và yếu tố đối xứng cơ bản.
Trong bài này, chúng tôi sẽ tập trung vào cách sử dụng alignment cơ bản mà bạn thường thấy trong layout phức tạp.
Center Alignlent (canh lề giữa)
Layout trung tâm là phương pháp lựa chọn của tất cả mọi người, ngoại trừ các designer. Với một số lý do, tập trung các yếu tố ở giữa có vẻ là những gì bạn phải làm. Chắc chắn công việc chính của designer là tập trung vào sự đơn giản.
Tôi đã đề cập đến vấn đề này một vài năm trước khi tôi đang tạo một thiết kế cần cho developer chuyển mã. Khi anh ta cho tôi thấy phiên bản hoàn thành, tất cả mọi thứ đều chuyển từ canh trái sang canh giữa. Anh ta giải thích đơn giản rằng anh ấy luôn sắp xếp mọi thứ ở trung tâm vì như vậy trông có vẻ đẹp.
Trên thực tế, canh giữa là sự lựa chọn cuối cùng mà bạn có thể sử dụng.
Không khó khi bạn tập trung nhiều hơn để có một cái nhìn tổng thể về layout và tập trung vào nội dung cụ thể.
Nên sử dụng canh giữa khi nào
Điều đó không có nghĩa rằng nên tránh sử dụng canh giữa. Bản thân tôi thấy việc sử dụng chúng cho demo trang web là rất tốt. Quan trọng là phải biết khi nào nên sử dụng chúng.
Tôi thấy rằng sử dụng canh giữa tốt nhất là khi có rất ít nội dung trên trang. Layout càng phức tạp, canh giữa càng không hiệu quả. Nếu một trang không có quá nhiều yếu tố, việc canh giữa có thể rất hiệu quả.
Left Alignment (Canh lề trái)
Mặc dù canh trái dường như khá nhàm chán, cứng nhắc và có thể là mặc định của bạn, hãy sử dụng canh trái một cách hiệu quả cho công việc của bạn.
Chúng tôi đã sử dụng canh lề trái cho phần nội dung. Khi xem một cuốn sách hoặc báo, bạn sẽ thấy canh trái được sử dụng rất nhiều. Bạn sẽ thấy chúng trên Facebook, Google, Twitter và cả các trang web lớn khác.
Canh trái dường như là thường lệ, hoặc ít nhất là do văn hóa đọc từ trái sang phải. Bạn không nên hoàn toàn phụ thuộc vào canh trái cho tất cả mọi thứ vì đó chỉ là con đường an toàn.
Nên sử dụng canh lề trái khi nào
Có thể sử dụng canh trái trong tất cả các trường hợp nhưng đặc biệt khi có quá nhiều văn bản. Chỉ cần nhìn vào trang mà bạn đang đọc đây, nếu sử dụng canh giữa, nó sẽ trở thành cơn ác mộng.
Lưu ý rằng đặc biệt trên trang web, canh trái đôi khi không tốt bằng canh giữa. Ví dụ, HTML thường chứa những paragraph và hình ảnh căn lề trái nhưng sau đó nó chuyển thành canh giữa khi sử dụng CSS.
Right Alignment (Canh lề phải)
Canh phải hiếm khi được sử dụng vì chúng ta đọc từ trái sang phải, vậy nên canh phải chỉ phù hợp cho cái gì đó cần dùng cạnh phải của trang.
Tuy nhiên, hoàn toàn có thể sử dụng canh giữa cho thiết kế của bạn, đặc biệt là trong in ấn (nó dường như gây nhiều bất ngờ hơn).
Nên sử dụng canh phải khi nào
Không thường xuyên nhưng đôi khi canh phải sẽ tạo ra sự độc đáo cho thiết kế của bạn. Nếu bạn cần một thiết kế thật sự nổi bật và khác biệt, canh phải sẽ là sự lựa chọn tối ưu.
Canh đều (Justifying Alignment) trên trang web
Alignment giúp trang web rõ ràng chính là canh đều. Dường như nó phát huy tối đa khi bạn sử dụng nó như một yếu tố mặc định.
Điều thú vị về thiết kế cho trang web là bạn thường kết hợp các cách sắp xếp. Bạn thường nghe các designer gợi ý không bao giờ dùng kết hợp nhưng lời khuyên này không hiệu quả trong thực tế.
Thay vì chọn một cách cho tất cả các yếu tố, bạn có thể chọn riêng cho từng yếu tố trên trang. Lưu ý cách tôi bắt đầu cuộc thảo luận này bằng ví dụ về alignment của trang web nhưng sau đó là thảo luận về các mục alignment.
Một khi bạn đã quyết định kiểu alignment cho văn bản và hình ảnh trên trang web của bạn, hãy đặt chúng lại với nhau và kết hợp với canh đều. Có thể bổ sung sử dụng canh đều cho ví dụ ban đầu.
Lưu ý cách trang web ở trên sử dụng canh trái, nhưng mọi thứ bên phải cũng rất thẳng hàng, điều đó giúp trang web trông gọn và đẹp hơn.
Đây là thiết kế khá rõ ràng và chuyên nghiệp. Nó có thể không phù hợp với tất cả các dự án nhưng tôi thường thấy các designer cố gắng đạt được và tôi muốn giải quyết những vấn đề như vậy.
Đây là một trong những lý do mà hệ thống grid trở nên khá phổ biến. Cho tất cả vào grid và bạn sẽ dễ dàng sử dụng theo alignments.
Kết luận
Tóm lại, khi cần thiết, việc sử dụng aligment có thể giúp bạn dễ dàng theo dõi thông tin. Canh giữa có thể chấp nhận được nhưng khó khi sử dụng với tất cả nội dung trên trang.
Hãy nhớ rằng alignment liên quan đến toàn bộ các mục cụ thể trên trang cũng như việc sắp xếp các đối tượng trên tổng thể trang. Hãy dành thời gian cho mỗi thiết kế để đảm bảo các yếu tố sẽ phù hợp với mọi thứ trên trang. Alighment áp dụng theo cả chiều dọc và chiều ngang của các cạnh thiết kế.
Giới thiệu về Alignment
Đối với nhiều người, một cuộc thảo luận về alignment giống như một bài tập dư thừa. Lý thuyết thiết kế này dường như chỉ dành cho những người chưa bao giờ thiết kế bất cứ thứ gì, nó không dành cho một cộng đồng thiết kế chuyên nghiệp thường xuyên có những trang web như vậy. Điều đó có đúng không?
Bản thân tôi sẽ đưa ra lập luận cho rằng những cuộc thảo luận như vậy sẽ rất giúp ích cho những người mới bắt đầu, để họ có một kiến thức vững chắc, là nền tảng cho tất cả các kiểu thiết kế. Một khi đã nắm bắt được kiến thức, bạn sẽ dễ dàng sử dụng cho mỗi layout như một designer.
Mặc dù có ý kiến cho rằng những concept này phụ thuộc vào cốt lõi những gì designer làm, dường như alignment vẫn là nguyên nhân cốt lõi tạo ra các thiết kế khá xấu trên web ngày nay mà tôi đã thấy.
Các designer thường sử dụng alignment theo trực giác nhưng điều này có thể mang lại thất bại khi không nắm vững kiến thức.
Sắp xếp mọi thứ
Ý tưởng cơ bản của alignment đơn giản chỉ là: sắp xếp mọi thứ. Ngoài thiết kế cơ bản, với những chủ đề hoàn toàn khác nhau, mỗi yếu tố mà bạn sử dụng trên trang web cần được suy nghĩ kỹ càng khi đặt ở một vị trí nào đó.
Có thể thấy đây là một kỹ thuật cơ bản và mọi người đều có thể làm được, điều đó có đúng không?. Hoàn toàn sai. Lưu ý rằng trang web sau đã được dùng làm gợi ý cho thư viện CSS của chúng tôi. Tôi sử dụng thư viện không chỉ để truyền cảm hứng mà còn như công cụ giảng dạy. Designer là người biết nắm bắt cơ hội của mình, luôn nâng cao kỹ năng mỗi ngày và ham học hỏi.
Đây là một ví dụ rất điển hình và là chính xác những gì mà bạn có thể thấy mỗi ngày trong thư viện của chúng tôi. Giá trị thẩm mỹ ở đây không tệ. Gam màu sắc tươi sáng và texture thú vị thu hút sự chú ý của bạn. Tuy nhiên, alignment ở đây thật sự không đẹp.
Những vấn đề này có thể khó đối với nhiều người. Vì lý do này, tôi luôn khuyên bạn nên đơn giản hóa một thiết kế để thấy được các khối hình dạng cơ bản. Bạn có thể thấy tôi thường xuyên làm điều này trong một số bài viết mà tôi đã đăng và bạn cũng nên thử với một vài thiết kế của bạn.
Bây giờ, chúng ta thấy những khối đồ họa trong mô hình đơn giản hóa, chúng ta có thể dễ dàng phân tích không gian mà những khối đồ họa chiếm giữ và giải quyết vấn đề có liên quan.
Lưu ý rằng các yếu tố trên trang nằm khá rải rác. Khu vực nội dung chính ở phía dưới không thẳng hàng với banner ở phía trên bên trái hoặc các yếu tố rải rác bên phải. Hơn nữa, logo Facebook dường như khá nhỏ và không nổi bật, headline lệch so với navigation, vì vậy nó lệch so với phần nội dung.
Mặt dù thiết kế khá đẹp khi nhìn lướt qua nhưng chúng tôi thấy cần cấu trúc lại. Có 2 thứ cần điều chỉnh là alignment và negative space.
Những concept này gắn kết khá chặt chẽ với nhau. Đối với negative space, cần tập trung vào những khoảng trống và yếu tố đối xứng cơ bản.
Trong bài này, chúng tôi sẽ tập trung vào cách sử dụng alignment cơ bản mà bạn thường thấy trong layout phức tạp.
Center Alignlent (canh lề giữa)
Layout trung tâm là phương pháp lựa chọn của tất cả mọi người, ngoại trừ các designer. Với một số lý do, tập trung các yếu tố ở giữa có vẻ là những gì bạn phải làm. Chắc chắn công việc chính của designer là tập trung vào sự đơn giản.
Tôi đã đề cập đến vấn đề này một vài năm trước khi tôi đang tạo một thiết kế cần cho developer chuyển mã. Khi anh ta cho tôi thấy phiên bản hoàn thành, tất cả mọi thứ đều chuyển từ canh trái sang canh giữa. Anh ta giải thích đơn giản rằng anh ấy luôn sắp xếp mọi thứ ở trung tâm vì như vậy trông có vẻ đẹp.
Trên thực tế, canh giữa là sự lựa chọn cuối cùng mà bạn có thể sử dụng.
Không khó khi bạn tập trung nhiều hơn để có một cái nhìn tổng thể về layout và tập trung vào nội dung cụ thể.
Nên sử dụng canh giữa khi nào
Điều đó không có nghĩa rằng nên tránh sử dụng canh giữa. Bản thân tôi thấy việc sử dụng chúng cho demo trang web là rất tốt. Quan trọng là phải biết khi nào nên sử dụng chúng.
Tôi thấy rằng sử dụng canh giữa tốt nhất là khi có rất ít nội dung trên trang. Layout càng phức tạp, canh giữa càng không hiệu quả. Nếu một trang không có quá nhiều yếu tố, việc canh giữa có thể rất hiệu quả.
Left Alignment (Canh lề trái)
Mặc dù canh trái dường như khá nhàm chán, cứng nhắc và có thể là mặc định của bạn, hãy sử dụng canh trái một cách hiệu quả cho công việc của bạn.
Chúng tôi đã sử dụng canh lề trái cho phần nội dung. Khi xem một cuốn sách hoặc báo, bạn sẽ thấy canh trái được sử dụng rất nhiều. Bạn sẽ thấy chúng trên Facebook, Google, Twitter và cả các trang web lớn khác.
Canh trái dường như là thường lệ, hoặc ít nhất là do văn hóa đọc từ trái sang phải. Bạn không nên hoàn toàn phụ thuộc vào canh trái cho tất cả mọi thứ vì đó chỉ là con đường an toàn.
Nên sử dụng canh lề trái khi nào
Có thể sử dụng canh trái trong tất cả các trường hợp nhưng đặc biệt khi có quá nhiều văn bản. Chỉ cần nhìn vào trang mà bạn đang đọc đây, nếu sử dụng canh giữa, nó sẽ trở thành cơn ác mộng.
Lưu ý rằng đặc biệt trên trang web, canh trái đôi khi không tốt bằng canh giữa. Ví dụ, HTML thường chứa những paragraph và hình ảnh căn lề trái nhưng sau đó nó chuyển thành canh giữa khi sử dụng CSS.
Right Alignment (Canh lề phải)
Canh phải hiếm khi được sử dụng vì chúng ta đọc từ trái sang phải, vậy nên canh phải chỉ phù hợp cho cái gì đó cần dùng cạnh phải của trang.
Tuy nhiên, hoàn toàn có thể sử dụng canh giữa cho thiết kế của bạn, đặc biệt là trong in ấn (nó dường như gây nhiều bất ngờ hơn).
Nên sử dụng canh phải khi nào
Không thường xuyên nhưng đôi khi canh phải sẽ tạo ra sự độc đáo cho thiết kế của bạn. Nếu bạn cần một thiết kế thật sự nổi bật và khác biệt, canh phải sẽ là sự lựa chọn tối ưu.
Canh đều (Justifying Alignment) trên trang web
Alignment giúp trang web rõ ràng chính là canh đều. Dường như nó phát huy tối đa khi bạn sử dụng nó như một yếu tố mặc định.
Điều thú vị về thiết kế cho trang web là bạn thường kết hợp các cách sắp xếp. Bạn thường nghe các designer gợi ý không bao giờ dùng kết hợp nhưng lời khuyên này không hiệu quả trong thực tế.
Thay vì chọn một cách cho tất cả các yếu tố, bạn có thể chọn riêng cho từng yếu tố trên trang. Lưu ý cách tôi bắt đầu cuộc thảo luận này bằng ví dụ về alignment của trang web nhưng sau đó là thảo luận về các mục alignment.
Một khi bạn đã quyết định kiểu alignment cho văn bản và hình ảnh trên trang web của bạn, hãy đặt chúng lại với nhau và kết hợp với canh đều. Có thể bổ sung sử dụng canh đều cho ví dụ ban đầu.
Lưu ý cách trang web ở trên sử dụng canh trái, nhưng mọi thứ bên phải cũng rất thẳng hàng, điều đó giúp trang web trông gọn và đẹp hơn.
Đây là thiết kế khá rõ ràng và chuyên nghiệp. Nó có thể không phù hợp với tất cả các dự án nhưng tôi thường thấy các designer cố gắng đạt được và tôi muốn giải quyết những vấn đề như vậy.
Đây là một trong những lý do mà hệ thống grid trở nên khá phổ biến. Cho tất cả vào grid và bạn sẽ dễ dàng sử dụng theo alignments.
Kết luận
Tóm lại, khi cần thiết, việc sử dụng aligment có thể giúp bạn dễ dàng theo dõi thông tin. Canh giữa có thể chấp nhận được nhưng khó khi sử dụng với tất cả nội dung trên trang.
Hãy nhớ rằng alignment liên quan đến toàn bộ các mục cụ thể trên trang cũng như việc sắp xếp các đối tượng trên tổng thể trang. Hãy dành thời gian cho mỗi thiết kế để đảm bảo các yếu tố sẽ phù hợp với mọi thứ trên trang. Alighment áp dụng theo cả chiều dọc và chiều ngang của các cạnh thiết kế.
Alignment - Nguyên tắc cơ bản trong thiết kế
Reviewed by Unknown
on
06:05
Rating:
Reviewed by Unknown
on
06:05
Rating:
Không có nhận xét nào: