10 layout dưới đây là những bố cục phổ biến nhất có thể áp dụng trong trường hợp bạn đang gặp khó khăn để đưa ra một layout độc đáo cho dự án của mình.. Lưu ý rằng các website này được t
Trang 1Chung Huynh
10 web layout cơ bản trong thiết kế website – p1
thietke.website/hoc-thiet-ke-web-layout/web-layout/10-web-layout-co-ban-trong-thiet-ke-website-p1
Layout (bố cục, dàn trang) luôn có cả hai, vừa là phần việc dễ nhất và cũng là phần khó
nhất trong công việc thiết kế web Đôi khi, nhà thiết kế web có thể sáng tạo ra một
layout tuyệt vời chỉ trong vòng vài phút và có lúc họ mất vài ngày cũng cho một công việc tương tự
Mỗi dự án web luôn đòi hỏi một sự sáng tạo độc nhất, tuy nhiên bạn cũng nên có một
cuốn cẩm nang để có thể tìm kiếm sự sáng tạo trong lúc bế tắc 10 layout dưới đây là
những bố cục phổ biến nhất có thể áp dụng trong trường hợp bạn đang gặp khó khăn để đưa ra một layout độc đáo cho dự án của mình
Luôn tìm kiếm sự đơn giản
Bố cục dàn trang là một công việc luôn đi đôi giữa nghệ thuật và khoa học Tạo ra một
thứ gì đó có hình ảnh hấp dẫn và độc đáo cần phải có một đôi mắt của một nghệ sĩ Tuy nhiên, có một số layout phổ biến có bố cục vững chắc có thể đáp ứng trong mọi trường
hợp Chúng phù hợp với những quy tắc thiết kế cơ bản như sự so hàng, cấu trúc,
khoảng trống, sự sắp xếp to nhỏ để làm nổi bật những phần tử chính, vị trí …
Các nhà thiết kế web thường đau đầu trong quá trình thiết kế bố cục trang Họ thường
phải luôn bám sát theo tiêu chí dự án nhưng vẫn phải đảm báo đưa ra một thiết kế độc đáo tương ứng với thời gian và tiền bạc khách hàng đã trả Tuy nhiên nếu quan sát các website đang có mặt trên internet, điều này chưa chắc hoàn toàn đúng và không cần
thiết trong một vài trường hợp Các website đẹp thường sử dụng những layout tương
đối đơn giản và chẳng có một chút gì thật sự khác biệt Sự thật là các nhà thiết kế web
luôn muốn có một layout độc đáo, phá cách, nhưng khách hàng của họ thì chỉ muốn thứ
gì đó dễ sử dụng, sạch sẽ và chuyên nghiệp
Trong bài viết này, bạn sẽ có cơ hội tìm hiểu 10 layout rất phổ biến mà bạn có thể nhìn thấy tương tự ở vô số các website trên internet Lưu ý rằng các website này được thiết kế theo kiểu có màu sắc, hình ảnh đồ họa và font chữ riêng biệt nhưng cấu trúc vẫn theo
một khuôn mẫu phổ biến của các thiết kế cơ bản Bài viết sẽ trình bày theo cách: đầu
tiên đưa ra một số khung sườn layout đơn giản để bạn có thể dựa trên đó để triển khai các sáng tạo của riêng mình, sau đó sẽ cho bạn một hoặc hai ví dụ những website thật đang sử dụng cấu trúc layout này
Trang 21/Kiểu 3 khối hộp
Đây là cách layout đơn giản nhất trong
trong danh sách Thực tế, bạn luôn nghĩ
rằng thiết kế đơn giản sẽ không bao giờ
phù hợp theo yêu cầu của bạn Nhưng
trong trường hợp này, bạn sẽ ngạc nhiên
với sự linh hoạt trong bố cục của kiểu thiết
kế này
Thiết kế ba khối hộp có tính năng bao gồm
một khối hộp chính theo sau đó là 2 khối
hộp phụ bên dưới Mỗi khối hộp bạn có
thể thay thế bằng hình ảnh đồ họa, khối
chữ hoặc kết hợp cả hai Khối hộp chính
trong layout này là một slider jQuery (auto scrolling banner), có chức năng trình diễn
nhiều nội dung khác nhau theo cách bạn muốn
Những ô khung có sẵn phía trên có thể thay thế bằng logo, tên công ty, liên kết các trang, hay hộp tìm kiếm hoặc có thể dùng cho các thông tin và nội dung khác thường thấy ở các website như địa chỉ, slogan …
Layout này lý tưởng với các trang web cá nhân hoặc cần trình bày một số hình mẫu đồ họa Mỗi hình ảnh có thể liên kết đến một ảnh lớn hơn hoặc đến một thư viện các hình ảnh đồ sộ hơn Ở phần sau của bài viết, chúng ta sẽ xem xét cách làm thế nào để biến
hóa ý tưởng này thành nhiều hơn nữa
Ví dụ thực tế
Bên dưới là một thiết kế đẹp được thực hiện dựa trên kiểu layout 3 khối hộp của trang cá nhân Peter Verkuilen Như chúng tôi đã từng đề nghị ở trên, khối hộp chính được sử
dụng để làm hộp trình bày các dự án gần nhất của Peter Khi nhấp chuột vào khối hộp,
nó sẽ dẫn liên kết đến trang chi tiết dự án với nhiều thông tin hơn
Đơn giản, hiệu quả và hấp dẫn Bạn có thể thiết kế website riêng cho mình theo kiểu
này chỉ trong vòng một giờ!
Trang 32/Hiệu ứng màn hình 3 chiều
Ngày nay, có rất nhiều hiệu ứng đẹp mắt
phổ biến được các lập trình viên phát triển
liên tục Kiểu các màn hình 3 chiều như
dưới đây là một trong những hiệu ứng
được các nhà thiết kế web ưa chuộng.
Layout này thích hợp cho các trang web
trưng bày sản phẩm, thư viện hình ảnh,
hoặc trang cá nhân Ý tưởng của layout
này là làm nổi bật những hình ảnh, tạo ấn
tượng cho người xem với hiệu ứng cuộn ảnh 3 chiều
Ví dụ thực tế
Trang pixelworkshop là một trong những website áp dụng thủ thuật này, đây là website bán giao diện làm sẵn Họ đã dùng hiều ứng 3 chiều để giới thiệu các screenshot sản
phẩm của mình thật sự ấn tượng
Trang 43/Kiểu lưới nâng cao (Advanced Grid)
Ngày nay đa số các website được thiết kế theo
dạng lưới (grid) Thiết kế theo dạng lưới thường bị
cho là nhàm chán vì có layout tương tự nhau Tuy
nhiên, kiểu layout dưới đây sẽ giúp bạn nghĩ khác
Layout này bao gồm một phần chính dành cho
banner ảnh hoặc hình đồ họa, ở phần bên dưới nó
chia ra 2 bên đều nhau, nhưng bên trái sử một khối
nguyên, còn bên phải chia thành những khối nhỏ
Nhờ sự biến hóa, nên layout vẫn giữ được bố cục
vững chắc và có những chi tiết nhỏ tránh gây nhàm
chán
Ví dụ thực tế
Website bên dưới là một ví dụ layout đẹp sử dụng kiểu lưới nâng cao, đây là một website bán trang phục trẻ em Thiết kế này áp dụng linh hoạt bố trí các khối với kích thước khác nhau trên nền lưới đã được định trước, giúp phần trình bày nội dung rất hợp lý Thực tế, banner ở header tuy là một khối nhưng được ghép từ 2 ảnh: ảnh tổng thể và ảnh chi tiết sản phẩm
Như đã nói ở trên, khi bạn có một layout cơ bản, bạn có thể thay đổi linh hoạt các khối
dù vẫn dựa trên nền lưới bên dưới để có một thiết kế web khác biệt.
Trang 54/Kiểu sử dụng ảnh đồ họa làm trọng tâm
Đôi khi bạn có quá ít nội dung nhưng bị
yêu cầu phải trình bày trên một trang Đây
là lúc bạn cần tìm kiếm một hình ảnh đại
diện, một biểu tượng hay những hình ảnh
có liên quan đến nội dung để lấp đầy chổ
trống một cách hợp lý
Kiểu bố cục sử dụng ảnh đồ họa làm trọng
Trang 6Layout này tương đối khá phổ biến, dưới đây là hai trong số website trên internet sử
dụng kỹ thuật này Bạn có thể tùy ý sắp xếp thanh liên kết hoặc định dạng các khối chữ theo ý đồ của mình mà vẫn giữ được cơ bản cấu trúc này
5/Kiểu 5 khối hộp
Kiểu 5 khối hộp thật sự chỉ là phần mở
rộng từ kiểu 3 khối hộp mà chúng ta đã
biết Đây là cách sắp xếp để có thể trình
bày được nhiều nội dung hơn, bạn cũng có
thể điều chỉnh layout thành 4 khối hộp tùy
theo nội dung bạn muốn trình bày, nhưng
nhiều nhất cũng nên sử dụng 5 khối hộp,
vì thêm nữa các khối bên dưới sẽ rất nhỏ
so với khối bên trên
Kiểu layout này cũng giống như layout 3
khối hộp, phần khối hộp lớn sẽ được dụng
làm banner cuộn các hình ảnh cần làm nổi
bật, các khối nhỏ bên dưới có thể thay thế bằng các ảnh thumbnail liên kết với các trang
Trang 7Ví dụ thực tế
Đây là hai website ví dụ đang áp dụng layout này theo các cách khác nhau Rõ ràng cả hai đếu có hình ảnh nổi bật nằm ở khối lớn ở trên và các nội dung thứ yếu nằm ở 4 khối hộp nhỏ bên dưới Điều khác biệt là họ sử dụng các font chữ và hình ảnh hoàn toàn không
giống nhau giúp cả hai có phong cách riêng biệt
Từ đó chúng ta thấy kiểu layout sử dụng công thức từ cấu trúc có sẵn không giết chết sự sáng tạo Khi đã sắp xếp được nội dung, thì vẫn cón nhiều việc phải làm trong công việc trang trí mỹ thuật trang web Đó cũng là lúc bạn biến hóa trang web mang dấu ấn phong cách thiết kế của mình
Trang 8Xem tiếp phần 2
Ý kiến của bạn
2 bình luận