20 горячих тенденций, которые будут определять веб-дизайн в 2016 году

С течением времени с каждым годом на горизонте вырисовывается множество новых тенденций в дизайне. Сфера веб-дизайна постоянно меняется с новыми инструментами, рабочими процессами и лучшими практиками для создания удобных макетов.

Трудно предсказать, какие именно тенденции будут привлекать наибольшее внимание. Все же недавняя история показывает образец тенденций, которые росли как лесной пожар. Я организовал 20 уникальных тенденций, которые набрали обороты в течение 2015 года и, вероятно, будут продолжаться и в 2016 году..

1. Эскиз приложения для дизайна пользовательского интерфейса

Sketch быстро заменяет Photoshop для всех задач дизайна пользовательского интерфейса, начиная от низкокачественные каркасы в высококачественные макеты и дизайн иконок.

Sketch App - это приложение для Mac, созданное специально для веб-дизайнеров и дизайнеров мобильных устройств. Он предлагает более плавную рабочую среду для создания векторных элементов для любого интерфейса, но в то же время сохраняет многие функции, которые вы ожидаете от Photoshop, такие как текстовые эффекты и стили слоев..

Хотя нет никаких доказательств того, что Sketch когда-либо будет выпущен для Windows, он все же стал ценным выбором для пользователей OS X. Упрощенный рабочий процесс и более дешевый ценник позволяют Adobe заработать деньги. Если Sketch продолжит предоставлять лучший опыт проектирования пользовательского интерфейса, то он наверняка продолжит расти и в 2016 году, и в последующий период..

2. Браузерные интегрированные среды разработки

Настольные IDE существуют уже несколько десятилетий, предлагая различные варианты: от Notepad ++ до Xcode и Visual Studio. IDE облегчает написание кода с предложениями и подсветкой синтаксиса (среди других функций).

Но традиционно IDE выпускались как настольные приложения. За последние несколько лет мы наблюдали резкий рост облачных IDE на основе браузера. Для этого не требуется никакого программного обеспечения, кроме веб-браузера, который позволяет разработчикам писать код с любого компьютера с доступом в Интернет..

Облачные 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. Хотя вы всегда можете написать свои собственные, многие разработчики любезно выпустили бесплатные миксины онлайн.

Некоторые миксины поступают в библиотеки, такие как Бурбон, в то время как другие могут быть отдельными предметами. Попробуйте поискать в GitHub миксины Sass / SCSS, чтобы увидеть, что вы можете найти.

4. Макеты карт

Макеты карточек веб-сайтов впервые были популяризированы Pinterest несколько лет назад и с тех пор стали тенденцией для наполненных контентом веб-страниц. Бесплатные плагины, такие как jQuery Masonry, можно использовать для имитации этого стиля макета с помощью анимированных карт различной высоты и ширины..

Макет карты лучше всего использовать на страницах с большим количеством данных, которые следует сканировать. Целевая страница для Google Now использует макет карты для рекламы дополнительных карт для приложения Google Now..

Вы можете думать о макетах карт как о более динамичных сетках с акцентом на минимизацию контента до самого необходимого, чтобы объединить больше элементов. Онлайн-журналы, такие как UGSMAG и The Next Web, являются прекрасными примерами макетов карточек, используемых для демонстрации последних публикаций..

5. Пользовательские объяснения видео

Как крупные, так и мелкие компании взяли на себя тенденцию создания пользовательских видеороликов. Они часто создаются с анимацией, как, например, Crazy Egg. Но другие видео основаны на реальных кадрах, таких как Instagram Direct.

Цель видео-пояснения - продемонстрировать, как работает продукт или услуга. Посетители могут просмотреть список функций и все еще не имеют представления о том, как работает продукт. Видео проясняет все визуально и охватывает важные вещи всего за несколько минут.

Если вы хотите попробовать свои силы в создании собственного видео-пояснения, ознакомьтесь с этим курсом Udemy. Это углубленное исследование, посвященное видео для дизайна целевой страницы.

6. Live Product Previews

В дизайне целевой страницы произошел невероятный рост, связанный с более высокой скоростью Интернета и возможностями браузера. Одна из основных тенденций, которую я заметил, - добавление живого предварительного просмотра продукта на домашних страницах или пользовательских целевых страницах..

Взять, к примеру, страницу продукта 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 была непреклонна в создании расширений, которые значительно улучшают возможности Slack и привязываются к другим продуктам, таким как Hangouts, MailChimp и даже WordPress..

10. Отзывчивые рамки интерфейса

Фреймворки, такие как Bootstrap, существуют уже много лет и продолжают приносить пользу как в личных, так и в профессиональных проектах. Адаптивный дизайн проник в фреймворки и создал спрос на внешний интерфейс, а не просто на бэкэнд (Django, Laravel и т. Д.).

Начиная с 2016 года, я думаю, что мы будем больше читать о адаптивных платформах внешнего интерфейса и их значении в веб-проектах. Многие разработчики с нетерпением ждут выхода Foundation 6 и публичной версии Bootstrap 4 v1..

Другие менее известные фреймворки, которые вы могли бы проверить, включают Gumby и Pure CSS.

11. Больше внимания на UX Design

Область дизайна пользовательского опыта будет продолжать быстро расти с ростом внимания дизайнеров и разработчиков. Дизайн пользовательского интерфейса является частью дизайна UX, но это не конечная цель. Пользовательский интерфейс - это средство для достижения цели, а цель - фантастический пользовательский опыт..

