Сделай мне красиво!
или какие тенденции в дизайне сайтов нужно учитывать в 2020 году? (часть 2)

Gif-анимация

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

С этими джентльменами мы уже встречались. Они – отличный пример использования gif-анимации.

Да-да, это сайт, который мы делали для себя. Небольшие элементы gif-анимации есть чуть ли не на каждой странице – то клубочками выкатываются цифры, то шевелится суперменский (точнее супер-котовский) плащ, то птичка вылетает и садится на вывеску. Есть на сайте и элементы игры, которые наверняка понравятся пользователям: если нажать на палитру, то кот превращается в художника и начинает с вашей помощью раскрашивать разных персонажей. На этом можно «залипнуть» надолго.

Геометрические фигуры

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

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

Отзывчивые, или адаптивные, логотипы

Эти логотипы подстраиваются (адаптируются) под любое мобильное устройство, изменяясь в зависимости от размера экрана. У логотипа могут исчезать надписи или целые элементы ― искусство дизайнера, который создал его, заключается в том, что логотип всегда остается узнаваемым для аудитории.

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

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

Эффект параллакс

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

Этот яркий и красивый сайт – иллюстрация сразу нескольких трендов в дизайне 2020 года. Эффект параллакс, сочные цвета, витиеватые шрифты, а также нарисованные от руки иконки… У вас не возникло, случайно, желания попробовать пирожное или эклер?

Качественные атмосферные фото

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

Перед вами изначальный проект для одного из ресурсов ГК «СофтЭксперт», где наши дизайнеры собирались использовать атмосферные фото. Обратите внимание на то, как фото дополняет текст («Не быть как все!») и наоборот, а также на контраст бледно-серого и активного желтого цветов. Желтый солнечный свет буквально разрывает серую пелену, усиливая всё ту же идею уникальности и прорывных подходов.

Полноэкранное видео

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

Нестандартное расположение блоков

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

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

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

Полупрозрачные кнопки

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

Кнопки тут, с одной стороны, не бросаются в глаза. А с другой ― вполне заметны и хорошо вписываются в общую концепцию дизайна.

Типографика

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

Возможно, на первый взгляд все перечисленные тенденции выглядят как разноцветные бабочки – красивые, но, в общем-то, мало на что влияющие. Но дело обстоит не совсем так. В умелых руках дизайн превращается в эффективный инструмент влияния.
Здесь существует интересная закономерность. Поисковые системы оценивают сайты по разным показателям, один из них – поведенческие факторы. Иными словами, нравится ваша площадка пользователям или нет. Один из сигналов, которые измеряют поисковые машины, ― это показатель отказов, то есть процент пользователей, которые ушли с ресурса практически сразу же, не задержались на нём. Этот показатель зависит от уровня удобства сайта, соответствия ожиданиям аудитории и качества его исполнения. В последнюю из характеристик дизайн вносит весомый вклад. Соответственно, если сайт хорош, а показатель отказов низок, поисковики повышают его в выдаче. А значит, его увидят большее число пользователей.
Если вы нашли специалистов, которые понимают маркетинговые тонкости, готовы вникать в ваш бизнес, в ценности вашей компании и не ленятся узнать, кто ваша целевая аудитория, то вам по-настоящему повезло. Если над сайтом работает целая команда профессионалов, обсуждая с вами важные нюансы, то вы зашли в нужную дверь.

Ею может быть дверь, ведущая в «СофтЭксперт». Наши специалисты руководствуются именно теми принципами, которые упомянуты выше. Они работают вместе с клиентом, стараясь найти верное решение ― как для большого завода, так и творческого человека, развивающего личный бренд. Тут создают сайты с характером, на которых посетитель хочет подольше задержаться, а в конечном итоге – сайты, помогающие достигать коммерческих целей проектов.