Tác dụng kỳ diệu của những khối vuông trong phân chia bố cục web

Thứ ba - 07/07/2015 00:35

Có rất nhiều cách để giới thiệu nội dung website cho mọi người cùng thưởng thức. Hãy cùng khám phá cách sử dụng những khối hộp vuông và chữ nhật sắc nét để phân chia bố cục nội dung trong một thiết kế website chuyên nghiệp.

Tác dụng kỳ diệu của những khối vuông trong phân chia bố cục web

Giống như một nguyên tắc, các khối hộp vuông được sử dụng trong portfolio và e-commerce websites vì nó là cách tốt nhất để tổ chức và trình bày nhiều nội dung cùng lúc, chẳng hạn như các bức ảnh chụp, các sản phẩm...Hình vuông và hình chức nhật làm cho bố cục rõ ràng, gọn gàng hơn. 

Các hình dáng hộp trong website cũng có thể tương tác, có nghĩa là nó phản ứng với những cú di chuột hoặc click chuột. Nó sẽ mang thêm tính năng sử dụng và cảm xúc vào thiết kế web của bạn. Người dùng thích những website phản ứng lại hành động của họ, kể cả khi đó chỉ là một sự thay đổi màu sắc khi di chuột qua mỗi bức ảnh. Vậy hãy cùng chúng tôi khám phá những thiết kế website sáng tạo nhờ các khối hình vuông vức dưới đây để tìm cảm hứng thiết kế cho website của bạn. 

NKI Studio

Một website với nội dung chính là các video trên nền, bố cục của nó được chia thành dạng lưới với các khối hình chữ nhật đều nhau, mỗi hộp chứa 1 video. 

Thiet ke website dep 1

Esseninternational

Tông màu của website này vốn dĩ đã sáng sủa và nhẹ nhàng, kết hợp với cách phân chia bố cục thành 4 phần đều nhau khiến mọi thứ lại càng gọn gàng và sắc nét hơn. 

Thiet ke website dep 2

Good Morning

8 ô vuông là 8 nội dung có mức quan trọng như nhau muốn truyền tải cho người xem, chúng ta được tự lựa chọn duyệt nội dung nào trước. 

Thiet ke website dep 3

 

GlossyRey

Chúng ta thấy sự xuất hiện của những màu sắc trong thiết kế phẳng ở các ô vuông trên trang chủ này. Đan xen với những ô vuông có màu nền là những ô vuông chứa hình ảnh minh họa. 

Thiet ke website dep 4

fh studio

Thiết kế website công ty sáng tạo này chọn cách đưa những sản phẩm tiêu biểu của mình lên trang chính dưới dạng bố cục lưới. Một cách thông minh để gửi gắm nhiều nội dung cùng lúc. 

Thiet ke website dep 1

 

Art of The Cap

Website này quảng bá cho sản phẩm mũ bơi, ai cũng sẽ nhận ra điều này khi nhìn vào những bức ảnh uảng cáo rất bắt mắt được trải trên trang chính. 

Thiet ke website dep 5

Geox Amphibiox

Thoát ra khỏi cách phân chia đều nhau của các khối vuông, website này đã tạo ra sự chênh lệch kích thước các khối nội dung để giảm sự đều đều trong nhịp điệu. 

Thiet ke website dep 1

Names for Change

Vẫn là những ô vuông quen thuộc với kích cỡ như nhau nhưng lại được xếp so le một cách sáng tạo. 

Thiet ke website dep 6

Nedd

Ví dụ này cũng sử dụng cách phân chia ô không đều nhau để phá vỡ sự đơn điệu. 

Thiet ke website dep 7

HelloHikimori

Các khối hộp vuông và chữ nhật đặt cạnh nhau, tạo nên một bối cảnh khá trừu tượng nhưng rất quyến rũ cho người xem. 

Thiet ke website dep 8

 

Cropp

Người ta sẽ thích ngay bố cục web này từ cái nhìn đầu tiên, không chỉ bởi màu xanh hút mắt của nó mà bởi bố cục phá cách của nó.

Thiet ke website dep 9

mojotech

Ô vuông to nhất được dùng để nhấn mạnh một thông điệp chính, các ô vuông còn lại giữ vai trò như navigation. 

Thiet ke website dep 10

Mustafa Demirkent

Chúng ta có cảm giác như đang nhìn thấy những mảnh ghép của cuộc sống trên website này. 

Thiet ke website dep 11

ELI

Đối với một website âm nhạc, phương án dùng bố cục dạng lưới với những khối hộp vuông + chữ nhật chứa video chính là cách hiệu nghiệm để giới thiệu nhiều video nhạc tiêu biểu trên trang chính cùng lúc. 

Thiet ke website dep 12

La Vie a LA Fresh

Màu sắc tươi vui của website khiến ai cũng sẽ thích. Hình ảnh có màu sắc nổi bật nhất sẽ đặt trong ô có kích thước to nhất để tạo hiệu ứng hình ành cho cả trang. 

Thiet ke website dep 13

Lois Jeans

Thay vì đặt các khối hộp khít nhau, phương án được dùng ở đây là 4 khối hộp có kích thước đa dạng,chứa hình ảnh đã được xử lý hài hòa với chủ đề.

Thiet ke website dep 14

The Hungry Workshop

Có phương án nào khác để cùng lúc giới thiệu được nhiều sản phẩm như thế này trên cùng một trang? 

Thiet ke website dep 15

Etch Apps

Các khối hộp chứa chữ xem kẽ với khối hộp chưa video hoặc hình ảnh là cách làm thông minh, giúp website vẫn truyền tải được thông điệp chữ mà không hề bị khô khan. 

Thiet ke website dep 16

Hommard

Sự lịch lãm tràn ngập trên website bán hàng thời trang nam này. 

Thiet ke website dep 17

Far from the Tree

Bạn sẽ cần dành nhiều thời gian hơn một chút nếu muốn nhìn hết nội dung của các ô vuông trên bố cục web này.

Thiet ke website dep 18

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Web & Brand Solutions