Như từng inch thời gian chuyển tiếp mỗi năm trôi qua, nhiều xu hướng thiết kế mới xuất hiện không rõ ràng ở nơi đường chân trời. Các lĩnh vực thiết kế web luôn luôn thay đổi với công cụ mới, quy trình mới, và những thực hành tốt nhất để xây dựng các layout sử dụng được.
Thật khó khăn để dự đoán chính xác các xu hướng sẽ gây sự chú ý nhất. Tuy nhiên lịch sử gần đây cho thấy một hình mẫu của xu hướng đã được phát triển rất nhanh. Tôi đã sắp xếp 20 xu hướng độc đáo đã phổ biến trong năm 2015 và có khả năng sẽ tiếp tục trong năm 2016.
1. Sketch App cho thiết kế giao diện người dùng (UI)
Sketch đang nhanh chóng thay thế Photoshop cho mọi công việc thiết kế giao diện người dùng khác nhau, từ wireframes với độ chính xác thấp đến thiết kế mockup và icon độ chính xác cao.
Sketch App một ứng dụng chỉ dành cho Mac được tạo ra dành riêng cho các nhà thiết kế web và ứng dụng trên điện thoại. Nó cung cấp một môi trường làm việc mượt mà hỗ trợ các yếu tố vector cho bất kỳ giao diện nào, nhưng nó cũng giữ lại nhiều tính năng bạn mong đợi từ Photoshop như hiệu ứng chữ và layer style.
Trong khi không có bằng chứng cho thấy Sketch sẽ được phát hành cho Windows, nó vẫn trở thành một sự lựa chọn có giá trị đối với người dùng OS X. Các quy trình làm việc đơn giản và giá rẻ hơn thay vì đang mất tiền cho Adobe. Nếu Sketch tiếp tục cung cấp những trãi nghiệm thiết kế giao diện người dùng tốt nhất, sau đó nó chắc chắn sẽ tiếp tục tăng trưởng tốt vào năm 2016 và xa hơn nữa.
2. Trình duyệt- dựa trên IDEs (Môi trường thiết kế tích hợp)
Máy tính để bàn IDEs đã tồn tại trong nhiều thập kỷ với các tùy chọn khác nhau, từ Notepad ++ đến Xcode và Visual Studio. Một IDE sẽ dễ dàng viết code với các gợi ý và cú pháp được tô sáng (giữa các tính năng khác).
Nhưng các IDE truyền thống đã được phát hành như là các ứng dụng trên máy tính để bàn. Trong vài năm qua, chúng tôi đã nhìn thấy một sự gia tăng đáng kể trong trình duyệt dựa trên IDEs đám mây (Cloud IDEs). Những điều này không yêu cầu bất kỳ phần mềm nào khác so với một trình duyệt web, cho phép các nhà phát triển viết code từ bất kỳ máy tính có kết nối Internet.
Chức năng của Cloud IDEs gần giống như các ứng dụng web, nơi bạn có thể lưu các đoạn mã code vào tài khoản của bạn để chia sẻ hoặc lưu trữ cá nhân. CodePen là một trong những IDEs phổ biến nhất với sự hỗ trợ cho HTML / CSS / JS cùng với tùy chỉnh xử lý trước như Jade / Haml và LESS / SCSS.
Mozilla Thimble là một IDE khác cho những nhà phát triển mới bắt đầu muốn học viết code. Cũng như Codeply rất tuyệt vời để thử nghiệm khung đáp ứng cụ thể như Bootstrap hoặc Zurb Foundation mà không cần phải tải về bất kỳ tập tin nào.
3. Sass/SCSS Mixins miễn phí
Preprocessors (Tiền xử lý) đã tạo thành xu hướng trong nhiều năm nay nhưng chỉ trở thành chủ đạo gần đây, đủ để thấy rằng nó phổ biến trên toàn bộ lĩnh vực thiết kế và phát triển web. Ngày nay nó có vẻ không phổ biến để viết vanilla CSS khi Sass / SCSS có thể cung cấp nhiều hơn thế nữa.
Có một lợi ích là nguồn cung cấp ngày càng tăng của các Sass mixin libraries. Mixins đơn giản giống như các đoạn mã code hay các chức năng cơ bản để tạo ra code lặp đi lặp lại trong CSS. Trong khi bạn có thể luôn viết riêng cho mình, nhiều nhà phát triển đã phát hành những mixin trực tuyến miễn phí.
Một số mixin đặt trong các libraries như Bourbon, trong khi những cái khác có thể là các mục độc lập. Hãy thử làm một tìm kiếm trong GitHub cho Sass / SCSS mixins để xem những gì bạn có thể tìm thấy.
4. Các thẻ Layout
Các thẻ layout website được phổ biến đầu tiên bởi Pinterest một vài năm trở lại đây và kể từ đó đã trở thành một xu hướng cho các content-heavy webpage. Plugin miễn phí như jQuery Masonry có thể được sử dụng để bắt chước phong cách layout này với các thẻ sinh động cho các độ cao và độ rộng khác nhau.
Một thẻ layout được sử dụng tốt nhất trên các trang có rất nhiều dữ liệu có thể quét được. Trang đích của Google Now sử dụng một thẻ layout để quảng cáo thẻ tùy chọn cho ứng dụng Google Now.
Bạn có thể nghĩ về thẻ layout như hệ thống lưới năng động hơn với sự tập trung vào việc giảm thiểu nội dung các yếu tố cần thiết để liệt kê thêm nhiều mục với nhau. Các tạp chí trực tuyến như UGSMAG và The Next Web là hai ví dụ hoàn hảo của thẻ layout được sử dụng để giới thiệu nội dung bài viết gần đây.
5. Các Explainer Video tùy chỉnh
Các công ty lớn và nhỏ đã đưa đến xu hướng của explainer video tùy chỉnh như nhau. Chúng thường được tạo ra với hình ảnh động như ví dụ Crazy Egg. Nhưng video khác dựa trên những thước phim thực tế cuộc sống như Instagram Direct.
Mục đích của một explainer video là để mô tả một sản phẩm hay dịch vụ hoạt động như thế nào. Khách viếng thăm có thể đọc lướt một danh sách các tính năng và vẫn không có ý tưởng các sản phẩm hoạt động như thế nào. Video làm rõ tất cả mọi thứ bằng trực quan và bao gồm các thứ quan trọng chỉ trong một vài phút.
Nếu bạn muốn thử làm một explainer video tùy chỉnh, hãy xem this Udemy course. Đây là một nghiên cứu chuyên sâu tập trung vào các video cho thiết kế trang đích.
6. Xem trước sản phẩm sống động
Thiết kế trang đích có sự tăng trưởng đáng kinh ngạc xuất phát từ tốc độ Internet lớn hơn và khả năng trình duyệt. Một xu hướng chính tôi đã nhận thấy là sự bổ sung của việc xem trước sản phẩm sống động trên trang chủ hoặc cá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 một video tour du lịch và đồ họa vector bao gồm các giao diện Slack. Các bản xem trước sản phẩm cung cấp cho người dùng một cái nhìn thoáng qua cách các sản phẩm hoạt động như thế nào.
Webydo là một ví dụ tuyệt vời với một hình ảnh động sống động chạy trên trang chủ. Điều này cho phép khách viếng thăm nhìn thầy một Webydo hoạt động mà không cần phải tự giới thiệu các sản phẩm. Nhưng bạn không phải lúc nào cũng cần phải dựa trên hình ảnh động để xem trước sản phẩm. Iconjar sử dụng một ảnh chụp màn hình PNG đơn giản để hiển thị các sản phẩm là gì và nó hoạt động như thế nào.
7.Tự động hóa các chương trình chạy Task
Thế giới của sự phát triển frontend đã thay đổi rất nhiều với một số ít các bài thực hành tốt nhất cho việc tạo ra trang web. Các Task runner/ xây dựng các 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 yêu cầu nỗ lực làm bằng tay.
Tự động hóa là huyết mạch của quay vòng nhanh và tung ra code chất lượng. Máy móc không gây sai lầm, nên nếu bạn có thể tự động với sự tự tin, bạn sẽ có ít vấn đề hơn (trên lý thuyết).
Để tìm hiểu thêm hãy xem this Reddit post giải thích các task runner hoạt động như thế nào. Những công cụ này về cơ bản chạy mã Javascript (JS) sẽ tự động hóa các bộ phận của công việc, hoặc tùy chỉnh JS hoặc các script được viết bởi những cái khác.
8. Ứng dụng JavaScript Mobile gốc
Tôi là một người ủng hộ lớn việc sử dụng các công cụ thích hợp cho công việc. Trong trường hợp phát triển ứng dụng di động này có nghĩa là Java cho Android, Objective-C / Swift cho iOS.
Nhưng không phải tất cả mọi người 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 nó trở nên dễ dàng hơn cho các ứng dụng gốc được tạo ra và biên soạn với các thư viện khác như NativeScript vs React Native.
Khoảng cách để trở thành một lập trình viên ứng dụng di động được rút ngắn với khả năng tạo ra các ứng dụng điện thoại di động thông qua JavaScript. PhoneGap là một lựa chọn khác dựa trên / CSS code / JS HTML.
Trong khi quá trình sáng tạo khác nhau rất nhiều, JS nhanh chóng trở thành một giải pháp cho người lập trình muốn xây dựng các ứng dụng di động mà không cần học một ngôn ngữ mới.
9. Các công cụ phối hợp cho thiết kế
Nhắn tin nhanh và chat nhóm đã có hơn một thập kỷ. Tuy nhiên các nguồn lực này có truyền thống dựa trên văn bản thô với một số khả năng đính kèm tập tin.
Một xu hướng mới đang 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 chat. Notable là một ví dụ, nơi các chú thích và ý kiến có thể được sắp từng lớp ngay trên đầu trang của một tài liệu. Điều này cho phép các nhà thiết kế chia sẻ công việc trực tiếp một cách gọn gàng với tất cả mọi người trên một nhóm.
Slack là ứng dụng chat 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ác cơ sở phát triển người dùng Slack đã kiên quyết về việc tạo ra phần mở rộng với rất nhiều cải thiện về khả năng & ràng buộc của Slack vào các sản phẩm khác như Hangouts, MailChimp, và thậm chí là WordPress.
10. Frontend Framework đáp ứng
Các FrontEnd Framework như Bootstrap đã tồn tại trong nhiều năm và tiếp tục chứng minh sự hữu ích trên các dự án cả cá nhân và chuyên nghiệp. Thiết kế đáp ứng đã buộc nó vào các framework và tạo ra nhu cầu code frontend thay vì chỉ là backend (Django, Laravel, vv).
Tiến tới năm 2016, tôi nghĩ rằng chúng tôi sẽ được đọc nhiều hơn về các Frontend Framework đá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 sự ra đời của Foundation 6 và sự giới thiệu và phát hành của Bootstrap 4.
Các framework ít nổi tiếng khác mà bạn có thể xem bao gồm Gumby và Pure CSS.
11.Tập trung nhiều hơn vào thiết kế UX
Các lĩnh vực sử dụng thiết kế trãi nghiệm người dùng (UX) sẽ tiếp tục phát triển nhanh chóng với nhiều nhà thiết kế và các nhà phát triển đang tạo sự chú ý. 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 cuối cùng 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 làm thế nào nó được áp dụng để thiết kế giao diện. Bây giờ chúng ta có những nguồn tài nguyên như UX Stack Exchange và free UX ebooks. 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 gian tốt nhất để nghiên cứu và tìm hiểu làm thế nào các nguyên tắc UX có thể được áp dụng cho tất cả các hình thức của giao diện kỹ thuật số.
12. Package Managers (Các gói quản lý)
Các gói quản lý kỹ thuật số đã tăng lên một cách nhanh chóng mà chúng là một yêu cầu thực tế để phát triển web hiện đại. Những giải pháp như Bower và NPM có thể tiết kiệm rất nhiều thời gian khi bắt đầu các dự án mới.
Làm chủ bất kỳ công nghệ mới nào sẽ mất nhiều thời gian và đi kèm với một đường cong trong việc học tập. Nhưng nếu có một điều mà mỗi nhà phát triển frontend (hoặc backend) nên biết đó là các gói quản lý. Chúng yêu cầu một số kiến thức về lệnh đầu cuối nhưng một khi bạn đã quen với quá trình này, bạn sẽ không bao giờ muốn quay trở lại.
13. UI hình ảnh động nâng cao
Các chuyển tiếp CSS3 chỉ là khởi đầu của một xu hướng lâu dài của hình ảnh động trên web. Bây giờ chúng ta có hàng tá các libraries về CSS và JavaScript dành riêng cho phim hoạt hình. Những điều tôi không bao giờ mơ ước có thể đang được xây dựng và cung cấp miễn phí nếu bạn biết nơi để tìm.
Hình chuyển động không phải là một yêu cầu cho thiết kế tốt. Nhưng nó có thể làm cho một thiết kế tốt trở 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 hình chuyển động cho các giao diện và xem những gì bạn có thể lấy được từ các trang web khác nhau. Hãy nhớ rằng hình ảnh động web không phải là một bộ phim của 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 một giao diện mà không trở thành một yếu tố gây khó chịu hoặc mất tập trung của thiết kế.
14. Các nhà thiết kế học về Code
Một chủ đề hot trong năm nay đã được nghiên cứu cho các nhà thiết kế học tập về Code. Một số nhà thiết kế cảm thấy công việc của họ khộng phải để viết code, trong khi những người khác cảm thấy nó trở nên phổ biến và cần được chấp nhận.
Tôi đã đọc những thảo luận nóng bỏng và các bài viết hấp dẫn về chủ đề này mà dường như chỉ để tiếp cận các phản ứng cảm xúc. Một thiết kế tốt chỉ là một hình ảnh đẹp mà không cần code. Tuy nhiên, để tập trung vào cả hai đòi hỏi một nhà thiết kế dành ít thời gian thực hành bằng tay.
Vậy là đã có một câu trả lời cuối dùng chưa? Một số người cho rằng khả năng công việc tăng lên đối với các nhà thiết kế người mã hóa frontend. Tuy nhiên, nếu có ai đó không muốn viết code ? hãy nghĩ xem giá trị học tập nó để cạnh tranh?
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 nằm trên bàn cho nhiều nhà thiết kế – những người nhiều khả năng sẽ tiếp tục thảo luận vào năm 2016.
15. Các Tool & Webapp online miễn phí
Nó đã từng được sử dụng để tất cả các chương trình được chạy từ máy tính để bàn không có vấn đề gì bạn cần phải làm. Nhưng ngày nay tôi luôn ngạc nhiên với bao nhiêu ứng dụng web trực tuyến có sẵn miễn phí.
Bạn sẽ tìm thấy mọi thứ từ URL encoding/decoding đến Markdown editor hoàn toàn miễn phí. Thậm chí Google Drive đã đem các sản phẩm Microsoft Office vào trong trình duyệt (một lần nữa, hoàn toàn miễn phí).
Mức độ hiện tại về sức mạnh máy tính và tiêu chuẩn đồng nhất từ các trình duyệt web cung cấp một giá trị các cơ hội dường như vô hạn. Các nhiệm vụ phức tạp như tạo resume đến nén hình ảnh có thể được xử lý ngay từ cửa sổ trình duyệt.
16. Sự phát triển 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. WebComponents website có nguồn tài nguyên tuyệt vời và vật liệu để cung cấp cho các nhà phát triển một sự vượt qua ban đầu vào trong 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 mô-đun web hãy xem qua bài đăng này để tìm hiểu thêm.
Trong khi các thành phần không đặc biệt thổi bùng lên thành status chính , chúng đang được thảo luận bởi các nhà phát triển chuyên nghiệp trên toàn thế giới. Google đã phát hành Polymer là một cấu trúc cho việc thêm các thành phần web thông qua JS và HTML.
Điều này có thể chưa được sử dụng thực tế trong các dự án của khách hàng lớn. Tuy nhiên công nghệ này có sẵn và với một chút luyện tập 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à thấy một vài mẫu code bạn có thể đọc this CSS-Tricks post về các thành phần mô-đun web.
17. Các nguồn để học online
Chúng ta đều biết rằng bây giờ là thời điểm dễ nhất để học bất kỳ kỹ năng nào một cách thoải mái từ máy tính của bạn. Có vẻ như thị trường học tập trực tuyến đang tăng theo cấp số nhân với các khóa học mới và các trang web xuất hiện mỗi năm.
Tôi cảm thấy tự tin hơn bao giờ hết rằng chúng ta sẽ thấy một 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 cùng với các trang web mới như Bitfountain và Learn-Verified.
Nếu có một chủ đề mà bạn muốn học, có thể là một khóa học trực tuyến – đặc biệt là nếu bạn muốn tìm hiểu các kỹ thuật về 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. Server-Side JavaScript
Trong khi đã có các tùy chọn trong quá khứ cho server-side JS, không ai phổ biến nhanh như as Node.js. JavaScript đã rơi vào tình yêu với library này và xem nó nổi lên thành đối thủ cạnh tranh trực tiếp với các ngôn ngữ phụ trợ khác như Python hay PHP.
Node cho phép các nhà phát triển xây dựng các trang web sử dụng một ngôn ngữ duy nhất cho cả hai code frontend + backend. Và tài nguyên như Node Package Manager cung cấp nhiều giá trị nhiều hơn cho Node.js.
Từ những gì tôi có thể nói, Node vẫn là xu hướng đi lên và tiếp tục để đạt được sự thu hút từ những người đam mê trong ngành. Cho dù bạn có kế hoạch để học Node hay không, không có gì nghi ngờ 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 hỗ trợ cảm ứng trên website
Các trình duyệt điện thoại thông minh luôn hỗ trợ tính năng cảm ứng cho tất cả các trang web để duy trì tính tương thích ngược. Tuy nhiên, thời gian gần đây tôi chú ý nhiều hơn các plugin và các tính năng tùy chỉnh nối vào các trang web với các mục tiêu cụ thể xử lý các sự kiện xử lý cảm ứng.
Plugin như Photoswipe và Dragend.js được xây dựng để xử lý lướ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ỉ đang xây dựng trang web đáp ứng, mà cả các trang web cảm ứng nữa.
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ật sự ấn tượng dành cho web mà chỉ dựa vào các sự kiện cảm ứng.
20. Thiết kế vật liệu (Material Design) trên web
Phát hành của Google về material design là một thành công rất lớn cho các nhà thiết kế Android. Material design được coi là một ngôn ngữ thiết kế nhằm đơn giản hóa quá trình của việc tạo các 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 đã để việc này trong lòng và xây dựng toàn bộ các trang web dựa trên ngôn ngữ thiết kế mới của Google. Có vẻ như các xu hướng thiết kế vật liệu vượt ra ngoài các ứng dụng điện thoại di động để vào thế giới của thiết kế web.
Folks- những người muốn xây dựng các trang website vật liệu thậm chí không phải phát minh lại. Thư viện miễn phí như Material UI và Materialize cung cấp các code tùy chỉnh cho cấu trúc layout mới trên nền tảng thiết kế vật liệu.
Nguồn: www.hongkiat.com
