Những bố cục website phổ biến

Kể từ khi trang web đầu tiên trên thế giới được ra mắt, công nghệ web đã có những bước phát triển vượt bậc. Đặc biệt hơn, trong những năm gần đây, với sự ra đời của HTML 5, CSS 3 và Javascript engine v8, nền tảng web lại trở nên phát triển mạnh mẽ hơn nữa. Bên cạnh các công nghệ front-end và back-end được phát triển bởi các tổ chức hàng đầu trên thế giới, thiết kế web cũng trở thành một lĩnh vực hot được rất nhiều người quan tâm và phát triển song hành với các công nghệ web. Trong lĩnh vực thiết kế web, lại có hàng tá các nhánh nhỏ như bố cục, màu sắc, typography,… Hãy cùng điểm qua những bố cục website phổ biến tại Việt Nam và trên thế giới trong bài viết này nhé.

Phong cách GOV

Phong cách thiết kế đã trở thành huyền thoại trong ngành thiết kế Việt Nam. Không chỉ trong lĩnh vực thiết kế, thuật ngữ GOV còn được dùng để chỉ đến rất nhiều lĩnh vực khác có liên quan hoặc gần có liên quan đến chính quyền. Phong cách này phổ biến đến nỗi nó thấm sâu vào trong lối tư duy của người Việt, khiến ngành thiết kế ở Việt Nam, cụ thể là thiết kế web vẫn không có nhiều tiến bộ dù lĩnh vực lập trình và thiết kế website tại nước ta đã ra đời hơn hàng chục năm trời.

Đặc điểm dễ nhận biết nhất của lối thiết kế này chính là bố cục các cột và dòng dày đặc. Chiều rộng của trang web thường chỉ tối đa 1024 pixel và không hề thay đổi ở các loại màn hình khác nhau (không responsive). Hệ thống lưới chứa ít nhất 3 cột hoặc hơn, khoảng cách giữa các thành phần đối tượng gần như là không có, khiến tổng thể website trông như một mớ hỗn độn. Phần giữa thường chứa nội dung, hai bên là các danh mục dư thừa và đôi khi là cả quảng cáo. Đầu website thường là một flash động hoặc một bức ảnh, tiếp đến là hệ thống menu và bên dưới là dày đặt các khối nội dung. Phong cách GOV cũng rất thích các loại chữ di chuyển qua lại, cuộn lên hoặc nhấp nháy.

Lối tư duy thiết kế này phổ biến đến nỗi nó ngấm sâu vào trong suy nghĩ của người Việt. Khiến phần lớn khách hàng và cả những doanh nghiệp chuyên về thiết kế web cho rằng đây là một lối thiết kế đẹp và mặc định mọi thứ phải như vậy. Ngày nay mặc dù các kiểu bố cục hiện đại đã phổ biến hơn rất nhiều, nhưng những website có phong cách thiết kế GOV vẫn chiếm một số lượng không hề nhỏ. Ngoài những website của cơ quan nhà nước, vẫn còn rất nhiều doanh nghiệp sử dụng website có bố cục này.

Content và Sidebar

Đây là kiểu bố cục phổ biến nhất và được sử dụng rộng rãi nhất trên toàn thế giới cho đến bây giờ. Kiểu bố cục này gồm hai cột, nội dung và thanh bên dùng để chứa các liên kết hoặc hình ảnh. Chiều ngang trang web thường rộng tối đa là 1200px, phần nội dung nằm bên trái thường chiếm 2/3 chiều rộng, phần sidebar bên phải thường chiếm 1/3 chiều rộng. Phần logo và thanh menu có nhiều các hiển thị khác nhau, nhưng phổ biến nhất là logo nằm bên trên và thanh menu nằm phí dưới, tiếp đến là bố cục nội dung.

Kiểu bố cục này giúp người đọc tập trung vào nội dung nhiều hơn là bị cách thành phần dư thừa làm rối mắt. Sidebar cũng là một nơi rất lý tưởng để website đặt quảng cáo mà không làm ảnh hưởng đến trải nghiệm của người đọc. Kiểu bố cục này hầu hết đều hỗ trợ responsive, đặt biệt với việc để phần sidebar bên phải, toàn bộ sidebar sẽ bị đẩy xuống phía dưới khi hiển thị trên thiết bị có màn hình nhỏ, không làm ảnh hưởng đến trải nghiệm đọc.

Kiểu bố cục này chủ yếu được sử dụng trong các website thiên về nội dung nhằm tăng tối đa trải nghiệm đọc cho khách truy cập. Hầu hết các website cung cập nội dung và các báo điện tử đều sử dụng kiểu bố cục này trong bài viết. Tuy nhiên kiểu bố cục này vẫn có nhược điểm khi bài viết thiên về hình ảnh hơn chữ, phần nội dung có chiều rộng không lớn sẽ không mang lại trải nghiệm cao khi xem ảnh. Nhiều người chọn cách sử dụng các chức năng hỗ trợ cho phép phóng to hình ảnh khi nhấp chuột vào, một số người khác lại chọn kiểu bố cục Emagazine.

