Xu hướng 1: Thiết kế co dãn (Responsive Design)

Một website co dãn nghĩa là bố cục của trang mạng sẽ tự điều chỉnh với kích cỡ màn hình mà bạn đang xem. Sự linh hoạt này mang lại trải nghiệm người dùng tốt hơn trên trang web ở bất cứ nơi đâu: điện thoại thông minh, máy tính bảng, hay máy tính để bàn.

Chẹp, nghe về cái này quá quen rồi phải không? Ví dụ đầy ra.

Outdure's website

Tại sao nó tuyệt?

Vì Google ưa chuộng thiết kế co dãn, và vì thiết kế co dãn giúp cho cả đì-zai-nơ và ma-két-tơ  xây dựng và duy trì một website dễ dàng hơn.
Bạn không phải lo lắng về những thiết bị di động mới và máy tính bảng mới xuất hiện với các kích cỡ màn hình khác nhau  vì thiết kế của bạn sẽ tự động điều chỉnh. Bạn cũng không cần lo bị loạn giữa website chính thức với phiên bản mobile (m.site) của nó. Thiết kế co dãn giúp cuộc sống dễ dàng hơn, và trải nghiệm người dùng bền vững hơn.

Xu hướng #2: Hỗ trợ màn hình Retina (Retina Support)

Năm 2010, Apple thông báo iPhone 4 có màn hình retina (võng mạc :-/). Nhiều người trong số chúng ta không hiểu gã khổng lồ công nghệ đó nói gì, nhưng những người thiết kế lại rất hào hứng.
Màn hình võng mạc giúp hình ảnh trên màn hình trở nên rõ ràng hơn trước kia. Trên màn hình retina, bạn sẽ có thể thấy gấp đôi số điểm ảnh hiển thị so với trên màn hình thông thường. Thế nghĩa là những người thiết kế có thể có gấp đôi số điểm ảnh so với trước kia, cho phép họ tạo ra những bức tranh chi tiết hơn.

Tiếc là tôi có mỗi "sì tu pít phôn", tôi không có thiết bị retina nào để thấy sự khác biệt lớn giữa ảnh retina với ảnh không phải retina.

Tại sao nó tuyệt?

Vì có gấp đôi số điểm ảnh so với bình thường, các designer có thể đưa thêm nhiều chi tiết vào các bản thiết kế của họ hơn. Hiển thị võng mạc cho phép các chi tiết của bản thiết kế được gom lại nhiều hơn trước kia, điều đó mở ra cánh cửa cho các ý tưởng thiết kế mới.

Xu hướng #3: Nền là hình ảnh lớn

Ngày càng nhiều công ty đang đặt ảnh lớn làm hình nền website để cho khách ghé thăm ấn tượng về công ty.
Ví dụ, Sweet Basil, ở Vail, Colorado, sử dụng các hình ảnh khác nhau về nhà hàng của họ.

Tại sao nó tuyệt?

Dùng ảnh lớn làm hình nền mang lại lợi ích lớn trong tiếp thị. Khách truy cập sẽ ngay lập tức hiểu hơn về công ty -- có thể là về văn hóa, hay về bất cứ dụng ý nào của website.
Trong hình trên, bạn có thể ngay lập tức hiểu về không khí và văn hóa của nhà hàng và có thêm ý tưởng để quyết định bạn có muốn đến đó hay không. Bạn chỉ có vài giây để chứng minh cho khách ghé thăm rằng họ nên ở lại trang của bạn.

Xu hướng #4: Cuộn trang đến vô tận (Infinite Scrolling)

Cuộn trang vô tận nghĩa là khi bạn cuộn xuống dưới trang, website vẫn tiếp tục tải, như trong Google image, hay là Pinterest/ các clone của Pinterest, hoặc một số template wordpress.

Cutest Paw

Tại sao nó tuyệt?

Lý do đơn giản nhất là cuộn trang vô tận tạo ra một trải nghiệm người dùng tốt hơn. Đầu tiên nó cho phép người dùng ở trên trang thay vì việc nhảy qua nhảy lại các trang khác nhau trên cùng một website. Nữa, sẽ nhanh hơn khi tải một trang website so với việc tải nhiều trang khác nhau.
 Nếu bạn có nhiều hình ảnh trên trang, hãy cân nhắc dùng cuộn trang vô tận để cho chúng hiện hết khi khách truy cập cuộn trang xuống dưới xuyên suốt nội dung của bạn.

Xu hướng #5: Cuộn trang thị sai (?) (Parallax Scrolling)

Parallax scrolling là một kỹ thuật đồ họa máy tính trong đó nền sau sẽ chuyển động chậm rãi trong nền trước, tạo một ảo giác như 3D.
Nhiều website đã bắt đầu áp dụng kỹ thuật này, nhưng nếu lạm dụng, nó sẽ trông rất phô trương. Nhưng nếu bạn nghĩ đến việc tạo cho website tương tác tốt hơn với khán giả, kỹ thuật này sẽ giúp bạn thành công.

