какие сайты актуальны в 2020
Веб тренды 2020, которые стоит попробовать
Последние несколько лет мы наблюдаем множество изменений в мире веб технологий. В 2020 году, я хочу обратить ваше внимание на два основных тренда/цели которые есть у веб комьюнити: расширяемость и совместимость.
Расширяемость (Extensibility)
Расширяемость это когда вы можете взять технологию и расширить ее для своих нужд. На протяжении нескольких лет мы используем компоненты повсюду, как в качестве разработки приложений (компоненты на React, Vue, Svelte) так и в качестве разработки дизайна (дизайн системы).
На данный момент мы пытаемся сделать эти компоненты более уникальными и удобными для использования. Расширяемость в вебе позволяет нам использовать платформу (браузеры, html/css/js движки) для собственных нужд и экспериментов, разумеется для получения большей выгоды.
CSS Houdini
Благодаря CSS Houdini, разработчики могут расширять возможности CSS Object Model, изменять то как браузеры отображают и работают со стилями.
Это означает, что теперь мы можем делать, то, что было просто не возможно до этого. Например косые углы у кнопки или округлый лаяут.
(ссылка на демку)
Houdini позволяет расширять стилизацию с помощью CSS и дает возможность добавлять пользовательские правила в CSS. На текущий момент в Houdini входит:
С помощью этих API, пользователь может использовать семантику в CSS (Typed Object Model), используя Paint API рисовать словно на canvas и применить результат в качестве бордера (привет градиентные бордеры) или создать параметризованную анимацию всего в одну строчку CSS.
Еще например, можно вынести анимации в отдельный поток (Animation Worklet) и использовать Layout API для уникального расположения элементов без использования таких правил как margin, padding, left, right.
В общем Houdini, это одна из тех вещей, на которую стоит обратить внимания в этом году.
Вариативные шрифты
Вариативные шрифты это будущее веб типографики, которые предлагают ряд возможностей управления отображением текста на экранах (размер, жирность, стиль). И все это при относительно малом размере файла. Пора сказать goodbye бесконечным дебатам на тему, сколько шрифтов вам необходимо подключить и дать возможность вашему контенту жить новой, прекрасной жизнью.
Более детально познакомится с вариативными шрифтами можно в этой статье.
Custom Properties
Пользовательские свойства позволяют нам писать более структурированный и в то же время динамический CSS. Речь идет не только о переменных, но и о возможность изменять эти переменные с помощью JS.
Custom Properties уже поддерживаются так же хорошо как вариативные шрифты и для них не нужно использовать какой-либо пост/пре процессор. Эти «технологии» работают в разных браузерах и на разных системах. Отсюда мы плавно переходим к совместимости.
Совместимость
Web components
Веб компоненты пытаются решить проблему совместимости со стороны веб стандартов. Главное задача которых является в предоставлении такой унифицированной формы, которая даже не будет требовать какого-либо фреймворка или библиотеки для создания компонентов.
Каждый веб компонент инкапсулирован и работает в современных браузерах без каких либо зависимостей. Эта технология еще развивается, но будем надеяться она получит еще больше новых возможностей в 2020.
Логические свойства
Логические свойства, позволяют нам переосмыслить модель, которую мы используем для расположения элементов на странице и делает ее более дружелюбной к разным языкам и устройствам, с помощью которых пользователи заходят на веб-сайты.
Настраиваемые media queries
Это такие медиа-квери, которые позволяют нам узнать о предпочтениях пользователя. Например пользователю нравится темная тема. Мы можем узнать об этом используя prefers-color-scheme :
Как всегда, все самое интересное и прикольное не поддерживается только в Edge и IE.
Скорость
Куда же без нее в новом 2020 году. Я уже вскользь упомянул о Animation Worklet, который позволяет вынести некоторую логику анимации в отдельный поток. Но есть и другие технологии позволяющие нам ускорить веб и которые вот-вот будут широко использоваться. Например Web Assembly, обертка, которая позволяет вам писать низкоуровневый код и не только на JS. WebGL продолжает совершенствоваться и предоставлять нам мощную и быструю графическую составляющую прямо в браузере. Совместив две эти технологии можно создавать невероятные игры, которые раньше нельзя было представить в браузере.
Веб постоянно и неустанно эволюционирует, это пожалуй то, что делает его столь интересным. А какие технологии по вашему мнению станут трендом 2020 года?
🎨 22 тенденции веб-дизайна в 2020 году, о которых нужно знать
Учитывая тот факт, что технологии ежедневно меняются, неудивительно, что все с ними связанное также развивается быстро. С постоянными обновлениями и новыми трендами, веб-дизайнерам приходится постоянно совершенствоваться, чтобы не отставать.
В конце концов, быть в курсе возникающих или развивающихся тенденций жизненно важно, если хочешь оставаться на вершине горы. Так какие же эти новые тренды? Что сработает лучше всего в 2020?
Из этой статьи вы узнаете о 22 трендах в веб-дизайне 2020 года, благодаря которым ваш веб-сайт будет не просто хорошо смотреться, но также станет интуитивно понятным.
1. Hero Images и Headers
Давайте начнем с самого простого. Использование Hero Images является популярным направлением в веб-разработке. Hero Images – это большие баннеры, расположенные в верхней части главной страницы сайта (или любой другой, но обычно размещают именно на главной), которые могут быть как динамическими, так и статичными.
Ниже приведен пример с официального сайта Samsung с одним из последних трендов веб-дизайна 2020 года:
Hero Images – это отличный способ привлечь потенциальных покупателей, фон в таком случае становится объектом внимания и перестает быть серым.
Они полезны и с точки зрения бизнеса, ведь теперь вы можете показать свой продукт во всей красе, пользователю даже не нужно переходить на страницу товара.
Hero Images в последнее время обрели большую популярность и стали применяться на многих веб-сайтах. Но даже если все сайты будут их использовать, это все еще хороший способ привлечь внимание.
2. Пустое пространство и минималистичный дизайн
Минимализм сейчас в моде, и это касается не только веб-сайтов, но и остального мира в целом. Чем меньше контента, тем лучше, и чем его больше, тем более беспорядочным он становится.
Когда на веб-сайте много близко расположенных друг к другу настроек и все они собраны в одном месте, невольно начинаешь теряться и закрываешь сайт.
С минималистичным подходом, мы оставляем как можно меньше контента и как можно больше свободного пространства, получая таким образом удовлетворяющую нас веб-страницу без поводов для беспокойства.
Не забывайте, что к Hero Images это не относится, так как свободные пространства комбинируют с изображениями для получения более выразительного эффекта.
Если хотите применить этот подход в веб-дизайне на практике, взгляните на пример от Squarespace:
Несмотря на наличие на главной странице пустого пространства, она по-прежнему смотрится элегантно и привлекательно.
3. Эмоциональный дизайн
Веб-дизайн направлен на налаживание взаимодействия с пользователем. Если вы в этом преуспеете, то заставите посетителя возвращаться на сайт снова и снова.
Новым трендом стало построение эмоциональной связи с пользователем через веб-дизайн. Для этого примеряются вызывающие яркие эмоции изображения (прямо как эмодзи).
Люди часто называют их “связующими”, и в результате даже не замечают, как втянулись:
Преимущество эмоциональной привязанности состоит в том, что веб-сайт запоминается пользователям, и велика вероятность, что они порекомендуют его своим друзьям.
Интересные идеи дизайна главной страницы и веб-интерфейса в целом применяются везде, где только можно, это касается обратной связи, отзывов, параметров страницы и т.д.
4. Динамический скроллинг
Динамическая прокрутка набирает обороты, и все крупные компании движутся в этом направлении. Причина проста: чем привлекательнее смотрится веб-сайт, тем красивее продукт. С запуском Note 20 в августе этого года, я решил зайти на сайт Samsung, чтобы посмотреть спецификации смартфонов и Galaxy Watch 3.
Я был удивлен тем, как они презентовали свой продукт с использованием динамического скроллинга. То же самое наблюдалось на презентации Apple в сентябре. Взгляните:
5. Градиент 2.0
С минималистичным дизайном и пустыми пространствами на главной странице, разработчики часто прибегали к использованию монотонного фона для максимального упрощения.
Пользователи от этого устали, и появилась необходимость перемен, что направило тренды в сторону градиента 2.0, где на странице преобладают оттенки нескольких светлых цветов.
Пользователи по всему миру тепло приняли нововведение. Оно позволяет сделать веб-сайт менее скучным и более привлекательным:
6. Темный интерфейс
Темная тема стала трендом практически в каждом приложении. Она есть в WhatsApp и Skype, Gmail, Facebook, YouTube и во многих других приложениях.
Это стало настолько обыденным, что некоторые компании начали добавлять dark mode в свои последние обновления. Темная тема даже глазам дает отдохнуть! Так почему не применить ее в веб-дизайне?
Веб-дизайнеры также стали работать с темной темой через использование Hero Images, благодаря чему сайт кажется полностью черным.
Для максимального эффекта нужны контрастирующие цвета с оттенком: к примеру, #000000 идеально сочетается с #FFFFFF или желтым и так далее.
Представленный на скриншоте веб-сайт пояснит, что я имею в виду:
7. Scroll-generated веб-сайты
Scroll-generated веб-сайты (прим. переводчика – “основанные на скроллинге”) – один из последних трендов, подхваченных веб-дизайнерами.
Название может показаться схожим с динамическим скроллингом (англ. Dynamic scrolling) и сбить вас с толку, но на деле это разные понятия. Scroll-generated веб-сайт работает следующим образом: элементы сайта зависят от прокрутки и появляются во время скроллинга.
Когда же мы говорим о динамическом скроллинге, то в данном случае весь контент изначально присутствует на странице, и все, что нам нужно, это прокрутить до него.
Чтобы стало более понятно, взгляните на представленный ниже скриншот веб-сайта:
8. Интерактивные курсоры
Анимированные курсоры меняют внешний вид указателя на что-то привлекательное.
Помимо изменения размера, формы и внешнего вида курсора, разработчики также реализуют эффект анимации во время движения. С фреймворками и инструментами для веб-разработки 2020 года сделать такое несложно.
Для лучшего понимания взгляните на веб-сайт ниже:
9. 3D-дизайн
Трехмерный дизайн привлекает человеческий глаз. Пришлось сильно постараться, что перенести 3D на веб-сайты. Элементы трехмерного дизайна требуют большей пропускной способности, нежели 2D, и являются довольно массивными.
Так как в последнее время люди стали использовать более высокоскоростное интернет-соединение, веб-разработчики начали запускать трехмерные веб-сайты. При правильном использовании 3D-дизайн будет смотреться привлекательно и реалистично.
Прекрасный пример веб-сайта на скриншоте ниже:
10. Оптимизированная навигация
Навигационный контент может располагаться не только в области специальной панели, но и по всей странице. Обеспечение упрощенной навигации с другими тенденциями веб-дизайна 2020 года делает сайт привлекательным и позволяет пользователю исследовать его целиком, поскольку навигация – уже не просто текст в заголовке.
Для вдохновения взгляните на скриншот сайта Bikebear :
11. Фокус на улучшении UI и UX
Разработка новых фреймворков и улучшение существующих привело к появлению оснащенных UI/UX красочных веб-сайтов. На фоне таких сайтов, другие стали отставать.
В 2018 году интернет охватила волна модернизации UI и UX. Люди сфокусировались на дизайне настолько, что кто-то построил на этом карьеру. Причина проста: UI отвечает за привлекательность сайта, UX – за удобство для пользователя.
Посетители получают наслаждение от пользования сайтом, а именно этого хочет каждый разработчик. Если вы думаете заняться созданием сайта, стоит позаботиться о хороших UI и UX.
Ниже представлен скриншот с LambdaTest:
12. Большие жирные шрифты
Крупные и жирные шрифты на Hero Image ворвались в тренды с прошлого года. Они привлекают внимание и передают вложенный вами посыл. Такие шрифты легко разместить, а чтобы они лучше смотрелись, поработайте над цветовым контрастом и тенью.
Пример того, как применить это на практике, представлен ниже :
13. Художественные иллюстрации
Художественные иллюстрации – это скетчи на главной странице сайта. Эти зарисовки больше похожи на работу кистью, и в последнее время пользуются популярностью.
Это один из наиболее популярных трендов 2020 года в веб-дизайне. Такие иллюстрации можно часто наблюдать в различных видео типа TED, музыкальных клипах и т.д. Можно сказать, что они твердо и уверенно идут вперед.
Ниже представлена демонстрация от Lisa Glanz:
14. Сеточный дизайн
Разработчики и дизайнеры помешаны на сетках. Это не новая концепция, если вы хоть немного занимались веб-разработкой. Сетки представляют собой схему разделения чего-либо на части (в буквальном смысле) и размещения различной информации в каждой из них.
Важно отметить, что цвет сетки должен контрастировать с фоном веб-дизайна. Они не должны быть слишком громоздкими, и размещать их нужно только там, где это возможно.
15. Слияние фотографии с графикой
Слияние фотографий с графикой – правильное сочетание абстрактного и красочной графики. Фотография – это прекрасный способ передать какой-либо посыл (обычно это такая насущная тема, как феминизм) практически без слов.
Фотографии оказывают необычное влияние на пользователей, и поскольку они отражают актуальные темы, следует подходить к их использованию изобретательно.
В качестве примера для демонстрации я выбрал Wix:
Используемая здесь фотография отражает тематику сайта, а именно свадебные фотосессии. Что по-вашему лучше: сообщение в виде фотографии или пара абзацев на тему свадебных фотосессий?
16. Анимация, запускаемая пользователем
Часто анимация отображается на сайте через @keyframes и другие фреймворки, вроде anime.js. Суть тренда заключается в использовании анимации через взаимодействие с пользователем.
Такой подход завлекает посетителя и в целом улучшает user experience.
Этот сайт показывает удачный пример запускаемой пользователем анимации:
17. Плавающие элементы
Плавающие элементы можно рассматривать как дополнение трехмерных компонентов, о которых мы говорили ранее. Элемент “парит в воздухе” – таким образом создаются увлекательные изображения и шаблоны в веб-дизайне.
99designs используем в качестве демонстрации:
18. Истории с графикой
Отзывы всегда были неотъемлемой частью покупок, и все мы зачастую прочитаем пару-тройку, выбирая товар. А вы знали, что отзыв клиента о товаре может рассказать целую историю?
Захватывающие истории – лучший способ помочь пользователям почувствовать связь с миром вокруг них. К примеру, отзыв на веб-сайте службы доставки еды стимулирует посетителей проводить больше времени на сайте, так как они пользуются доставкой на протяжении долгого времени.
Истории с графикой могут вывести завлечение читателей на новый уровень.
Сайт, используемый в качестве демонстрации, – Apple:
19. Графики данных на веб-сайтах
Все мы используем статистику на своих сайтах, так как это отличный способ завлечь пользователей, но, к сожалению, не каждый пользователь еще и читатель. Посетители часто пропускают часть с текстом и сосредотачиваются на том, ради чего зашли на веб-сайт. Мы в силах это изменить.
Все, что нам нужно, использовать ту же стратегию, что и в презентациях: применение графиков и визуализаций. Примеры визуализации, графики, трехмерной визуализации и т.д. можно найти на просторах интернета.
Это послужит отличным дизайнерским решением, если вы хотите передать большой объем информации в аккуратном и привлекательном виде без размещения текста.
Для демонстрации использован сайт Uber :
20. Черное и белое
Сочетание черного с белым – неизменно актуальная комбинация. И это касается не только веб-сайтов, но и фотографий, эскизов, настенных росписей, наручных часов и т.д. Черно-белые комбинации очень приятны для глаз. Возможно из-за контрастирующих элементов, о которых мы говорили выше. Использование черно-белой цветовой гаммы на сайте (с оттенками черного) – новый тренд в веб-дизайне 2020 года, и похоже, он будет популярным и в будущем.
В качестве примера сайта я использовал Dribbble:
21. Геометрические фигуры и узоры
Геометрические формы помогают веб-дизайнерам создавать что-то захватывающее и мощное из обычного изображения.
Геометрия постоянно встречается в природе, поэтому мы подсознательно склонны к геометрическим узорам и формам. Если они сочетаются с подходящими цветами и контрастом, геометрические фигуры будут смотреться привлекательно.
Используемый для демонстрации сайт отражает истинную красоту геометрических фигур и паттернов:
22. Эксперименты с иллюстрациями
Вы скорее всего понимали, что иллюстрации становятся горячей темой в тенденциях веб-дизайна 2020 года и экспериментировании.
Веб-дизайнеры и пользователи любят в них все. Вы всегда можете поэкспериментировать с иллюстрациями, как, впрочем, и с любым другим из трендов. Более того, вы можете сочетать их с фотографиями, 3D-эффектами и т.д.
Прекрасным примером служит приведенный ниже веб-сайт :
Заключение
Надеюсь, эта подборка вас вдохновит. Конечно, как веб-разработчик, я могу с уверенностью сказать, что тенденции будут продолжать меняться. Все, что вы видите, будет улучшено в будущем. Точно так же, как я никогда не думал об использовании этих вещей три или четыре года назад, я не могу представить себе то же самое на три или четыре года вперед.
Статья публикуется в переводе. Автор оригинального текста Harish Rajora.
Дизайн и веб-разработка – близнецы-братья. Многие талантливые frontend-программисты начинали свой путь в профессии как дизайнеры. Если вы планируете сменить специализацию или задумываетесь о дополнительных навыках, обратите внимание на курс онлайн-академии GeekBrains. Начав с основ, вы пройдете стажировку в реальной команде и удачно обновите резюме.
Какими будут сайты в 2020 году: тренды веб-разработки, веб-дизайна и интернет-маркетинга
Каким будет диджитал в 2020 году? Чего будут хотеть пользователи? Как изменятся сайты? Какие инструменты появятся в интернет-маркетинге? Мы в WebCanape проанализировали все веяния в ИТ и построили прогнозы на грядущий год, чтобы ваши сайты были лучше, эффективнее и привлекательнее для аудитории.
Если бы Илон Маск следил за трендами дизайна, Cybertruck, скорее всего, выглядел бы иначе и не стал бы мемом. Чтобы ваш сайт не превратился в предмет насмешек, а методы продвижения приносили деньги вам, а не только подрядчикам по интернет-маркетингу, мы проанализировали запросы наших клиентов за этот год, опросили наших разработчиков, дизайнеров, интернет-маркетологов и отдел продаж, о том, куда движется digital, и собрали самые важные, по нашему мнению, тренды веб-разработки, веб-дизайна и интернет-маркетинга в 2020 году вместе.
Тренды в сфере разработки и дизайна сайтов зависят от трех ключевых факторов: поведение интернет-пользователей, спрос со стороны заказчиков сайтов и технологическое развитие. Они влияют на отрасль в комплексе. Когда все три фактора учтены, мы получаем тенденцию, которая скорее всего выстрелит в ближайшем будущем. Мы собрали самые важные прогнозы, на которые команда WebCanape делает ставку в следующем году.
Если раньше нам приходилось убеждать клиентов «раскрыться» перед нами, чтобы создать сайт, максимально соответствующих их бизнес задачам, то сейчас многие уже осознают важность предпроектной аналитики бизнеса. У нас изучение компании, процессов, продуктов и аудитории включено в услугу разработки сайта.
Юрий, руководитель отдела продаж:
Все больше клиентов готовы начинать разработку сайта с этапа аналитики. На этом этапе мы анализируем нишу клиента, его прямых конкурентов, целевую аудиторию. На основе этого формируется структура сайта, разрабатываются функциональные решения. Естественно, это удорожает процесс, но позволяет сдавать сайт, конкурентоспособный, полностью готовый к работе — это по-настоящему эффективный инструмент привлечения клиентов.
Заказчики сайтов хотят получать результат разработки быстро и при этом платить меньше. На первый взгляд, аналитика бизнеса, которая увеличивает чек на разработку, не очень вяжется с этим желанием, но в пересчете на реальные деньги это все равно выходит для клиента выгоднее. Ведь сайт уже на старте «заточен» под выполнение реальных бизнес-задач, и его не придется переделывать.
Кроме того, аналитика бизнеса до начала разработки позволяет проявить заботу о посетителе. Мы рисуем портреты пользователей и создаем сайты, которые будут им нравиться. Сегодня без тщательной проработки пути пользователя по сайту сложно добиться хорошей конверсии.
Сегодня компаниям необходима интеграция сайта с их маркетинговыми и бизнес-процессами. Наши клиенты сами приходят с этими запросами, и их становится все больше. Без внедрения CRM и систем комплексной аналитики сложно понять, окупается ли сайт и что делать, чтобы он работал еще эффективнее.
Юрий, руководитель отдела продаж:
Клиенты хотят погружаться в анализ результатов, понимать окупаемость вложенных в интернет-маркетинг денег.
Татьяна, руководитель отдела Performance-маркетинга:
Все больше клиентов интегрируют рекламные системы с системами аналитики и CRM. Без хорошей аналитики невозможна качественная оптимизация. Тут в целом ничего нового, но при растущей конкуренции похвастаться хорошими результатами смогут только те, кто выстраивает глубокую сквозную аналитику.
Анжелика Трофимова, директор:
Посетителей привлекают игровые моменты: тесты, викторины, мини-квесты. Пользователь хочет получать полезный контент, но делать это без труда. Задачи коммерческого сайта в 2020 году — вовлечь, развлечь, обучить и только после этого продать.
Дмитрий, руководитель отдела дизайна:
Пользователям скучно листать простые сайты наполненные текстами, картинками и каталогом. Калькуляторы расчета, фильтры подбора, пошаговые инструкции, опросники, квесты, игры — все добавляет вовлеченности. Когда-то делали для оконного сайта однорукого бандита, у которого можно было выиграть москитную сетку или подоконник. Дизайн был ужасным, но затея отличная.
Несмотря на то, что адаптивность — это уже несколько лет стандарт веб-разработки, многие сайты по-прежнему плохо выглядят и функционируют на смартфонах. Сегодня уже недостаточно делать гибкую сетку для масштабирования дизайна. Нужно грамотно прорабатывать точки слома в мобильной версии и в принципе адаптировать контент страницы под мобильных пользователей, которые нацелены на быстрый поиск и восприятие информации в движении.
Все телефоны на сайте должны быть кликабельными и звонибельными.
Дмитрий, руководитель отдела дизайна:
Адаптивные сайты делать научились все, но многие (и мы в том числе) по-прежнему считают десктопное разрешение основным, хотя современный человек большинство своих задач решает именно через телефон. Такой подход не очень эффективен в разработке сайтов. Самый простой пример — много графики и избыточность элементов еще можно терпеть на десктопе, но на телефоне это становится критичным. Веб-дизайн движется к максимальному сокращению графических элементов. В ближайшем будущем возможен рост популярности темных интерфейсов — что позволит сэкономить заряд смартфона.
Сейчас требования к визуальной части сайтов сильно изменились по сравнению с ситуацией двух-трехлетней давности. Это уже не просто красивая картинка, а продуманный адаптивный интерфейс между пользователем и серверной частью. Множество сценариев выполняется на стороне браузера, и за все это отвечает front-end, в функции которых раньше входила в большей степени верстка для отображения отработанных сценариев. В текущих реалиях front-end — это уже программирование. Стирается граница между сценариями, которые отрабатывают на сервере (back-end), и сценариями на клиентской стороне (front-end). В связи с этим растет спрос на full-stack-специалистов, которые могут разрабатывать сценарии и на стороне сервера и на стороне клиента.
Анжелика Трофимова, директор:
Последние годы у владельцев сайтов стояла дилемма: разрабатывать в дополнение к сайту еще и мобильное приложение или достаточно адаптивного сайта. Сайты, разработанные на PWA-технологии, имеют функции мобильного приложения. С ними удобно работать при слабом сигнале или полном отсутствии сети, так как данные подгружаются из кэша. Эта технология делает интерфейс более удобным для пользователя, отрубая все лишнее, если посетитель заходит на сайт со смартфона. И такое решение значительно дешевле отдельного мобильного приложения, которое не всегда окупается.
В дизайне все веяния либо мимолетные, которые за месяц всем надоедают и забываются, либо долгоиграющие, которые несколько лет набирают обороты, их применение расширяется, меняются дизайнерские приемы для их реализации. О долгоиграющих трендах, которые будут определять веб-дизайн в 2020 году мы спросили Дмитрия, руководителя отдела дизайна WebCanape.
Вечный тренд, который сейчас превратился в настоящее помешательство. Это напрямую связано с переходом на мобайл. Многие считают, что чем сайт больше похож на меню настроек iPhone, тем он эффективнее и позволяет пользователю максимально быстро решить свои задачи.
Большие компании с ресурсами для экспериментов становятся все смелее и выбирают динамичные, ассиметричные, иногда даже немного «шизовыми» решения в дизайне. Рядовой клиент агентства к таким вещам не готов. Тут при всей любви к чему то свежему и нестандартному нужно сохранять здравый смысл и помнить, что удобство интерфейса все же важнее.
Юзабилити всегда считалось хорошим тоном, но сегодня это превращается в отраслевой стандарт. Скоро это окончательно станет гораздо важнее красивой картинке на сайте, на чем до сих пор настаивают многие клиенты агентств. Сложность в том, что это требует очень глубокого погружения в бизнес клиента и изучения поведения посетителей сайтов.
Постоянно находятся новые и свежие оттенки привычных цветов. Все пресытились классической палитрой: если желтый то как у Яндекса, если зеленый то как у Сбербанка и т. п. Чем уникальнее оттенок, тем лучше.
Градиенты становятся сложнее и многоцветнее, с плавными переливами и нарушенной геометрией (классическая линейная перетяжка двух цветов уже не актуальна, но все как всегда временно). В целом все чаще размываются ограничения фирменного стиля, а конкретно корпоративных цветов. Нет ничего страшного в использовании широкой палитры и тонов, отличных от корпоративных. Монотонность быстро утомляет людей.
Этот тренд бодро продолжает набирать обороты. В погоне за уникальностью, когда одни и те же изображения повторяются на каждом втором сайте, стало очевидно, что фотографии не всегда могут решать эту задачу. Важно что поменялось восприятие иллюстраций. Раньше считалось, что фото — это вроде кино, а иллюстрации — что-то детское, мультики. Теперь же даже поросшие мхом крупные компании не боятся использовать в дизайне иллюстрации.
Текст давно уже не воспринимается как абзац с вылетами и параграфами. Это самостоятельный элемент дизайна — крупные заголовки, хаотично разбросанные слова, эффекты для шрифта (тени, контуры, градиенты), нарочно нарушенная читабельность, смелые начертания шрифтов.
Чтобы вам ни говорили SEOшники, уменьшение количества текста — тенденция, к которой стоит присмотреться. Большой объем текста не делает вас солиднее, он делает вас скучнее.
Юлия, руководитель отдела контент-маркетинга:
Действительно, кирпичи текста никто уже давно не читает (а читал ли?). Классно, когда страница построена на заголовках, по которым посетитель перескакивает как с кочки на кочку и сваливается в воронку продаж, оставив заявку в форме, к которой вы его привели. Сегодня эффективный текст плотно привязан к дизайну, и этот тренд пришел, чтобы остаться.
Но большинству наших клиентов по-прежнему хочется много сказать на каждой странице, хоть их аудитории нужно совсем другое. Верю, что в конце концов пользователь победит.
Сайт должен быть живым — это давно уже стало правилом, и чем больше движения картинки и элементов сайта, тем лучше. От необычных ховеров кнопок и плавной подгрузки контента до сложной анимации элементов дизайна — все это будет бурно развиваться еще долго.
Аудитории приятно взаимодействовать с сайтами, которые вызывают эмоции: содержат графику, видео, анимации, меняют внешний вид в зависимости от сезона, времени суток.
Антон, руководитель отдела поискового продвижения сайтов:
Видеоконтент уже не первый год в трендах в продвижении и дизайне. Пользователи больше доверяют продукту, который понимают. А содержательный ролик как раз способствует лучшему пониманию. Пора уже всем завести канал на YouTube. Что вы за бизнес, если вам нечего показать?
Татьян, руководитель отдела Performance-маркетинга:
С такой популярностью видеоконтента немудрено, что видеореклама тоже набирает обороты. Таргетированная реклама в TikTok сейчас на пике популярности.
Внутриплатформенное продвижение, месседжеризация, эмоционально заряженный маркетинг — главные тенденции, с которыми мы вступаем в 2020 год. Подробнее о них и других трендах расскажут наш директор по внутреннему маркетингу Евгений, руководитель отдела performance-маркетинга Татьяна и руководитель всея SEO в WebCanape Антон.
Евгений, директор по внутреннему маркетингу:
На рынок интернет-маркетинга стали сильно влиять технологические платформы. Уже сейчас существует много проектов типа Яндекс Такси, Яндекс Услуги, Яндекс Еда, и таких агрегаторов все больше. Они меняют традиционные бизнес-модели — профессионалу/компании теперь не обязательно иметь сайт, чтобы получать заказы. Вместе с бизнес-моделями меняется и маркетинг — появился спрос на продвижение внутри платформы, чтобы заказывали у вас, а не у других участников платформы. Это видно по Amazon и AliExpress, где услуги продвижения внутри платформы уже супервостребованы.
Сейчас мы активно работаем с платформами Яндекс Дзен и Яндекс Кью и продвигаем бизнес наших клиентов там.
Антон, руководитель отдела поискового продвижения сайтов:
Кроме крупных независимых агрегаторов стоит обратить внимание и на собственные сервисы поисковых гигантов. Близок тот день, когда Яндекс полностью вытеснит из выдачи чужие сайты. Подозреваю, что Яндекс и Google и в 2020 году продолжат отдавать предпочтение собственным сервисам. Без продвижения внутри этих платформ коммерческие сайты рискуют остаться на задворках.
Компаниям стоит бросить силы на развитие репутации в системах отзывов и ранжирование в Яндекс Картах и Google Maps. Стимулируя клиентов оставлять отзывы на внешних платформах, бизнес сможет не только подтолкнуть внешнюю аудиторию к покупке, но и получить более выгодные позиции в поисковой выдаче.
Татьяна, руководитель отдела Performance-маркетинга:
Репутация компании на этих платформах действительно очень важна и помогает сделать рекламу эффективнее. В Google Рекламе, например, рейтинг по отзывам можно добавить к рекламному объявлению.