Разработка веб-сайта - это захватывающее время - вы, наконец, можете взять все идеи, которыми вы жонглировали в своей голове, и превратить их во что-то реальное. Возможно, у вас уже есть список вдохновляющих веб-сайтов, дизайн и пользовательский опыт которых вы стремитесь запечатлеть самостоятельно.
Но как насчет веб-сайтов, которые действительно исключительны?
Чтобы веб-сайт получил награды, он должен превзойти типичный пользовательский опыт и даже отличный пользовательский опыт, чтобы предоставить что-то единственное в своем роде и непревзойденное в своем пространстве.
Хотя создание отмеченного наградами веб-сайта может выйти за рамки ваших возможностей с точки зрения технических ограничений, времени или бюджета, вы все равно можете включить определенные элементы из каждого из них на свой сайт. Кроме того, на эти примеры просто интересно смотреть — они напоминают нам о том, что возможно в веб-разработке.
В этом посте мы отобрали пять отмеченных наградами дизайнов веб-сайтов за последние несколько лет. Для каждого из них мы расскажем, что делает его замечательным и чему мы можем научиться у дизайнеров.
Отмеченные наградами веб-сайты
От Webbys до Awwwards, вот некоторые из наших любимых победителей - давайте расскажем красную ковровую дорожку.
Чайник
Лучший пользовательский интерфейс 2021 года, 2021 Webby Awards
Креативное брендинговое агентство Kettle создало потрясающее присутствие в Интернете, тщательно структурированное, чтобы привлечь сотрудников. Только из веб-сайта ясно, что эта организация знает, как привлечь ваше внимание, удержать его и побудить к действию в нужное время.
Веб-сайт Kettle встречает посетителей полнометражным видео с кратким обзором его проектов, подхода, эстетики и философии. Каждый кадр задерживается достаточно долго, чтобы его можно было обработать визуально, но достаточно быстро, чтобы учесть среднюю продолжительность внимания зрителя.
По мере прокрутки вы заметите, что Kettle отказывается от традиционной вертикальной прокрутки в пользу метода инкрементальной прокрутки — разделы на главной странице представлены в виде слайд-шоу. Эта «капля» информации более точно фокусирует внимание посетителей. После видео на сайте представлены проекты с крупными брендами для установления доверия (наряду с призывом к действию к контактной форме).
Переход к одному из этих тематических исследований представляет собой обзор работы агентства. Обратите внимание, что все страницы кейсов предполагают схожее форматирование и брендинг — проекты разные, но Kettle всегда применяет свой фирменный подход.
Возвращаясь на домашнюю страницу, Kettle использует доступную недвижимость, чтобы выделить свои выдающиеся проекты. На каждом слайде курсор сам по себе действует как призыв к действию, предлагая пользователям щелкнуть в любом месте, чтобы подробно изучить проект. Этот метод снижает стоимость взаимодействия, поскольку пользователю не нужно перемещать курсор на кнопку или гиперссылку.
Хотя метод прокрутки домашней страницы Kettle работает, он применяет стандартную прокрутку к другим страницам. Это, вероятно, к лучшему, так как ступенчатая прокрутка через некоторое время обязательно станет утомительной. Для более быстрой навигации по сайту в верхнем углу есть меню, где пользователи могут переключаться между примерами. На таких нетрадиционных сайтах, как этот, более знакомый компонент, такой как меню, может помочь пользователям заземлиться и удержать их дольше.
Если вы ищете больше вдохновения для дизайна, веб-сайты дизайнерских агентств и сайты агентств веб-разработки — отличные места для поиска — эти веб-сайты — это буквально то, что эти организации делают лучше всего.
Уход за кожей Garoa
Сайт дня (2020), Awwwards
Особенно с веб-сайтами электронной коммерции легко соответствовать нормам дизайна. В этом нет ничего плохого — веб-сайты электронной коммерции должны отображать много информации так, как привыкли пользователи. Но обычные интернет-магазины обычно не получают наград.
Наш следующий избранный веб-сайт направлен на то, чтобы бросить вызов условностям, сохраняя при этом знакомство для стимулирования продаж. Веб-сайт Garoa Skincare, продающий сезонные средства по уходу за кожей, является примером для других предприятий.
Что касается внешнего интерфейса, этот веб-сайт настолько богат деталями, что многие из них легко пропустить. При прокрутке вы встречаетесь с анимированными элементами пользовательского интерфейса, эффектами параллакса с разной скоростью, боковой прокруткой, тонкой текстовой анимацией и плавными переходами между страницами.
Эти эффекты заставляют весь сайт чувствовать себя живым существом, напоминая о природной среде, которую вызывает брендинг сайта. Каким-то образом они объединены таким образом, что кажутся не подавляющими, а сплоченными.
Этот превосходный дизайн не ограничивается домашней страницей: каждая страница продукта сама по себе представляет собой опыт, предоставляя инструкции и исчерпывающий список ингредиентов для каждого продукта.
Даже тележка перенимает остальную эстетику сайта. В то время как многие сайты электронной коммерции, похоже, отказываются от внешнего брендинга в разделе оформления заказа, средства по уходу за кожей Garoa прекрасно переносят его.
Когда вы продолжите оформление заказа, вы будете перенаправлены обратно на домашнюю страницу. Это потому, что - извините, что нарушаю это вам - Гароа - это не настоящий бизнес. Этот сайт является портфолио-проектом дизайнера Бруно Арицио. Конечно, это не умаляет достоинств веб-сайта, и здесь так много всего, что можно извлечь и применить к вашему собственному (надеюсь, реальному) бизнесу.
Третий удар
Лучшая домашняя страница, 2020 Webby Awards
Создать эмоциональное воздействие через веб-сайт сложно. При просмотре веб-страниц пользователи, вероятно, не хотят подвергаться эмоциональному воздействию, как это могло бы быть при потреблении другого искусства или развлечений. Тем не менее, некоторые веб-сайты справляются с этим, в том числе The Third Strike.
«Третий удар» — это документальный фильм и кампания, которая привлекает внимание к тем, кто пострадал от закона о трех ударах в Соединенных Штатах, который налагает суровые наказания на рецидивистов, совершивших ненасильственные преступления, связанные с наркотиками. Это тяжелый, но важный вопрос, который этот веб-сайт эффективно сообщает.
Опыт посещения веб-сайта Third Strike начинается со страницы-заставки, предлагающей посетителям включить звук, что всегда является хорошим выбором перед автоматическим воспроизведением аудио- или видеоклипа.
После этого есть короткий трейлер документального фильма, который послужит введением к фильму, веб-сайту и коллективу Decarceration, организации, представленной в документальном фильме.
Настоящей жемчужиной этого веб-сайта является аудиовизуальная домашняя страница, которая следует за ней - разворот фотографий заключенных, заключенных в тюрьму по правилу трех ударов. Здесь нет прокрутки. Вместо этого пользователи перемещаются по этой странице с помощью курсоров. Выбрав фотографию, вы попадете на страницу истории преступника.
Истории искусно составлены, сочетая текст, изображения, векторную графику и аудио, чтобы рассказать о жизни каждого заключенного, оказать эмоциональное воздействие и вдохновить на действия. Каждая история заканчивается подсказкой прочитать следующую историю.
Наконец, навигационное меню сайта содержит ссылки на ресурсы, где вы можете узнать больше о правиле трех ударов и работе Decarceration Collective. Здесь важен порядок информации - сначала вы узнаете о людях, поскольку они являются причиной существования этого веб-сайта и этой организации. Все остальное будет после.
Созданный
Номинант на лучшую домашнюю страницу, 2020 Webby Awards
Crafted организует мероприятия (называемые «впечатлениями») для профессионалов, каждое из которых посвящено отдельной теме. Его веб-сайт, хотя, возможно, на первый взгляд проще, чем предыдущие варианты, привлекает внимание к деталям и тщательному дизайну, чтобы помочь ему выделиться.
Первое, что вы заметите на главной странице Crafted, — это разреженная ломаная сетка, которая подчеркивает заметный текст. Важно сразу донести цель Crafted, так как новые посетители, скорее всего, не знают, чем занимается нетрадиционная компания.
Обратите внимание, как изображения реагируют на прокрутку, увеличивая и уменьшая масштаб при перемещении вниз по странице. Эффект незначительный, достаточный для того, чтобы пользователи могли зарегистрироваться, хотя, возможно, и не сознательно. Этот небольшой дизайнерский штрих возвышает изображения над другими веб-сайтами с большим количеством изображений и делает страницу динамичной и веселой.
Crafted также знает ценность пробелов (или, в данном случае, больше похоже на tan-space). Он дает элементам страницы пространство для дыхания и сохраняет только самые важные элементы страницы
Пользователи могут изучить прошлые впечатления, организованные crafted, каждый из которых представляет собой галерею фотографий событий и список гостей. Но посмотрите, что произойдет, когда вы дойдете до конца страницы. Вместо того, чтобы получать инструкции по переходу на следующую страницу, вы просто продолжаете прокручивать. Веб-сайт в конечном итоге отправляет нас на следующую страницу опыта. Весь опыт бесшовный — нет видимых элементов загрузки, и это очень хорошо сделано.
И давайте не будем забывать о маленьких иллюстрациях, которые появляются во время загрузки страниц — еще один способ сохранить беззаботность при переходе между страницами веб-сайта.
Джулия Тонон
Веб-сайт дня (2021), CSS Design Awards
Наша последняя функция - это веб-сайт-портфолио иллюстратора и графического дизайнера Джулии Тонон, лауреата премии CSS Design Award. Как и все великие веб-сайты-портфолио, этот делает вещи простыми и сосредоточенными на искусстве. Однако, в отличие от большинства, сам сайт выделяет работу, выходящую за рамки того, что может сделать простая галерея.
Выдающимся разделом веб-сайта является домашняя страница, на которой пользователи прокручивают, чтобы показать искусство, входящее сверху и снизу, двигаясь в обоих направлениях. Это особенно хорошо работает для произведений искусства Тонона, которые имеют одинаковые размеры. Анимация заставляет работу выглядеть так, как будто она парит в космосе, как бумаги в воздухе.
Нажмите на изображение, чтобы просмотреть увеличенную версию, затем либо вернитесь на домашнюю страницу, либо просмотрите изображения в более традиционном виде слайд-шоу.
Понятно, как связаться с художником — на сайте представлена страница контактов, которая представляет собой просто ссылку mailto, которая слишком велика, чтобы ее пропустить.
Этот простой, но эффективный сайт напоминает нам, что некоторые из лучших дизайнов веб-сайтов не всегда самые сложные или богатые контентом (хотя качество контента, безусловно, имеет значение). Скорее, эти проекты используют методы, которые дополняют существующий контент, чтобы представить его новыми и восхитительными способами.
Веб-сайты, которые заслуживают аплодисментов стоя
Возможно, вы не пытаетесь создать деловой или личный веб-сайт, который получает награды, но не помешает найти вдохновение в лучшем, что может предложить Интернет. Даже если вы возьмете всего одну или две небольшие идеи из своего исследования, оно того стоит.
Наконец, эти примеры учат нас, что самые выдающиеся веб-сайты — это не просто наборы веб-страниц — это полноценный опыт, дизайн которого поднимает контент, не отвлекая наше внимание, что в конечном итоге приводит к лучшему взаимодействию и большему количеству конверсий. Конечно, трофей - это хорошо, но это настоящие награды.