Web 2.0 Vietnam Logo

Web Design 2.0: Xu Hướng Mới

Thiết Kế, Tổng hợp November 26th, 2007


Đã từ khá lâu khi những trang Web 2.0 dùng các hình khối có góc tròn (rounded-corner) và những đường cong như một tiêu chuẩn trên giao diện. Nhưng những xu thế mới trong thiết kế trở về với những đường thẳng có vẻ đang được ưa chuộng.

Một số website tiêu biểu

Trước hết chúng ta hãy xem một số trang chủ mà chắc cũng giống như tôi các bạn sẽ phải thốt lên “Oh, cool!”. Đây là những website tiêu biểu cho xu hướng thiết kế mới hiện nay.

1. Shoeboxed.com

shoeboxed.com là một trang web giúp bạn theo dõi các hóa đơn mua hàng và chia sẻ việc mua sắm của mình với bạn bè. Dịch vụ này có vẻ được ưa chuộng ở phương Tây vì họ rất “tính toán” trong việc mua bán.

Bảng màu chính:

color_shoeboxed.jpg

2. Wishlistr.com

Có bao giờ bạn cảm thấy lúng túng khi đi mua quà mừng thôi nôi, sinh nhật hay tân gia một ai đó vì chẳng biết “thân chủ” muốn cái gì? Với tính thực dụng cố hữu, người phương Tây thường tạo ra một “Wish List” liệt kê danh sách những thứ mình mong muốn; nhìn vào danh sách này bạn sẽ biết chắc mình nên mua gì. Nhưng sẽ ra sao nếu có hai hay nhiều người hơn cùng mua một món quà? Dịch vụ web wishlistr.com sẽ giúp bạn tìm ra giải pháp. (Ở Việt Nam thì hơi khác, trong đa số trường hợp chúng ta đều có thể dùng… phong bì :) ).

3. Church Plant Media

churchplantmedia.com là một dịch vụ CMS (content management system). Nếu bạn muốn tạo ra một cool website tương tự như họ thì đây là địa chỉ nên tìm đến.

Bảng màu chính:

color_churchplant.jpg

4. Corking Design

corkingdesign.co.uk là một công ty thiết kế web chuyên nghiệp. Tất nhiên website của họ phải thể hiện điều đó.

Bảng màu chính:

color_corking.jpg

5. Revolver

Revolver là trang web giới thiệu một công cụ cùng tên giúp bạn dễ dàng thay đổi hình nền hay tạo các showcase hình trên trang web của mình.

Bảng màu chính:

color_revolver.jpg

6. YikeSite

YlikeSite là một CMS khác nhưng chức năng đơn giản hơn Church Plant Media, chủ yếu giúp bạn tạo ra các website tĩnh giới thiệu công ty/dịch vụ của mình.

Bảng màu chính:

color_yikesite.jpg

Một số website khác:

Blogadda.com
blogadda_screenshot.jpg

Dibusoft
dibusoft_screenshot.jpg

Enrichment
enrichment_screenshot.jpg

HyperPixel Design
hyperpixel_screenshot.jpg

NetNova
netnova_screenshot.jpg

Studio3K
studio3k_screenshot.jpg

Xu hướng thiết kế

Chúng ta dễ dàng nhận thấy thiết kế layout cùa các trang web trên dùng chủ yếu là các dải màu thẳng kéo dài hết màn hình. Các phần của trang web được phân cách bằng các dải màu sắc tách biệt chứ không dùng các đường biên (border). Màu nền đậm (hay nổi hơn) ở phía trên và nhạt dần (hay chìm hơn) ở các phần dưới, tùy theo nội dung mà trang web muốn nhấn mạnh.

Ở phần header, chúng ta thường chỉ thấy logo trang web và menu định hướng đơn giản, làm cho người dùng chú ý hơn tới phần nội dung phía dưới. Các biểu tượng sinh động, rõ ràng giúp ta rất dễ nắm bắt các nội dung, chức năng quan trọng nhất mà trong web cung cấp. Chúng ta không thấy có hình người nào trong các trang web này mà thay vào đó là các hoạt hình khiến người dùng có cảm giác dịch vụ trang web cung cấp rất dễ sử dụng.

catoons.jpg

Ngoài ra các biểu tượng (icons and badges) cũng giúp nhấn mạnh các chức năng mà website cung cấp.

icons-badges.jpg

Menu định hướng của các trang web này rất rõ ràng, ít mục và không có nhiều tầng giúp cho người dùng không bi lạc vào mê cung các mục menu cha, con, cháu chắt… mà có thể đến nơi cần tới chỉ với một cú nhấp.
navigation-bar.jpg

Nhận xét chung

