15 впечатляющих форм авторизации для дизайнерского вдохновения
Опубликовано: 2020-09-02Формы входа существуют с тех пор, как появилась концепция веб-сайта. И это важный раздел любого веб-сайта. Взаимодействие человека со страницами входа изменилось со временем. Первоначально мы использовали для входа в систему адрес электронной почты или идентификатор и пароль. Теперь у нас есть Touch ID на телефоне, сканирование лица и другие способы входа в систему. С точки зрения дизайна формы входа в систему выглядели очень скучно и плоско. Но в настоящее время дизайнеры придумали впечатляющие и нестандартные дизайны, полные ярких цветов.
Этот блог посвящен впечатляющим формам входа, которые вы можете исследовать или черпать вдохновение для создания дизайнерской формы входа в качестве дизайнера. Давайте рассмотрим веб-сайты, в распоряжении которых есть яркие и потрясающие формы входа.
1. Сладкий:
Sweet — это веб-сайт, посвященный влиятельным лицам и художникам. Вы можете быть либо художником, либо влиятельным лицом, если используете сайт. На веб-сайте есть цветовая тема, похожая на конфету-мороженое. Кроме того, логотип сайта также имеет форму конфеты-мороженого. Форма входа на этот веб-сайт потрясающая, с синей цветовой темой, постепенно переходящей в разные оттенки фиолетового. Вы можете войти на сайт с помощью имени пользователя, номера телефона или адреса электронной почты. Это также позволяет вам войти в систему через Facebook, Twitter и Google, если фокус находится на каком-либо из полей ввода, оттенок подчеркивания меняется на синий.
2. Зендеск:
Zendesk — это веб-сайт, который занимается обслуживанием клиентов и, как известно, работает над проблемами клиентов. Эта компания базируется в Калифорнии, США. Их страница входа очень минималистична по своему дизайну. Вы можете видеть только поле ввода, где у вас должно быть имя вашего субдомена. Нет ничего, что могло бы отвлечь ваше внимание от формы входа. Под формой входа есть другие ссылки. Но на сайте нет ссылок или изображений в верхнем и нижнем колонтитулах. Это позволяет вам сосредоточиться только и только на регистрации в системе.
3. Площадь:
Squarespace — еще один веб-сайт, который занимается цифровым маркетингом и имеет несколько готовых к использованию шаблонов дизайна. У них есть новая домашняя страница с продуманным дизайном. Но их страница входа имеет минималистичный дизайн. Эта страница входа также не имеет верхнего и нижнего колонтитула, чтобы отвлечь пользователя от процесса входа. В поле ввода предлагается ввести адрес электронной почты и пароль. Наряду с этим вы также можете войти в систему, используя учетные записи Google, Apple, Facebook и Twitter. Их призыв к действию также прост, но эффективен.
4. Прогресс:
Headway — это веб-сайт, который предоставляет журнал изменений, чтобы информировать клиентов о конкретной услуге или продукте. Весь их веб-сайт окрашен в белую тему с максимально простым дизайном. У них еще более простая страница входа, где нет деталей верхнего или нижнего колонтитула, которые могут вас отвлекать. Только с изображением в левом поле у них есть страница входа, где вы можете ввести свой адрес электронной почты и пароль. Вы также можете войти в систему, используя данные своей учетной записи Google. Страница входа проста, с белым фоном и без каких-либо причудливых элементов пользовательского интерфейса.
5. ВСКО:
VSCO — это приложение для редактирования фотографий с одноименным веб-сайтом. На сайте реализована параллаксная прокрутка и новый пользовательский интерфейс. Но форма входа на веб-сайте представляет собой полностью белую форму с простым дизайном. Вы можете войти через свой адрес электронной почты или имя профиля и пароль. На странице также можно перейти на домашнюю страницу VSCO, в ленту новостей, на страницу регистрации и на страницу для загрузки приложения VSCO. У него есть только логотип, который представляет сообщество в верхней части страницы формы входа.
6. Капельница:
Drip — это веб-сайт, на котором создаются вещи из жанров комиксов, фильмов, видео и музыки. Как и VSCO и Squarespace, форма входа на этот сайт также выполнена в белом цвете. Вверху вы можете заметить, что они написали: «Войти на Kickstarter». Но Drip является частью команды Kickstarter. Вы можете войти на сайт, используя Kickstarter ID и его пароль. У них также есть ссылка для забытого пароля вместе с данными для входа. Вы также можете войти, используя данные для входа в Facebook. Прокрутив страницу вниз, вы увидите, что Drip является частью семьи Kickstarter. У них нет других ссылок, ведущих туда и обратно на разные страницы сайта. Если вы хотите посетить сайт, вам просто нужно щелкнуть логотип Drip в верхней части формы входа.
7. Обзор:
Lookback — это веб-сайт, который позволяет пользователям выполнять различные задачи с помощью своего приложения. У них есть функциональная, но простая страница формы входа. Они написали большими жирными буквами: «Привет, рад снова тебя видеть!» Под этим они написали «Войти, чтобы начать» маленькими буквами. Вы можете войти на их веб-сайт через свой адрес электронной почты или назначенное имя пользователя и пароль. У них есть зеленая кнопка «Войти», которая определяет их кнопку CTA, и ее легко заметить в первую очередь, когда вы открываете страницу. В нижнем колонтитуле страницы есть несколько ссылок, но верхний колонтитул остается пустым.
8. Весло:
Paddle — это веб-сайт, который не позволяет вам получить доступ к другим частям сайта, как это позволяют другие веб-сайты. На их странице входа есть логотип веб-сайта вместе с входными данными для входа. Вы можете войти на их сайт, используя адрес электронной почты и пароль. Синяя кнопка входа имеет правильный оттенок синего и достаточно привлекательна, чтобы привлечь внимание пользователя. Более того, этот синий оттенок правильно определяет кнопку призыва к действию. Вы также можете сбросить свой пароль по ссылке, которую они предоставили под формой входа.
9. Убер:
Uber — популярный сайт бронирования такси, его услуги также доступны в виде мобильного приложения. Гигант по заказу такси покорил аудиторию сразу после запуска. Они разработали разные формы входа: одну для водителя и другую для пассажиров. Давайте взглянем на форму входа, которую веб-сайт предоставил для водителей. В верхней части формы входа вы можете заметить черный логотип Uber. Чтобы зарегистрироваться на сайте, вы должны указать свой зарегистрированный адрес электронной почты. Вы можете указать пароль на следующей странице после отправки своего адреса электронной почты и нажать кнопку «Далее». Ссылка для регистрации также размещена под формой входа. Кнопку «Далее» они грамотно разместили в темном цвете, что не перестает привлекать внимание при открытии страницы. И, как говорится, CTA всегда должен быть другого цвета. Более того, CTA также должен первым появляться в поле зрения пользователя.
10. Национальный географический журнал:
National Geographic — это веб-сайт, который управляет американской телевизионной сетью. Это совместное предприятие компании Уолта Диснея и Национального географического общества. Их страница входа так же уникальна, как и их существование. Их страница входа запрашивает ваш адрес электронной почты и пароль. Он имеет минималистичный дизайн без каких-либо причудливых элементов, привлекающих ваше внимание. Но они стратегически разместили кнопку входа в систему желтым цветом, который также является их призывом к действию. Вы можете зарегистрироваться как новый пользователь на той же странице, нажав кнопку черного цвета. Заголовок страницы кажется пустым, но в нижнем колонтитуле есть определенные ссылки, которые могут привести вас к определенным частям веб-сайта.
11. Medium.com:
Medium.com — популярный веб-сайт, который позволяет блогерам загружать свои блоги на платформу. На их веб-сайте рассказывается о статьях и блогах из разных областей и ниш. Но их страница входа кажется очень интересной. Они не использовали никаких привлекательных CTA на своей странице входа. Вместо этого страница имеет минималистичный дизайн. Вы можете войти на их веб-сайт, используя Google, Facebook, Apple, Twitter и свой адрес электронной почты. Универсальность входа на веб-сайт — лучшая часть их страницы входа. Вы можете зарегистрироваться на их веб-сайте, нажав на ссылку «Создать». У них нет других ссылок в верхнем и нижнем колонтитулах страницы. Под формой входа можно найти только Условия обслуживания и Политику конфиденциальности ссылок на веб-сайт.
12. Вашингтон Пост:
The Washington Post — американская газета, которая ежедневно издается в Вашингтоне, округ Колумбия. У них есть веб-сайт под тем же названием The Washington Post. Что касается их страницы входа, они разработали простую форму входа с темно-синим фоном. Вы можете войти в систему, используя свой адрес электронной почты, или вы можете войти по ссылке, отправленной на ваш адрес электронной почты. Кроме того, он также позволяет вам входить в систему с помощью Amazon, Facebook, Google и Apple. Под формой входа вы также можете найти ссылку для регистрации. В нижней части страницы входа вы можете найти ссылки на политику конфиденциальности, справку и контактные страницы.
13. Мейлчимп:
MailChimp — американская компания, которая занимается почтовым маркетингом и услугами по автоматизации маркетинга с 2001 года. Как видите, сайт выполнен на белом фоне. Точно так же они разработали свою страницу входа с белым фоном, а форма входа стратегически размещена в левой части веб-страницы. С правой стороны вы можете увидеть информацию об их последнем подкасте The Jump. Они поместили свой CTA на кнопку входа в систему. Вы можете войти на их сайт, только используя свой адрес электронной почты и пароль. Он не позволяет войти через любые другие учетные записи социальных сетей.
14. Сефора:
Sephora — французская транснациональная компания, работающая с производителями косметики мирового класса. В нем представлено около 3000 косметических и косметических брендов со всего мира. На их веб-сайте представлены все их продукты, а макет сайта был разработан с использованием черно-белых элементов взаимодействия с пользователем. Самая захватывающая часть их веб-сайта — это страница входа. У них нет отдельной страницы входа. Вместо этого они разработали всплывающее окно, которое появляется на странице, когда вы нажимаете кнопку входа. Как и в случае с MailChimp, вам потребуется адрес электронной почты для входа на их веб-сайт. Вы не можете войти на их веб-сайт, используя учетные записи социальных сетей, таких как Facebook, Amazon и другие. Они стратегически разместили два CTA контрастных цветов. Кнопка входа полностью черная, а кнопка «Создать учетную запись» — белая. Оба CTA первыми бросаются в глаза.
15. Дипрелла:
Diprella — это веб-сайт сообщества, который объединяет всех дизайнеров со всего мира и позволяет им делиться своими проектами и демонстрировать свои проекты на платформе. Поскольку это сообщество дизайнеров, у него должна быть красивая страница входа. Они создали очень креативную страницу входа. Вы можете увидеть два экрана, когда открываете страницу входа на веб-сайт. С левой стороны вы можете увидеть экран входа в систему, где вы можете войти в систему, используя свой идентификатор электронной почты и пароль или свои учетные записи в социальных сетях, таких как Facebook. Но если вы новый пользователь, вы можете нажать кнопку регистрации в правой части страницы. Когда вы нажимаете кнопку регистрации, страница входа скрывается, а страница регистрации сдвигается вправо. Они позволяют бесплатно создать учетную запись с конкретными данными, которые они запрашивают у вас. Кнопка регистрации недоступна до тех пор, пока вы не заполните все данные в полях ввода. Вы также можете зарегистрироваться, используя учетные записи социальных сетей.
Страницы входа в систему являются неотъемлемой частью, поэтому дизайнеры должны разработать страницы, которые привлекут сегодняшних технически подкованных пользователей. Изначально макеты были просты для страниц входа, так как это была одна из критических точек взаимодействия пользователя с сайтом. Но теперь условности изменились к лучшему, и повсюду легко заметить интересные дизайны. В этом блоге представлены формы входа в систему с впечатляющим дизайном. Эти дизайны можно использовать в качестве вдохновляющих идей для создания форм входа с нуля. При разработке формы входа следует позаботиться о CTA и придать им красивый вид.