Cập nhật 7 xu hướng thiết kế web 2018

Các xu hướng thiết kế như Design Systems và Tactile Design, hoặc phong cách tràn đầy năng lượng của Retro đã có bước đánh dấu ấn tượng trong phong cách thiết kế web nửa đầu năm nay. Không dừng tại đó, năm 2018 hứa hẹn sẽ là một năm đáng nhớ với 7 xu hướng thiết kế web đang có sức ảnh hưởng lớn với cộng đồng web designer trên toàn cầu.

1.Thiết kế website dạng thẻ

Lối thiết kế này làm cho trang web trông giống như Pinterest, trẻ trung, năng động, thể hiện được nhiều thông tin nhưng vẫn rõ ràng và không bị ngộp.

cap-nhat-7-xu-huong-thiet-ke-web-2018


2.Xu hướng thiết kế cuộn trang

Xu hướng cuộn trang được ứng dụng rất tốt cho các trang web muốn thu hút người dùng thông qua hình thức kể chuyện, giúp mang lại sự tập trung và tính sáng tạo cho web. Facebook và Twitter là một trong nhiều những trang mạng xã hội đã ứng dụng thành công xu hướng này. Chính vì vậy, các designer đã không ngừng cải thiện, thay đổi các tính năng click chuột bằng việc sử dụng thanh cuộn để mang lại hiệu quả tốt nhất trên các thiết bị.

Cuộn là cách để tạo sự nhanh chóng và mang đến cho người dùng những trải nghiệm khác biệt như giúp tiết kiệm thời gian, tăng tốc độ load trang, xây dựng những trải nghiệm thú vị. Xu hướng thiết kế web này có thể tương thích với hầu hết các thiết bị, vừa đơn giản, vừa trực quan và cho phép nhiều nội dung hiển thị trước mắt người dùng.

cap-nhat-7-xu-huong-thiet-ke-web-2018-2


3.Thiết kế thanh menu tối giản

Smartphone - cơn sóng càn quét thị trường tiêu dùng Việt Nam đang ngày càng tăng cao do đó vấn đề lập trình front end, thiết kế thanh điều hướng phù hợp cũng là việc hết sức quan trọng, giúp gia tăng trải nghiệm người dùng.

Bạn chỉ nên đặt những nội dung thật quan trọng như trang chủ, dịch vụ, liên hệ... và hạn chế đặt quá nhiều nội dung vào thanh menu.

cap-nhat-7-xu-huong-thiet-ke-web-2018-3


4. Khối đa giác và các lớp hình học

Một trong những xu hướng thiết kế web đặc biệt nhất năm 2018 là phong cách xoay quanh chủ đề hình học, cụ thể là đa giác và các hình cơ bản được cắt nhiều lớp (lưới, mặt phẳng). Hình thức thiết kế này khá đa dạng, mời mọi người cùng xem biến tấu của các khối hình học trong những thiết kế dưới đây.

cap-nhat-7-xu-huong-thiet-ke-web-2018-4


Hình học đơn giản

Thay vì lấp đầy giao diện bởi các khung hình nguyên bản (hình chữ nhật), nhiều công ty như ESPN đã ghép hình ảnh vào các kiểu khung đa dạng, bắt mắt hơn. Ví dụ như khung hình dạng nghiêng của ESPN đã giúp hình ảnh sinh động và tự nhiên hơn.

cap-nhat-7-xu-huong-thiet-ke-web-2018-5


Các đường thẳng in đậm, cứng cáp tạo ấn tượng mạnh trong mắt người xem

Các đường thẳng cũng là hình học, vì thế khi được sử dụng một cách chính xác, các đường in đậm và lớn có thể thu hút sự chú ý mạnh mẽ đến hình ảnh và giúp ảnh nhìn được trực quan hơn.

Màu sắc nổi bật và các điểm giao nhau cũng giúp tăng thêm điểm nhấn cho thiết kế, vì thế hãy sử dụng chúng thật hiệu quả và tránh lạm dụng có thể gây rối mắt.

cap-nhat-7-xu-huong-thiet-ke-web-2018-6


