Tin tức

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

06/03/2013

3D Screenshots

Các lập trình viên vẫn không ngừng sáng tạo ra nhiều bộ ứng dụng web, dạng layout 3D Screenshots như dưới đây, hay một vài biến thể của nó, ngày càng được ứng dụng phổ biến hơn. Ý tưởng cơ bản là trên cùng trang web sẽ chứa tiêu đề chính, bên dưới là một số hình ảnh cách điệu kiểu 3D để xem trước ứng dụng của bạn. Chúng thường được thiết kế bóng phản xạ, bóng đổ, nền đồ họa lớn, thậm chí cả những trang trí phức tạp như dây leo bò trên những bức hình, nhưng ý tưởng cốt lõi luôn thực sự rất đơn giản.

Trong thực tế, mẫu layout này rất hay được ứng dụng trong lĩnh vực trình diễn/bán các mẫu giao diện dựng sẵn. Các nhà thiết kế cần phải thể hiện những mẫu giao diện của mình một cách rực rỡ, sáng sủa, để thu hút được người xem / người mua.

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

Pixelworkshop sử dụng kỹ thuật này. Những bức hình 3D được trình diễn trong một slideshow có thứ tự sắp xếp thay đổi. Hãy ghé thăm và xem những cách khác nhau mà nhà thiết kế giới thiệu sản phẩm hình ảnh của họ

Advanced Grid

Nhiều mẫu layout mà bạn sẽ thấy trong bài viết này tuân theo một định dạng lưới nghiêm ngặt. Tuy nhiên, với hầu hết các phần, họ không đơn giản đề xuất người thiết kế tạo một trang toàn những hinh ảnh thu nhỏ (thumbnails) đơn điệu. Ví dụ, layout dưới đây được đan xen những hình ảnh với kích thước khác nhau để tránh đơn điệu và dư thừa.

Như với ví dụ về Three Boxes (xem phần 1), chỉ có một vùng đồ họa chính ở phía trên của trang. Tiếp sau là một sự thay đổi đơn giản, trên ý tưởng trình bày dạng lưới những hình thu nhỏ thống nhất. Khoảng trống của trang web cho phép ta sắp xếp 4 box hình chữ nhật, nhưng thay vào đó, ta ghép hai box bên trên lại thành một để tạo ra điểm nhất và sự khác biệt.

Như đã đề cập với layout đâu tiên, các khối không nhất thiết phải là hình ảnh. Ví dụ, bạn có thể bố trí một box gồm một hình ảnh bên phải, và một số text mô tả bên trái.

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

Trong ví dụ tuyệt đẹp dưới đây, layout được áp dụng cho một website bán quần áo. Chú ý rằng gần dưới cùng, họ đã thay đổi khối bên phải thành một hình ảnh lớn kèm một đoạn mô tả bên dưới, thậm chí không cần cân xứng hoàn toàn với nội dung ở cột bên trái.

Một khi bạn đã có mẫu layout cơ bản trong đầu, bạn có thể thực nhiện những thay đổi tinh tế như thế này trong khi vẫn duy trì tính toàn vẹn của bố cục cơ bản. Một thủ thuật thú vị nữa là họ chia khối đồ họa chính thành hai phần, việc đó sẽ giúp trình bày được nhiều thông tin hơn, mà nhìn lại khá phá cách.

Phần tiếp: 10 mẫu layout chuẩn cho thiết kế web - phần 3.
Phần trước: 10 mẫu layout chuẩn cho thiết kế web - phần 1.

Design Shack