20 восходящих трендов веб-дизайна в 2017 году

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

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

1. “Показанный в” бейджи

Стартапы, блоги, SaaS-проекты и даже малые предприятия теперь используют “как показано в” бейджи на своих сайтах. Эти значки часто ссылка на статьи в популярных блогах такие как HuffPo, Forbes, CNN, Fox и другие новостные агентства.

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

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

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

2. Полужирные навигационные ссылки

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

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

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

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

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

3. Журналы в стиле блогов

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

Посмотрите на оригинальный дизайн TechCrunch, когда он впервые был запущен в 2006 году. Выглядит как общий блог на WordPress.?

Теперь посмотрите на текущую домашнюю страницу Techcrunch в 2017 году:

Это не только выглядит как журнал, это также функционирует как один. TechCrunch публикует десятки (если не сотни) новых сообщений каждый день. Это первый источник новостей для стартапов.

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

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

4. Видео фоны

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

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

5. Призрачные кнопки

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

Большую часть времени эти кнопки контрастировать с другими привлекать внимание. Вы можете увидеть это на домашней странице Instantmojo с зеленой кнопкой регистрации расположен прямо рядом Призрачная кнопка, ссылающаяся на демо.

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

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

6. Модальные оконные опции

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

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

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

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

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

7. Иллюстрация и векторное искусство

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

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

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

8. Исправлена ​​прокрутка боковых панелей

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

Но в 2017 году я ожидаю увидеть еще один липкий элемент-липкая боковая панель.

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

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

9. Содержание страницы

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

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

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

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

10. Яркие красочные дизайны

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

Домашняя страница Rentberry - отличный пример, который также использует тонны градиентов. И это даже имеет вышеупомянутое “Показанный в” значки расположены внизу! Две тенденции на одном сайте.

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

Я видел достаточно этих яркие цветовые схемы верить, что они на подъеме.

11. Прокрутка анимации

Веб-дизайнеры знают о прокрутке и как это ужасно. Однако это не то, что я имел в виду под названием “прокрутка анимации”. Я видел много сайтов, которые сейчас анимация контента в поле зрения когда вы прокручиваете мимо определенного раздела страницы.

Эта тенденция в основном ограничивается стартапами и SaaS-компаниями которые хотят немного пиццы в их дизайне.

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

12. Одностраничные приложения (SPA)

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

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

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

13. Переключаемые панели поиска

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

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

14. Adblock сообщения

Там нельзя отрицать тот факт, что блокировка рекламы растет. Вопрос только в том, как издатели справятся с этой тенденцией. Некоторые сайты вежливо добавить сообщения в рекламные места как Time.com. На Hongkiat вы заметите внутренняя реклама, чтобы заполнить пустоту эта ссылка дальше на сайт.

Одна серьезная тенденция, которую я вижу, растет блоки контента adblock. Это техника для “заблокировать рекламные блоки”. Эта функция уже используется на многих крупных сайтах, таких как Business Insider и Forbes. К сожалению, это наносит вред как пользователю, так и издателю, и все это происходит из-за некачественной рекламы.

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

15. Чистые иконки SVG

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

Вы можете найти тысячи бесплатные наборы иконок SVG на таких сайтах, как Flaticon, если вы знаете, как искать. Но вы также можете кодировать SVG в HTML, например, используя этот пример на CodePen.

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

16. Adobe XD

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

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

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

С появлением нового программного обеспечения появляются десятки учебные пособия и бесплатные графические интерфейсы также. Вы можете найти много бесплатных Adobe XD в Dribbble вместе с два новых XD-ориентированных сайта халявы Designmine и XD Guru.

17. Больше меню гамбургеров

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

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

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

18. Значки функций продукта

Я писал об этой тенденции на Treehouse, но недавно не упоминал об этом. И в 2017 году эта тенденция будет огромным. Это, наверное, самый распространенный способ поделиться функциями продукта на домашней странице.

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

Тогда вы можете либо дизайн пользовательских иконок или же найти набор иконок представлять эти особенности. Лучше всего избегать общих черт такие как “надежный” или же “быстро” потому что большинство людей ожидают этого материала.

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

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

19. Выше кратных СТА

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

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

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

20. Меньшие области содержания

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

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

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

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

Завершение

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

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