Đa giác thể hiện ở các chi tiết thiết kế

Nếu bạn không muốn sử dụng phong cách này cho toàn giao diện, bạn có thể áp dụng cho những chi tiết trên thiết kế. Các khối đa giác và lớp hình học có thể tạo sức hút ở mọi kích thước, tạo ra một xu hướng thiết kế web phong cách đồ hoạ thứ cấp tuyệt vời, ngay cả đó chỉ là một nút biểu tượng.

cap-nhat-7-xu-huong-thiet-ke-web-2018-7


5. Tactile Design

Tactile Design được phát triển từ các nguyên tắc của Material Design, đồng thời hiện đại hóa các kiểu thiết kế cũ từ đầu những năm 2010.

Tactile Design có thể hiểu đơn giản là làm cho các đối tượng được xuất hiện thực trong một không gian kỹ thuật số. Chúng ta cùng phân tích các thành phần phổ biến của nó dưới đây:

Không gian sắp đặt tự do

Hình ảnh và văn bản được sắp xếp hầu như không có trật tự và giới hạn nào, thậm chí các đoạn văn bản còn bị cắt ra để dẫn đến màn hình tiếp theo. Đây là xu hướng thiết kế web hiện đại phù hợp với các nhãn hàng trẻ, ưa chuộng sự năng động và sáng tạo.

Để làm việc này, các designer phải tận dụng tốt không gian để người dùng biết họ có thể nhấp vào đâu và nơi nó sẽ đưa họ đến. Đó là lý do tại sao bạn thường thấy nhiều không gian âm (không gian trắng).

cap-nhat-7-xu-huong-thiet-ke-web-2018-8


Thiết kế đa lớp

Tactile Design kết hợp nhiều lớp để tạo góc nhìn cho hình ảnh thực tế và có chiều sâu hơn. Chẳng hạn như Apple đã cho hình ảnh đổ bóng để phân biệt các lớp và tăng độ thực tế cho sản phẩm.

cap-nhat-7-xu-huong-thiet-ke-web-2018-9


Tạo hoạt ảnh có mục đích và ý nghĩa cụ thể

Tactile Design đánh giá cao việc tạo ra những sự chuyển động hình ảnh có ý nghĩa hơn là các hoạt ảnh phức tạp nhưng chỉ để giải trí.

Việc tạo hiệu ứng khi rê chuột và các hoạt ảnh chuyển tiếp trên banner cải thiện rất tốt về mặt hình ảnh, làm giao diện được sinh động hơn, người xem tiếp cận hình ảnh được nhiều hơn.

cap-nhat-7-xu-huong-thiet-ke-web-2018-10


Sử dụng hình ảnh có độ chi tiết cao

Để nâng tầm quan trọng của chủ nghĩa hiện thực, xu hướng thiết kế web Tactile Design sử dụng hình ảnh có độ chi tiết cao, một sự pha trộn giữa chất lượng HD và góc cận cảnh. 

Điều này mang lại lợi ích gấp đôi cho các trang web thương mại điện tử, vì các bức ảnh chi tiết giúp người mua hàng hiểu rõ hơn về những gì họ đang mua.

cap-nhat-7-xu-huong-thiet-ke-web-2018-11


6. Các lưu ý trong thiết kế giao diện web di động:

  • Thay thế video đầu trang bằng ảnh tĩnh từ video. Nếu bạn cần đưa video lên web di động, hãy sử dụng liên kết tới YouTube.
  • Không sử dụng hiệu ứng di chuột. Thay vào đó là nút nhấn hoặc điều khiển cử chỉ để ẩn/hiển thị thông tin.
  • Đơn giản hóa hiệu ứng động. Ví dụ: Coach sử dụng hình gif trên thiết bị di động thay vì đồ hoạ animation trên giao diện máy tính.
  • Thay thế menu thả xuống bằng menu xếp lớp (Hamburger menu), một mô hình đơn giản mà bất cứ ai cũng sử dụng được.
  • Thực hiện kích hoạt bằng giọng nói đang ngày càng phổ biến và có thể trở thành xu hướng thiết kế web được ưa chuộng trong vài năm tới.
  • Đánh giá lại màu sắc và nền giao diện. Đôi khi, thiết bị di động yêu cầu có độ tương phản cao hơn để duy trì khả năng đọc.

