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

Thứ Hai, 19/10/2015, 16:08 GMT+7

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.

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

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.

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.

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.

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

Xem thêm cách thiết kế website: https://thietketrangweb.com.vn/cach-thiet-ke-website.html

Xem thêm: https://banghieu.com.vn/tieu-dung-thong-minh.html

Tags: web, website, thiết kế, thiết kế web, thiết kế website, cách thiết kế web, cách thiết kế website, web layout, layout
ThietKeTrangWeb.com.vn / Cách thiết kế website
No avatar
Đăng bởi touyen
Tham gia 04/03/2015
Cấp độ Administrator
Bài viết 51/51
Tags: web, website, thiết kế, thiết kế web, thiết kế website, cách thiết kế web, cách thiết kế website, web layout, layout
ThietKeTrangWeb.com.vn / Cách thiết kế website