Красивые формы логина на сайте: HTML/PSD исходники, дизайны для вдохновения

В продолжение статьи о создании идеальной формы авторизации на сайте мы решили продемонстрировать вам одни из лучших решений по данной теме. Значительная часть материалов из подборки имеет PSD/HTML исходники, поэтому вы сможете внедрить их в собственных проектах, предварительно подправив под свои задачи. Все ссылки находятся в картинках, а если их там нет, то это просто скриншоты дизайнов для вдохновения.

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

Красивые формы логина

Красивые формы логина

Как правило, этот элемент дизайна используется совместно с онлайн формой регистрации. Если разбирать его на составляющие, то тут есть:

  • обязательные поля ввода логина и пароля (в качестве первого может использоваться имя или email);
  • кнопка входа;
  • доп.ссылки: «забыли пароль?» дабы юзер смог восстановить пароль + линк на страницу регистрации.
  • чекбокс «Запомнить меня» — применяется, чтобы введенные значения автоматически подставлялись при следующих посещениях веб-ресурса;
  • кнопки автоматического входа через профили социальных сетей.

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

Перейдем непосредственно к примерам. Для начала парочка вариантов от Colorlib.

Форма логина v1 от Colorlib

Форма логина v4 от Colorlib

Форма логина v9 от Colorlib

Форма логина v12 от Colorlib

Форма логина v13 от Colorlib

Форма логина v15 от Colorlib

Форма логина v18 от Colorlib

Множество работ для вдохновения есть, конечно, же на Dribbble (смотрите по тегам login или login page и др.):

Формы логина на Dribbble

BS Drive

Forex Ui & Ux Design Demo Account

IMS University Login Page

Agent Login Page

Dark Code Daily UI 30 - Day 22

Sharity App login screen

Login

Sign In / Sign Up

Достаточно много интересных примеров форм логина на HTML и CSS с JS встречается в онлайн редакторе кода CodePen — там вы сразу видите результат и можете править код в реальном времени.

Day 001 Login Form

Material Login Form

Login on Flat UI

Login form using HTML5 and CSS3

login/signup form animation

CSS-Only Accessible Floating Labels Advanced Version

DailyUI #001 - Sign Up

Если посмотреть на исходники, то заметно, что это далеко не самые простые варианты решения задачи, в некоторых из них есть JavaScript, сотни строк кода и т.п. Возможно, без технических знаний и абсолютным новичкам разобраться будет сложновато. С другой стороны, если для верстки из PSD макета тоже нужны определенные навыки.

Paper login form

Login Form

Basic Login Form

Login to Everdwell

Login form

Responsive Login Form

Slick login form with HTML5 & CSS3

Material Compact Login Animation

Css Login Form

Bananaplate Login Panel

Log in Form

Mini Sign In Form

Log In Form PSD

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

Mailchimp

Mailchimp

Squarespace

Squarespace

Skillshare

Skillshare

Uber

Uber

Diprella

Diprella

Drip

Drip

Vsco

Vsco

Expo.io

Expo.io

Если поискать в интернете, то можно найти подборки с примерами форм ввода логина и пароля за более ранние периоды. Глядя на них, сразу заметно насколько сильно изменились тренды и приемы в текущей нише. Нечто подобное наблюдалось и в заметке про историю развития дизайнов кнопок на сайтах с 2009года — те же яркие цвета, 3D объекты, тени и т.п. уже не сильно актуальны.

Форма логина и пароля

Форма логина и пароля

Сейчас дизайн более стильный и менее выделяющийся, популярны плоские элементы, наставления из Material Design, добавились соц.кнопки и другие важные нынче фишки. Надеемся, что данных 45+ примеров блока авторизации вам хватит для вдохновения и собственных наработок. Если будете использовать PSD исходники, уточните информацию по лицензии. Что касается HTML/CSS реализаций — то там прямо в сервисе Codepen можно сразу редактировать код и смотреть результаты. Кому нужно еще больше макетов/дизайнов, заходите на Pinterest и Dribbble.