Блог Глеба Летушова

Дмитров за 3 часа

В выходные выбрались посмотреть Дмитров. На машине от Москвы ехали ужасно долго, собрали все пробки. У нас Балашиха так не стоит.

Город назван в честь сына Юрия Долгорукого. Разные княжества все время присоединяли его к себе: был то в составе Переяславского княжества, то Владимиро-Суздальского, потом в Галицко-Дмитровском и Дмитровском, в конце стал частью Московского княжества.

ЖД-мост при въезде, МАСШТАБНО

Здания в центре довольно старые, это круто.
Огромные расстояние между домами, широкие дороги и тротуары, нет прямоугольных многоэтажек.

Самые интересные места — это Кремль, который с XII века был деревянной крепостью и Борисоглебский монастырь.

Кремль

Кремль обнесен огромным валом, который прекрасно сохранился и теперь служит местом для прогулок местных ребят.

Штурмуем кремлевский вал

Внутри кремля огромный православный собор — Успенский. Строили его с 1509-ого года.

Гигантский собор, размеры передать нереально.

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

Сейчас там музей с историей Дмитрова и парой выставок.

Клапана погнуло

По валу можно прогуляться по огромной вытоптанной тропе. Главное, не наступать на жителей, которые там загорают.
Длина стен — около километра.

Когда дождь, здесь весело, наверное.

Борисоглебский монастырь
Построен в 1450-х годах. Несколько раз закрывали в Советское время. Отдавали помещения под отделение ГУЛАГА и воинской части.

Сейчас — супер ухоженное место. Внутри тихо, спокойно, гуляет павлин.

Храм и часовня

Город не сравнить с ближайшим Подмосковьем. Очень тихо, ухожено и аккуратно. Мне напомнил Звенигород.

Когда не рассчитал с гаражом

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

Фоточка с Успенским собором на память

P. S. Теперь все впечатления от поездок и происходящих со мной событий буду отмечать в блоге. Текст пишу сразу, без сил и на эмоциях. Не редактирую, не ищу дополнительную информацию.
Цель: сохранить в памяти впечатления от поездки и те эмоции, которая она вызвала.

Записи про дизайн, книги и саморазвитие переехали в раздел «360» на основном сайте → http://gletushov.ru/to360/

3 июня   поездка

Почему понимание задачи — самый важный этап в ее решении

Решение любой задачи всегда кажется длинным, сложным и непонятным. Даже рутинные цели превращаем в супер-важные стратегические задачи:

  • Нужно написать простую статью → в голове появляются огромных трехтомник
  • Нарисовать и сверстать страницу для сайта → уже вижу, как делаю конкурента Яндекса.

А раз это супер-важная цель, а не просто какая-то статья, то и время на нее нужно закладывать ого-го. И фейлить в процессе нельзя.

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

Как не нужно делать

  • Видишь проблему
  • Не знаешь, что делать
  • Тянешь
  • Не можешь решить
  • Все фейлишь.

Чек-лист для каждого этапа

Чтобы не срывать дедлайны и быстро делать то, что от тебя ожидают, важно рассказать, как ты понял задачу.
Определить цели. Узнать, какие ожидания у тебя и у заказчика. Проявить инженерный подход и разложить большую задачу на подзадачи, написать список действий.

Задача

  • Написать статью про…

Список действий

  • продумать полезное действие и структуру
  • придумать заголовок и согласовать подзаголовки
  • написать текст для первого модуля
  • текст для второго модуля
  • ...
  • проверить
  • сдать

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

Что узнал, пока мне было 23

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

  • Оценка не должна быть категоричной. Между чёрным и белым существует ещё тысяча серых оттенков. Нельзя формировать мнение о человеке, если он сделал что-то не так. Может быть, у него настроение было плохое.
  • Настроение может быть плохое. Это нормально.
  • У любого проекта должно быть полезное действие. Иначе проект долго не проживёт. Если не разобраться, что движет на самом деле и зачем это нужно — все развалится.
  • Я свободен и могу выбирать то, что я хочу. Серьёзно. До этого я проецировал на себя чей угодно выбор — начальников, родителей, окружающих. А потом ещё и винил себя и всех за него.
    Если в решениях не видно полезного действия лично для меня, то я, естественно, буду им недоволен.
  • Слова «должен», «надо», «обязан» должны содержать в своей основе слово «хочу». Если в слове «должен» нет «хочу», то большой риск создать конфликт внутри себя.
  • Не нужно тратить время впустую. Кроме тебя никто жизнь не изменит. Давай сам давайся в нужную сторону.
  • Любая мое реакция — мой выбор. Например, случайно появившийся конфликт основан на моем выборе. Даже если виноват другой человек. Обижаться — мой выбор. Я могу выбрать другое и не обижаться.
  • Все границы в голове. Можно поменять отношение к чему-то, и все изменится.
  • Если сделать что-то идеально не получается, то нужно сделать это достаточно хорошо.

Как монотонность спасает от эмоционального выгорания

Я видел много инструментов и советов про то, как избавиться от состояния апатии, эмоционального выгорания и начать работать с новой силой. Можно прогуляться, переключиться на другие дела, заняться спортом. Самым удобным для меня оказался способ, которым пользуется Игорь Манн.
Расскажу, на чем основан способ и как он работает (про Игоря Манна расскажу в конце).
Начнем с теории, конечно.

Теория монотонности

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

Страницу с полотном букв без контраста читать не хочется. Даже если там полезная и важная информация.

Тут не то что читать, тут смотреть на текст физически больно

Голос лени говорит: «Ты будешь в это вчитываться? Зачем? Пойдём котиков листать, так проще же». И правда, котиков проще.
Так работают любые однообразные вещи — вызывают скуку и желание вздремнуть. Давайте в рамке это запишу, так модно сейчас.

Монотонность не привлекает, от неё хочется бежать при первой возможности.

Теория работает не только с текстом. С помощью нее можно с апатией и выгоранием бороться.

Монотонность vs апатия

Когда дела не делаются, работа не работается, сложно делать полезные вещи, то можно с головой уйти в скучное и монотонное занятие.
Чем дольше им заниматься, тем быстрее захочется вернуться к нормальной жизни. Когда совсем прижимает, то мне помогают:

  • Мобильные игры. На первые три часа затягивает, появляется интерес и жуткое желание играть. Через 5 часов мозг вежливо сообщает, что пора бы и делом заняться. На восьмой час организм просто умоляет поработать и поделать полезные вещи.
  • Сериалы. Можно включить один-два сезона сериала и посмотреть в режиме нон-стоп. Игорь Манн пишет, что два дня сериальной монотонности заставляют его вернуться в рабочий режим даже после сильного выгорания.
  • Сон. Если проспать хотя бы сутки, то уже на следующие нужно срочно чем-то заняться, начинаешь мечтать об умственной и физической активности. Жаль, что выделить 24 часа на сон — непозволительная роскошь.

Наверняка, есть и другие варианты, которые работают по такому же принципу и помогают перезагрузится, но я их ещё не нашёл.

Чек-лист помощи при эмоциональном выгорании

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

Тестовое задание в студию Артемия Лебедева

В студию нужен дизайнер-стажер. Чтобы попасть, нужно сделать тестовое. А почему бы и нет?

Задача: Переделать объявление от Следственного комитета Российской Федерации, чтобы стало хорошо.

Сейчас объявление выглядит так, будто Следственный комитет формально отчитывается о своей работе: «смотрите, мы тут вообще-то везде объявления для детей вешаем».
Потому что заголовок большой, а остальное — нет. Когда смотришь на объявление, то видишь, что это не про тебя. Это про какой-то там Следственный комитет, до которого мне, как пассажиру метро (а если я еще и ребенок), дела нет вообще.

Поэтому вынесем главную мысль в заголовок. Она должна привлекать внимание.

«Играть в подвалах, на чердаках и стройках опасно» — смотришь и думаешь: «ух ты, а че там такое, почему?».
Отвечаем на этот вопрос:
«Там вообще не ждут детей, их не заметят. Там гоняют бульдозеры/падают предметы/дырки в полу/живут преступники»

Хорошо, а что делать, если на стройку нельзя. Где-то вообще можно играть?

Показываем телефон горячей линии, чтобы знать, куда звонить, если что-то случилось. Прорисовываем в векторе логотипы Московского транспорта и Метро.

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

Хорошо подходит вариант, где нарисован открытый подвал, из которого смотрят монстры, а девочка уводит мальчика от подвала. Дальше нужно бы это отсканировать и отрисовать. К сожалению, я еще не могу в сложные рисунки и иллюстрации. Поэтому такой вариант отменяем.

Добавим в объявление упрощенный подъемный кран в запрещающем знаке, который советует не подходить к стройке. Ок.

Финальный вариант, который нужно повесить на уровне глаз ребенка в вагоне, а не сверху, как на первой фотографии:

Какие проблемы

  • Долго не мог найти шрифт, который подходит для оформления. Только потом догадался поискать на сайте Студии, потому что она разрабатывала схему метро и все остальное. Вполне возможно, что и шрифт тоже делали там. Нашел шрифт, называется Директ-Мос.
  • Не умею рисовать сложные иллюстрации.

Лайфлист дизайнера 2018

Идею этого этого списка нагло позаимствовал у Саши Бизикова, который за год освоил профессию ux/ui-дизайнера и рассказал об этом в статье для Tilda Education.

Запись опубликована 4 января. Обновил 6 марта

Меня вдохновила история Саши и я собираюсь последовать его примеру — за короткое время сменить специализацию. Пока я сижу и жду на своей работе, драгоценное время, за которое я смогу создать портфолио, уходит.

Почему дизайнер

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

Какая цель

Цель:

За 2018 год стать дизайнером — разбираться в интерфейсе, проектировать сайты и мобильные приложения, понимать пользователей.

Дальше я вижу два пути развития:

  • — найти работу в интересной компании для дальнейшего развития;
  • — cамостоятельно создавать сайты и страницы для малого и среднего бизнеса. Я смогу нарисовать прототип и дизайн будущего сайта, заполнить контентом, сверстать и натянуть страницу на CMS. Я не хочу рисовать красивые, но бесполезные страницы. Смысл важней, чем форма.
    В каких-то моментах и проектах смогу привлекать и координировать других дизайнеров, программистов и фотографов. Полная ответственность за проект, полная отдача проекту и выполнение на 100%.

Этапы движения к цели

  • Портфолио из 5-7 лендингов на разные темы;
  • Придумать и сверстать новую личную страницу с портфолио;
  • Найти клиентов и сделать несколько сайтов на заказ;
  • Развивать эстетический вкус;

Как фиксировать достижения

  • — Про каждую прочитанную книгу, пройденный курс, отрисованный лендинг писать в блог.
  • — Короткую видео-презентацию нового лендинга выкладывать в Инстаграм.
  • — Делиться промежуточными итогами, открытиями и наблюдениями в телеграм-канале.

Источники знаний

Я понимаю, что в дизайне 80% — это опыт и работа, и лишь остальные 20% — это знания и теория. Считаю, что книги, статьи и курсы быстрее помогут получить нужный опыт.

Важные книги на околодизайнерские темы:

  1. «Дизайн для реального мира» — В. Папанек; ✓
  2. «Номер 1» — Игорь Манн;
  3. «Между надо и хочу» — Эль Луна.

Книги:

  1. «Пиши сокращай» — М. Ильяхов, Л. Сарычева; ✓
  2. «Типографика и верстка» — А. Горбунов;
  3. «Пользовательский интерфейс» — И. Бирман; ✓
    Конспекта нет
  4. «Сначала скажите „Нет“» — П. Кэмп;
  5. «Ководство» — А. Лебедев;
  6. «Кради как художник» — О. Клеон ✓
    конспект
  7. «Визуальные заметки» — М. Роуди; ✓
    Советую книгу Роуди в рассылке
  8. «Новая типографика» — Я. Чихольд; ✓
    Конспекта нет
  9. «Модульные системы в графическом дизайне» — Йозеф Мюллер-Брокманн;
  10. «Дизайн: форма и хаос» — Пол Рэнд;
  11. «Искусство цвета» — Иоханнес Иттен.

Курсы

  1. Цифровой дизайн — Никита Обухов — Тильда ✓
    В очереди на конспект
  2. Интернет-маркетинг с нуля — Тильда ✓
    В очереди на конспект
  3. Проектирование UI-UX — Нетология
    Если успешно завершу стажировку в Нетологии, которую сейчас прохожу — курс достанется бесплатно.

Статьи и видео

  1. 125 простых советов по улучшению юзабилити вашего сайта;
  2. Видео: Сильный текст в интерфейсе — Ильяхов

Инструменты:

  • — HTML, CSS, jQuery, Boostrap 3 ✓
  • — Sketch ✓
  • — Bootstrap 4 ✓
  • — Invision — изучить
  • — Principle for Mac ✓
    Научился анимировать переходы между экранами, скроллить по экрану и делать другие штуки
  • — Скетчинг и рисование прототипов от руки — изучить

Кто вдохновил

Я ставлю себе вполне реальную задачу. Хочу приносить немного пользы другим людям — помогать им в решении проблем.

Ищу ошибки в интерфейсе мира и делюсь ими в телеграм-канале.

2017 ⟶ 2018

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

Я не ставил на год определенной цели, вяло плыл по течению, о чем сейчас жалею.

Весь год изучал процессы, связанные с работой в диджитал-сфере:

  • — Выучил HTML, CSS, Bootstrap, jQuery; Верстку сайтов и фронтенд-разработку;
  • — Попал на стажировку в блог Нетологии, написал несколько статей.
    Узнал, как работает блог изнутри: что должен делать автор и редактор, как работать с гуглдоками и трелло, как должен выглядеть хороший текст.
  • — Осознал, что дизайнер — это такой же инженер. Он тоже помогает людям решать проблемы.
    Научился работать в скетче и делать прототипы сайтов на бумаге.
  • — Запустил и отправил 17 выпусков рассылки. Собрал 850 подписчиков за 7 месяцев.
    Сейчас отправил рассылку на каникулы. Возможно, продолжу в Новом Году.
  • — Завел канал в Телеграме. Очень удобно писать на ходу заметки и размышления. Определился с концепцией: публикую интересные инженерные и дизайнерские решения и их критику.

Открытия года

  • — Удовольствие в процессе, а не в цели;
  • — Для каждого дела нужно ставить цель и анализировать полезное действие;
  • — Усложнять ментальную модель. Заметка Товеровского про это.
  • — Меньше хлама вокруг. В жизни, в квартире, на рабочем столе компьютера.

Крутые вещи, которые помогали в этом году

Тод Норман — Зачем нужны красивые вещи? Красивый дизайн.

Нужно пользоваться вещами, которые не только решают задачу, но и приносят удовольствие и эстетическое наслаждение.
Заменить:

  • Квадратный и скрипящий ноутбук ⟶ Макбук.
  • Толстовка из масс-маркета ⟶ Свитшот с принтом любимой группы.
  • Старая домашняя одежда ⟶ новые пара футболок и шорты.
    Хорошие вещи стоят дороже, но приносят намного больше пользы. Нужно запустить этот процесс и постепенно заменять обычные вещи на крутые.

Заменил все, что беру с собой, когда куда-то иду. Теперь по-максимуму удобно ехать в электричке на работу, в университет, идти за хлебом.

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

Минималистичный кошелек Zavtra.
Уже два года как отказался от мелочи в кошельке. Каждый кошелек был меньше предыдущего. И наконец я нашел свой идеал:

Когда получил, расстроился из-за очень маленького размера кошелька. Потом привык. Считаю его самым лучшим из всех, которыми пользовался.

Беспроводные наушники Meizu EP-51.
Сокращение количества проводов — это всегда круто. Немного написал про них летом.

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