Bố cục Emagazine

Mặc dù kiểu bố cục gồm content và sidebar phổ biến nhất thế giới, nhưng đôi khi người ta cần nhiều hơn và kiểu bố cục này không thể đáp ứng đủ nhu cầu của họ. Khi website muốn hiển thị nhiều hình ảnh và tối ưu hóa tối đa trải nghiệm người đọc, người ta đã tìm cách bỏ hết tất cả các thành phần dư thừa đi, và bố cục Emagazine ra đời.

Khác với các tờ báo thông thường, tạp chí là những trang giấy được trao chuốt về nội dung với nhiều hình ảnh và cách trình bày hiện đại. Bố cục Emagazine cũng gần giống như vậy, bỏ hết tất cả các thành phần dư thừa, chỉ chừa lại những thứ thật cần thiết đó là logo nhận diện thương hiệu, menu điều hướng và nội dung. Bố cục của loại giao diện này chỉ có một cột duy nhất có chiều ngang vừa đủ để người đọc không phải lia mắt quá xa khi đọc, hai bên là hai vùng trống hoàn toàn để không làm mất tập trung người đọc. Các hình ảnh sẽ được tràn ra hai bên mép nếu muốn, đem lại hiệu quả hiển thị hình ảnh tối đa.

Màu sắc trong bố cục này thường lấy màu trắng làm màu chủ đạo để mang đến sự sang trọng như những quyển tạp chí hiện đại. Đây là kiểu bố cục hiện đại, sang trọng và đem nhiều thiện cảm hơn cho người đọc. Tuy nhiên, kiểu bố cục này cũng có nhiều nhược điểm mà nhà phản triển website phải chấp nhận đánh đổi. Với bố cục chỉ có một cột duy nhất và tập trung nhiều vào nội dung như thế, khoảng trống dành cho quảng cáo sẽ ít hơn các kiểu bố cục khác. Quảng cáo chỉ có thể được đặt ở đầu trang, giữa bài viết và cuối bài viết, các vị trí này đều gây ảnh hưởng đến triết lý mà kiểu bố cục này đề ra từ đầu đó là trải nghiệm của người đọc. Đây là kiểu bố cục người đọc rất thích nhưng lại rất kén nhà phát triển. Incep.net cũng đang sử dụng kiểu bố cục Emagazine đấy.

Landing page

Đã bao giờ bạn truy cập vào website của một công ty nào đó và thấy chúng đẹp mê ly chưa? Chắc chắn là trong chúng ta hầu như ai cũng từng gặp chúng ít nhất một lần rồi. Đây là kiểu bố cục tập trung hoàn toàn vào trải nghiệm hiển thị mà bỏ qua tất các các yếu tố khác. Có thể ví Landing page giống như một tấm poster quảng cáo mà chúng ta thường hay thấy. Landing page được thiế kế tập trung nhiều vào hình ảnh, màu sắc, hiệu ứng và giảm tối thiểu chữ viết. Đây không phải là thiết kế dành cho các nhà phát triển nội dung.

Kiểu bố cục này hầu hết được sử dụng trong các website giới thiệu công ty và các website của các hãng thời trang. Mỗi một trang là một thành quả của những nhà thiết kế và cũng là bộ mặt của công ty sở hữu trang web đó. Các website này thường chứa rất ít trang, chủ yếu là giới thiệu công ty và các sản phẩm của họ. Kiểu thiêt kế này gần như bỏ hoàn toàn các giới hạn về chiều rộng của trang web, tập trung vào hình ảnh và hiệu ứng. Đôi khi một số website còn thay đổi cả trải nghiệm cuộn của người dùng, thay vì chúng ta cuộn dọc xuống để xem tiếp nội dung, nội dung sẽ trượt theo chiều ngang khi chúng ta lăn chuột, quả là một trải nghiệm thú vị đúng không nào? Hãy truy cập thử một trang nào đó của Apple và khám phá nhé. Một vài trang báo điện tử của Việt Nam cũng dành một vài bài đặc biệt được thiết kế theo bố cục Landing page với hình ảnh và video rất đẹp (Xem thử trang này).

Thật ra vẫn còn nhiều kiểu bố cục khác và nhiều vấn đề khác trong lĩnh vực thiết kế web như menu, footer,.. nhưng bài viết sẽ dừng lại ở đây dưới góc nhìn của người dùng. Trên là những kiểu bố cục phổ biến mà chúng ta sẽ thường gặp khi truy cập các trang web hiện nay. Hy vọng các bạn đọc giả sẽ biết thêm nhiều về câu chuyện thiết kế phía sau những trang web mà chúng ta vẫn thường ghé đọc hàng ngày cũng như các bạn đang định bước vào lĩnh vực thiết kế web sẽ có thêm nguồn tài liệu tham khảo cho con đường sau này.