cap-nhat-7-xu-huong-thiet-ke-web-2018-12


7. Tối giản là đỉnh cao của sự tinh tế

Qua nhiều năm thay đổi, xu hướng trang chủ đang dần thiên về hoạt động như một cổng thông tin hơn là một nguồn dẫn tin vô trang trong. Dưới đây là một số xu hướng giúp tối giản trang chủ, nhưng lại là đỉnh cao của sự tinh tế trong xu hướng thiết kế web:

Minimalism - Chủ nghĩa tối giản

Phong cách go-to cho các giao diện đơn giản và dễ sử dụng: không gian âm bản (không gian màu trắng), kiểu chữ lớn & đậm, các điểm nhấn đầy màu sắc. 

Đối với trang chủ, màu sắc là yếu tố tốt nhất để thu hút sự chú ý đến lời kêu gọi hành động, như với Evernote đã làm.

cap-nhat-7-xu-huong-thiet-ke-web-2018-13

Subtle Animations

Animation và GIF đang được rất nhiều doanh nghiệp “ăn theo” sự phát triển của đồ hoạ, áp dụng và thu về kết quả rất thành công.

Animation và GIF có khả năng truyền tải nội dung nhanh, hiệu quả hơn và tạo ấn tượng sâu sắc cho khách hàng so với các đoạn văn bản và video. Xu hướng thiết kế web này có thể cải thiện cả khả năng sử dụng và trải nghiệm của người dùng, nhưng chúng cũng có thể làm sao lãng các nội dung chính. 

Các Subtle Animations đang duy trì những lợi ích của phong trào, nhưng không làm mất đi sự đơn giản của trang chủ hiện đại đang hướng đến.

cap-nhat-7-xu-huong-thiet-ke-web-2018-14


Hình ảnh và video có thể tạo ấn tượng tốt đến tâm trí người xem

Nếu lĩnh vực hoạt động của doanh nghiệp thuộc các lĩnh vực như F&B, du lịch, dịch vụ... thì có thể tham khảo xu hướng thiết kế web này. Tuy nhiên, bạn phải có sự đầu tư tốt về mặt hình ảnh và chất lượng video thì hiệu quả thẩm mỹ mới được phát huy tốt và tạo được hiệu ứng mạnh mẽ trong trí nhớ người xem.

Việc sử dụng hình ảnh đẹp hoặc nền video có thể tạo ra một trang chủ tối giản trong thiết kế, giúp người xem chỉ tập trung vào nội dung chính của hình ảnh.

cap-nhat-7-xu-huong-thiet-ke-web-2018-15


Ưu tiên khả năng đọc và lĩnh hội nội dung của người xem

Đặc biệt phổ biến với các website chứa nhiều văn bản, trang chủ cần được thiết kế sao cho nổi bật nội dung, nhằm tối ưu khả năng truyền đạt thông tin cho người xem. Bạn cần chú ý các yếu tố sau:

- Kích thước văn bản trên trung bình (> 16 pt. cho nội dung chính).
- Chiều cao cách dòng.
- Màu văn bản tương phản với nền.
- Hình ảnh trung tâm và độ dài của chú thích bằng nhau.

cap-nhat-7-xu-huong-thiet-ke-web-2018-16


Kết luận

Xu hướng thiết kế web 2018 đang có rất nhiều tiến bộ, có lẽ nhiều hơn bất kỳ năm nào trước đó. Điều đó khiến cho năm 2018 có được những thay đổi và chuyển đổi vượt bậc, trong đó các lĩnh vực như thiết kế di động và các hệ thống dựa trên thành phần sẽ tự phát triển, trong khi các kiểu cũ hơn đang dần tự đào thải.

Đã đến lúc phải đánh giá lại chiến lược thiết kế của bạn và cập nhật những tinh hoa thiết kế trong vài tháng và vài năm qua.

-----

VIPCOM lược dịch và tổng hợp

Tham khảo: uxpin