Всего 5 лет назад я едва знал UX или его применение в дизайне интерфейсов. Теперь у нас есть ресурсы, такие как UX Stack Exchange и бесплатные книги UX. Если вы мало знаете о пользовательском опыте, то сейчас самое подходящее время для изучения и изучения того, как принципы UX могут применяться ко всем формам цифровых интерфейсов..

12. Менеджеры пакетов

Цифровые менеджеры пакетов выросли так быстро, что они практически необходимы для современной веб-разработки. Такие решения, как Bower и NPM, могут сэкономить много времени при запуске новых проектов..

Освоение любой новой технологии займет время и идет с кривой обучения. Но если есть что-то, что должен знать каждый фронтенд (или бэкэнд) разработчик, это менеджер пакетов. Они требуют некоторых знаний о терминальных командах, но как только вы привыкнете к процессу, вы никогда не захотите возвращаться.

13. Продвинутый пользовательский интерфейс анимации

Переходы CSS3 были только началом долгосрочной тенденции анимации в сети. Теперь у нас есть десятки библиотек CSS и JavaScript, посвященных анимации. Вещи, о которых я никогда не мечтал, теперь созданы и доступны бесплатно, если вы знаете, где искать.

Анимация не является обязательным требованием для хорошего дизайна. Но при правильном использовании он может превратить хороший дизайн в отличный..

Следите за анимированными тенденциями для интерфейсов и посмотрите, что вы можете отнять у различных веб-сайтов. Помните, что веб-анимация не является диснеевским фильмом и должна рассматриваться с уважением. Аккуратно используйте анимацию, чтобы улучшить интерфейс, не становясь раздражающим или отвлекающим элементом дизайна..

14. Дизайнеры учатся кодировать

Горячая тема в этом году стала темой для дизайнеров, обучающихся программированию. Некоторые дизайнеры считают, что писать код не в их обязанности, в то время как другие считают, что это становится нормой, и их следует принимать.

Я читал горячие дискуссии и увлекательные посты на эту тему, которые, кажется, вызывают только эмоциональные отклики. Хороший дизайн - это просто красивая картинка без кода. Тем не менее, чтобы сосредоточиться на том и другом, дизайнер должен тратить меньше времени на занятия ремеслом..

Так есть ли окончательный ответ? Некоторые утверждают, что жизнеспособность рабочих мест возрастает для дизайнеров, которые знают кодирование внешнего интерфейса. Но что, если кто-то не хочет писать код? Стоит ли учиться просто соревноваться?

Я чувствую, что самый ясный ответ - делать все, что вы хотите. Но, похоже, эта тема все еще обсуждается для многих дизайнеров, которые, вероятно, продолжат обсуждение в 2016 году..

15. Бесплатные онлайн инструменты и веб-приложения

Раньше все программы запускались с рабочего стола независимо от того, что вам нужно было делать. Но в настоящее время я постоянно удивляюсь, сколько веб-приложений доступно бесплатно онлайн.

Вы найдете все: от кодирования / декодирования 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 Package Manager, придают еще большую ценность Node.js.

Из того, что я могу сказать, Node все еще находится на подъеме и продолжает набирать обороты от энтузиастов отрасли. Планируете ли вы изучать Node или нет, нет сомнений в том, что он будет продолжать расти как основная тенденция в 2016 году..

19. Touch-поддерживаемые функции веб-сайта

Браузеры смартфонов всегда поддерживали сенсорные функции для всех веб-сайтов для обеспечения обратной совместимости. Еще недавно я заметил, что на веб-сайты добавляются дополнительные плагины и пользовательские функции, предназначенные для обработки сенсорных событий..

Плагины, такие как Photoswipe и Dragend.js, созданы для работы с сенсорными экранами. Кажется, веб-разработчики не только создают адаптивные веб-сайты, но и веб-сайты с сенсорным экраном.

Если вы будете искать вокруг, вы обнаружите несколько действительно впечатляющих функций, созданных для Интернета, которые полагаются исключительно на сенсорные события..

20. Дизайн материалов в Интернете

Выпуск Google дизайна материалов был огромным успехом для дизайнеров Android. Материальный дизайн считается языком дизайна, предназначенным для упрощения процесса создания пользовательских интерфейсов для смартфонов Android..

Со временем веб-дизайнеры приняли это близко к сердцу и создали целые веб-сайты на основе нового языка дизайна Google. Кажется, что тенденция материального дизайна вышла за пределы просто мобильных приложений в мир веб-дизайна..

Людям, которые хотят создавать материальные сайты, даже не нужно изобретать велосипед. Свободные библиотеки, такие как Material UI и Materialize, предлагают пользовательские коды для структурирования нового макета поверх основы дизайна материалов..

закрытие

Рассматривая эти тенденции, должно быть ясно, что мы видим реальные согласованные усилия со стороны веб-сообщества по упрощению процесса создания веб-сайтов. Мы все хотим сэкономить время в нашем повседневном рабочем процессе..

С момента появления Интернета мы наблюдаем рост многих технологий, которые должны быть заменены лучшими альтернативами. Эти тенденции 2016 года требуют более унифицированного набора методов проектирования, которые сделают создание веб-сайтов проще и намного менее сложным..