Must have в веб-дизайне

UX и дизайн
creative

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

В 2019 году на пользовательский опыт, восприятие вашего сайта и всего бренда влияет тип контента, устройства и технологии, в первую очередь это:

  • Мобильные устройства
  • Скорость загрузки
  • Визуальная иерархия
  • Видео

Скорость загрузки

  • По данным исследований у вас есть 10 секунд, чтобы произвести впечатление на пользователя. И это касается не только внешнего вида сайта, но и функциональности и навигации. 61% пользователей уйдут, если не найдут сразу же то, что искали.

    Одинаковый опыт для пользователей компьютеров и смартфонов

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

    Четкая визуальная иерархия

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

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

    Флэт дизайн

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

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

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

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

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

    Иллюстрация для услуг Ростелекома

    Специалисты агентства Milo themes отмечают несколько ключевых тенденций:

  • Анимация. Микроанимации, которые на мобильных платформах используются для создания визуальных эффектов, были в тренде и в прошлом году, но теперь мы пойдем дальше спрячем анимацию за каждым UI-элементом, неважно насколько маленьким.
    Анимация заставляет пользователя больше взаимодействовать с продуктом или услугой, которую вы продвигаете. Этот тип анимации может быть интегрирован в любой контент. Не требуются даже короткие видеоролики — достаточно анимировать буквы. А в последнее исследование Quintly в соцсетях показало: анимация собирает на 21% больше взаимодействий, чем фото.
  • Естественные фото.Закончилась эра постановочных фото из фотостока. Сейчас дизайнеры ищут более естественные, нетипичные фото, которые не выглядят как стоковые фото.
     

  • Фото для сайта оператора СберМобайл
     
  • Видеоподложка. Этот визуальный эффект одновременно помогает повысить уровень конверсии, создать впечатление, передать ваше сообщение за секунды, а пользователь проведет больше времени на сайте.
    Видеоподложка на сайте компании-девелопера CCI меняется в зависимости от времени суток
     
  • Фокус на целевую аудиторию. Ваш взгляд с позиции профессионала может сильно отличаться от видения аудитории. Пройдите по всем страницам, по всему пользовательскому пути со свежим взглядом, такое тестирование поможет вам создать user-friendly интерфейс.
  • Иллюстративные иконки. Не обязательно заказывать авторские иллюстрации для всех разделов сайта, достаточно поработать с иконками. Динамичные линейные иконки, которые люди будут ассоциировать с сервисами, могут быть использованы для достижения визуальной иерархии и привлечения внимания к нужной области

    Иконки на сайте Финансовая культура
     
    1. Типографика. Несколько лет подряд одним из главных трендов было преимущество фото, мы добавляли как можно больше фото и картинок. Но в 2019 году яркие фото стали скорее функцией по умолчанию, чем продуманным визуальным элементом. Широкоформатные фото сменяются крупными и жирными шрифтами, а также уникальным и вовлекающим текстом
    2. Гиганты вроде Apple заявляют о себе и своих продуктах через типографику и делают ставку на минимализм, чтобы не перегружать дизайн и оставить его привлекательным.
       
    Эти тренды и референсы не означают, что все приложения и сайты должны выглядеть одинаково. Они задают общее направление, могут стать дополнением к инструментам дизайнера и фронтенд-разработчика и помочь улучшить пользовательский опыт.