20 главных трендов веб-дизайна в 2017 году

Прошел еще один год, и дизайнеры смотрят в будущее. Многие многообещающие дизайнерские тренды неизбежно вспыхнут в 2017 году. В прошлом году я освещал главные дизайнерские тренды 2016 года, и с тех пор мы увидели много изменений.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

  1. «Показанные в» значки
    Стартапы, блоги, SaaS-проекты и даже малые предприятия теперь используют значки «как указано» на своих веб-сайтах. Эти значки часто ссылаются на статьи в популярных блогах, таких как HuffPo, Forbes, CNN, Fox и другие новостные издания.
    значки HerepupЦель состоит в том, чтобы подтвердить правильность веб-сайта и завоевать доверие новых посетителей. Кому-то легче доверять веб-сайту, когда он видит, что он упоминается в авторитетных публикациях.

На самом деле многие ведущие блоги ценят эту информацию, поэтому она действительно помогает всем, кто в ней участвует. Эти большие сайты часто публикуют свои логотипы в Интернете, но вы также можете найти прозрачные PNG или SVG, просто погуглив вокруг.
сопровождать сайтТакже рекомендуется, чтобы вы вернулись к оригинальной статье с упоминанием вашего сайта. Это доказывает, что вы действительно упоминались на сайте, и вы не просто выдвигаете претензии.
2. Жирные ссылки с заглавными буквами
Я видел десятки изящных навигационных меню, основанных на одном и том же дизайне. Эти навигационные ссылки различаются по шрифту и размеру, но обычно имеют схожие функции, такие как:

  • Все шапки
  • Полужирный
  • Равномерно расположенный
  • Выровнено по правому углу

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

Запомните следующий раз, когда вы увидите эту тенденцию, потому что она повсюду. И я ожидаю, что он будет хорошо расти в 2017 году.
3. Журналы в стиле блогов
Блоггинг был такой нишевой концепцией еще в начале 2000-х годов. Если вы вели блог в 2003 году, это считалось маленьким хобби. Всего за десятилетие эта тенденция радикально изменилась. Теперь блоги могут предоставить полный рабочий деньи они начинают больше походить на цифровые журналы.

Оглянись на оригинальный дизайн TechCrunch, когда он впервые был запущен в 2006 году. Выглядит как общий блог WordPress, верно?
TechCrunch около 2006Теперь посмотрите на текущую домашнюю страницу Techcrunch в 2017 году:
домашняя страница techcrunch 2017Он не только выглядит как журнал, но и функционирует как один. TechCrunch публикует десятки (если не сотни) новых сообщений каждый день. Это первый источник новостей для стартапов.

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

Когда вы думаете об этом, TechCrunch не сильно изменился. Это все еще «просто блог». Но он разработан и управляется как журнал, и в этом вся разница.

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

Другие сайты переняли стиль «призрачного дизайна» на своих кнопках. Отличным примером здесь является новый начальная загрузка раскладка.

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

Вот почему я думаю, что модальные дополнительные окна будут продолжать расти в 2017 году.

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

Независимо от того, как запускаются модалы, как они спроектированы или как вы к ним относитесь, я думаю, они будут рядом надолго.
7. Иллюстрация и векторное искусство
С новыми программами векторного дизайна, такими как Sketch и Affinity DesignerВ сети появилась новая волна иллюстраторов. Графический дизайн и дизайн интерфейса постоянно сливаются с большим количеством междисциплинарных дизайнеров, чем когда-либо прежде.

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

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

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

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

Это может быть правдой, что ToCs сейчас довольно мало. Но я ожидаю, что эта тенденция взорвется в течение 2017 года и много лет спустя.
10. Яркие красочные дизайны
Я не уверен, возникла ли эта тенденция из минимализма или как реакция на материальный дизайн Google. Но я наткнулся на десятки веб-сайтов, которые используют яркие пастельные цвета, смешанные с другими яркими оттенками, чтобы создать очень причудливый внешний вид.
домашняя страница Rentberry Rentberry домашняя страница – отличный пример, который также использует тонны градиентов. И даже есть вышеупомянутые значки «Featured in», расположенные внизу! Две тенденции на одном сайте.

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

  1. Прокрутка анимации
    Веб-дизайнеры знают о Свиток угона и как это ужасно. Однако это не то, что я имел в виду под названием «анимация прокрутки». Я видел много сайтов, которые теперь анимируют контент, когда вы просматриваете определенный раздел страницы.
    получил приложениеЭта тенденция в основном ограничивается домашними страницами стартапов и SaaS-компаниями, которые хотят, чтобы в их дизайне был какой-то стиль

Я не могу сказать, является ли это особенно полезной тенденцией. Это конечно захватывает взгляд, но я не думаю, что это предлагает намного больше, чем эстетика. Тем не менее, это тенденция, которая, кажется, быстро распространяется, и при экономном использовании она может быть действительно аккуратной.
12. Одностраничные приложения (SPA)
Одностраничные приложения – это веб-сайты, созданные исключительно с помощью вызовов Ajax. JavaScript извлекает контент с сервера и загружает его динамически, поэтому страница никогда не обновляется.

Типичными примерами являются такие сайты, как Gmail и Facebook. Но с появлением большего количества технологий JS, я заметил, что все больше и больше SPA разрабатываются. Черт, даже CodePen можно считать SPA.

