20 xu hướng hấp dẫn nhất sẽ định hình thiết kế web vào năm 2016

Khi thời gian trôi qua với mỗi năm trôi qua, nhiều xu hướng thiết kế mới xuất hiện trên đường chân trời. Lĩnh vực thiết kế web luôn thay đổi với các công cụ mới, quy trình công việc và thực tiễn tốt nhất để xây dựng bố cục có thể sử dụng.

Thật khó để dự đoán xu hướng chính xác nào sẽ thu hút sự chú ý lớn nhất. Tuy nhiên, lịch sử gần đây cho thấy một mô hình của các xu hướng đang phát triển như cháy rừng. Tôi đã tổ chức 20 xu hướng độc đáo đã đạt được lực kéo trong năm 2015 và có khả năng sẽ tiếp tục tốt vào năm 2016.

1. Ứng dụng phác thảo cho thiết kế giao diện người dùng

Phác thảo đang nhanh chóng thay thế Photoshop cho tất cả các tác vụ thiết kế UI từ dây lưới độ trung thực thấp đến mockup độ trung thực cao và thiết kế biểu tượng.

Ứng dụng phác thảo là một ứng dụng chỉ dành cho Mac được thiết kế dành riêng cho các nhà thiết kế web và thiết bị di động. Nó cung cấp một môi trường làm việc mượt mà hơn để tạo các thành phần vector cho bất kỳ giao diện nào, nhưng nó cũng giữ lại nhiều tính năng mà bạn mong đợi từ Photoshop như hiệu ứng văn bản và kiểu lớp.

Mặc dù không có bằng chứng nào cho thấy Sketch sẽ được phát hành cho Windows, nhưng nó vẫn trở thành lựa chọn có giá trị của người dùng OS X. Quy trình làm việc được đơn giản hóa và thẻ giá rẻ hơn đang giúp Adobe kiếm tiền. Nếu Phác thảo tiếp tục cung cấp trải nghiệm thiết kế UI tốt nhất thì chắc chắn nó sẽ tiếp tục phát triển tốt trong năm 2016 và hơn thế nữa.

2. IDE dựa trên trình duyệt

IDE máy tính để bàn đã xuất hiện trong nhiều thập kỷ với các tùy chọn từ Notepad ++ đến Xcode và Visual Studio. Một IDE giúp viết mã dễ dàng hơn với các gợi ý và tô sáng cú pháp (trong số các tính năng khác).

Nhưng các IDE truyền thống đã được phát hành dưới dạng các ứng dụng máy tính để bàn. Trong vài năm qua, chúng ta đã chứng kiến ​​sự gia tăng mạnh mẽ của các IDE đám mây dựa trên trình duyệt. Chúng không yêu cầu bất kỳ phần mềm nào ngoài trình duyệt web, cho phép các nhà phát triển viết mã từ bất kỳ máy tính nào có quyền truy cập Internet.

Cloud IDEs hoạt động giống như các ứng dụng web hơn, nơi bạn có thể lưu các đoạn mã vào tài khoản của mình để chia sẻ hoặc lưu trữ cá nhân. CodePen là một trong những IDE phổ biến nhất có hỗ trợ HTML / CSS / JS cùng với tiền xử lý tùy chỉnh như Jade / Haml và LESS / SCSS.

Mozilla Thimble là một IDE khác dành cho các nhà phát triển đầu tiên muốn tìm hiểu khi họ viết mã. Ngoài ra Codeply rất tốt để thử nghiệm các khung phản hồi cụ thể như Bootstrap hoặc Zurb's Foundation mà không cần tải xuống bất kỳ tệp nào.

3. Mixins Sass / SCSS miễn phí

Tiền xử lý đã là xu hướng trong nhiều năm nhưng chỉ gần đây đã trở thành xu hướng chính đủ để cảm thấy phổ biến trên toàn bộ lĩnh vực thiết kế / phát triển web. Ngày nay có vẻ kỳ quặc khi viết CSS vanilla khi Sass / SCSS có thể cung cấp nhiều hơn thế.

Một lợi ích là nguồn cung thư viện Sass mixin ngày càng tăng. Các mixin đơn giản giống như các đoạn mã hoặc các hàm cơ bản để tạo mã lặp lại trong CSS. Mặc dù bạn luôn có thể tự viết, nhiều nhà phát triển đã rất tốt bụng khi phát hành mixins miễn phí trực tuyến.

