Xu hướng thiết kế web lớn 2015 (P.1)

Các sản phẩm trang Boldking (ở trên) sử dụng SVG nhẹ và Java Script để trình bày một phép ẩn dụ hình ảnh mô tả cách sản phẩm của họ hoạt động. Không chỉ là những ý tưởng và hình ảnh động tuyệt vời, nhưng cũng đáng chú ý không kém là một thực tế rằng nó đã đạt được trong vòng 1,5 MB tổng trọng lượng trang

Khi suy nghĩ về thiết kế web, bạn phải xem xét đầy đủ các khả năng về internet trình bày. Hãy mạnh dạn lên, các nhà thiết kế có thể đẩy các giới hạn của sự tương tác của con người và trí tưởng tượng trên quy mô toàn cầu - như thường thấy với các ngành công nghiệp tiêu thụ, chẳng hạn như các trang web cơ quan sáng tạo.

Trong bài viết này, chúng tôi sẽ cho thấy một trong những xu hướng nổi bật nhất trong thiết kế web mới nổi trong năm 2015. Đây là nơi mà chúng ta có thể tìm thấy sự đổi mới thật sự và cơ hội mới - một vài trong số đó có thể hoàn toàn thay đổi hiểu biết của chúng ta về một "trang web hiện đại".

1. Làm cho nó lớn hơn

big really bigthiet ke web


Trang web thông qua Sinh

"Làm cho nó lớn" có vẻ là nguyên tắc quan trọng nhất của thiết kế web hiện nay. Tuy nhiên đối với nhiều người, nó hầu như không thể chấp nhận rằng trang chủ - đặc biệt trên gấp - chỉ bao gồm một vài từ phủ lên trên một hình ảnh hoặc video. Đôi khi, ngay cả những điều hướng được gỡ bỏ hoặc (ít nhất) là ẩn như một biểu tượng nhỏ.

Hai hương vị của xu hướng thiết kế web này có thể được dán nhãn là "Cinematic" và "Book Cover". Việc đầu tiên đã được lấy cảm hứng từ phim ảnh và quảng cáo truyền hình, trong khi thứ hai tăng cường các khái niệm cổ điển của cuốn sách và danh mục in bìa.

book1thiet ke web


Bìa cuốn sách. Trang web thông qua Void và Mẫu.

Những lý do cho xu hướng này là cả hình ảnh và thực dụng. Bạn có thể cung cấp cho người sử dụng tác động tối đa ngay khi họ đang ở trên trang web của bạn và nó dễ dàng hơn để mã hóa, vì vậy nó hoạt động tốt trên điện thoại di động và màn hình máy tính để bàn (bố trí giống nhau vẫn không thay đổi mặc dù màn hình hiển thị kích thước thiết bị).

Hình ảnh toàn màn hình đi vào thịnh hành năm ngoái (như chúng tôi ghi nhận của chúng tôi trong năm 2014 ), nhưng với phát triển tiếp cận với hình ảnh chất lượng cao và công nghệ nhanh hơn chúng ta đang thấy trang web có những "Book Cover" bố trí để cấp độ tiếp theo.

Bellroy Thiet ke web


Lấy cảm hứng từ phim ảnh và truyền hình. Trang web thông qua bellroy.

Các "Cinematic" xu hướng dựa trên độ toàn màn hình (hoặc gần như toàn màn hình) video với một vài từ và / hoặc các yếu tố che trên đầu trang của nó. Chúng tôi ban đầu tham khảo phong cách này trong bài viết của chúng tôi, "xu hướng thiết kế Web cho năm 2013," khi nó được nhìn thấy trên một vài trang web cơ quan.

Bây giờ xu hướng này đang ngày càng tăng nhanh. Chỉ năm ngoái Paypal cập nhật trang chủ của nó với một nền video toàn màn hình - một động thái quan trọng này đã giúp đưa khái niệm này vào dòng chính.

2. Kinh nghiệm đa phương tiện

jack daniels thiet ke web


Jack Daniel  cung cấp một  ví dụ ấn tượng của hiện đại "đa phương tiện kinh nghiệm"

Các khái niệm đa phương tiện là khá ngày. Từ chính nó đã được để sử dụng và lạm dụng mà nó gần như mất đi ý nghĩa của nó. Tuy nhiên, đội ngũ của nhà thiết kế và lập trình viên không ngừng chiến đấu để tạo ra những trải nghiệm đa phương tiện ngày càng hấp dẫn.

Một khi trở lại, Flash là nền tảng cho những thí nghiệm này. Hiện nay đó là HTML5 <canvas> yếu tố  mà cuối cùng sẽ cho phép bạn tạo ra hầu hết các hiệu ứng hình ảnh trên trang web.

street view inspire2 thiet ke web


Trang web thông qua Dự án DNA bởi  j.viewz

