Các gói giải pháp quản lý & tư vấn vận hành doanh nghiệp hiệu quả!

Tin chuyên ngành

Xu hướng layout trong thiết kế web 2015

04/07/2019 |

Nhìn lại chặng đường 10 năm vừa qua chúng ta có thể thấy rằng web đã tồn tại những mẫu layout rất quen thuộc tại nhiều trang. Những mẫu này có sự thống nhất về header, footer, menu và khu vực nội dung. Đó là những gì thiết kế web được mong đợi với layout.

Dưới đây là 4 xu hướng kết hợp layout thú vị và hiếm gặp mà Tạp chí web muốn chia sẻ đến bạn đọc. Cùng chúng tôi theo dõi nhé !

1. Split Screens – Chia màn hình

Có một số trang web sử dụng thiết kế chia màn hình theo chiều dọc. Điều này xuất phát từ hai lý do chính.

Đầu tiên, thiết kế có thể có hai yếu tố quan trọng. Cách tiếp cận này cho phép bạn làm nổi bật cả hai và cho phép người dùng lựa chọn một trong hai thứ. Tuy nhiên điều quan trọng là thiết kế phải phản ánh được phân cấp và cấu trúc của giao diện web.

Thứ hai, đôi khi bạn cần truyền đạt cùng lúc hai thứ. Hãy xem website Eight and Four, ở đây họ muốn truyền đạt điểm mạnh cốt lõi là khả năng digital và những nhân viên xuất chúng. Cả hai điều này đều làm nên tên tuổi của họ.

2. Không cần khuôn

Một trong những yếu tố chính được sử dụng trong thiết kế web bao gồm boxes, border, shapes và những phần chứa chữ được sử dụng nhằm ngăn cách các trang. Hãy xem những thiết kế header, nơi các yếu tố bị gom lại và tách biệt với phần nội dung. Một xu hướng phổ biến bây giờ là bỏ đi những phần khuôn này.

Trong ví dụ dưới đây các trang web đã bỏ đi header và footer. Thay vào đó nó cho cảm giác như một ngôi nhà tương tác. Phân cấp của nội dung chủ yếu là cách tổ chức từ trái qua phải, giúp bố cục vô cùng thu hút.

3. Mô đun hay cấu trúc lưới

Kế tiếp chúng ta đi tới những bố cục được xây dựng dựa trên những mô đun hoặc cấu trúc lưới. Trong các thiết kế này, mỗi mô đun có thể dịch chuyển dựa trên kích thước màn hình. Nó không phải là cách tiếp cận mới, nhưng cách chúng dịch chuyển linh hoạt (responsive) khiến thiết kế trở nên vô cùng hữu ích.

Ví dụ này là minh chứng hoàn hảo cho ý tưởng này. Thiết kế hoàn toàn linh hoạt. Với mỗi kích thước màn hình, các mô đun lập tức thay đổi tương ứng để có thể kín hết màn hình. Điểm đặc biệt là giới thiệu một yếu tố (tại kích thước màn hình lớn) đã phá vỡ sự cứng nhắc giữa các mô đun.

Ví dụ trên là một phiên bản “dữ” hơn của các mẫu (pattern). Nó cho phép chúng dễ dàng dịch chuyển nội dung vào và ra nếu cần. Nhưng có một yếu tố thiết kế quan trọng ở đây, mà ví dụ trước không có. Kích thước của mô đun đa dạng để phản ánh thứ tự quan trọng và vị trí của nó trong việc phân cấp hình ảnh.

Một yếu tố rủi ro của cách tiếp cận mô đun là làm mọi thứ cùng một kích thước, có nghĩa là bạn khó có thể nhấn mạnh điều gì. Tuy vậy, ví dụ này cho thấy rõ yếu tố nào quan trọng trong thiết kế.

4. Làm kín một màn hình

Cuối cùng là cách tiếp cận thiết kế có thể hoàn toàn nằm trong một khung hình. Nó là một phần của thiết kế linh hoạt theo cách tất cả nằm trong một khung hình.

Kiểu thiết kế nằm hoàn toàn trong khung hình này sẽ không có thanh lăn bên phải. Việc mất đi thanh lăn chuột có nghĩa nội dung hoàn toàn được tập trung, và phân cấp nội dung dễ dàng hơn nhiều.