Tin tức

10 mẫu layout chuẩn cho thiết kế web - phần 1

04/03/2013


Thiết kế layout có thể là bước dễ dàng nhất, cũng có thể là bước khó khăn nhất trong thiết kế web.  Đôi khi một designer có thể nảy ra một ý tưởng tuyệt vời trong vài phút, đôi khi vẫn người designer đó lại mất cả ngày cho một công việc tương tự.

Mỗi một dự án đều là duy nhất và cần một giải pháp duy nhất, nhưng sẽ hữu ích để xây dựng một số bố cục/sắp xếp cố định trong đầu, để có thể sử dụng khi cảm thấy khó khăn, không có ý tưởng. 10 layout dưới đây chắc sẽ đủ cho bạn vượt qua được những "ca khó đỡ nhất" của nghiệp thiết kế, khi bạn không thể nào nghĩ ra cách tốt nhất để bố trí nội dung trang web.

Keeping It Simple - Hãy thiết kế thật đơn giản

Thiết kế layout là công việc đầy tính nghệ thuật và khoa học. Để tạo ra được sản phẩm nhìn vào thấy cuốn hút và độc đáo, người thiết kế cần có con mắt nghệ thuật. Tuy nhiên, với những chỉ dẫn dưới đây, bạn có thể dễ dàng tạo được những layout vững chắc, hữu ích cho rất nhiều trường hợp. Những nguyên tắc này bao gồm việc chọn và gán với một bố cục, cấu trúc khoảng trống, bố trí những phần tử quan trọng thông qua kích thước, vị trí...

Người thiết kế thường quá nhấn mạnh vào layout. Chúng ta có xu hướng tiếp cận theo suy nghĩ, thiết kế phải là duy nhất để xứng đáng với thời gian ta bỏ ra, và với đồng tiền của khách hàng. Tuy nhiên, nếu bạn có một cái nhìn toàn diện về thiết kế web, bạn sẽ thấy trong nhiều trường hợp, không nhất thiết phải thế. Nhiều website lớn, đẹp thường sử dụng layout khá đơn giản, và không hề duy nhất. Đúng là những trang web khiến dân thiết kế phải trầm trò thường là những trang có thiết kế phá cách, khác thường, nhưng các khách hàng tầm trung thường chỉ muốn một website hữu ích, sáng sủa, và nhìn chuyên nghiệp.

Nếu bạn là một nhà thiết kế web, hãy bookmark bài viết này, và quay trở lại xem khi nào bạn cảm thấy bế tắc trong việc nghĩ layout cho web nhé. Hãy nhớ rằng mỗi một layout được giới thiệu dưới đây, là một gợi ý cơ bản ban đầu để bạn thoải mái nhào nặn và sửa đổi cho phù hợp. Hãy dựa theo yêu cầu của khách hàng, để biến tấu và thỏa sức sáng tạo trên những layout sẵn có này.

Three Boxes - Bố cục 3 hộp

Có lẽ đây là layout đơn giản nhất trong danh sách. Bạn hẳn sẽ nghĩ rằng, nó thật quá đơn giản để thỏa mãn nổi yêu cầu của bạn. Nhưng nếu để tâm, bạn hoàn toàn có thể bố trí chúng một cách linh hoạt.

Layout 3 hộp bố trí những tính năng chính trong một khu vực đồ họa lớn ở trên, và hai ô nhỏ bên dưới. Mỗi một ô có thể chứa đồ họa, text, hoặc cả hai. Ô chính thường sẽ là một slide bằng jquery trình diễn bất kỳ nội dung gì bạn muốn.

Các ô nhỏ phía trên là vị trí được sử dụng để đặt logo, tên công ty, điều hướng, thanh tìm kiếm, và bất kỳ nội dung, chức năng cơ bản nào của một website.

Thiết kế này phù hợp để làm trang portfolio hoặc web chứa ít hình ảnh. Mỗi một hình ảnh có thể dẫn tới một trang gallery lớn và phức tạp hơn. Hãy kiên nhẫn đọc tiếp, ta sẽ xem cách kết hợp ý tưởng này để tiến xa hơn.

Ứng dụng thực tiễn:

Dưới đây là một ví dụ thực tiễn về layout 3 hộp ở trang portfolio của Peter Verkuilen. Như gợi ý ở trên, phần đồ họa chính hiển thị một số dự án của Peter. Click vào một trong số các box, bạn sẽ chuyển sang trang chi tiết hơn để tìm hiểu thông tin.

Đơn giản, nhưng vẫn hiệu quả và hấp dẫn. Bạn có thể thiết kế và phủ kín thông tin một trang như này trong chưa đầy 1 giờ làm việc.

Phần tiếp: 10 layout chuẩn cho thiết kế web - phần 2.

Design Shack