Một số mixin đến trong các thư viện như Bourbon trong khi một số khác có thể là các mục độc lập. Hãy thử thực hiện tìm kiếm trong GitHub cho các mixins Sass / SCSS để xem những gì bạn có thể tìm thấy.

4. Bố trí thẻ

Bố cục thẻ trang web lần đầu tiên được phổ biến bởi Pinterest một vài năm trước và từ đó trở thành xu hướng cho các trang web nặng về nội dung. Các plugin miễn phí như jQuery Masonry có thể được sử dụng để bắt chước kiểu bố cục này với các thẻ hoạt hình cho các chiều cao và chiều rộng khác nhau.

Bố cục thẻ được sử dụng tốt nhất trên các trang có nhiều dữ liệu nên có thể quét được. Trang đích cho Google Hiện hành sử dụng bố cục thẻ để quảng cáo thẻ tùy chọn cho ứng dụng Google Hiện hành.

Bạn có thể nghĩ về cách bố trí thẻ như các lưới năng động hơn với trọng tâm là giảm thiểu nội dung đến mức cần thiết để liệt kê nhiều mục cùng nhau. Các tạp chí trực tuyến như UGSMAG và The Next Web đều là những ví dụ hoàn hảo về bố cục thẻ được sử dụng để hiển thị nội dung bài đăng gần đây.

5. Video giải thích tùy chỉnh

Các công ty lớn và nhỏ cũng đã bắt kịp xu hướng của các video giải thích tùy chỉnh. Chúng thường được tạo với hình ảnh động như ví dụ Crazy Egg. Nhưng các video khác dựa trên các cảnh quay thực như Instagram Direct.

Mục đích của video người giải thích là chứng minh cách thức sản phẩm hoặc dịch vụ hoạt động. Khách truy cập có thể đọc lướt danh sách các tính năng và vẫn không biết sản phẩm hoạt động như thế nào. Video làm rõ mọi thứ trực quan và bao gồm những thứ quan trọng chỉ trong vài phút.

Nếu bạn muốn thử làm một video giải thích tùy chỉnh, hãy xem khóa học Udemy này. Đây là một nghiên cứu chuyên sâu tập trung vào các video để thiết kế trang đích.

6. Xem trước sản phẩm trực tiếp

Thiết kế trang đích đã chứng kiến ​​sự tăng trưởng đáng kinh ngạc xuất phát từ tốc độ Internet và khả năng trình duyệt lớn hơn. Một xu hướng chính mà tôi nhận thấy là việc bổ sung các bản xem trước sản phẩm trực tiếp trên trang chủ hoặc trang đích tùy chỉnh.

Lấy ví dụ trang sản phẩm của Slack. Nó có tính năng tham quan bằng video và đồ họa vector bao phủ giao diện Slack. Các bản xem trước sản phẩm này nhằm cung cấp cho người dùng tiềm năng cái nhìn về cách thức sản phẩm hoạt động.

Webydo là một ví dụ tuyệt vời khác với hoạt hình trực tiếp đang phát trên trang chủ. Điều này cho phép khách truy cập thấy Webydo hoạt động mà không cần phải tự giới thiệu sản phẩm. Nhưng bạn không cần phải luôn luôn dựa vào hình ảnh động để xem trước sản phẩm. Iconjar sử dụng ảnh chụp màn hình PNG đơn giản để hiển thị sản phẩm là gì và cách thức hoạt động của sản phẩm.

7. Người chạy nhiệm vụ tự động

Thế giới phát triển frontend đã thay đổi rất nhiều với một số thực tiễn mới tốt nhất để tạo trang web. Các trình chạy / xây dựng hệ thống như Gulp và Grunt đang được sử dụng thường xuyên hơn cho một loạt các nhiệm vụ trước đây đòi hỏi nỗ lực thủ công.

Tự động hóa là huyết mạch của sự quay vòng nhanh chóng và tạo ra mã chất lượng. Máy không mắc lỗi, vì vậy bạn càng có thể tự động hóa với sự tự tin thì càng ít vấn đề (về lý thuyết).

Để tìm hiểu thêm, hãy xem bài đăng Reddit này giải thích cách người chạy tác vụ hoạt động. Các công cụ này về cơ bản chạy mã JS sẽ tự động hóa các phần trong quy trình công việc của bạn, hoặc là tùy chỉnh JS hoặc các tập lệnh được viết bởi người khác.

8. Ứng dụng di động gốc JS

Tôi là một người ủng hộ lớn của việc sử dụng các công cụ phù hợp cho công việc. Trong trường hợp phát triển ứng dụng di động, điều này có nghĩa là Java cho Android, Objective-C / Swift cho iOS.

