Những website độc đáo với sự bất đối xứng trong thiết kế (P.2)

Có rất nhiều cách để tạo thiết kế bất đối xứng.

Nếu 10 ví dụ đầu tiên ở phần trước vẫn chưa giải đáp hết thắc mắc của bạn về cách đặt bố cục bất cân xứng trong thiết kế website hiện đại thì hy vọng phần tiếp theo này sẽ cho bạn một cái nhìn đa dạng hơn. 

Có rất nhiều cách để tạo thiết kế bất đối xứng. Bạn có thể làm việc này với phần chữ và hình ảnh hoặc khoảng trắng với chữ, nền và tiền tố hoặc những chi tiết lớn với nhỏ, các họa tiết trang trí, chia bố cục thành các cột không giống nhau. Điểm chính là đạt được sự hài hòa cho tổng thể diện mạo của website. 

Sjobygda có thiết kế web đẹp và khéo léo, tận dụng phần nền để tạo hình ảnh về sự bất đối xứng. Phần nền hoạt động như một thành phần quan trọng, mang lại nội dung thị giác hoàn hảo và hỗ trợ logo.

sjobygda thiet ke web dep

The Enterprise Foundation cũng sử dụng hình zizac để tạo hình khối, trong đó có phủ các màu sắc đậm đà, tất cả tạo nên cảm giác về sự bất cân xứng. Nhờ có bảng màu tương phản và bề mặt gọn mà thiết kế trong vẫn rất hài hòa và sáng sủa. 

the enterprise foundation thiet ke web dep

Rock Werchter sử dụng các cột truyền thống nhưng với độ rộng khác nhau. Trong trường hợp này, người thiết kế đã chia trang không chỉ thành các cột mà còn theo các dòng với những khối chức năng khác nhau.

 

rock werchter thiet ke web dep

Mediascop trông rất gọn gàng và sạch. Người thiết kế sử dụng những chi tiết nhỏ và nổi bật để tăng vẻ đẹp cho thiết kế và mang lại sự tương phản sắc nét. Sidebar nhỏ và navigation rất đồng bộ với phần nội dung. 

mediascop thiet ke web dep

DesignBlvd là một thiết kế web chuyên nghiệp và giàu nội dung những có sự hài hòa giữa phần chữ và hình ảnh. Bố cục bất đối xứng của nó vẫn có sự hài hòa một cách đáng kinh ngạc bất chấp sự khác nhau về kích thước giữa các post thumbnail. Màu sắng cùng với ảnh phụ mang lại không khí của hoạt động kinh doanh.

designblvd thiet ke web dep

Artegence về cơ bản có thiết kế dạng lưới với những khối hình chữ nhật thông minh được sử dụng để tránh sự hỗi loạn của việc quá tải thông tin.  

artegence thiet ke web dep

Timberline Tours sử dụng menu hình ảnh gọn gàng nhưng phá cách, giúp cho trang chính mang diện mạo mới mẻ. Navigation có những hình tam giác, ngũ giác rất hài hòa với nhau, mặc dù chính chúng là những khối đã phá vỡ sự đối xứng thông thường của một website. Ngoài ra chúng cũng kết hợp rất tốt với chủ đề của ảnh nền mang lại không khí cho người xem. 

timberline tours thiet ke web dep

Valencia DMC toát lên vẻ sang trọng với những bức ảnh được dàn dựng tỷ mỷ. Người thiết kế đã sử dụng khối nội dung bán trong suốt để chia trang chính thành hai phần chức năng. Và cả hai phần đều hợp tác tuyệt vời với navigation hình tròn.

valencia dmc thiet ke web dep

AmplifiQ có những hình khối mạnh mẽ, được nhấn mạnh nhờ phần nền đa giác màu tối và cấu trúc trông giống tổ ong để giới thiệu các hình ảnh. Phần chữ và ảnh được sắp xếp để tạo cảm giác thoát khỏi sự cân bằng. 

 

amplifiq thiet ke web dep

Sarasota Web Design ngay lập tức thu hút sự chú ý của người dùng nhờ phần hình ảnh. Nền đa giác phẳng chia bố cục thành nhiều phần. Người thiết kế đã thêm vào các yếu tố đồ họa để tạo sự bất đối xứng cho diện mạo của trang web. 

sarasota web design thiet ke web dep

Senador Volstead có sự cân bằng hài hòa tại khu vực nội dung khổng lồ với một số widget chữ nhỏ. Sự bất đối xứng được sử dụng để nhấn mạnh slogan và nút call to action. 

senador volstead thiet ke web dep

Jose Guizar sử dụng bố cục dạng lưới để thể hiện các mẫu mockup. Trang web được chia thành các cột với kích thước khác nhau, đây là một cách đơn giản nhất để tạo sự bất cân xứng, tuy nhiên chúng vẫn hoàn toàn đảm bảo sự hài hòa.

jose guizar thiet ke web dep

 

 

Tác giả bài viết: Phùng Thanh Hằng
Có: 0/0 đã cho sao
tiếc gì 1 click để cho sao

Bạn đã xem chưa?

5 mẹo để thiết kế trang web một trang hiệu quả

5 mẹo để thiết kế trang web một trang hiệu quả

Web one-page hay còn gọi là trang web chỉ có một trang, hoặc các trang landing page chỉ để giới thiệu một chương trình khuyến mãi ... làm thế nào để nó hiệu quả? Cùng xem bài viết nhé

[Web vỡ lòng] Số 01: Những kiến thức cơ bản về với thẻ html meta cho làm web

[Web vỡ lòng] Số 01: Những kiến thức cơ bản về với thẻ html meta cho làm web

Để có thể làm những điều to lớn đều bắt đầu từ những thứ nhỏ nhất. Ngôi Sao Số muốn giới thiệu đến bạn chuỗi bài "điều phi thường nhỏ bé" từ những mã html rất cơ bản dễ nắm bắt.

Bạn biết gì về thiết kế cảm xúc?

Bạn biết gì về thiết kế cảm xúc?

Bạn là dân thiết kế, bạn có biết gì về thiết kế cảm xúc không? Thiết kế cảm xúc có tạo nên giá trị khác biệt giữa các designer, Cùng chúng tớ tìm hiểu nhé

Quay lại trang Blog
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây