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

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

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

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

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

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

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

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

Но традиционно IDE выпускались как настольные приложения. За последние несколько лет мы наблюдали резкий рост облачных IDE на основе браузера. Для этого не требуется никакого программного обеспечения, кроме веб-браузера, который позволяет разработчикам писать код с любого компьютера с доступом в Интернет.
Облачные интегрированные среды разработки больше похожи на веб-приложения, в которых вы можете сохранять фрагменты кода в своей учетной записи для совместного использования или для личного хранения. CodePen является одной из самых популярных IDE с поддержкой HTML / CSS / JS и настраиваемой предварительной обработкой, такой как Jade / Haml и LESS / SCSS.

Мозилла Наперсток это еще одна IDE для начинающих разработчиков, которые хотят изучать код. Также Codeply отлично подходит для тестирования конкретных адаптивных сред, таких как Bootstrap или Zurb Foundation, без необходимости загружать какие-либо файлы.

3. Бесплатные Sass / SCSS Mixins

Препроцессоры были модными в течение многих лет, но лишь недавно стали достаточно популярными, чтобы чувствовать себя повсеместно во всей области веб-дизайна / разработки. В настоящее время кажется странным писать ванильный CSS, когда Sass / SCSS может предоставить гораздо больше.

Одним из преимуществ является растущее предложение библиотек Sass mixin. Простые миксины похожи на фрагменты кода или базовые функции для генерации повторяемого кода в CSS. Хотя вы всегда можете написать свойМногие разработчики любезно выпустили бесплатные миксины онлайн.
Некоторые миксины входят в библиотеки, такие как бурбон в то время как другие могут быть отдельными предметами. Попробуйте сделать поиск в GitHub для смесей Sass / SCSS, чтобы увидеть, что вы можете найти.

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

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

Макет карты лучше всего использовать на страницах с большим количеством данных, которые следует сканировать. Целевая страница для Google Now использует макет карты для рекламы дополнительных карт для приложения Google Now.
Вы можете думать о макетах карт как о более динамичных сетках с акцентом на минимизацию контента до самого необходимого, чтобы объединить больше элементов. Интернет-журналы, такие как UGSMAG а также Следующая Сеть Оба являются идеальными примерами макетов карт, используемых для демонстрации последних публикаций.

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

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

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

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

6. Live Product Previews

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

Возьмите например Страница продукта Slack, Он имеет видео-тур и векторную графику, охватывающую интерфейс Slack. Эти предварительные просмотры продукта предназначены для того, чтобы дать потенциальным пользователям представление о том, как работает продукт.
Webydo еще один яркий пример с живой анимацией, воспроизводимой на главной странице. Это позволяет посетителям увидеть Webydo в действии без необходимости демонстрации продукта вручную. Но вам не всегда нужно полагаться на анимацию для предварительного просмотра продукта. Iconjar использует простой скриншот PNG, чтобы показать, что это за продукт и как он работает.

7. Автоматизированные бегуны задач

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

Подробнее: Битва сценариев сборки – Gulp vs. Grunt

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

Чтобы узнать больше, проверьте этот пост Reddit объясняя, как работают бегуны. Эти инструменты в основном запускают код JS, который автоматизирует части вашего рабочего процесса, либо пользовательский JS, либо сценарии, написанные другими.

8. Нативные мобильные приложения JS

Я большой сторонник использования правильных инструментов для работы. В случае разработки мобильных приложений это означает Java для Android, Objective-C / Swift для iOS.

Но не все хотят изучать новый язык только для того, чтобы создать мобильное приложение. К счастью, для нативных приложений становится проще создавать и компилировать их с помощью альтернативных библиотек, таких как NativeScript или React Native,
Разрыв в том, чтобы стать программистом мобильных приложений, сокращается благодаря возможности создавать мобильные приложения с помощью JavaScript. PhoneGap это еще один вариант, основанный на коде HTML / CSS / JS.

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

9. Инструменты совместной работы для дизайна

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

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

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

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

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

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

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

Подробнее: 10 вещей, которые веб-сайты о путешествиях могут научить вас дизайну UX

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

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

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

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

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

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

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

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

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

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

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

Раньше все программы запускались с рабочего стола независимо от того, что вам нужно было делать. Но в настоящее время я постоянно удивляюсь тому, сколько веб-приложений доступно бесплатно онлайн.
Вы найдете все от Кодировка / декодирование URL совершенно бесплатно Редактор уценок, Даже Гугл драйв перенес продукты Microsoft Office в браузер (опять же, совершенно бесплатно).

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

16. Рост веб-компонентов

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

Если вы не уверены, как понимать модульные веб-компоненты, тогда проверить этот пост Узнать больше.
Несмотря на то, что компоненты не получили особого статуса, они обсуждаются профессиональными разработчиками по всему миру. Google выпустил полимер которая является структурой, используемой для добавления веб-компонентов через JS и HTML.

Подробнее: Как Google Polymer изменит способ создания веб-приложений

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

17. Интернет учебные ресурсы

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

Я чувствую себя увереннее, чем когда-либо прежде, что мы увидим рост онлайн-обучения. Известные сайты, такие как Дом на дереве а также CodeSchool предлагать невероятные курсы наряду с новыми сайтами, такими как Bitfountain а также Learn-Проверенно,
Если есть предмет, который вы хотите выучить, скорее всего, есть онлайн-курс, особенно если вы хотите изучать цифровые методы, такие как дизайн пользовательского интерфейса или разработка приложений.

Подробнее: 9 сайтов для бесплатных онлайн-курсов и открытых курсов

18. Серверный JavaScript

Хотя в прошлом были варианты JS на стороне серверани один не проник так быстро, как Node.js, Разработчики JavaScript влюбились в эту библиотеку и стали свидетелями ее прямой конкуренции с другими внутренними языками, такими как Python или PHP.
Узел позволяет разработчикам создавать веб-сайты, используя один язык для внешнего и внутреннего кода. И такие ресурсы, как Диспетчер пакетов Node придать еще большую ценность Node.js.

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

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

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

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

20. Материал Дизайн в Сети

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

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

Подробнее: 70+ материалов Material Design для разработчиков Android

закрытие

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

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

            <script async defer src="https://platform.instagram.com/en_US/embeds.js"></script>