Nhưng không phải ai cũng muốn học một ngôn ngữ mới chỉ để xây dựng một ứng dụng di động. Rất may, các ứng dụng gốc được tạo và biên dịch dễ dàng hơn với các thư viện thay thế như NativeScript hoặc React Native.

Khoảng cách để trở thành lập trình viên ứng dụng di động đang rút ngắn với khả năng tạo ứng dụng di động thông qua JavaScript. PhoneGap là một tùy chọn khác dựa trên mã HTML / CSS / JS.

Mặc dù quá trình tạo khác nhau rất nhiều, nhưng JS nhanh chóng trở thành một giải pháp cho các lập trình viên muốn xây dựng ứng dụng di động mà không cần học một ngôn ngữ mới.

9. Công cụ cộng tác cho thiết kế

Tin nhắn tức thời và trò chuyện nhóm đã tồn tại hơn một thập kỷ. Tuy nhiên, các tài nguyên này thường dựa vào văn bản gốc với một số khả năng để đính kèm tệp.

Một xu hướng mới nổi lên là khả năng chia sẻ tài liệu thiết kế trực tiếp trong các ứng dụng trò chuyện. Đáng chú ý là một ví dụ trong đó các chú thích và bình luận có thể được xếp lớp ngay trên đầu tài liệu. Điều này mang đến cho các nhà thiết kế một cách rõ ràng để chia sẻ công việc trực tiếp với mọi người trong nhóm.

Slack là ứng dụng trò chuyện phổ biến nhất tại thời điểm này hỗ trợ nhiều tính năng tương tự. Cơ sở người dùng Slack đang phát triển đã kiên quyết tạo ra các tiện ích mở rộng giúp cải thiện đáng kể khả năng của Slack & liên kết với các sản phẩm khác như Hangouts, MailChimp và thậm chí là WordPress.

10. Khung giao diện đáp ứng

Các khung Frontend như Bootstrap đã xuất hiện trong nhiều năm và tiếp tục chứng minh hữu ích cho các dự án cả cá nhân và chuyên nghiệp. Thiết kế đáp ứng đã buộc phải đi vào các khung công tác và tạo ra nhu cầu về mã frontend thay vì chỉ phụ trợ (Django, Laravel, v.v.).

Chuyển sang năm 2016 tôi nghĩ rằng chúng ta sẽ đọc nhiều hơn về các khung giao diện đáp ứng và giá trị của chúng trong các dự án web. Nhiều nhà phát triển đang háo hức chờ đợi phiên bản Foundation 6 và phiên bản v1 công khai của Bootstrap 4.

Các khung công tác ít được biết đến khác mà bạn có thể xem bao gồm Gumby và Pure CSS.

11. Tập trung hơn vào thiết kế UX

Lĩnh vực thiết kế trải nghiệm người dùng sẽ tiếp tục phát triển nhanh chóng với nhiều nhà thiết kế và nhà phát triển chú ý hơn. Thiết kế giao diện người dùng là một phần của thiết kế UX nhưng nó không phải là mục tiêu cuối cùng. UI là một phương tiện để kết thúc, với kết thúc là một trải nghiệm người dùng tuyệt vời.

Chỉ 5 năm trước tôi hầu như không quen thuộc với UX hoặc cách nó được áp dụng cho thiết kế giao diện. Bây giờ chúng tôi có các tài nguyên như UX Stack Exchange và sách điện tử UX miễn phí. Nếu bạn không biết nhiều về trải nghiệm người dùng thì bây giờ là thời điểm tốt nhất để nghiên cứu & tìm hiểu cách áp dụng các nguyên tắc UX cho tất cả các dạng giao diện kỹ thuật số.

12. Quản lý gói

Các nhà quản lý gói kỹ thuật số đã tăng rất nhanh đến nỗi thực tế họ là một yêu cầu cho phát triển web hiện đại. Các giải pháp như Bower và NPM có thể tiết kiệm rất nhiều thời gian để bắt đầu các dự án mới.

Nắm vững bất kỳ công nghệ mới sẽ mất thời gian và đi kèm với một đường cong học tập. Nhưng nếu có một điều mà mọi nhà phát triển frontend (hoặc phụ trợ) nên biết, thì đó là trình quản lý gói. Họ yêu cầu một số kiến ​​thức về các lệnh đầu cuối nhưng một khi bạn đã quen với quy trình, bạn sẽ không bao giờ muốn quay lại.

