11 тенденций дизайна веб-сайтов, о которых вам нужно знать

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

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

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

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

1. Мобильный

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

2. Минимализм

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

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

Недавно Nielsen Norman Group провела потрясающее исследование 112 минималистских веб-сайтов. Они обнаружили, что определяющими чертами являются:

• плоский дизайн
• ограниченные цветовые схемы
• несколько элементов пользовательского интерфейса
• использование отрицательного пространства
• драматическая типография
• макеты сетки

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

3. Адаптивный дизайн и адаптивный контент

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

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

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

4. Плоский дизайн

Почти все вы должны знать, что такое плоский дизайн. Если нет, пора учиться. Вот пример:

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

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

5. Дизайн сетки

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

Вот как мы рассматриваем возможность использования сетки на главной странице блога Act-On:

6. Фоновые изображения и видео

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

Если видео перемещается в правильном направлении или изображение правильно обрезано, оно может привлечь внимание к определенной области страницы. Например, в поле для подписки. См. домашнюю страницу PeopleHr в качестве примера видеофона, который привлекает ваше внимание к форме подписки.

Итак, что лучше использовать: изображение или видео, или одно большое изображение и кучу изображений меньшего размера? На самом деле это не имеет большого значения, по крайней мере, согласно тесту, проведенному Huge Inc. Они видели подавление скорости прокрутки только тогда, когда использовалось анимированное изображение:

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

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

Это примерно столько же обратного типа, сколько вы хотите иметь:

7. Бесконечная прокрутка

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

В итоге я не одинок в своем разочаровании. Недавно Nielsen Norman Group опубликовала статью, в которой обобщает проблему:

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

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

8. Интерактивный контент

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

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

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

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

Калькулятор рентабельности инвестиций в оптимизацию веб-сайта ClickZ — прекрасный пример интерактивного контента:

9. Движение

Это родственная тенденция интерактивного контента. Движение принимает множество форм, наиболее очевидной из которых является видео. Другим примером могут быть анимированные картинки, которые вы видите в некоторых блогах. Хотя некоторые из них могут быть слишком резкими для блога B2B, иногда полезно немного потянуться. Особенно, если анимированный gif передает смысл так, как слова или даже статичное изображение никогда не смогут. Просто используйте их с некоторым умением. Вам нужен такой же стильный эффект, как синемаграф, а не что-то вроде мигающей неоновой вывески винного магазина.

через GIPHY

или

через GIPHY

10. Индивидуальные фотографии и иллюстрации

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

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

11. Скрытая навигация

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

Некоторые сайты, такие как Act-On, используют скрытую навигацию в адаптивном режиме. Если кто-то просматривает сайт на мобильном устройстве или имеет узкое окно настольного браузера, он увидит свернутую навигацию:

Если они нажмут на три полосы, они увидят навигацию, расположенную так же, как на боковой панели:

Если окно их браузера достаточно широкое, они увидят полную навигацию:

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

Вернуться к вам

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

И как сказал Стив Джобс: « Дизайн — это не только то, как он выглядит. Дизайн — это то, как это работает ».

Одна последняя вещь.

Дизайн развивается, и веб-дизайн развивается быстро. Если вы думаете о редизайне своего веб-сайта или просто собираете идеи, пока не будете готовы к редизайну, обязательно следуйте тенденциям веб-дизайна, которые поддерживают удобство использования и конверсию, и прочитайте электронную книгу Act-On «Превратите свой веб-сайт в лид». Генерирующая машина, чтобы убедиться, что вы не упускаете возможности для привлечения потенциальных клиентов при изменении дизайна своего веб-сайта.

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