Bố cục thông minh của 20+ thiết kế website đậm hình ảnh

Chủ nhật - 13/09/2015 16:01

Sử dụng hình ảnh kể chuyện trên các thiết kế website chuyên nghiệp không còn là cách làm mới. Khái niệm “Sử dụng một bức hình, đánh giá cả ngàn từ” đã xuất hiện trên báo từ năm 1911.

Bố cục thông minh của 20+ thiết kế website đậm hình ảnh

Trải qua nhiều sự biến chuyển, giờ đây người ta đã biết dùng infographic để diễn đạt các số liệu. Các thiết kế website khách sạn, thời trang, nhiếp ảnh…muốn gây ấn tượng với người xem về sản phẩm của mình, họ sẽ chọn bố cục website đậm hình ảnh. 20+ ví dụ đẹp mắt dưới đây chắ chắn sẽ giúp ích cho những ai muốn tìm hiểu thêm về cách làm các bố cục web dạng này. 

Một bố cục trang web tốt không chỉ điều hướng người dùng đến với đúng mục tiêu của họ mà còn giúp cho họ trở thành khách hàng tiềm năng của bạn. Giống như những gì google đã làm, tại sao các chủ trang web thích quảng cáo Google đến như vậy ? Chính vì khi điều hướng tốt, một khách hàng tìm kiếm từ khóa nào đó và đến trang web của bạn. Họ chắc chắn là người có nhu cầu nào đó về sản phẩm và dịch vụ của bạn.

Fitz

Một portfolio site thuộc sở hữu của một freelancer. Mọi hình ảnh xuất hiện ở trang này đều được phủ một lớp màu tối trong suốt và chỉ hiện màu thật khi di chuột qua. Bố cục dạng lưới có một  chút khác biệt so với thông thường. 

Fitz thiet ke web dep

Visit Suffolk

Một thiết kế website du lịch đến từ nước Anh. Nó không chỉ là một trang cung cấp thông tin đơn thuần bởi cách bố cục dày đặc hình ảnh của nó.

Visit Suffolk thiet ke web dep

Awd Agency

Hãng thông tin liên lạc này sử dụng những hình ảnh khổ lớn trong suốt và biến mất khi bạn di chuột qua từng ảnh. 

Awd Agency

Cartel Belli

Thêm một hãng thông tin liên lạc sử dụng bố cục dạng lưới, hình ảnh cũng được phủ màu đỏ và sẽ biến mất khi di chuột qua.

Cartel Belli thiet ke web dep

Simon Foster Design

Hình ảnh cỡ lớn cùng chữ rất nhỏ được sử dụng. Các khối màu lớn kết hợp với các hình vẽ tay. Chỉ có một điều là bạn không thể biết các link sẽ dẫn bạn đi đâu. 

Simon Foster Design thiet ke web dep

Jux

Một trang chia sẻ mới với bộ sưu tập hình ảnh trên landing page. Màu sắc của các hình xung quanh hình mà bạn di chuột vào sẽ có sự thay đổi.

Jux thiet ke web dep

RVLT

Bố cục đậm đặc hình ảnh được cắt theo hình tam giác, vẫn là bố cục dạng lưới nhưng thực sự rất mới lạ. Điều thú vị nữa là mỗi lần refresh trang, bố cục sẽ lại thay đổi.

RVLT thiet ke web dep

Gabs

Bạn hãy đoán thử xem công ty này sản xuất thứ gì, cho dù ở tên của nó đã có chữ |bag”

Gabs thiet ke web dep

Hommard

Một website thời trang với những hình ảnh xếp theo dạng lưới. Chỉ những ô hình ảnh có viền  mỏng trắng khi di chuột qua thì mới chứa link.

Hommardv

Arthur Gallan

Cách thể hiện hình ảnh khác lạ. Tất cả những người trong hình đều có thể chuyển động trên màn hình. 

Arthur Gallan thiet ke web dep

L'Oreal Color Looks

Ảnh toàn trang thumbnail thực chất là một màn hình slideshow. Di chuột qua hình sẽ được xem 5 ảnh và nếu click vào thì sẽ mở slide với ảnh lớn hơn. 

L'Oreal Color Looks thiet ke web dep

Cropp

Website thời trang dùng slide ở đầu và bố cục lưới ở dưới. Hiệu ứng động khi di chuột qua ảnh khiến mọi thứ thú vị hơn. 

Cropp thiet ke web dep

Trama

Trang web sử dụng lưới với các khối màu trên đó có lượng chữ tối giản. Trông nó giống phong cách cinemagraph hơn là một video clip. 

Trama thiet ke web dep

Etienne Aigner

TRang web có diện mạo tối giản mặc dù khoác lên mình rất nhiều hình ảnh. Mỗi hình là một vật dụng cụ thể. Cuộn trang xuống sẽ thấy video và slideshow.

Etienne Aigner thiet ke web dep

Lois Jeans

Bố cục dạng lưới với hiệu ứng màu sắc trong suốt trên mỗi hình ảnh, khi di chuột qua ảnh, bạn sẽ thấy sự khác biệt. 

Lois Jeans

House: Campaign spring 2014

Trang web có khá ít chữ nhưng nhiều hình ảnh, video và âm nhạc, chúng thuộc về các nghệ sỹ khác nhau.Hiệu ứng biến đổi sẽ diễn ra khi bạn di chuột qua mỗi hình ảnh. 

House: Campaign spring 2014 thiet ke web dep

Yvan Rodic

Thiết kế website portfolio của Yvan Rodic, người vừa là một dân du lịch, nhiếp ảnh gia. Ảnh được xếp theo các hàng ngang trên landing oage, click vào ảnh sẽ đến với toàn bộ ảnh chụp về một địa điểm nào đó.

Yvan Rodic thiet ke web dep

Nicolas Tarier Photography

Portfolio đơn giản với gallery ảnh theo bố cục dạng lưới. Click vào ảnh sẽ đến với ảnh cỡ đầy đủ.

Nicolas Tarier Photography thiet ke web dep

Bernd Kammerer

Một trang web cá nhân khác của nhiếp ảnh gia, nó thể hiện niềm đam mê nhiếp ảnh của người nghệ sỹ này.Vòng tròn đỏ sẽ chuyển sang trắng khi bạn di chuột vào. 

Bernd Kammere thiet ke web depr

Grischek

Landing page này chứa nhiều ảnh thumbnail và logo ở chính giữa trang. Một hoặc vài ảnh xung quang sẽ sáng lên nếu bạn di chuột qua.

Grischek thiet ke web dep

Rod McClean

Hình ảnh của trang có thể chuyển động nhanh dưới dạng slideshow, ngoài ra nếu bạn di chuột qua một ảnh, nó sẽ chuyển sang hình tứ giác.

Rod McClean thiet ke web dep


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