13. Ảnh động UI nâng cao

Chuyển đổi CSS3 chỉ là khởi đầu của một xu hướng hoạt hình dài hạn trên web. Bây giờ chúng tôi có hàng tá thư viện CSS và JavaScript dành riêng cho hoạt hình. Những điều tôi chưa bao giờ mơ ước có thể được xây dựng & có sẵn miễn phí nếu bạn biết tìm ở đâu.

Hoạt hình không phải là một yêu cầu cho thiết kế tốt. Nhưng nó có thể biến một thiết kế tốt thành một thiết kế tuyệt vời khi được sử dụng đúng cách.

Theo dõi các xu hướng hoạt hình cho các giao diện và xem những gì bạn có thể lấy từ các trang web khác nhau. Hãy nhớ rằng hoạt hình web không phải là một bộ phim Disney và cần được đối xử tôn trọng. Sử dụng hình ảnh động nhẹ nhàng để nó tăng cường giao diện mà không trở thành yếu tố gây phiền toái hoặc mất tập trung của thiết kế.

14. Nhà thiết kế học cách viết mã

Một chủ đề nút nóng trong năm nay đã được các nhà thiết kế học cách viết mã. Một số nhà thiết kế cảm thấy đó không phải là công việc của họ để viết mã, trong khi những người khác cảm thấy nó trở thành chuẩn mực và nên được chấp nhận.

Tôi đã đọc các cuộc thảo luận sôi nổi và các bài viết hấp dẫn về chủ đề này dường như chỉ thu hút các phản ứng cảm xúc. Một thiết kế tốt chỉ là một bức tranh đẹp mà không có mã. Tuy nhiên, để tập trung vào cả hai đòi hỏi một nhà thiết kế phải dành ít thời gian hơn để thực hành thủ công.

Vì vậy, có một câu trả lời dứt khoát? Một số người sẽ lập luận rằng khả năng tồn tại của công việc tăng đối với các nhà thiết kế biết mã hóa frontend. Nhưng nếu ai đó không muốn viết mã thì sao? Có đáng để học chỉ để cạnh tranh không??

Tôi cảm thấy câu trả lời rõ ràng nhất là làm bất cứ điều gì bạn muốn. Nhưng có vẻ như chủ đề này vẫn còn trên bàn cho nhiều nhà thiết kế có khả năng sẽ tiếp tục thảo luận vào năm 2016.

15. Công cụ & ứng dụng web trực tuyến miễn phí

Trước đây, tất cả các chương trình đều được chạy từ máy tính để bàn bất kể bạn cần làm gì. Nhưng ngày nay tôi luôn ngạc nhiên với số lượng ứng dụng web có sẵn miễn phí trên mạng.

Bạn sẽ tìm thấy mọi thứ từ mã hóa / giải mã URL đến trình chỉnh sửa Markdown hoàn toàn miễn phí. Ngay cả Google Drive cũng đã đưa các sản phẩm Microsoft Office vào trình duyệt (một lần nữa, hoàn toàn miễn phí).

Mức độ sức mạnh tính toán hiện tại và các tiêu chuẩn đồng nhất từ ​​các trình duyệt web cung cấp một lượng cơ hội dường như vô hạn. Các tác vụ phức tạp như tạo tiếp tục để nén hình ảnh có thể được xử lý ngay từ cửa sổ trình duyệt.

16. Sự tăng trưởng của các thành phần web

Các thành phần web đang cố gắng giải quyết các vấn đề phức tạp cho các nhà phát triển. Trang web WebComponents có các tài nguyên và tài liệu tuyệt vời để giúp các nhà phát triển bắt đầu bước vào chủ đề này.

Nếu bạn không chắc chắn làm thế nào để hiểu các thành phần web mô-đun, hãy xem bài đăng này để tìm hiểu thêm.

Mặc dù các thành phần không đặc biệt được đưa lên trạng thái chính thống, chúng đang được thảo luận bởi các nhà phát triển chuyên nghiệp trên khắp thế giới. Google đã phát hành Polymer, một khung được sử dụng để thêm các thành phần web thông qua JS và HTML.

Điều này có thể không thực tế để sử dụng trong các dự án khách hàng lớn. Tuy nhiên công nghệ có sẵn và với một chút thực hành, bạn có thể nắm vững các khái niệm một cách dễ dàng. Để tìm hiểu thêm và xem một vài mẫu mã, bạn có thể đọc qua bài viết Thủ thuật CSS này trên các thành phần web mô-đun.