С мощными интерфейсными библиотеками, такими как React & Aureliaв 2017 году будет еще проще создать СПА с нуля.

  1. Переключаемые панели поиска
    Раньше поля поиска всегда были видны где-то на веб-странице, либо на боковой панели, либо в навигации. Но в последнее время я заметил гораздо больше полей поиска, которые по умолчанию скрыты и должны быть включены в поле зрения.
    японский поискКонечно, удобная тенденция, чтобы сэкономить место на странице при сохранении функции поиска доступной. Если вы не знаете, где разместить форму поиска в новом дизайне, вы можете использовать поле переключения, связанное со значком увеличительного стекла в навигационной панели.
  2. Adblock сообщения
    Там нельзя отрицать тот факт, что блокировка рекламы растет, Вопрос только в том, как издатели справятся с этой тенденцией. Некоторые сайты вежливо добавляют сообщения в рекламные места, такие как Time.com, На Hongkiat вы заметите внутреннюю рекламу, чтобы заполнить пустоту, которая ведет дальше на сайт.
    гриф магОдна серьезная тенденция, которую я вижу в увеличении, это блоки контента adblock. Это методика «блокирования рекламных блоков». Эта функция уже используется на многих крупных сайтах, таких как Бизнес Инсайдер а также Forbes, К сожалению, это наносит вред как пользователю, так и издателю, и все это происходит из-за некачественной рекламы.

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

  1. Чистые иконки SVG
    SVG-графика уже просочилась в сеть, но с каждым днем ​​она становится все больше. И я чувствую, что 2017 год будет огромным годом для SVG в Интернете.

Вы можете найти тысячи бесплатных наборов иконок SVG на таких сайтах, как Flaticon если вы знаете, как искать. Но вы также можете кодировать SVG в HTML, например, используя этот пример на CodePen.
Codepen SVG анимированные иконкиТаким образом, у дизайнеров есть способ использовать SVG, и у разработчиков есть способ использовать SVG. Поддержка современного браузера выглядит хорошо по всем направлениям, поэтому проблем с совместимостью нет. Все, что нужно, – это достаточное количество дизайнеров, чтобы оценить мощь SVG и начать их использовать!

  1. Adobe XD
    Adobe выпустил полная бета-версия Adobe XD в 2016 году, и с тех пор он быстро рос. В настоящее время он поддерживает как Mac, так и Windows, и находится на стадии тестирования, прежде чем будет полностью развернут.

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

Я твердо верю, что мы будем читать больше о Adobe XD в следующем году. Это может стать программным обеспечением для разработки макетов пользовательского интерфейса – так что мы, наконец, можем использовать Photoshop в качестве инструмента для работы с фотографиями (как и предполагалось).

С появлением нового программного обеспечения, приходят десятки учебных пособий и наборов бесплатных графических интерфейсов. Вы можете найти много бесплатных Adobe XD в дриббле вместе с двумя новыми XD-ориентированными сайтами халявы Designmine а также XD Гуру,
17. Больше меню гамбургеров
Любите это или ненавидите это, гамбургер здесь, чтобы остаться. Есть много исследований юзабилити, которые спорят о меню скрыто от глаз, Но с небольшим экраном и таким большим количеством альтернатив лучшей альтернативы пока нет.

Иконки гамбургеров постепенно становятся узнаваемыми символами для навигационных меню. Так же, как значок увеличительного стекла подразумевает «поиск», значок гамбургера с тремя барами скоро станет синонимом «меню».

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

  1. Значки функций продукта
    Я писал об этой тенденции на домике на дереве но не упомянул об этом в последнее время. И в 2017 году эта тенденция будет огромной. Это, пожалуй, самый распространенный способ поделиться функциями продукта на домашней странице.
    избранные значкиВы начинаете с составления списка функций для вашего продукта. Продукт может быть чем угодно, от SaaS-программы до темы WordPress или даже от физического элемента.

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

Вместо этого перечислите особенности, которые действительно имеют значение. Если это тема премиум-класса WP, возможно, укажите, насколько она отзывчива, с какими виджетами она поставляется или как работает меню.
домашняя страница inferno.jsЭти значки функций работают как визуальные элементы, помогающие продавать каждую функцию. Один текст трудно потреблять, но визуальные эффекты намного проще понять с первого взгляда.
19. Превышающие СТА
Призыв к действию традиционно размещался по всему сайту. Но так как посетители тратят меньше времени на веб-сайты, очень важно иметь сильный CTA прямо над фолдом.

Этими призывами к действиям могут быть кнопки, формы отказа или другие входные данные, чтобы побудить людей предпринять какие-либо действия, такие как регистрация или чтение сообщения в блоге.
Гари Вайнерчук домашняя страницаЯ не могу рассказать вам, как спроектировать CTA или как оптимизировать его для конверсий. Но я могу сказать, что тенденция, по-видимому, заключается в том, что эти CTA располагаются выше сгиба и четко видны всем посетителям.
20. Меньшие области содержания
Мониторы стали настолько большими, что большинству сайтов приходится устанавливать максимальную ширину. Гораздо сложнее читать предложения, когда их ширина составляет 2000 пикселей, а ширина – всего 700 пикселей.

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

Я думаю, что все больше дизайнеров осознают это и будут постепенно уменьшать размер своих областей контента. Я предпочитаю максимальную ширину в 750 пикселей, но вы можете использовать размер не менее 600 пикселей.
блог wpbeginnerБолее короткие абзацы с меньшим количеством предложений и меньшими областями содержимого всегда улучшают читабельность. Основные публикации, такие как «Нью-Йорк Таймс», могут отличаться своими собственными структурными рекомендациями. Но для простого блога или бизнес-сайта тенденция движется в сторону более длинного контента с небольшими абзацами и областями контента.
Завершение
Есть много других тенденций, которые я не смог осветить в этом посте, но я думаю, что эти 20 наиболее интересны. По мере того, как мы продвигаемся в 2017 году, должно быть очевидно, какие тенденции развиваются, а какие нет.

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

Читайте также: Тенденции дизайна: следуем ли мы им, не осознавая этого?

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *