Обучайся бесплатно с WAYUP Premiere сегодня вечером

Тренды в веб-дизайне 2020

Фул-блек 

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

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

Ультра-минимализм и движущиеся картинки

Правило Less is more немного устарело. Актуально - Ultra-less. 

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

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

Рисованные элементы

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

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

Микс фотографии и графики 

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

Футуристические цветовые комбинации

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

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

Правила простой и прозрачной навигации 

Думай о целях пользователей 

Что нужно юзеру твоего сайта? 

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

Хорошая навигация позволяет достичь цели почти не думая. Ты просто go with the flow и почти не замечаешь, как получаешь то, что хотел. Чтобы понять цели пользователей и применить их в проекте: 

  1. Пиши. Создай список потребностей твоей целевой аудитории. Отложи на несколько дней, проведи еще ресерч с другой фокус-группой и дополни список. В первый раз всегда что-то упустишь. 
  2. Думай наперед. Проектирование навигации похоже на шахматы. Куда пойдет пользователь, каким будет его поведение? Изучай ЦА, предугадывай реакции, рисуй черновики с ходами и проверяй эффективность. 

Используй визуальный язык 

Изображения красноречивее текста, потому что это уже образ в воображении пользователя. Читая, человеку нужно воображать, смотря на картинку - он уже имеет изображение. 

Иногда лучше не писать, например, “Мария Василевская - флорист и декоратор”. Оставить только имя, а профессию проиллюстрировать фотографией, анимацией или видео. 

Не переборщи с оригинальностью 

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

Простота и доступность во всех разделах сайта

У пользователя вообще не должно возникать вопросов. 

Возьмем для примера сайт WayUp. 

Главная страница отвечает на вопрос: где я и чем это место мне полезно. 

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

На странице “Курсы” дается перечень продуктов. Составлен блоками с ценой и краткой аннотацией. Под каждый курсом ответ на вопрос: Для кого? - “Начинающим”, “Верстальщикам” и т.д. 

Правило простоты и доступности объединяется еще с одним - продуманное расположение разделов и пунктов меню. 

Научись создавать дизайн, который прокачивает конверсию на курсе “Веб-дизайнер: счастливый билет в Таиланд

За 3 месяца ты освоишь инструменты для работы: Photoshop, Adobe XD, Figma. Научишься работать с модульными сетками и типографикой, ознакомишься с правилами композиции и цветовых сочетаний. Узнаешь эффективные способы поиска клиентов и работы с финансами. В итоге, получишь весь инструментарий, чтобы зарабатывать до $5000 на фрилансе и создаешь 5 сильных проектов для портфолио.

 

Как вам материал?