Книги, которые поменяли мировоззрение

  1. «45 татуировок продавана» — Максим Батырев
    По сути, чтобы что-то продать, нужно общаться с человеком, использовать какие-то моменты из психологии, улыбаться, хорошо выглядеть, быть честным. Поэтому продажа — это общение на более крутом уровне.
  1. «Евангелист бизнеса» — Сергей Абдульманов
    Люди в интернете все меньше обращают внимание на рекламу, но зато читают посты в блогах, на Хабре, на Пикабу, смотрят Ютюб.
    Почему бы не воспользоваться этими площадками для рекламы свих услуг.
    Лучше всего работает честный рассказ о бизнесе: как все работает, как устроен изнутри, как происходит доставка и что там еще есть. Найти людей, которые занимаются конкретным делом в компании, поговорить, взять фотографии и написать.
    Главное правило (и противоречие) — в посте не должно быть никакой рекламы, потому что ее заметят, а аккаунт заминусуют.
  1. «Кради как художник» — Остин Клеон
    Конспект
    Через копирование чужих работ у человека развивается собственный стиль и творческая натура.
    Все художники и творческие люди создавали свои работы одним способом — подражали другим великим мастерам. Остин Клеон рассказывает, как правильно подражать, чем отличается правильное воровство от неправильного и зачем быть скучным.
  1. «У них так принято» — Р. Маккаммон
    Полный отзыв на книгу
    Автор с юмором рассказывает об негласных правилах поведения в компаниях, делится полезными штуками, демонстрирует их на личном примере.

За кем наблюдать

Целый год с упоением следил и читал заметки этих ребят:

Цели на следующий год

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

2018, поехали.

Mobile-first: как пользоваться интернетом без компьютера

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

Поделюсь приложениями, которые помогают работать с мобильного телефона. Пользователям Android намного легче с подобными приложениями, есть много редакторов для фото и текста, есть ftp-клиенты, есть торрент-клиенты, есть приложения с сериалами и загрузчики музыки. Сейчас я пользуюсь Айфоном, поэтому полезные приложения приходится собирать со всего интернета.

  • Boostnote — Текстовой редактор, который поддерживает разметку markdown. С помощью этой разметки можно оформлять посты для Телеграма или Эгеи. Пишешь, выбираешь оформление для элементов и смотришь, как выглядит текст.
  • Яндекс.Метрика — Слежу за счетчиками в блоге и на других своих проектах.
  • FTPOnTheGo — бесплатный ftp-клиент для iOS. Когда хочется поменять что-то в блоге, создать новую страницу на сайте или залить фотку, а за компьютер можешь попасть только в конце рабочей недели, то лучший вариант — изменить все с помощью телефона и залить прямо на сервер.
  • Google Keep — для заметок и ссылок на материалы и лекции.
  • DesignLab — удобный фоторедактор, много функций редактирования, работа со слоями, шрифты, изменения размера. В бесплатной версии отсутствует ластик, поэтому стереть часть изображения не получится, нужно как-то выкручиваться. При оформлении подписки, дают пользоваться ластиком и предоставляют доступ к бесконечной библиотеке шаблонов для оформления. Я пользуюсь бесплатной версией.
  • LongScreen — приложение для редактирования скриншотов. Позволяет склеить несколько, сделав один большой, например, чтобы показать диалог. Или же поставить два скриншота рядом.
  • MailChimp — мобильное приложения для сервиса рассылок. Можно посмотреть подписчиков, узнать статистику каждой рассылки и отправить письмо для всех, правда, вставить в письмо можно несколько строк текста и фотографию. Что-то большее сделать не получится.
  • iSource — бразуер, который показывает исходный код html-страницы. Можно посмотреть консоль и параметры домена.
  • Pocket — сервис для отложенного чтения. Закидываю туда статьи, которые показались интересными, чтобы потом открыть их с компьютера или телефона в браузере. Не могу читать внутри интерфейса приложения.
  • WhatTheFont — позволяет узнать название шрифта. Достаточно навести камеру на текст, телефон распознает и скажет, каким шрифтом выполнена надпись.
  • WordPress — приложение помогает писать и оформлять посты в блоги на Вордпрессе. Для блога на Эгее не нужно никаких приложений, веб-версия текстового редактора прекрасно работает в мобильном браузере. Именно поэтому использую Эгею для блога — можно за пару минут написать пост и опубликовать сразу со смартфона. Вордпресс не очень подходил для такой задачи, он большой и неповоротливый.

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

2017   mobile-first

Форма связи для сайта

Часто не могу найти качественно сделанную форму обратной связи, чтобы вставить на сайт. Где-то приходится менять параметры самой формы, где-то переделывать php-обработчик и js-скрипт.
Собрал собрал несколько симпатичных форм из интернета, чтобы были под рукой.

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

Обычно в лендингах формы обратной связи вставляются в нескольких местах — призывают пользователя оставить свои данные. Так как разным формам нельзя присвоить одинаковый id в html, приходится придумывать способы обхода, добавлять несколько php-обработчиков.

У Madcatzz нашел изящное решение проблем с несколькими формами на странице.

В html-документе создаем несколько форм:

<form>
<input type="text" name="name">
<input type="text" name="phone">
<textarea name="mes" rows="6"></textarea>
<input type="submit" name="submit" value="ОТПРАВИТЬ">
</form>
 
<form>
<input type="text" name="name">
<input type="text" name="phone">
<textarea name="mes" rows="6"></textarea>
<input type="submit" name="submit" value="ОТПРАВИТЬ">
</form>

<form>
<input type="text" name="name">
<input type="text" name="phone">
<textarea name="mes" rows="6"></textarea>
<input type="submit" name="submit" value="ОТПРАВИТЬ">
</form>

К каждой форме добавим свой id. Можно их дополнить, прописать placeholder. В строчке с formData опишем место, откуда пришло сообщение.

<form id="form1">
<input type="text" class="name" name="name" placeholder="Ваше имя">
<input type="text" class="phone" name="phone" placeholder="Ваш телефон">
<textarea name="mes" class="mes" rows="6" placeholder="Текст сообщения"></textarea>
<input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
<input type="hidden" name="formData" value="Заказ">
</form>

<form id="form2">
<input type="text" class="name" name="name" placeholder="Ваше имя">
<input type="text" class="phone" name="phone" placeholder="Ваш телефон">
<textarea name="mes" class="mes" rows="6" placeholder="Текст сообщения"></textarea>
<input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
<input type="hidden" name="formData" value="Текст в тему письма">
</form>

<form id="form3">
<input type="text" class="name" name="name" placeholder="Ваше имя">
<input type="text" class="phone" name="phone" placeholder="Ваш телефон">
<textarea name="mes" class="mes" rows="6" placeholder="Текст сообщения"></textarea>
<input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
<input type="hidden" name="formData" value="обратный звонок">
</form>

Теперь нужен JS-скрипт, который отправит данные из формы на сервер безе перезагрузки страницы.

<script type="text/javascript">
    $(document).ready(function () {
        $('form').submit(function () {
            var formID = $(this).attr('id'); // Получение ID формы
            var formNm = $('#' + formID);
            $.ajax({
                type: 'POST',
                url: 'mail.php', // Обработчик формы отправки
                data: formNm.serialize(),
                success: function (data) {
                    // Вывод текста результата отправки в текущей форме
                    $(formNm).html(data);
                }
            });
            return false;
        });
    });
</script>

В папку с сайтом нужно залить PHP-обработчик — скрипт, который принимает данные формы от браузера и отправляет на почту владельцу сайта.
Большинство форм для передачи данных используют метод POST, это позволяет «спрятать» данные формы и не загромождать URL в адресной строке.
Данный обработчик содержит проверку метода передачи данных.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['name'])) {$name = $_POST['name'];}
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];}
    if (isset($_POST['email'])) {$email = $_POST['email'];}
    if (isset($_POST['formData'])) {$formData = $_POST['formData'];}
    $to = "info@site.ru"; /*Укажите ваш адрес электронной почты*/
    $headers = "Content-type: text/plain; charset = utf-8";
    $subject = "$formData";
    $message = "$formData\n\nИмя: $name \n\nТелефон: $phone \n\n$email";
    $send = mail ($to, $subject, $message, $headers);
    if ($send == 'true')
    {
    echo "<center>Спасибо за отправку вашего сообщения!</center>";
    }
    else 
    {
    echo "<center><b>Ошибка. Сообщение не отправлено!</b></center>";
    }
} else {
    http_response_code(403);
    echo "Попробуйте еще раз";
}
?>

Эту форму можно улучшить — добавить валидацию данных. Для этого можно использовать JavaScript или атрибуты HTML5.
Статья на Хабре про проверку вводимых данных с помощью средств HTML5

Форма обратной связи, оформленная с помощью CSS-фреймворка Bootstrap 3

Еще одну крутую форму нашел на сайте ItChief. Она также отправляет данные без перезагрузки страницы, а еще генерирует капчу для каждого ввода данных в форму, записывает все сообщения в файл message.txt на сервере и отправляет их на почту владельцу сайта.
C помощью этой формы сделал страничку для связи на своем сайте. Я даже оставил стандартное оформление, поменяю когда-нибудь потом.

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

Сделать свою форму

Простая форма связи cодержит три элемента: сама форма на HTML+CSS, JS-скрипт для отправки данных на сервер и PHP-обработчик, который формирует и отправляет email.

— Саму форму легко сверстать из базовых элементов HTML и CSS.
— В роли JS-скрипта можно использовать «Экспромтум» от Студии Лебедева.
Пример реализации этого скрипта с оформлением можно посмотреть на сайте Вениамина Векка.

— В предыдущей форме обработчиком входящих данных на сервере служил PHPMailer. Это популярная библиотека для отправки писем. Используются в некоторых популярных CMS — Wordpress, Drupal, Joomla. Настроить ее довольно легко, на Гитхабе есть все инструкции.
Исходник на GitHub

Добавить интересные эффекты к интерфейсу формы можно с помощью JS-библиотеки Foxholder.

Форма обратной связи и быстрой покупки без программирования

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

Для покупок в один клик есть аналогичная форма с легкой настройкой от того же автора — Buyme.

Форма связи для статичного сайта без JS и PHP

Можно создать форму связи, данные из которой отправятся к вам через сайт formspree.io.
Пример формы:

<form action="https://formspree.io/your@email.com"
      method="POST">
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="submit" value="Send">
</form>

Бесплатного тарифа хватит на 1000 сообщений с формы ежемесячно.

«На крючке. Как создавать продукты, формирующие привычки» — Нир Эяль

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

• Мы больше ценим то, куда вложили свой труд или время. Этим пользуется Икея, поэтому продает свои продукты в разобранном виде. Собирающие мебель проникаются к ней иррациональной любовью.

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

• Побуждает к действию не вознаграждение в конце, а стремление избавиться от страстного желания получить это вознаграждение.

Успехом пользуется переменная награда — неизвестно, когда её получишь.
Переменное вознаграждение встречается в продуктах, привлекающих наше внимание.
Оно подпитывает желание проверять почту, листать соцсети или покупать вещи на сайтах распродаж.

Три типа переменного вознаграждения

• Вознаграждение племени.
Люди зависят друг от друга. Мы настроены на то, чтобы стремиться к одобрению, которое позволяет чувствовать себя востребованными, привлекательными, важными.

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

• Вознаграждение добычей.
Такое вознаграждение помогало охотникам: они должны быть настойчивы и непреклонны, а сам факт преследования только подзадоривает.
Современные люди далеко находятся от первых охотников, но психические процессы, связанные с добычей, остаются почти неизменными.

Бесконечный поток новостей в соцсетях заставляет пользователя пускаться за добычей. Искать интересные посты, отбрасывая скучное и неинтересное.
Переменное вознаграждение — найденный нами интересный пост.

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

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

Книга на сайте издательства

2017   Книги
Ранее Ctrl + ↓