В этом году мы решили поздравить не только клиентов, но и айтишников. Поэтому придумали генератор айти-открыток и уже сделали его. Можете создать свою открытку и подарить коллеге, в конце статьи оставили ссылку на генератор. Читайте про нашу идею и реализацию, а итоги будут уже в новом году.
Привет, меня зовут Лиза! Я руковожу фронтенд-аутсорсом Лига А. Мы делаем вёрстку и фронтенд любой сложности — от простых страничек до больших сервисов. Это первая часть статьи, в которой я расскажу про наш новогодний генератор айти-открыток: как мы его придумали, для кого это всё и что получилось в итоге. В конце дам ссылку, чтобы вы поздравили коллегу с Новым годом.
Предыстория
Мы уже 6 лет работаем с клиентами и каждый Новый год придумываем интересные поздравления от команды Лиги. Всё начиналось с гиф-открыток, которые потом мы добавляли в email-рассылку, а ещё через время собрали лендинг с итогами года.
Для чего мы это делаем?
— поблагодарить клиентов за то, что они с нами и сказать, что они ценны для нас
— подвести итоги года и поделиться ими с клиентами и командой
— показать, как мы выросли за год и к чему стремимся дальше
Итак, к поздравлениям. Мы использовали разные форматы поздравлений — лендинг с итогами, большие новогодние письма и гифки с нашим динозавром.
Но в этом году поменяли тактику и решили сделать мини-проект, который порадует и разбавит насыщенный конец года клиентов, айтишников и нас самих.
Всё началось с телеграм канала
Осенью этого года мы начали развивать телеграм канал. К нам присоединилось больше 200 человек и большинство из них — разработчики. Поэтому мы решили, что на Новый год сделаем что-то полезное и интересное для всего айти-комьюнити, которое может поздравить своих коллег.
Перебирали идеи с розыгрышами, конкурсами и стикерами. Но решили остановиться на идее с генератором — любой пользователь заходит на наш сайт, выбирает несколько параметров и получает новогоднюю открытку, в которой случайным образом генерируется поздравление.
Как работает генератор
Мы решили сделать генератор на отдельной странице на нашем сайте.
🪄 Если вам интересно, как мы это реализовали
Процесс
Чтобы приготовить генератор, нам понадобилось 3 ингредиента:
— дизайнер, который отрисовал макет генератора
— редактор, который генерировал картинки для открыток и писал тексты
— разработчики, которые писали код
Сначала дизайнер отрисовал макет, на это ушло примерно 7 часов.
Параллельно с дизайном, редактор генерировал картинки для каждого специалиста и писал поздравления. Всего получилось 5 картинок и 25 текстов (по 5 текстов на каждого специалиста).
Механика генератора
Картинки загружаются из условий выбора пользователя и одна картинка заменяется другой.
Работает так
- Мы загружаем файл в котором описаны все возможные выборы. Если пользователь выбрал в специалистах «фронтендера», то отсекаются все картинки кроме фронтендера
- Пользователь выбирает фон и отсекаются картинки с фоном, который не выбрали
- У нас остаётся 5 картинок по запросу пользователя. У каждой картинки есть своё уникальное имя и url страницы, который мы вставляем в генератор и заменяем их на каждом шаге смены
Сроки
В целом, мы потратили 2 недели на весь проект. Сразу подключили к странице Яндекс Метрику, так что в следующей части расскажем про результаты в цифрах — подписки на канал, новые клиенты и просто довольные разработчики 😁