Một ví dụ đáng chú ý của một giao diện được xây dựng với HTML Canvas là định hướng cộng đồng dự án DNA của Brooklyn dựa trên nhạc sĩ Jonathan Dagan (aka j.viewz). Khai mạc với một nền video rất trực quan, j.viewz cho chúng ta biết làm thế nào ông có kế hoạch để xây dựng các album âm nhạc mới của mình thông qua các thí nghiệm cá nhân của mình (mà người dùng có thể tải về) và cộng tác viên khác tải lên video, âm nhạc và thông tin phản hồi.

navigation thiet ke web

Trang web thông qua Raise

Nâng cao trang web của River là một ví dụ tuyệt vời không chỉ vì những ẩn dụ thị giác apt của nó, mà còn cách trình bày của nó. Tốc độ của hình ảnh động và không có khả năng di chuyển gần như buộc người dùng phải mất một hơi thở và điều chỉnh timeline trang.

Trong khi thiết kế giao diện, chúng ta thường làm tất cả mọi thứ để cho phép người sử dụng. Trang web này cho thấy người dùng vô hiệu hóa cho một số tiền nhất định của thời gian đôi khi có thể giúp trải nghiệm tốt hơn.

3. Các đột biến hiệu ứng Parallax

Parallax đã phát triển thành nhiều đột biến khác nhau mà có một điểm chung: nhà thiết kế sử dụng trang di chuyển hoặc di chuyển chuột để làm sinh động các phần tử hoặc thuộc tính của trang. Nếu bạn nhìn kỹ, hầu hết các trang web giới thiệu trong bài viết này sử dụng logic này. Dưới đây là một số ví dụ bổ sung.

Sự kiện Scroll và hoạt hình vẽ tay

Mint Thiet ke web


Trang web thông qua Công ty Thiết kế Mint.

Thật dễ dàng để sử dụng sáng tạo đánh giá cao Mint Công ty Thiết kế của một kỹ thuật CSS sprite cũ. Kết quả là một hấp dẫn và độc đáo cất trên một trang web công ty nếu không đơn giản.

Di chuyển sáng tạo

quo s3 opisy thiet ke web

Trang web thông qua QUO +

Các QUO + trang tai nghe sẽ đưa bạn vào một hoang dã, cuộc hành trình như mê cung thông qua trang web của họ với di chuyển theo chiều dọc và ngang - cùng với một phần thú vị, nơi bạn "di chuyển" thông qua màu sắc sản phẩm của họ quá. 

4. Animated truyện

akso3 thiet ke web


Trang web thông qua Boldking

Trong loại này của trang, tương tự như ví dụ đầu tiên, một chuỗi hoạt hình bắt đầu khi người dùng tới một vị trí di chuyển nhất định. Thông thường, nó chỉ là một vài yếu tố trượt vào trang hoặc sử dụng một fade-in hiệu ứng xuất hiện.

Các sản phẩm trang Boldking (ở trên) sử dụng SVG nhẹ và Java Script để trình bày một phép ẩn dụ hình ảnh mô tả cách sản phẩm của họ hoạt động. Không chỉ là những ý tưởng và hình ảnh động tuyệt vời, nhưng cũng không kém đáng chú ý là một thực tế rằng nó đã đạt được trong vòng 1,5 MB tổng trọng lượng trang. Đôi khi một thư viện JS đơn có kích thước này. Một trong những chuỗi hoạt hình thậm chí còn tương tác.

collindewi thiet ke web


Trang web thông qua Colin và Dewi

Colin và Dewi của website đám cưới là một cách đơn giản nhưng hiệu quả để giữ cho người sử dụng tập trung trong khi đọc một câu chuyện. Bạn đang trình bày với một đoạn của câu chuyện tại một thời điểm. Để xem các phần tiếp theo, bạn cần phải di chuyển đến nó.

Nghe có vẻ giống như chức năng cuộn chung chung, nhưng CSS 3D hoạt hình - cũng như lẩn trốn và văn bản lộ mảnh vỡ - làm cho câu chuyện nhiều chi tiết hấp dẫn.

Header và trang hiệu ứng thị sai gây ra bởi chuyển động chuột

habitat thiet ke web


Trang web thông qua  HabitatWeb

Hiệu ứng này được sử dụng để tạo ra ảo ​​giác về một không gian 3 chiều và hoạt động tốt khi khỏe mạnh vào tường thuật trực quan của trang, như  Habitat Web  (ở trên) hoặc  Archéologie de la Grande Guerre.

Khi sử dụng trang nhã, hiệu ứng này có thể có kết quả ấn tượng - mặc dù chúng tôi dự đoán rằng nó có thể sẽ không trở nên quá phổ biến. Nếu nó đã được phổ biến rộng rãi, nó có thể dễ dàng được coi là cheesy và gây phiền nhiễu.

Tác giả bài viết: Giang Nguyễn

Nguồn tin: LẬT ĐẬT WEB

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây