Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Дизайн контактных форм: 40+ оригинальных примеров

27 марта 2012 | Опубликовано в Веб-дизайн | 5 Комментариев »

Редко какой веб-сайт обходится без формы контактов. И пускай форма для контактов — не первая страница сайта и не самый важный элемент дизайна, но все же именно этот элемент играет важнейшую роль в процессе взаимодействия пользователя с сайтом (и, соответственно, собственно с компанией-владельцем). Форма контактов должна быть предельно проста, прозрачна, удобна и функциональна. При этом —  броская и оригинальная (чтобы запомниться и не заскучать). Да, эти принципы всем известны. Но, согласитесь, иногда придумать что-то новое  - не так то и просто. Предлагаем вашему внимания подборку сайтов с интересным и простым решением формы контактов. 

1. Aterlier Detour 

Здесь форма контактов помещается в нижней части страницы при нажатии кнопки «связаться».Конструкция выглядит оригинально, особенно если сравнивать с другими подобными контактными формами. 

2. Try Triangle

Почему бы не оставить свои контакты на бумаге, как в старые добрые времена? Лаконично и понятно. 

3. Asvalia

Форма контактов в виде открытки — оригинально и броско. 

4. Фото Marcol

Творческое решение, которые создается с помощью использования оригинального шрифта. Имитация доски объявлений  - заметно, ярко и приятно взгляду. 

5. Square 1 Media

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

6. Stan Gursky

Оригинально. Согласитесь — напоминает чем-то наш рабочий стол.

7. Ctrln

Приятный внешний вид формы контактов настраивает на семейно-дружную атмосферу. Почтовый красный ящик — аллюзия к переписке по почте. 

8. Denise Chandler

Разные яркие цвета дают возможность акцентировать внимание на различных кнопках-сигналах и полях, которые необходимо заполнить.  

9. Carsonified

Простой, несложный дизайн формы контактов, и к тому же — аллюзия к переписке с живым человеком (портрет) 

10. David Hellmann

Привычно и легко — напишите письмо и подпишите конверт. Всю информацию доставят адресату. 

11. Step2reality

Заполните форму контаков и ваши письма отправят на нужный почтовый ящик. 

12. Xruiz

Творческий дизайнер как и полагается разработал эту визуально привлекательную форму контактов — ненавязчивую, но интересную.

13. Silly Poems

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

14. Fseid

Этот контакт сформирован  как доска объявлений, где можно размещать различные уведомления с помощью скрепки и флэш-контактов.

15. La Masa Mimatta

Несколько таинственная но привлекательная форма контактов, которая не требует много информации, чтобы отправить запрос к веб-мастеру. Между тем — имитация живого общения в письмах. 

16. Fundo Лос Paltos

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

17. Five Cent Stand

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

18. Red Bull Soapbox Racer

Случайная и непритязательная форма контактов, которая отличается от всех других форм в этой подборке. Имитация живово общения в формате писем. 

19. Camping ilfrutteto

Этот контакт —  простота в лучшем виде, легкость и свежесть.

20. Svn2ftp

Свежий подход к дизайну контактной формы. Некоторые элементы оживляют вебсайт, способстуют взаимодействию пользователя со страницей.

21. Just Dot

Вы просто должны перейти к нижней части веб-страницы, чтобы найти эту прекрасную форму контактов.

22. In my Bubble

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

23. Harmony Republic

Простой и чистый дизайн, и в тоже время алюзия к газетному объявлению.

24. Corvusart

Красивое сочитание цветов, предельная ясность  и четкость. При этом — отсутствие навязчивости. 

25. Rescueseo

Эта контактная форма работает вместе с определенным SEO пакетом, который вы выбираете, тем самым упрощая задачу пользователя объяснить, что именно он хочет получить от компании. 

26. Reverend Danger

Одно из правил создания контактных форм — придерживаться стилистики сайта. Для этого ресурса  - даже больше — придерживаться тематики сайта. При этом простая и несложная контактная форма не заставит вас долго мучиться над заполнением полей.  

27. Webfoo London

Новый и инновационный подход размещения контактной формы —  в верхней части веб-страницы, подчеркивая тем самым его важность.

28. Melonfree

Melonfree использует концепцию минимализма, сохраняя простой, но привлекательный дизайн. А фигурки дизайнера и разработчика напоминают, что это не абстрактный сайт, который спрашивает ваши контактные данные «для галочки», а компания действительно заинтересована в связи с пользователем. 

29. Hit Digital 

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

30. Zeropixel

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

31. 1minus1

У сайта 1minus1 нет отдельный контакт-страницы, но, скорее, контактные формы выглядят как вспывающие окна на экране при нажатии кнопки «контакт» .

32. Syropia

Syropia также использует концепцию «почтовый конверт», правда разрабатывает ее совершенно по своему. 

33. Agencyp

Кажется форма  контактов на этом сайте ничем не отличается от другихб но это не так.  Присмотритесь внимательнее.

34. Freestyle Night

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

35. Ultranoir

Связаться с нами? Что может быть проще — наберите телефонный номер и с вами пообщается девушка с приятным голосом. По меньшей мере именно на такую мысль наталкивает контактная форма на этом сайте, и, надо признать,  располагает оставить свои координаты. Очередной раз убеждаешься — психология в создании сайта играет не последнюю роль. 

36. CPLX

Отправка сообщений в облака. В стиле этого проекта, а, главное — непринужденно и со вкусом. 

37. Bio-Bak 

Пожалуй самая необычная и причудливая контактная форма. Проще заглянуть на сайт и все увидеть воочию. Скажу только одно: контактная форма вполне в стиле сайта и его названия.

38. Lunalunerafestival

Напишите ваше сообщение на бумаге, заполните имя и электронный адрес в конверт и отправьте письмо  веб-мастеру. Разве это не интересно?

39. ElectricPulp

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

40. Fabric Adecaricaturas

Уродливая карикатура в контактной форме — для  этого сайта весьма уместный штрих, который завершает рисунок сайта  и демонстрирует элемент игры. 

41. Z-Index Media

Концепт письма весьма охотно эксплуатируется в создании контактных форм. Это и не удивительно, ведь фраза «отправить письмо» даже у продвинутого юзера все равно ассоциируется с почтовым письмом.

42. Social Snack

Сеть социальных закусочных, как и полагается, используют интерактивную форму контактов — надпись аля от руки и «облако мысли» создают эффект доброжелательности и непринужденности.

 

43. World-Arcade

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

Автор - 1stwebdesigner

Перевод — Дежурка




Комментарии

  1. Op
    Thumb up Thumb down +3

    +1

  2. Альберт
    Thumb up Thumb down 0

    :-! что за блевота?

  3. Роман
    Thumb up Thumb down +3

    не ну реально блевота :-!