17. Tài nguyên học trực tuyến

Chúng ta đều biết rằng bây giờ là thời gian dễ nhất để học bất kỳ kỹ năng nào từ sự thoải mái của máy tính của bạn. Có vẻ như thị trường học tập trực tuyến đang phát triển theo cấp số nhân với các khóa học và trang web mới xuất hiện hàng năm.

Tôi cảm thấy tự tin hơn bao giờ hết rằng chúng ta sẽ thấy sự gia tăng của việc học trực tuyến. Các trang web nổi tiếng như Treehouse và CodeSchool cung cấp các khóa học đáng kinh ngạc bên cạnh các trang web mới hơn như Bitfenez và Learn-Confirm.

Nếu có một môn học bạn muốn học, có khả năng là một khóa học trực tuyến - đặc biệt nếu bạn muốn học các kỹ thuật số như thiết kế giao diện người dùng hoặc phát triển ứng dụng.

18. JavaScript phía máy chủ

Mặc dù đã có các tùy chọn trong quá khứ cho JS phía máy chủ, nhưng không có tùy chọn nào được thẩm thấu nhanh như Node.js. Các nhà phát triển JavaScript đã yêu thư viện này và xem nó phát triển cạnh tranh trực tiếp với các ngôn ngữ phụ trợ khác như Python hoặc PHP.

Node cho phép các nhà phát triển xây dựng trang web bằng một ngôn ngữ duy nhất cho cả mã frontend + mã phụ trợ. Và các tài nguyên như Trình quản lý gói Node cung cấp nhiều giá trị hơn cho Node.js.

Từ những gì tôi có thể nói, Node vẫn đang trên đà phát triển và tiếp tục đạt được sức hút từ những người đam mê ngành công nghiệp. Cho dù bạn có kế hoạch học Node hay không, chắc chắn nó sẽ tiếp tục phát triển như một xu hướng chính trong năm 2016.

19. Tính năng trang web được hỗ trợ cảm ứng

Các trình duyệt điện thoại thông minh luôn hỗ trợ các tính năng cảm ứng cho tất cả các trang web để duy trì khả năng tương thích ngược. Tuy nhiên, gần đây tôi đã nhận thấy nhiều plugin và tính năng tùy chỉnh được thêm vào các trang web với mục tiêu cụ thể là xử lý các sự kiện chạm.

Các plugin như Photoswipe và Dragend.js được xây dựng để xử lý thao tác vuốt và chạm vào màn hình cảm ứng. Có vẻ như các nhà phát triển web không chỉ xây dựng các trang web phản hồi mà cả các trang web hỗ trợ cảm ứng cũng vậy.

Nếu bạn tìm kiếm xung quanh, bạn sẽ tìm thấy một số tính năng thực sự ấn tượng được xây dựng cho web chỉ dựa vào các sự kiện chạm.

20. Thiết kế tài liệu trên web

Phát hành thiết kế vật liệu của Google là một thành công lớn cho các nhà thiết kế Android. Thiết kế vật liệu được coi là ngôn ngữ thiết kế nhằm đơn giản hóa quá trình chế tạo giao diện người dùng cho điện thoại thông minh Android.

Theo thời gian, các nhà thiết kế web đã thực hiện điều này và xây dựng toàn bộ trang web dựa trên ngôn ngữ thiết kế mới của Google. Có vẻ như xu hướng thiết kế vật liệu đã vượt ra ngoài các ứng dụng di động vào thế giới thiết kế web.

Những người muốn xây dựng trang web vật chất thậm chí không phải phát minh lại bánh xe. Các thư viện miễn phí như UI UI và Materialize cung cấp mã tùy chỉnh để cấu trúc bố cục mới trên nền tảng thiết kế vật liệu.

Đóng cửa

Nhìn qua các xu hướng này, rõ ràng là chúng ta đang thấy một nỗ lực phối hợp thực sự từ cộng đồng web để làm cho quá trình xây dựng trang web dễ dàng hơn. Tất cả chúng ta đều muốn tiết kiệm thời gian trong quy trình làm việc hàng ngày của mình.

Kể từ khi thành lập web, chúng tôi đã thấy nhiều công nghệ phát triển, chỉ được thay thế bằng các lựa chọn thay thế tốt hơn. Những xu hướng năm 2016 này đang thúc đẩy một bộ kỹ thuật thiết kế đồng bộ hơn sẽ giúp việc xây dựng trang web dễ dàng hơn và ít phức tạp hơn.