Xu hướng thiết kế web hiện đại

Trong năm 2014 xu hướng thiết kế web chủ yếu tập trung vào: grid layouts, flat design, background videos và nâng cao khả năng tương thích với các API của HTML5.

Kế thừa xu hướng này sang năm 2015 các nhà thiết kế web chủ yếu tập trung nâng cao tính tương tác với người dùng thông qua những giao diện đơn giản nhưng không kém phần hiện đại. Dưới đây là 10 xu hướng chính trong thiết kế giao diện web của năm 2015.

1. Responsive design

Responsive design giúp website của bạn dễ dàng thay đổi layout trên các thiết bị mobile và tablet đồng thời giảm chi phí và công sức thiết kế thay vì phải làm 2 phiên bản mobile và desktop. Bên cạnh đó một website thân thiện với mobile sẽ là một điểm cộng trong con mắt của các search engine. Xu hướng responsive ngày càng phổ biến và hầu hết các template của Joomla, Wordpress, Drupal, Opencart... đều dần hỗ trợ responsive. hoclaptrinhweb.org cũng được thiết kế theo phong cách này.



2. Làm cho mọi thứ lớn và đơn giản hơn

Bạn có nhận thấy rằng background và layout website ngày một lớn hơn? Thay vì giới hạn độ rộng layout (fixed layout) như trước đây xu hướng tràn trang(fluid layout) ngày càng chiếm ưu thế. Các hình background website ngày càng lớn hơn và được đặt dọc theo website sau khi đã làm mờ đi chút ít nhằm tạo nên hiệu ứng thị sai (parallax effects). Xu hướng này được dẫn đầu bới 2 thương hiệu lớn là Google Nexus và Apple. Các nút bấm cũng dần được tối giản chỉ còn lại text bên trong và đường viền bao bên ngoài. Hiệu ứng màu gradient dần được thay bằng màu đơn sắc.



http://pixelgrade.com/demos/rosa/

3. Card-base Design (xu hướng thiết kế theo thẻ)

Do đặc tính của reponsive design là nội dung trên website cần phải tương thích trên các loại và kích cỡ màn hình khác nhau nên card-design là cách dễ nhất để làm được điều này. Pinterest và Google Plus là 2 ví dụ điển hình của phong cách sử dụng card-design. Các hình ảnh khóa học của eCode trên trang chủ cũng được thiết kế theo phong cách này.

4. Tăng cường trải nghiệm đa phương tiện (multimedia experience)

Việc nhúng video vào website đã có từ lâu nhưng trước đây đa phần được thực hiện bằng Flash thì giờ đây xu hướng này dần chuyển sang HTML5 element nhằm giúp bạn tạo nên những hiệu ứng huyền ảo trên website đồng thời giảm thời gian tải (load time) so với Flash. Một video hấp dẫn làm background website sẽ nhanh chóng thu hút sự chú ý của độc giả ngay lần đầu truy cập vào website.



5. Cuộn thay vì click

Khi web trên di động ngày càng bùng nổ việc việc cuộn (scrolling) đang thay thế dần các cú click. Cuộn lúc nào cũng ít tốn thời gian (chỉ việc di chuyển một ngón tay duy nhất trên con lăn) so với click (phải dùng cả bàn tay để di chuột, rồi nhấn thêm một lần nữa).

6. Typography

Thay vì phải sử dụng các font mặc định được hỗ trợ bởi browser như trước đây, web designer ngày càng có nhiều sự lựa chọn hơn với sự phát triển của hàng loạt bộ font miễn phí như Google Font, font-face...

7. Flat design

Trong 3 năm qua flat-design liên tục giữ vị trí "vua" trong thiết kế giao diện website và nó sẽ tiếp tục giữ vững vị trí này trong thời gian tới đặc biệt trong thiết kế icon, menu, hình minh họa. Với sự phổ biến của các bộ font icon như font-face xu hướng sử dụng font icon dạng flat design sẽ ngày càng phát triển nhằm giảm loadtime và thời gian thiết kế.



8. Sticky menu

Sticky menu là loại menu gắn chặt vào đỉnh màn hình và sẽ giữ nguyên vị trí dù bạn cuộn trang lên hay xuống chẳng hạn như sticky menu của hoclaptrinhweb.org. Sticky menu giúp người dùng truy cập nhanh vào các trang bên trong mà không phải cuộn trang qua đó giữ độc giả ở lại site của bạn lâu hơn.



9. Không dùng box

Nếu trước đây webdesigner phải gói gọn nội dung tiêu điểm của họ trong các box hình vuông hoặc chữ nhật thì giờ đây xu hướng này dần được loại bỏ và thay bằng nhiều cách khác nhau để web designer có thể thỏa sức sáng tạo và khiến cho website của mình trở nên khác biệt hơn.

• Tạo layout trang nhưng không hiển thị các box lên. Ví dụ: http://www.danparis.fr/
• Đa dạng hóa các hình: hình tròn, lục giác, hình thoi, đa giác bất đối xứng...Ví dụ: http://www.lorenzobocchi.com/
• Định nghĩa các hình vuông đặt trong một khoảng không gian vô tận để khi người dụng cuộn sẽ có cảm giác như đang bay: ví dụ: http://www.world-of-swiss.com/

10. Tiles

Nếu bạn thích giao diện metro của Windows 8 thì kiểu thiết kế Tiles (dạng lợp mái ngói) sẽ phù hợp với bạn. Tiles làm việc rất tốt trong responsive design và là 1 cách để tạo nên các giao diện thật ấn tượng.


Nguồn: http://hoclaptrinhweb.org/thiet-ke-web/231-10-xu-huong-thiet-ke-giao-dien-web-trong-nam-2015.html

Công nghệ reponsive trong tương lai sẽ chiếm ưu thế mới các công nghệ khác.