10 web layout cơ bản trong thiết kế website p1

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
Chung Huynh

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.
Nếu bạn là một nhà thiết kế web, thì nên đánh dấu trang này như một cẩm nang thiết kế
web khi cần. Hãy nhớ rằng, những layout này chỉ là sự gợi ý và bạn cần phải sửa đổi và
chế biến chúng. Chắc chắn rằng bạn sẽ không muốn làm giống y hệt như những đề nghị
ở đây mà chỉ dùng nó để phát triển các ý tưởng dựa theo dự án thực tế của mình.

1/8


1/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ờ!

2/8


2/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

3/8


3/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.

4/8

4/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
tâm sẽ đảm bảo cấu trúc vững chắc, layout
nhìn sạch sẽ và đơn giản, điều bạn cần làm là sử dụng một hình ảnh thật ấn tượng để thu
hút sự chú ý người xem dù nội dung không thật sự đủ cuốn hút.

Ví dụ thực tế
5/8


Layout 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
liên quan hoặc các hình ảnh thứ yếu.
6/8


Ví 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

7/8


Xem tiếp phần 2

Ý kiến của bạn
2 bình luận

8/8