Руководство по созданию веб-сайтов, достойных Awwwards
Узнайте, что стоит за отличным веб-сайтом
Создание веб-сайта, достойного Awwwards, — непростая задача. Это требует много тяжелой работы, самоотверженности и творчества. Такие черты требуют многолетнего опыта в нескольких областях, поэтому к этому нельзя относиться легкомысленно.
Вы когда-нибудь задумывались, что стоит за невероятной анимацией и взаимодействием? Давайте посмотрим, чему я научился, создав и опубликовав свой собственный персональный веб-сайт на Awwwards.
Почему вы публикуете свой сайт здесь?
Awwwards — один из самых популярных веб-сайтов, который сертифицирует дизайн и креативность веб-сайтов. Это отличный способ заявить о своем имени (или названии вашего веб-сайта) и быть узнаваемым вашими коллегами.
Креативные/дизайнерские агентства часто просматривают Awwwards в поисках новых талантов, так что это также отличный способ привлечь внимание таких агентств или даже рассказать миру о вашей собственной компании.
Awwwards не совсем для всех, так как есть своего рода платный доступ для размещения веб-сайта (подписка PRO — 1 бесплатная отправка включена). База пользователей состоит в основном из дизайнеров, творческих разработчиков и подобных агентств, создающих опыт профессионального уровня.
Честно говоря, возможно, у меня за плечами не десятки лет опыта, и я не могу похвастаться талантом, но я восхищаюсь творческой работой, стоящей за всем этим интерактивным опытом, особенно 3D-взаимодействием, поэтому я сделал все возможное в рамках своих навыков. .
Хотя мой личный веб-сайт не входил в число самых лучших, он чрезвычайно увеличил охват аудитории моего веб-сайта. По данным Splitbee, за неделю запуска я набрал около 400 уникальных пользователей.
Он настроен с максимально расслабленными настройками отслеживания, поэтому реальное число может быть намного больше. Эти цифры новичков связаны с низким прямым трафиком и рейтингом SEO (на данный момент), поэтому все посетители пришли с Awwwards.
Что делает веб-сайт достойным наград?
На мой взгляд, это мелочи, которые складываются и выделяют сайт. Микровзаимодействия и случайность необходимы для того, чтобы веб-сайт выделялся в море веб-сайтов с потрясающим дизайном.
Это общий контрольный список характеристик, которые я нашел на множестве высокорейтинговых сайтов (SOTY):
- Следуйте принципам дизайна: иерархия, интервалы и т. д., со свободой ответственно нарушать правила (странные макеты, преувеличенные размеры).
- Огромные размеры шрифта
- Переходы страниц, загрузчики и поэтапная анимация
- Креативная анимация
- Уникальный стиль изображений или иллюстраций
- Следование за курсором или взаимодействие с наведением курсора
- Параллакс и плавная прокрутка
- 3D, шейдеры, AR и VR
- Случайность — перезагрузки/взаимодействия приводят к немного другим анимациям
Не существует настоящего рецепта идеального веб-сайта. Все эти элементы сами по себе не могут сделать веб-сайт по-настоящему готовым к наградам без отличного повествования и художественного оформления, и при этом они не являются обязательными или правильными для каждого опыта.
Следите за обновлениями, потому что, начиная со следующей недели, я попытаюсь составить непостижимый еженедельный график публикации статей, освещая каждый пункт, перечисленный выше, по отдельности, сосредоточив внимание на реализации и рассуждениях.
Как можно создать такой сайт?
Немного покопавшись с BuiltWith и Dev Tools, я пришел к интересному выводу. Существует огромное разнообразие технологий, от Next.js, Nuxt.js до Ruby on Rails и старого доброго JavaScript на сайтах SOTY.
Я ожидал тенденции к большему количеству Webflow, но из-за уникального художественного направления и технологических ограничений большинство SOTY на самом деле являются «дорогими» индивидуальными решениями.
Немного статистики сайта SOTY
- Pangram Pangram Foundry (кстати, потрясающие шрифты)
- Махмут Экспедишн Байкал
- Синхронизированная студия
- Портфель Бруно Саймона (найти все пасхальные яйца)
Это еще одна причина не отказываться от любимой технологии, хотя я думаю, что есть несколько эффективных вариантов, которые я сам буду использовать в будущем.
Создавайте как дизайнер
Если вы менее техничны и больше ориентированы на дизайн, Webflow — отличный выбор, поскольку изучение такого инструмента может дополнить ваш набор навыков и сделать вас потенциальным фрилансером.
Многие анимации и переходы встроены в Webflow, и, насколько я слышал, вы можете вставлять свои собственные 3D-модели и собственный код, хотя я не уверен в этом.
Framer — еще один достойный конструктор веб-сайтов без кода, созданный на основе известного семейства анимаций Framer. По интерфейсу он похож на Figma, но менее зрелый, но с огромным потенциалом.
Создавайте как разработчик
Если вы больше любите творческих разработчиков, то я настоятельно рекомендую попробовать Three.js, а точнее, с оберткой React react-three-fiber, react-three-drei, react -трехрапира, и остальные члены семьи Поймандрес.
Я нашел интересную комбинацию, позволяющую сделать пакет JavaScript как можно меньше, смешав Astro с react-three-fiber. Все, что требует 3D-интерактивности, — это CSR, а остальное — SSG, с гораздо меньшим количеством JavaScript по сравнению с тем, что выдал бы Next.js.
Что касается анимации, я бы сказал, что GSAP по-прежнему удерживает первое место, хотя определенные библиотеки занимают это место в экосистеме React.
framer-motion и react-spring отлично подходят для реализации анимации с более дружественным к DX подходом, но немного меньшей универсальностью и разными API.
Как ранжируются сайты?
Система оценки, лежащая в основе итогового балла, основана на четырех критериях разного веса, каждый из которых отражает отдельный аспект веб-сайта.
После запуска веб-сайта будет 5–7-дневный интервал (он может измениться), когда любой, у кого есть учетная запись, сможет проголосовать. Следует отметить, что голоса только премиум-пользователей (PRO) или отмеченных наградами пользователей (CHIEF) учитываются при подсчете фактических наград.
Из-за ручного процесса утверждения может быть трудно определить, когда веб-сайт появится в списке. Если вы хотите поделиться в социальных сетях, возможно, вам придется регулярно проверять.
Зачем все эти хлопоты? Какие награды? Веб-сайт, указанный здесь, имеет определенную известность, и в зависимости от вашего окончательного результата вы можете получить некоторые из следующих наград.
Похвальный отзыв *
Количество голосов равно или превышает 6,5.
Мобильное совершенство *
Веб-сайты, получившие почетное упоминание, проверяются в соответствии с рекомендациями Google для мобильных устройств и награждаются, если они набирают не менее 70/100 баллов. Если оценка достаточно высока, вы также можете получить награду «Мобильный сайт недели».
Сайт дня *
Получите самый высокий балл за день.
Сайт месяца *
Жюри снова рассматривает 8 лучших сайтов месяца вместе с подсчетом голосов пользователей.
Сайт года *
Каждый веб-сайт премии SOTM номинирован и соревнуется за всемогущую SOTY.
Награда разработчика *
Веб-сайты, получившие награду SOTD, оцениваются в соответствии с рекомендациями по производительности, SEO, доступностью и многим другим.
Подробную официальную информацию всегда можно найти на Awwwards, так как со временем она может измениться.
Существуют также отдельные рейтинги для страниц, таких как «не найдено», «загрузка», «контакт» и т. д., поэтому не забудьте добавить их изображения в раздел дополнительной информации.
Я столько раз писал «Awwwards» в этой статье, что Grammarly добавил его в список допустимых слов. Приготовьтесь к статье на следующей неделе, когда я расскажу о принципах проектирования с точки зрения разработчика.
У вас есть вопросы или предложения? Не стесняйтесь обращаться! 🚀. Если вы хотите быть в курсе моих будущих работ, подписывайтесь на меня в Medium или Twitter.