Website bộ phim Life of Pi (nhìn cũng chóng mặt phết)

Tại sao nó tuyệt?

Parallax scrolling thổi một sức sống vào website. Ảnh vẫn dưới dạng 2D, nhưng nó tạo ra trải nghiệm như 3D. Nó giúp các marketer sử dụng website để kể câu chuyện về nó khi tiếp thị ra công chúng. Khi bạn cuộn xuống, bạn sẽ tìm thấy thêm thông tin về sản phẩm hoặc dịch vụ khi ảnh và chữ xuất hiện ở những nơi khác nhau.
Kỹ thuật này có thể sẽ rất mạnh mẽ, giúp doanh nghiệp của bạn có sức sống hơn đối với khán giả.

Xu hướng #6: Scalable Vector Graphics

Scalable vector graphics (SVGs) là một định dạng ảnh vector dựa trên XML cho phép các designer lên trình cho ảnh của họ với sự tương tác và hoạt họa. Video dưới đây sẽ chỉ ra những gì các file SVG có thể làm để đưa đồ họa và hoạt hình của bạn lên tầm mới.

Tại sao nó tuyệt?

Vì scalable vector graphics dùng hình vector, bạn có thể thay kích cỡ chúng mà không khiến hình bị biến dạng. Chúng cũng sẽ làm tốt hơn nếu tạo ra các animation như chúng ta thấy bên trên.


HubSpot Graphic Designer Ivan Sunguroff nói, "Scalable vector graphics đang thay thế dần các hình bitmap, khi những người thiết kế hiện đại tiếp tục tối ưu hóa tốc độ và sự linh hoạt của website. SVGs sẽ nhanh chóng trở thành yếu tố chính của bất cứ thiết kế co dãn thật sự. Một người thiết kế chỉ cần phải xuất 1 lần trong 1 định dạng, và hình ảnh đó sẽ hiển thị đẹp và mượt trên bất cứ thứ gì từ đồng hồ thông minh cho tới một màn hình võng mạc."

(Felling stupid >"<)

Xu hướng #7: Typography

Nhiều người thiết kế hiện nay sử dụng rộng rãi hơn các kiểu chữ để giúp khách truy cập trên trang. Web typography gồm các header của trang để giúp tổ chức website mà vẫn gọn gàng đẹp đẽ. Những người thiết kế vẫn luôn dùng typography trên thiết kế của họ, nhưng sự khác biệt ngày nay là sự lựa chọn font chữ đã tăng chóng mặt. (ý là có nhiều font chữ để lựa chọn hơn)

 Một ví dụ điển hình của việc sử dụng typography thành công là  website của The New Yorker,giúp website được bố cục gọn gàng, bắt mắt và dễ dàng nhận diện rộng khắp.

Tại sao nó tuyệt

Vì typography gồm family, style, và size của một font, nó có thể giúp toàn bộ một thương hiệu (nhãn hàng) dễ dàng nhận ra từ cái nhìn đầu tiên. Nó cũng giúp website tạo cảm giác quy củ và gọn gàng.
 Typography cho phép tạo ra một xu hướng thiết kế đơn giản nhưng vẫn dẫn người đọc đi hết website. Trong trường học của The New Yorker, website không bị đứt gãy - nó sạch sẽ, gọn gàng và có đủ thông tin để chúng ta hiểu về nội dung của nó.
Khi chúng ta đọc qua những trang đầu, nhờ kiểu chữ lớn nổi bất, chúng ta có thể nhận ra nơi nào chúng ta cần đi, là News Desk, Culture Desk hay nội dung chào mừng nào đó...

Xu hướng #8: Overlay Dropdowns

Overlay dropdowns là kiểu thực đơn xổ xuống nằm trực tiếp trên nội dung của website. Nó có nghĩa là khi bạn bấm vào một lựa chọn trên trang điều hướng website, sẽ có những lựa chọn khác bật ra dưới thực đơn mà không đưa bạn đến trang web khác.
iOffice dùng kỹ thuật này cho website của họ.

Tại sao nó tuyệt?

Kỹ thuật này thật sự có giá trị cho các công ty muốn thêm các liên kết trên trang chủ mà không khiến trang bị đặc chữ. Khi bạn chọn bất cứ thứ gì trên overlay dropdown, bạn vẫn có thể xem phần còn lại của trang và thấy các nội dung khác.
Các công ty đang thiết kế trang web cho bố cụ co dãn rất thích loại dropdown này vì nó giúp tối đa hóa khoảng đất có được trên các thiết bị di động và máy tính bảng.

Còn xu hướng nào khác nữa?
______________________________________
Nguồn: Hubspot my infinitive inspiration :x

Rất vui, đã có bài mới lên site, thoát khỏi cơn lười biếng và giải ngố được một số khái niệm về kỹ thuật. ^^

Một câu hỏi ngố: Tại sao HTML5 không được liệt kê vào đây nhỉ? :-/