20 найбільш гарячих тенденцій, які будуть формувати веб-дизайн 2016 року
Як раз в дюйми вперед з кожним роком, багато нових тенденцій дизайну вимальовуються на горизонті. Сфера веб-дизайну постійно змінюється за допомогою нових інструментів, робочих процесів і кращих методів побудови корисних макетів.
Важко передбачити, які точні тенденції привернуть найбільшу увагу. Проте останні історії показують тенденції, які зростають як лісова пожежа. Я організував 20 унікальних тенденцій, які набули зчеплення протягом 2015 року і, ймовірно, продовжуватимуться і до 2016 року.
1. Ескіз програми для дизайну інтерфейсу
Ескіз швидко замінює Photoshop на всі завдання дизайну інтерфейсу, починаючи від каркаси низької вірності до високоякісні макети & icon дизайн.
Sketch App - це додаток, створене лише для Mac і спеціально для веб-дизайнерів. Вона забезпечує більш плавне робоче середовище для розробки векторних елементів для будь-якого інтерфейсу, проте воно також зберігає багато функцій, які можна очікувати від Photoshop як текстові ефекти та стилі шарів.
Хоча немає жодних доказів того, що Sketch коли-небудь буде випущений для Windows, він все ще став цінним вибором для користувачів OS X. Спрощений робочий процес і дешевший цінник дають Adobe запустити свої гроші. Якщо Sketch продовжує надавати кращий досвід дизайну UI, то він, безсумнівно, продовжуватиме розвиватися і до 2016 року і далі.
2. Браузерні IDE
Настільні середовища інтегрованих середовищ існують десятиліттями з варіантами від Notepad ++ до Xcode і Visual Studio. IDE полегшує написання коду з пропозиціями та підсвічуванням синтаксису (серед інших функцій).
Але традиційно IDE були випущені як настільні програми. Протягом останніх кількох років ми спостерігали різке зростання кількості браузерних середовищних середовищ розробки. Вони не потребують іншого програмного забезпечення, окрім веб-браузера, який дозволяє розробникам писати код з будь-якого комп'ютера з доступом до Інтернету.
Cloud IDE функціонують більше як веб-програми, де можна зберегти фрагменти коду до облікового запису для спільного використання або особистого сховища. CodePen є одним з найпопулярніших IDE з підтримкою HTML / CSS / JS разом з попередньою обробкою, наприклад Jade / Haml і LESS / SCSS..
Mozilla Thimble є іншою середовищем розробки для розробників, які хочуть вивчати код. Також Codeply відмінно підходить для тестування певних реагуючих фреймворків, таких як Bootstrap або Zurb's Foundation, без необхідності завантажувати будь-які файли.
3. Безкоштовні Sass / SCSS Mixins
Попередні процесори були модними протягом багатьох років, але лише недавно стали достатньо популярними, щоб відчувати себе повсюдно у всій сфері веб-дизайну / розробки. Сьогодні здається дивним написати ванільний CSS, коли Sass / SCSS може надати набагато більше.
Однією з переваг є зростаюча пропозиція бібліотек Sass mixin. Прості суміші - це фрагменти коду або основні функції для створення повторюваного коду в CSS. Хоча ви завжди можете писати свої власні, багато розробників були досить люб'язними, щоб випустити безкоштовні онлайн-композиції.
Деякі mixins приходять у бібліотеках, таких як Bourbon, тоді як інші можуть бути окремими елементами. Спробуйте виконати пошук у GitHub для змішування Sass / SCSS, щоб дізнатися, що ви можете знайти.
4. Макети картки
Макети веб-сайтів спочатку були популяризовані компанією Pinterest кілька років тому і з тих пір стали тенденцією для веб-сторінок, що містять важкі матеріали. Безкоштовні плагіни, такі як jQuery Masonry, можуть бути використані для імітації цього стилю макета з анімованими картами для різних висот і ширини.
Макет картки найкраще використовувати на сторінках з великою кількістю даних, які мають бути доступними для сканування. Цільова сторінка для Google Now використовує макет картки, щоб рекламувати додаткові картки для програми Google Асистент.
Ви можете розглядати макети карт як більш динамічні сітки з акцентом на мінімізацію вмісту до найважливіших елементів, щоб перелічити більше елементів разом. Інтернет-журнали, такі як UGSMAG та The Next Web, є прекрасними прикладами макетів карт, які використовуються для демонстрації останніх змістів публікацій.
5. Користувальницькі пояснювальні відео
Великі та малі компанії сприйняли тенденцію користувацьких відеороликів пояснювачів. Вони часто створюються за допомогою анімації, як наприклад Crazy Egg. Але інші відео покладаються на реальні кадри, як Instagram Direct.
Мета відеоролика пояснити, щоб показати, як працює продукт або послуга. Відвідувачі можуть переглядати список функцій і досі не знають, як працює продукт. Відео прояснити все візуально і охопити важливі речі всього за кілька хвилин.
Якщо ви хочете спробувати свої сили у створенні користувальницького пояснювача відео, перевірте цей курс удями. Це поглиблене дослідження, присвячене відео для дизайну цільової сторінки.
6. Попередній перегляд живого продукту
Дизайн цільової сторінки продемонстрував неймовірне зростання, зумовлене збільшенням швидкості Інтернету та можливостей браузера. Однією з основних тенденцій, яку я помітив, є додавання попереднього перегляду живого продукту на домашніх сторінках або користувацьких цільових сторінках.
Візьміть, наприклад, сторінку продукту Slack. Він містить відео-тур і векторну графіку, що охоплює інтерфейс Slack. Ці попередні перегляди продукту покликані дати потенційним користувачам змогу побачити, як працює продукт.
Webydo - це ще один яскравий приклад, коли на домашній сторінці грає жива анімація. Це дозволяє відвідувачам бачити Webydo в дії без ручного демо продукту. Але вам не завжди потрібно покладатися на анімацію для попереднього перегляду продукту. Iconjar використовує простий скріншот PNG, щоб показати, що таке продукт і як він працює.
7. Автоматизовані бігуни завдань
Світ розробки інтерфейсу змінився настільки багато, що з новими кращими практиками для створення веб-сайтів. Бігуни завдань / системи побудови, такі як Gulp і Grunt, використовуються набагато частіше для виконання багатьох завдань, які раніше вимагали ручних зусиль.
Автоматизація - це джерело життєвої сили швидкого повороту та збивання коду якості. Машини не роблять помилок, тому чим більше ви можете автоматизувати з упевненістю, тим менше проблем ви отримаєте (теоретично).
Щоб дізнатися більше, ознайомтеся з цією посадою Reddit, в якій пояснюється, як працюють цілі. Ці інструменти в основному запускають код JS, який буде автоматизувати частини вашого робочого процесу, або користувацькі JS або скрипти, написані іншими користувачами.
8. Рідні програми JS для мобільних пристроїв
Я великий прихильник використання правильних інструментів для роботи. У разі розробки мобільних додатків це означає Java для Android, Objective-C / Swift для iOS.
Але не всі хочуть вивчити нову мову лише для створення мобільного додатка. На щастя, набагато простіше створювати нативні програми та компілювати з іншими бібліотеками, такими як NativeScript або React Native.
Розрив для того, щоб стати програмістом для мобільних програм, скорочується завдяки можливості створення мобільних додатків за допомогою JavaScript. PhoneGap - це ще один варіант, заснований на коді HTML / CSS / JS.
Хоча процес створення значно відрізняється, JS швидко стає рішенням для кодерів, які хочуть створювати мобільні програми без вивчення нової мови.
9. Інструменти співпраці для проектування
Миттєвий обмін повідомленнями та груповий чат існує вже більше десяти років. Однак ці ресурси традиційно спиралися на відкритий текст з деякими можливостями прикріплення файлів.
Нова тенденція, що розвивається, - це можливість обмінюватися живими документами, що розробляються, у програмах чату. Примітним є один із прикладів, де анотації та коментарі можна розмістити прямо на верхній частині документа. Це дає дизайнерам чистий спосіб ділитися роботою безпосередньо з усіма в команді.
Slack - найпопулярніший чат-додаток на даний момент, який підтримує багато подібних функцій. Зростаюча Slack userbase постійно намагається створити розширення, які значно покращують можливості Slack та зв'язуються з іншими продуктами, такими як Hangouts, MailChimp і навіть WordPress.
10. Чуйний фронтенд
Frontend рамки, як Bootstrap були навколо протягом багатьох років і продовжують виявлятися корисними на проектах як особистих, так і професійних. Реагуючий дизайн примусив свій шлях до фреймворків і створив попит на інтерфейсний код, а не просто backend (Django, Laravel і т.д.).
Переходячи до 2016 року, я думаю, що ми будемо читати набагато більше про відповідні фронтедні рамки та їх цінність у веб-проектах. Багато розробників з нетерпінням чекають на випуск Foundation 6 і публічний випуск v1 з Bootstrap 4.
Інші менш відомі рамки, які ви можете перевірити, включають Gumby і Pure CSS.
11. Більший акцент на UX Design
Сфера дизайну досвіду користувачів продовжуватиме стрімко зростати, і більше дизайнерів та розробників звертають увагу. Дизайн інтерфейсу є частиною дизайну UX, але це не остаточна мета. Інтерфейс користувача є засобом досягнення мети, а кінець - фантастичним досвідом користувачів.
Лише 5 років тому я був майже не знайомий з UX або як він застосовувався до дизайну інтерфейсу. Тепер у нас є ресурси, такі як UX Stack Exchange і безкоштовні електронні книги UX. Якщо ви не знаєте багато про користувальницький досвід, тепер найкращий час для вивчення та вивчення принципів UX для всіх форм цифрових інтерфейсів.
12. Менеджери пакетів
Менеджери цифрових пакетів зросли так швидко, що вони практично є вимогою для сучасного веб-розробки. Рішення типу Bower і NPM можуть заощадити багато часу, починаючи нові проекти.
Засвоєння будь-якої нової технології займе час і прийде з кривою навчання. Але якщо є одна річ, яку повинен знати розробник (або сервер), це менеджер пакетів. Вони вимагають певних знань про термінальні команди, але як тільки ви звикнете до процесу, ви ніколи не захочете повернутися назад.
13. Розширені анімації інтерфейсу користувача
Переходи CSS3 були лише початком довгострокової тенденції анімації в Інтернеті. Тепер у нас є десятки бібліотек CSS і JavaScript, присвячених анімації. Речі, про які я ніколи не мріяв, тепер побудовані і доступні безкоштовно, якщо ви знаєте, де шукати.
Анімація не є вимогою для гарного дизайну. Але він може зробити хороший дизайн у відмінний дизайн при правильному використанні.
Слідкуйте за анімаційними тенденціями для інтерфейсів і подивіться, що ви можете забрати з різних веб-сайтів. Пам'ятайте, що веб-анімація не є фільмом Діснея і до неї треба ставитися з повагою. Використовуйте анімацію обережно, щоб покращити інтерфейс, не перетворюючись на неприємний або відволікаючий елемент дизайну.
14. Дизайнери навчаються кодексу
Тема гарячої кнопки цього року була для дизайнерів, які навчаються кодувати. Деякі дизайнери вважають, що їхня робота не полягає в тому, щоб писати код, а інші вважають, що це стає нормою, і їх слід прийняти.
Я читав гарячі дискусії і захоплюючі посади з цієї теми, які, здається, лише залучають емоційні реакції. Гарний дизайн - це просто гарна картина без коду. Але зосередитися на обох вимагає дизайнер витрачати менше часу, практикуючи ремесло.
Отже, чи є остаточна відповідь? Дехто стверджує, що життєздатність роботи збільшується для дизайнерів, які знають кодування з інтерфейсу. Але що, якщо хтось не хоче писати код? Чи варто вчитися просто конкурувати?
Я відчуваю, що ясний відповідь - робити все, що хочеш. Але, здається, ця тема все ще стоїть на столі для багатьох дизайнерів, які, ймовірно, продовжать обговорення до 2016 року.
15. Безкоштовні онлайн інструменти та веб-застосунки
Раніше всі програми запускалися з робочого столу незалежно від того, що вам потрібно робити. Але в даний час я постійно вражений тим, як багато webapps доступні безкоштовно онлайн.
Ви знайдете все, від кодування / декодування URL до абсолютно безкоштовного редактора Markdown. Навіть Google Диск запустив продукти Microsoft Office у браузер (знову ж таки, абсолютно безкоштовно).
Нинішній рівень обчислювальної потужності та однорідних стандартів з веб-браузерів пропонують безмежні можливості. Складні завдання, такі як відновлення створення стиснення зображень, можна обробляти безпосередньо з вікна браузера.
16. Зростання веб-компонентів
Веб-компоненти намагаються вирішити проблеми складності для розробників. Веб-сайт WebComponents має великі ресурси та матеріали, щоб дати розробникам початок переходу до цієї теми.
Якщо ви не впевнені, як зрозуміти модульні веб-компоненти, перевірте цю публікацію, щоб дізнатися більше.
Хоча компоненти особливо не підірвалися до основного статусу, їх обговорюють професійні розробники в усьому світі. Компанія Google випустила програму Polymer, яка використовується для додавання веб-компонентів через JS і HTML.
Це може бути практично неможливо використовувати у великих клієнтських проектах. Однак технологія доступна і з невеликою практикою ви можете легко освоїти ці концепції. Щоб дізнатися більше і побачити кілька зразків коду, ви можете прочитати цей пост CSS-Tricks на модульних веб-компонентах.
17. Онлайн навчальні ресурси
Ми всі знаємо, що зараз це найпростіший час для вивчення будь-яких навичок з комфорту вашого комп'ютера. Здається, ринок онлайн навчання зростає в геометричній прогресії з новими курсами та веб-сайтами, які з'являються щороку.
Я відчуваю себе більш впевнено, ніж будь-коли раніше, що ми побачимо зростання онлайн-навчання. Відомі сайти, такі як Treehouse і CodeSchool, пропонують неймовірні курси поряд з новими сайтами, такими як Bitfountain і Learn-Verified.
Якщо є предмет, який ви хочете дізнатися, ймовірно, що онлайн-курс - особливо, якщо ви хочете вивчити цифрові прийоми, такі як дизайн інтерфейсу або розробка додатків.
18. Серверний JavaScript
Незважаючи на наявність попередніх варіантів серверної JS, жоден з них не проникнув так швидко, як Node.js. Розробники JavaScript закохалися в цю бібліотеку та спостерігали за тим, як вона піднімається до прямої конкуренції з іншими мовами, які використовують бекенда, такі як Python або PHP.
Node дозволяє розробникам створювати веб-сайти за допомогою однієї мови для обох кодів frontend + backend. А ресурси, такі як Node Package Manager, надають Node.js ще більше значення.
З того, що я можу сказати, Node все ще перебуває на підйомі і продовжує набирати силу від ентузіастів галузі. Незалежно від того, чи плануєте ви вивчати Node чи ні, без сумніву, він продовжуватиме рости як головна тенденція 2016 року.
19. Функції веб-сайту з підтримкою дотику
Браузери смартфонів завжди підтримували сенсорні функції для всіх веб-сайтів, щоб підтримувати зворотну сумісність. Нещодавно я помітив більше плагінів і користувальницьких функцій, що додаються на веб-сайти з конкретною метою обробки сенсорних подій.
Плагіни, такі як Photoswipe і Dragend.js, створені для обробки та натискання сенсорних дисплеїв. Схоже, що веб-розробники не тільки створюють відповідні веб-сайти, але й створюють сайти з підтримкою дотику.
Якщо ви шукаєте навколо, ви знайдете деякі дійсно вражаючі функції, створені для Інтернету, які покладаються виключно на сенсорні події.
20. Матеріал в Інтернеті
Випуск матеріалу Google був величезним успіхом для дизайнерів Android. Дизайн матеріалу вважається мовою дизайну, призначеної для спрощення процесу створення інтерфейсів користувача для смартфонів Android.
З часом веб-дизайнери взяли це до серця і побудували цілі веб-сайти на основі нової мови дизайну Google. Схоже, тенденція в дизайні матеріалу вийшла за межі просто мобільних додатків у світ веб-дизайну.
Люди, які хочуть будувати сайти з матеріалами, навіть не повинні винаходити колесо. Безкоштовні бібліотеки, такі як Material UI і Materialize, пропонують власні коди для структурування нового макету поверх фундаменту дизайну матеріалу.
Закриття
Переглядаючи ці тенденції, має бути зрозуміло, що ми бачимо реальні узгоджені зусилля веб-спільноти для спрощення процесу створення веб-сайтів. Ми всі хочемо заощадити час в нашому повсякденному робочому процесі.
З моменту створення мережі ми бачили, як багато технологій зростають, а замінити їх кращими альтернативами. Ці тенденції 2016 року наполягають на більш однорідному наборі методів проектування, які зроблять веб-сайти для будівництва більш легкими та менш складними.
