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

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

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

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

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

Вот так может выглядеть история о продукте или услуге клиента. У милых и неглупых девушек нет времени даже для того, чтобы пообедать, они буквально задыхаются от обилия документов, а те еще и падают сверху. Бедняжки! Но тут на помощь приходит 1С:Документооборот и вот уже нет завалов и гор из бумаг, шестеренки крутятся исправно, документы не теряются и не возникает никаких ошибок. Чем вам не история?

Эта серия изначально была направлена на продвижение услуг SEO нашей компании. Картинки нарисовала от руки наш дизайнер Наталья Гуль, а затем их сфотографировали и оцифровали.
Главный герой этой истории ― вот такая красивая утка, а точнее – Селезень. Сначала наш герой грустит, сидит и не знает, что же ему сделать, чтобы его сайт лучше работал. На полу накиданы скомканные бумажки с планами по завоеванию мира… Увы, всё не то. История развивается на второй картинке – Селезень приходит в «СофтЭксперт». Облачка расходятся в стороны, открывая герою вход в «райские кущи» ― к профессионалам, которые точно помогут. Затем Селезень попадает в отдел веб-разработки, где знакомится с Котом и обсуждает с ним, как же продвинуть сайт. Знакомству Селезень явно рад! Наконец, наши котики начинают настраивать сайт, а главный Кот вообще превращается в супер-героя. Селезень счастлив. Хеппи-энд.

Графика и изображения от руки

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

Милый, нарисованный от руки китайский фонарик и котик Манэке-нэко (тот, который ещё лапкой качает) наверняка привлекут внимание.

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

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

Больше пространства

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

Широкие поля, небольшое количество текста, понятная навигация. Строгий и сдержанный портал для крупного промышленного предприятия.

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

Кричащие цвета и градиенты

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

Этот сайт вообще получился очень «вкусным», недаром, что он о сладостях. Здесь наши дизайнеры использовали и графику от руки, и винтажные шрифты, и сочные цвета – коралловый, бирюзовый, шоколадный. Кстати, об этом проекте есть отдельный материал, прочитать его можно здесь: https://www.sfx-tula.ru/news/solutions/9912/

Желтый и красный в сочетании с холодным салатовым цветом – «убойное» сочетание, броское и интересное. Впрочем, в этом примере мы видим и другие тенденции в дизайне 2020 года: интересная gif-анимация и, отчасти, история, рассказанная в картинках. Отсылка к Гомеру Симпсону с его любимыми пончиками – остроумная находка дизайнера, которая тоже дает сайту бонусы.