Как выиграть Awwward - красивый веб-дизайн.

Уроки десятилетия сокрытия awwwards.com

Как выиграть награду

Вы когда-нибудь задумывались, что нужно для создания отмеченного наградами веб-сайта? Меня очаровывает сочетание визуального творчества и технического мастерства, которое демонстрируется на сайте Awwwards.com. По мере того, как я сам все больше и больше увлекался веб-разработкой, моя признательность за творчество представленных студий и независимых креативщиков только росла. Это мое место, где я могу найти вдохновение для веб-разработки, и последнее десятилетие я с трепетом наблюдал за тем, какие творения появятся в будущем.

Позвольте мне предисловить следующую статью с заявлением об отказе от ответственности. Я не дизайнер или разработчик, удостоенный награды (пока). Я еще не представил веб-сайт на платформе Awwwards. Поскольку 2021 год находится в процессе более чем трех месяцев, эта статья предназначена в основном как якорь для меня; напоминание о достижении моей цели - выиграть премию Awwward в этом году. Надеюсь, вы найдете в его содержании какую-то ценность.

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

Кроме того, время загрузки и давление, которому эти сайты подвергают вашу систему, могут быть значительными. Я прогнал несколько из этих сайтов с помощью анализатора Google Lighthouse, и не все из них получили высокие результаты в тестах Web Vitals. Но вау они хорошо выглядят.

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

Как устроен успешный веб-сайт

Миссия Awwwards - «Празднование совершенства в веб-дизайне и разработке». Что влечет за собой совершенство в дизайне веб-сайтов? Когда дело доходит до победы в Awwwards, кажется, что безумно креативные концепции с шикарной анимацией и сильным использованием аудиовизуальных материалов в смелом дизайне - вот что приносит вам признание как дизайнера / разработчика.

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

Я не верю, что существует строгая формула для создания отмеченных наградами работ. Визуальный диапазон веб-сайтов, претендующих на Awwwards, довольно широк и не обязательно связан с тенденциями дизайна du jour или с конкретной отраслью. Главный критерий успеха - создание увлекательного цифрового опыта.

Художественное оформление занимает центральное место

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

Вот некоторые из необходимых ингредиентов:

Визуально привлекательная цветовая палитра и связная тема веб-сайта.
Хороший рассказ - это клише, но без хорошего рассказа не обойтись. (См., Например, Овсяный козел.)
Креативное использование медиаресурсов: большие и смелые визуальные эффекты, будь то фотографии или иллюстрации, 3D-модели или видео - также не забывайте о звуке, поскольку он действительно может добавить к настройке атмосферы (только один пример - иммерсивная медаль of Honor : сайт Above and Beyond).
Оригинальный способ навигации по контенту.
Креативное использование товарного брендинга (см. Этот пример от Schweppes).
Не упускайте из виду типографику - это среда для вашей истории. Используйте его для четких заголовков, больших заголовков и хорошего копирайтинга.
Более мелкие детали, такие как значки и микроанимация, действительно могут добавить ощущения, что веб-сайт готов.
Новые технологии: используйте библиотеки движений, такие как GSAP для анимации, Barba.js для переходов и WebGL для более интерактивных сцен (многие победители Awwward используют Three.js).

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

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

Некоторые из моих любимых за последние годы:

PulpFingers
Падший ад
Добро пожаловать в сезон 16
Би-бой Лилу
ChungiYoo
Карин Ройтфилд
Пионер: революция в кукурузе

МякотьПальцы

Я хотел бы начать с веб-сайта, который вернулся назад, PulpFingers.com. Я восхищаюсь веб-сайтами, удостоенными награды, примерно с 2011–2012 гг. PulpFingers выиграли Сайт дня (SOTD) еще в 2012 году.

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

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

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

Добро пожаловать в сезон 16

WelcometoSeason16 на самом деле только что получил почетное упоминание, но я все равно хотел включить его. Этот веб-сайт был разработан, чтобы «заманить» Леброна Джеймса присоединиться к LA Lakers. Он демонстрирует причины, по которым он должен поехать в Лос-Анджелес, в визуальной, смелой и интерактивной форме, игриво обыгрывая некоторые культурные мемы.

На сайте представлены легенды и игроки (RIP Kobe). Изображения показаны в желто-пурпурной двухцветной теме, смешивая веб-сайт, показывая Джеймса и Мэджика Джонсона, и, кроме того, добавляют юмористический контент (в раскрытии игрока, на которое ссылаются Pokémon).

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

* Спойлер *, конечно же, к нам присоединился Леброн. Они пропустили плей-офф в сезоне 2019 года, но в 2020 году стали чемпионами НБА.

Falter Inferno

Falter’s Inferno - это веб-сайт, созданный Wild.as для австрийского новостного издания Falter с целью проведения благотворительных кампаний. Это интерактивная онлайн-история, основанная на Inferno Данте, или, как они говорят:

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

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

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

Inferno от Falter является образцовым в том смысле, что его концепция дизайна переплетается с продуктом, который она представляет - газетой, которая пытается найти истину в мире шума и невзгод.

Финальная сцена - это сцена блаженства: «Вытащите меня отсюда» - и вы переноситесь в райский уголок с щебечущими птицами, читая газету.

Ознакомьтесь с созданием Falter здесь: https://www.iamag.co/making-of-falter/

Би-бой Лилу

Веб-сайт B-Boy Lilou был визуальной смесью, пропитанной ностальгией по 90-м. Я говорю был, потому что, к сожалению, веб-сайт, похоже, не работает. Свидетельство иногда эфемерности этого цифрового носителя.

