school_flashfamily

тильда гуру

часть 3

school_flashfamily

тильда гуру

school_flashfamily

тильда гуру

Текст, призывающий к заполнению формы, должен визуально относиться к самой форме

school_flashfamily

тильда гуру

Закажите консультацию

и мы поможем определиться с моделью аппарата

Нет призыва к форме

school_flashfamily

тильда гуру

Призыв есть, и находится над формой

school_flashfamily

акцентирование

тильда гуру

Блоки с формами захвата должны быть заметны и привлекать внимание

school_flashfamily

тильда гуру

Закажите консультацию

и мы поможем определиться с моделью аппарата

Форму легко пропустить, хоть она и отделена плашкой

school_flashfamily

тильда гуру

Закажите консультацию

и мы поможем определиться с моделью аппарата

Под форму выделен блок размером в высоту экрана. Также форма подсвечена цветовыми пятнами

school_flashfamily

тайтл и плейсхолдер

тильда гуру

Подсказки, которые дают понять, какую информацию нужно ввести пользователю в поле

school_flashfamily

тильда гуру

Закажите консультацию

Мы поможем определиться с моделью аппарата

Закажите консультацию

Мы поможем определиться с моделью аппарата

С тайтлами форма занимает больше места

Можно вывести подсказки в плейсхолдеры. За счёт этого форма выглядит аккуратнее и занимает меньше места

school_flashfamily

тильда гуру

Тайтлы нужно использовать при большом количестве инпутов.

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

:(

school_flashfamily

тильда гуру

Закажите консультацию

Мы поможем определиться с моделью аппарата

Кегль в плейсхолдерах должен соответствовать кеглю в кнопках, а цвет должен быть чуть темнее, чем фон

Закажите консультацию

Мы поможем определиться с моделью аппарата

:(

:)

school_flashfamily

горизонтальные формы

тильда гуру

Используются при небольшом количестве инпутов

school_flashfamily

тильда гуру

:(

Инпут с несколькими полями для ввода сильно выбивается из вёрстки

school_flashfamily

тильда гуру

:(

:)

Символы внтури не должны обрезаться

school_flashfamily

тильда гуру

:(

Высота кнопки не должна отличаться от высоты полей

school_flashfamily

тильда гуру

:)

Ширину кнопки можно делать в ширину кнопок сайта, или в ширину инпутов

school_flashfamily

тильда гуру

Подчёркнутые горизонтальные формы выглядят несбалансированно

There is no design without discipline

Закажите консультацию

Мы поможем определиться с моделью аппарата

:/

school_flashfamily

заливка, обводка и подчёркивание

тильда гуру

Способы выделения инпутов

school_flashfamily

тильда гуру

Закажите консультацию

Мы поможем определиться с моделью аппарата

Обводка не должна быть сильно контрастной к фону

Закажите консультацию

Мы поможем определиться с моделью аппарата

:(

:)

school_flashfamily

тильда гуру

Закажите консультацию

Цвет инпута не должен быть ярче кнопки, достаточно сделать его чуть темнее фона сайта

Закажите консультацию

:(

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

school_flashfamily

тильда гуру

Закажите консультацию

Можно сочетать заливку и обводку. Обводка в этом случае должна быть немного темнее фона инпута

Закажите консультацию

:(

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

school_flashfamily

тильда гуру

Закажите консультацию

Подчёркивание как и обводка, не должны иметь сильный контраст

Закажите консультацию

:(

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

school_flashfamily

тильда гуру

Закажите консультацию

Если на сайте яркий фон, то лучше использовать поля с заливкой

Закажите консультацию

:(

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

school_flashfamily

тильда гуру

Закажите консультацию

На тёмном фоне ярче выглядит форма с заливкой в инпутах. Форма с подчеркиванием выглядит минималистично. Нужно выбирать под стилистику сайта

Закажите консультацию

:)

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

school_flashfamily

скругления и высота полей

тильда гуру

school_flashfamily

тильда гуру

Закажите консультацию

Скругления подчиняются тем же правилам, что и кнопки. Инпуты должны скругляться также как кнопки

Закажите консультацию

:(

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

school_flashfamily

тильда гуру

Инпуты с нескольким количеством строк лучше не скруглять, так как они выглядят странно

:(

school_flashfamily

тильда гуру

Лучше сделать поле с меньшим скруглением или оставить подчёркнутым

:/

:)

school_flashfamily

тильда гуру

Закажите консультацию

Высота полей должна быть комфортной по высоте для попадания курсора

Закажите консультацию

:(

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

school_flashfamily

отступы
между полями

тильда гуру

school_flashfamily

тильда гуру

Закажите консультацию

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

Закажите консультацию

:(

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

school_flashfamily

ширина полей и кнопок

тильда гуру

school_flashfamily

тильда гуру

Узкие поля выглядят немного скомкано. Они могут использоваться в случае необходимости разместить компактную форму в блоке

Закажите консультацию

:/

Мы поможем определиться с моделью аппарата

Слишком широкие поля бесполезно занимают много пространства

:/

Закажите консультацию

Мы поможем определиться с моделью аппарата

school_flashfamily

тильда гуру

Закажите консультацию

Кнопки под формой можно делать по ширине инпута или согласовывать по ширине с другими кнопками на сайте

Закажите консультацию

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

:)

school_flashfamily

оформление политики конфиденциальности

тильда гуру

school_flashfamily

тильда гуру

Закажите консультацию

Часто политика оформляется стандартным полем с галочкой. Она должна быть обязательна для заполнения

Закажите консультацию

:)

Мы поможем определиться с моделью аппарата

Мы поможем определиться с моделью аппарата

:)

При нажатии на «Обсудить детали» вы соглашаетесь с политикой конфиденциальности

Также политику можно оформлять в виде подписи. Формулировка тогда должна измениться

school_flashfamily

чекбокс, радиокнопка и слайдер

тильда гуру

school_flashfamily

тильда гуру

Остальные элементы в форме захвата должны хорошо считываться и не отличаться по стилю от всей формы

school_flashfamily

адаптив формы захвата

тильда гуру

school_flashfamily

тильда гуру

Закажите консультацию

Мы поможем определиться с моделью аппарата

При нажатии на «Обсудить детали» вы соглашаетесь с политикой конфиденциальности

В мобильной версии формы должны быть всегда расположены вертикально, а кнопки лучше растягивать во всю ширину полей для увеличения области клика

flash_family

спасибо :)

school_flashfamily

flashfamily

school.flashfamily

тильда гуру