Тренды 2020 года в визуальном оформлении сайтов и контенте через призму здравого смысла

Мы собрали интересные тенденции 2019 года и тренды 2020 в области текстового контента и дизайна сайтов и хотим ими поделиться. Зная их, можно проверить соответствие сайта последним тенденциям. Однако если что-то у вас еще “по-старому”, не стоит спешить переделать все на новый лад. Пытаясь угнаться за модой, можно так увлечься, что завершить переделку сайта к следующему году. А там появится новый тренд на другие цвета, шрифты, оформление.

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

Яркие цвета vs пастельная гамма

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

<i>На странице оплаты заказа использованы сдержанные цвета. Зеленый цвет воздействует на пользователя успокаивающе</i>
На странице оплаты заказа использованы сдержанные цвета. Зеленый цвет воздействует на пользователя успокаивающе
<i>На рекламных баннерах использованы яркие цвета для привлечения внимания​</i>
На рекламных баннерах использованы яркие цвета для привлечения внимания​

Сложные градиенты и цветные фильтры

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

<i>Шаблоны со стока</i>
Шаблоны со стока

Градиенты и цветные фильтры можно накладывать на фотографии.

<i>​Фотографии с сайта FastCompany. Слева: фотография в дуотоне (двуцветное изображение). В центре: цветные фильтры. Справа: сложный градиент</i>
​Фотографии с сайта FastCompany. Слева: фотография в дуотоне (двуцветное изображение). В центре: цветные фильтры. Справа: сложный градиент

Крупные шрифты

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

<i>Крупные заголовки на сайте Apple​</i>
Крупные заголовки на сайте Apple​

Иллюстрации в стиле фотореализм

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

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

​<i>Реалистичная иллюстрация со стока</i>
Реалистичная иллюстрация со стока
<i>Фотография обработана мобильным приложением</i>​
Фотография обработана мобильным приложением

Объединение фотографии и рисунка

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

<i>Баннер, объединяющий в себе фотографию и иллюстрацию​</i>
Баннер, объединяющий в себе фотографию и иллюстрацию​

Другой прием - объединять изображения в коллаж. Часто люди проявляют больший интерес именно к таким изображениям, так как их можно рассматривать.

<i>На стоках можно найти подходящий коллаж или сделать его самостоятельно, получив уникальное изображение​</i>
На стоках можно найти подходящий коллаж или сделать его самостоятельно, получив уникальное изображение​

Асимметрия и игры с геометрией

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

<i>Асимметричный дизайн главной страницы сайта kinote​</i>
Асимметричный дизайн главной страницы сайта kinote​
<i>Симметричный дизайн сайта imdb.com</i>​
Симметричный дизайн сайта imdb.com

Изображение в тексте должно отражать его суть

Исследования показывают, что фотографии реальных клиентов дают большую конверсию, чем стоковые фотографии. Компания Visual Website Optimizer совместно с Marketing Experiments провела эксперимент. Они сравнили эффективность стокового изображения с реальной фотографией клиента. Стоковое изображение имело конверсию в 7,2%, а реальное фото - 9,6%. Такая разница в результатах связана с тем, что люди хорошо чувствуют фальшь, особенно если это изображение они уже встречали где-то еще.

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

Если от стоковых фотографий не уйти, то вот несколько советов:

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

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

<i>Оба изображения взяты со стоков. Но левое выглядит неестественно, а правое кажется естественным​</i>
Оба изображения взяты со стоков. Но левое выглядит неестественно, а правое кажется естественным​

Сторителлинг

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

История о компании должна быть написана простым языком и от души. Советуем:

  • Расскажите о пользе, которую вы приносите клиентам
  • Поведайте свою историю, будто рассказываете сказку. Не забудьте про завязку, развитие и кульминацию
  • Пишите живым языком и забудьте слова типа “эффективный”, “максимальный” и т.п.
  • Обратите внимание пользователя на особенности компании и ваших товаров и услуг
  • Разместите фотографии. Только не берите их из фотостоков, пусть это будут качественные изображения с фотосессии
  • В конце поставьте призыв к действию
<i>Текст о компании на сайте Maxgoodz​</i>
Текст о компании на сайте Maxgoodz​

Товар, за которым стоит история продается успешнее товара без нее. Агентство Hill Holyday в 2017 году провело исследование, как сторителлинг о товарах влияет на продажи. Оно показало, что, например, стоимость картины возрастает на 11% благодаря краткой истории от автора, небольшая история от винодела о бутылке вина позволяет продать ее на 6% дороже. Даже простой рассказ о товаре добавляет ему индивидуальность и цепляет эмоционально. А хорошие истории люди будут пересказывать друг другу.

История создания бритвенного станка Жиллетт​
История создания бритвенного станка Жиллетт​

Чтобы история продукта произвела впечатление на пользователя, в ней должны быть:

  • Герой, с которым читатель может себя ассоциировать

  • Герой, который раскрывается и меняется к концу повествования

  • Эмоции

  • Эффект неожиданности (желательно, но необязательно)

  • Конфликт или проблема

  • Время и место действия

  • Герой, который действует

  • Логичная концовка

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

Нейросети пишут тексты за копирайтеров

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

Тексты для интерфейсов будут создавать UX-писатели

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

Потом тесты стали писать дизайнеры, верстальщики, технические писатели, а через какое-то время UX-специалисты. Стало лучше. Но сейчас появилась тенденция выделения интерфейсных текстов в отдельное направление контента. На западе такими текстами уже занимаются UX-писатели (UХ writer). В России это направление только развивается, хотя такие специалисты уже есть.

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

<i>​По запросу UX-писатель в hh найдено 9 вакансий по России</i>
​По запросу UX-писатель в hh найдено 9 вакансий по России

Скоро юзабилити агентства будут предлагать отдельную услугу создания понятных текстов для интерфейсов и привлекать к этой работе UX-писателей.

Информационный стиль

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

Заказчики и копирайтеры проверяют тексты не только на плагиат (например, через Advego Plagiatus), но и на соответствие информационному стилю через сервис Главред.

<i>Анализ ´этого текста на плагиат через Advego Plagiatus​</i>
Анализ ´этого текста на плагиат через Advego Plagiatus​
<i>Анализ первого варианта этого абзаца в Главреде​</i>
Анализ первого варианта этого абзаца в Главреде​

Показывать время чтения и количество прочтений статьи

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

<i>​Яндекс Дзен показывает время прочтения статьи, а также количество полных прочтений</i>
​Яндекс Дзен показывает время прочтения статьи, а также количество полных прочтений

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

Выводы

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

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

Однако тренды трендами, но здравый смысл должен преобладать.

77
10 комментариев

шляпа

Ответить

Рад, что вы уже осведомлены обо всем. Хорошего дня

Ответить

Мне понравилось! Спасибо

Ответить

Очень рад!

Ответить

было полезно, спасибо

Ответить

Пожалуйста

Ответить

В закладки. Спасибо!

Ответить