Khỏi cần phải ca ngợi về độ chuyên nghiệp mà các nhà thiết kế thế hệ 2.0 đã đạt tới, ưu tiên hàng đầu cho một trang web hiện nay là giúp người dùng cảm thấy dễ nắm bắt, dễ sử dụng các chức năng mà dịch vụ web đó cung cấp. Việc sử dụng đúng màu sắc, biểu tượng là cả một nghệ thuật, nó nói lên trình độ của nhà thiết kế nhưng quan trọng hơn là nó làm nổi bật trọng tâm của trang web.

Cách đây hơn một năm trong một bài viết khác tôi đã đề cập tới những yếu tố căn bản của design 2.0 như sử dụng div layout, CSS, XHTML… Tôi có thể nhận thấy hầu hết các trang web 2.0 của Việt Nam đã đi theo xu hướng thiết kế này, kết quả là chúng ta có những giao diện thanh thoát hơn, dễ định hướng hơn. Nhưng cũng phải nói là không có nhiều website đạt tới trình độ hoàn hảo như các trang web mà chúng ta vừa điểm qua. Điều dễ nhận biết là vai trò của designer trong quyết định bố cục các trang web tại Việt Nam không lớn và họ thường phải thỏa hiệp với xu hướng bày tất cả ra mặt tiền của ban lãnh đạo. Có vẻ như chúng ta còn phải học hỏi nhiều từ các đồng nghiệp phương Tây.

(Theo StyleIgnite)

Web Design 2.0

Căn bản, Thiết Kế October 18th, 2006


Vào thăm các trang web 2.0, điều đễ nhận thấy nhất là cách thiết kế. Với dân “ngoại đạo” thì đấy chỉ là những hình khối bắt mắt, còn dân nhà nghề thì… thở dài và đặt câu hỏi “bao giờ Việt Nam mới có những nhà thiết kế web đúng nghĩa?”

Khi bắt đầu tìm hiểu web 2.0 và các kỹ thuật đứng sau nó thì ngoài Ajax, tôi luôn chú ý đến việc thết kế đúng chuẩn web (web standards) và cố gắng áp dụng cho các ứng dụng như Fast Dictionary hay Ajax Gomoku. Tuy nhiên, vì chỉ là tay amateur không dám “múa rìu qua mắt thợ’ nên chỉ dám dùng các thiết kế giản dị nhất nhưng luôn chăn trở: “không biết ở Việt Nam có ai ý thức việc thiết kế web theo tiêu chuẩn không?“. Rồi cuối cùng tôi đọc được bài viết Web designer Việt, anh ở đâu? trên blog SonnyMotives và thật mừng khi nhận thấy nhiều người cũng có cùng nỗi âu lo.

Hình 1: Frexy Studio - trang web của Việt Nam theo chuẩn web XHTML/CSS

Vậy thế nào là kiểu thiết kế web không chuẩn? Thứ nhất phải kể tới việc dùng table làm layout cho trang web như một mặc định. Ai cũng biết table được sinh ra để hiển thị các dữ liệu dạng bảng (như bảng thống kê, bảng danh sách…) nên dữ liệu khi đưa vào đó chỉ hiện lên khi tất cả đã được tải về. Dùng table làm layout cho trang web dẫn đến tình trạng trang web tải về và hiển thị chậm. Ngoài ra, trên một số trình duyệt các bảng khi hiển thị thường dễ bị tình trang “co giật” (nhất là khi đặt chiều ngang cột theo phần trăm) trông rất phản cảm. Lạm dụng việc thiết kế web dùng table layout còn làm cho không gian web bỗng trở thành các cột đủ loại và các hình ảnh phải bị bóp vào sao cho không bao giờ được tràn ra ngoài. Tất cả những điều đó làm cho trang web thành ra cứng nhắc, không hình khối cũng chẳng có nghệ thuật.

Cùng với việc dùng table làm layout nhiều nhà thiết kế web cũng bỏ luôn việc dùng CSS để định nghĩa màu sắc, phông nền mà quên mất rằng CSS sinh ra là để giúp cho thiết kế web độc lập với HTML và do đó trang web có thể dễ dàng “thay áo” khi cần mà không phaỉ mất quá nhiều công sức. Giúp sức cho việc “qua mặt” web standards là Microsoft với việc tự tạo cho mình một chuẩn web riêng khi hiển thị trên trình duyệt phổ biến nhất thế giới Internet Explorer.

Các nhà thiết kế web 2.0 cuối cùng cũng đưa web stadards trở lại. Hiếm có trang web 2.0 nào dùng table layout và việc dùng CSS gần như là tiêu chuẩn bắt buộc. Kết quả là các trang web trở nên sống động hơn, có hồn hơn và dường như mỗi trang web đều là một tác phẩm nghệ thuật. Sự trong sáng trong thiết kế giúp cho người dùng không bị lạc vào mê hồn trận của các cột với đủ thứ màu sắc, văn bản chi chít mà tập chung vào công việc chính yếu.

Chính thiết kế 2.0 đã góp một phần cho sự thành công của web 2.0. Còn ở Việt Nam, hy vọng những SonnyMotives hay Frexy không phải là những người đơn độc.