Что общего у сайтов, которые побеждают на Awwwards
В этой статье я делюсь своими наблюдениями о том, есть ли какие-то общие правила для сайтов-победителей на Awwwards.
Недостаточно просто есть хот-доги
Недавно я читал книгу «Думай как фрик» Стивена Дабнера и Стивена Левитта. В ней был интересная глава о чемпионе по поеданию еды на скорость — некогда худеньком и скромном японце Такеру Кобаяши (Takeru Kobayashi), в последствии ставшим шестикратным чемпионом мира по поеданию хот-догов.
Но Кобаяши не сразу стал чемпионом. Он тщательно анализировал то, как проводятся соревнования, проводил тестирования на себе, записывал данные в таблицы, изучал соперников и пришел к выводу, что у них нет никакой стратегии. И решил ее разработать.
В то время как другие сосредотачивались на простом поедании пищи, Кобаяши решил действовать иначе. Он решил есть хот-доги раздельно: сначала сосиску, которую переламывал пополам, а затем измоченную в воде булочку, от которой жажда была меньше.
Это помогало ему сосредоточиться на процессе поглощения хот-догов и побить рекорд предыдущего чемпиона (25 хот-догов за 12 минут). Кобаяши съел 50 хот-догов за 12 минут. Потом он снова побил свой же рекорд.
Меня это натолкнуло на мысль о том, чтобы проанализировать составляющие сайтов победителей на Awwwards и понять, есть ли какая-то формула, которая помогала бы регулярно получать SOTD.
Формулы успеха нет
Сразу скажу, что никакой формулы успеха я не вывел. Но обнаружил некоторые закономерности у «Сайтов дня», которым хотел бы поделиться в этом посте.
Пирамида ̶М̶а̶с̶л̶о̶у̶ Red Collar
В одной из лекций Дениса Ломова (сооснователя и креативного директора Red Collar) я подсмотрел одну классную штуку — пирамиду ценностей веб-проекта.
Согласно этой пирамиде, у каждого сайта есть несколько уровней:
1. Функциональность — насколько сайт хорошо работает, выполняет свои базовые функции и решает задачи.
2. Надежность — насколько сайт надёжно запрограммирован, стабильно работает во всех браузерах, адаптивен для мобильных и не отваливается при большом количестве посетителей.
3. Удобство — насколько сайт понятен и удобен для пользователя. Юзабилити, хороший пользовательский опыт и все такое.
Дальше, как правило, большинство не идут.
Обычно, большинство сайтов останавливаются на этих первых 3-х этапах. И даже их выполняют с большой натяжкой. Но есть еще 2 ступени, благодаря которым сайт может получить награды и внимание.
4. Доставляет удовольствие. Редко когда сайт заставляет испытать какие-то эмоции: радость, грусть, веселье или сочувствие. Поэтому если проект сможет вызвать какие-то чувства, он будет в разы опережать соперников и точно запомнится.
5. Имеет значение. Это такие проекты, которые заставляют о чем-то задуматься, переосмыслить, узнать новое. Эти сайты имеют влияние не только на дизайнеров, но и на других людей. Они заставляют посмотреть по-новому на веб-дизайн в целом. Такие проекты обычно долго обсуждают в обществе и зачастую они получают даже Сайт года.
Эти базовые принципы я бы рекомендовал прикладывать к каждому проекту как чек-лист и задаваться вопросом «соответствует ли сайт как минимум первым трем пунктам пирамиды?».
Мои наблюдения
Пирамида выше прекрасно отражает общие принципы, которым должен следовать автор хорошего сайта. Но мне все же хотелось выделить конкретные критерии, которые более точно объясняли победы разных сайтов на конкурсах.
1. Эстетика
Первое, на что обращают внимания судьи на таких конкурсах, как Awwwards — визуальный дизайн. Он в процентном соотношении имеет больший вес, чем другие критерии: юзабилити, креативность, контент, мобайл и код.
Насколько сайт аккуратно сверстан, насколько органично работает анимация и построены переходы, настолько у него увеличиваются шансы на получение награды.
Иногда сайт дня может не блистать эффектами, инновационными решениями, WebGL и прочим. Но при этом быть очень приятным, с качественным контентом и анимациями. Порой этого вполне достаточно, чтобы получить награду.
2. Типографика
Как я заметил, у многих сайтов дня очень хорошая типографика. Какой ни возьми, почти на каждом будут красивые шрифты, которые правильно передают настроение проекта, создают нужную атмосферу и подчеркивают стиль сайта.
А некоторые победители и вовсе обходятся исключительно типографской работой! И это меня больше всего поражало: как настолько искусно можно сделать сайт на 90% состоящий из одного текста?
Хорошая работа со шрифтами прощает не самый удачный контент, возможные баги или скорость загрузки сайта. Если ваш текст выглядит круто, это уже половина успеха.
3. Инновации и технологии
Использование передовых технологий в веб-проекте заставляет порой сказать «Вау! А что, так можно было?». Вспомните, например, некогда трендовые параллакс-эффекты или появление WebGL в широком использовании. Привнесение настоящей 3D-графики в сайты сделали их невероятно крутыми и живыми!
То же самое касается и кода. Использование, к примеру, PWA (Progressive Web Appliccation) позволило сделать опыт использования сайта более качественным. Бесшовные переходы между страницами без перезагрузки было чем-то «вау!» и сродни приложениям на телефоне.
Но инновации могут касаться и шрифтов. Использование вариативных шрифтов может придать вашему проекту свежести и новаторства, так как они пока используются редко по причине своей дороговизны и неслабой нагрузки на сайт.
4. Креативность
Насколько ваш сайт креативный? Да-да, я знаю, это очень субъективный вопрос. Даже если пройтись по предыдущим пунктам и выполнить их, надо задать себе этот вопрос. Но его можно сформулировать несколько иначе: есть ли в моем проекте нечто такое, чего еще не было раньше?
Здесь можно привести в пример смешивание напитков. Если правильно совместить водку, томатный сок, соусы, перец и соль, то на выходе мы получим коктейль Кровавая Мэри. Казалось бы, обычные ингредиенты, но в сочетании дают такой популярный напиток!
То же и с веб-проектами: можно хорошо проработать типографику, выбрав удачные шрифтовые пары, приправить это классными анимациями, использовать аскетичную цветовую палитру и, например, добавить интерактивные 3D-модели. Если смешать это в правильных пропорциях, есть шанс получить отличный коктейль!
5. Контент
Если у вас плохие тексты, фотографии и видео на сайте — считайте, вы проиграли. Да, конечно, можно здорово оформить текст-рыбу (Lorem Ipsum, будь он неладен!), но правильно оформить клиентский текст, помочь его отредактировать и подать в нужном виде сможет не каждый. Так что здесь еще нужно подключить сильного копирайтера.
А как насчет фото? Вам клиент предоставит, скорее всего, отвратительные фотографии в разной стилистике, цветах и размерах. Что с этим делать? Ретушируя их, вы будете проклинать тот день, когда на это подписались. Нужно вместе искать референсы, утверждать стиль и идти с клиентом за руку переснимать все как надо. Иначе вы получите «логотип в Ворде».
Никогда не давайте клиенту делать контент самому.
У нас, в Cosmos Studio, есть партнеры, которые могут организовать фотосессию для наших клиентов. Или сделать видео для сайта, которое нам нужно. Таким образом мы добиваемся нужной картинки для своих проектов и однородности контента.
6. Анимации
Да, я много говорил о них в предыдущих пунктах, но, все-таки, нужно выделить анимации в отдельный раздел.
С помощью анимаций и микроанимаций интерфейс может сообщать об ошибках, подсказывать решение, помогать в навигации и доставлять удовольствие. Мы ведь хотим, чтобы наши сайты радовали людей, верно?
Поэтому не поскупитесь на хорошего моушен-дизайнера, который разбирается в UI так же хорошо, как и в правилах анимации студии Disney.
7. Концептуальность
Если хотите, чтобы сайт наверняка привлек внимание судей, он должен быть концептуальным — то есть идейным. Если в сайте заложена какая-то концепция, смысл, который не очень трудно считать, то это гарантировано вас выделит среди других конкурсантов.
У нас, например, на сайте WebGL-звезды, которые отражают наше название и концепцию студии. У великолепных Dog Studio на главной потрясающая 3D-модель собаки, которая крутится и переливается при скролле.
Или взять сайт, который получил Site Of The Year — портфолио Бруно Саймона (Bruno Simon). Сайт является прекрасной презентацией его способностей как креативного разработчика. В общем, это игра, где ты можешь поездить машинкой и посбивать разные преграды.
Работает все настолько круто и четко, что даже словами не передать: красивые 3D-модели, физика движения, анимация и сама задумка — просто великолепно! Не зря он получил самую крутую награду Awwwards.
8. Трендовость
Нужно соответствовать духу времени. Конечно, есть стёб и брутализм, когда сайты имитируют игры из приставок Sega и умышленно стилизируют их под 2000-е. Но современные сайты и должны выглядеть соответственно!
Если вы делаете классный сайт, нужно учитывать современную типографику. Например, использование крупного текста или антиквы в технологичных проектах. А как насчет использование иллюстраций, пастельных цветов, линий, прелоудеров и кастомных курсоров?
Кто-то может сказать, что тренды недолговечны, они приходят и уходят, и я с этим соглашусь. Но есть мимолетные и долговечные тренды. Помните, одно время был тренд на Long Shadow или совсем недавно на Neumorphism? И где они сейчас? То-то же. Это пример коротковременных и мимолетных трендов.
А вот такие штуки, как крупная типографика, иллюстрации и 3D в вебе — это долгосрочные тренды. Эти приёмы можно использовать в своей практике и не сильно беспокоиться, что завтра они станут никому не нужны.
9. Мобильность
Если сегодня ваш сайт не адаптивен или плохо адаптивен под мобильные устройства, наград вам не видать. Чего там наград, простые пользователи предпочтут воспользоваться другим сервисом, чем вашим, если тот будет адаптивен под их мобильные.
У Awwwards есть специальная награда, которую они разработали вместе с Google — Mobile Excellence. Ее дают только тем сайтам, которые хорошо работают на мобильных, быстро открываются в браузерах, а их использование приносит удовольствие.
Сегодня почти 75% пользователей пользуются интернетом с телефона. А в Японии этот показатель и вовсе сумасшедший — 98%! Еще в 2012 году вышла книга «Сначала мобильные» Люка Вроблевски, где он предсказал победу мобильных устройств над десктопами. Понадобилось 8 лет, чтобы это поняли, кажется, все.
10. Социальная значимость
Есть проекты, которые поднимают важные вопросы. Например, сайты связанные с экологией, или расовой дискриминацией, фейковыми новостями, ущемлением прав женщин. Или затрагивают другие, более актуальные проблемы, например, таких, как легализация марихуаны 😅
Такие сайты имеют высокие шансы получить награду, так как их тема достаточно важна для общества. Будь то дизайнер, архитектор или продавец обуви. Это на повестке дня. А раз это актуально, хорошо сверстано, соответствует трендам — такой проект просто обречен на сайт дня, а то и сайт месяца!
Если ваш проект заставляет человека остановиться и хоть на секунду задуматься о теме, вы становитесь победителем для себя в первую очередь, потому что вы способны донести проблему в массы через свою работу.
Человек может посмотреть на сайт, впечатлиться и пойти дальше заниматься своими делами, но где-то в голове эти размышления останутся.
Выводы
Как видите, четкого рецепта или формулы получения награды на Awwwards не существует. Но есть некоторые закономерности и принципы, которые позволяют создавать действительно значимые проекты. Давайте пройдемся по ним еще раз:
- Эстетика.
- Типографика.
- Инновации и технологии.
- Креативность.
- Анимации.
- Контент.
- Концептуальность (идейность).
- Трендовость.
- Мобильность.
- Социальная значимость.
Я надеюсь, эти подходы и приёмы помогут вам создавать крутые проекты, за которые будете получать международные награды, гордиться ними и получать удовольствие 🙏
Если эта статья была для вас полезной, жмите 👏
А если есть какие-то вопросы или замечания, буду рад ответить в комментариях или в личных сообщениях.
