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

Скорее всего многие из читателей согласятся с этим. Но как же произвести это самое незабываемое положительное впечатление? Вы можете уже сейчас внести некоторые изменения в элементы UI, чтобы добиться желаемого.

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

Инновационный подход

1) Однострочная форма

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

2) Форма в контектсе разговора

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

Формы подписки

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

1) Studio Kit

2) Дизайн от Bart Nederveen

3) Дизайн от Daniil Vnoutchkov

4) Дизайн от Patrick Rogan

5) Дизайн от Julia Khusainova

Формы входа и регистрации

1) Snapwire

2) Farruh Tillaev

3) Glenn Hitchcock

4) Colin Garven

5) Logoswish

Регистрация кредитных карт

1) Alexey Golovanov

Форма заполнения выполнена в виде кредитной карты.

2) Single-Field Credit Card

3) Payment Form

4) Payment Form