Я нарисую вам сцену: когда вы впервые посетили веб-сайт, вам представили подборку видео в заголовке, демонстрирующую некоторые из лучших приемов Лилу. После этого вступления на сайте представлены различные визуальные средства массовой информации, создающие сцену уличной культуры, с которой знакомы дети 80-х и 90-х годов. Нам представлена хронология некоторых важных моментов в музыке, хип-хопе и более широкой культуре, которые служат фоном для восхождения B-Boy Lilou.

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

ChungiYoo

Сайт-портфолио этого дизайнера - одно из самых недавних добавлений в мой список избранных. У ChungiYoo есть замечательный сайт, где дизайн хорошо сочетается с навигацией. Он содержит красивые иллюстрации, закругленные карточки с анимированными иллюстрациями, отображаемые с эффектами прокрутки, которые создают чистый веб-сайт с плавной иерархией; содержимое не упаковано.

Работы, которые демонстрирует ChungiYoo под арт-дирекцией известного Жени Рынжук, делают сайт наполненным индивидуальностью.

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

Карин Ройтфельд

Мне нравится стиль Vogue на этом веб-сайте, стильная черно-белая тема, таинственное видео, воспроизводимое в заголовке, приглашающее вас в мир богатства.

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

По совпадению, этот сайт был разработан Numbered Studio и разработан моим нынешним работодателем, AskPhill, но был в моем списке задолго до того, как я к ним присоединился.

Пионер: революция в кукурузе

Этот последний пример, созданный Resn, действительно поднял банальные сайты на новый уровень. Оно нашло интересный способ показать историю производства генетически оптимизированной кукурузы, и за свои усилия новозеландское агентство выиграло Сайт года 2020.

Происходит так много деталей и мелких нюансов, заключенных в такое изысканное, связное целое, что все это просто работает.

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

С самого начала мы представляли историю, рассказываемую вертикально, в одном цельном опыте (…) Наконец, мы хотели обернуть этот опыт бесконечной петлей как метафору природного цикла - от семян до урожая и обратно.

- Пионер Resn - Corn Revolutionized - лучший сайт месяца в июле 2020 года (awwwards.com)

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

В одной сцене ветер мягко толкает кукурузу, а растение в горшке демонстрирует новую жизнь: Кукуруза, действительно революция.

Примеры из практики, онлайн-беседы

Если смелый и свежий веб-дизайн - это то, что вам нравится, у Awwwards.com есть собственный блог и канал на YouTube. Здесь вы можете кое-чему научиться у самих мастеров. Мне особенно нравятся тематические исследования в блогах, где студии излагают свой творческий процесс, от фазы идеи и стратегии до создания основ идентичности бренда и его реализации.

Мне нравится этот кейс от Build in Amsterdam, в котором обсуждается реализация веб-сайта для Powerhouse Company. Агентство начинает с документа о бренде на стратегической фазе, в котором излагается миссия платформы клиента: придать смысл пространству. Этот документ направляет их творческий процесс, поскольку в нем излагается почему-как-что в отношении конечного продукта. Опираясь на коллективный разум всех участников, постоянно стимулируя целостный дизайн и принимая ответственность на протяжении всего процесса.

«Каждый выбор дизайна и каждый выбор разработки, которые мы делали на этой платформе, основан на этом документе… [Он] является основой всех наших решений».

Вывод: как выделить свой сайт

Вот подсказки, которые я беру с собой на своем пути создания веб-сайта, удостоенного награды:

Будьте смелыми, будьте смелыми в своих дизайнерских решениях.
Произведите потрясающее первое впечатление; используйте заголовок как лучшую недвижимость на сайте, чтобы привлечь внимание аудитории.
Используйте визуальные и слуховые средства массовой информации, чтобы усилить ваше сообщение.
Позвольте типографике и правильно подобранным цветовым палитрам поднять ваш сайт на более высокий уровень.
Дьявол кроется в деталях. Используйте переходы и микроанимацию в качестве завершающего штриха к удобству использования вашего веб-сайта: взаимодействие при наведении курсора, маленькие значки, цвета в кнопках, хорошо отрегулированная высота строки для ваших шрифтов.
Продемонстрируйте свое техническое мастерство с помощью ярких технологий: используйте WebGL, ThreeJS или иллюстрированные анимации в качестве основы для динамичного опыта. Пусть это послужит цели.
Используйте оригинальные методы навигации по своему сайту.

Так что, если вам нужно вдохновение для создания собственных дизайнов, загляните на сайт awwwards.com, так как они предлагают широкий спектр различных стилей дизайна, отраслей и технологий. Отфильтруйте "Сайты дня", "Месяц" или "Год", и вы увидите лучшие работы, которые может предложить Интернет.

Хотя эта статья никоим образом не охватывает весь спектр отличных веб-сайтов, которые может предложить Awwwards.com, я надеюсь, что она дала некоторое представление о том, что отличает хороший веб-дизайн от других.

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

Следите за моими успехами @nickmustfall в Твиттере или отмечайтесь через www.nickungerer.com. Успешный сайт все еще находится в разработке. Вы можете нанять меня, чтобы я стал вашим.

Для получения дополнительной информации о сайтах Awwwards посетите эти ресурсы

Проверьте Awwwards Сайты года, Сайты месяцев и Сайты дня.

Tympanus.net (Codrops) - отличный ресурс для веб-разработчиков, заинтересованных в создании цифрового опыта.

Muz.li - отличный ресурс для вдохновения в дизайне, от веб-дизайна до иллюстраций, от UX до анимации.

Three.js - JavaScript 3D-библиотека для WebGL, также полно примеров с использованием этой технологии.

Примеры использования и описания:

Описание сайта Би-Боя Лилу: https://www.awwwards.com/sites/20-years-of-hip-hop-with-lilou