Fullstack Founder

Метка: дизайн

  • Модель RDB — инструмент для мышления маркетолога

    Модель RDB — инструмент для мышления маркетолога

    Все коммерческие предложения, лендинги, ТЗ на рекламные плакаты и вообще всю маркетинговую коммуникацию я уже много лет проектирую на основе модели RDB. Про неё я узнал из выступления Ильи Балахнина и тут же применил на одном из клиентских проектов. Удалось вырастить конверсию лендинга в 3 раза не прибегая к редизайну — я просто блоки переставил местами в соответствии с моделью.
    Модель даёт отличные результаты на практике, потому что позволяет выстраивать повествование про ваш бренд или предложение в понятном потребителю порядке.

    Resonance
    В резонансе нужно русским по белому написать ваше предложение на понятном клиенту языке. Запуск интернет-магазина для бренда одежды за 30 дней.
    Клиент узнаёт себя, чётко и ясно понимает вашу услугу. Важно, чтобы всё окружение резонанса транслировало сопутствующую атмосферу и атрибуты. Картинка с котятами не подойдёт — нужны картинки интерфейсов современных интернет-магазинов с одеждой, фэшн-фотографии и процесса оформления заказа. Шрифты, цветовая палитра, Tone of Voice — должны соответствовать резонансу. Не стесняемся лепить самую банальщину. Клиника — врачей в белых халатах, а не яблоки на тарелке или здоровых пациентов.

    Differentiation — отличие от других.
    Для B2C брендов нужно говорить про потребителя и как его индивидуальность будет подчёркивать этот продукт или услуга. Чем он будет отличаться от других после покупки.
    Для B2B рынка мы делаем ровно наоборот — доказываем, что мы такие же, как и все: соблюдаем стандарты, имеем лицензию, делаем по методологии. Корпоративный клиент не хочет рисковать, поэтому предпочтёт проверенное решение. Магазин на WordPress, а не самопис от нашей студии. Бухучёт по международному стандарту, а не по авторской методике.

    Belief — создаём доверие и внушаем веру в продукт или компанию. Размещаем логотипы и отзывы клиентов. Показываем производство и работников. Публикуем реквизиты компании. Даём значимые цифры, подтверждающие наш опыт и компетенции. 3 тысячи сайтов сделано, 20 тысяч клиентов выздоровело, 300 миллионов рублей потрачено.

    В ходе применения RDB и обратной связи я немного модифицировал формулу. Мой порядок применения модели: RBDB, — два раза используется Belief. Первый раз мы создаём доверие сразу после резонанса. Внимание покупателя захвачено, нужно сказать, что мы норм, чтобы следующий блок был встречен с предварительно сформированным доверием. Достаточно краткой полоски логотипов, фотографий людей и значимые цифры. Второй раз мы будем использовать весь арсенал — отзывы, фотографии, сертификаты и награды, видео-ролики и демонстрацию внутрянки. Этот Belief может быть огромным лонгридом для самых недоверчивых Осликов по матрице Винни-Пуха.

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

  • Выводы с прожарки КП

    Выводы с прожарки КП

    Сегодня в клубе Галера в прямом эфире я с коллегами-экспертами разбирал два десятка коммерческих предложений (КП) диджитал агентств.

    Рефлексирую полученный опыт в виде чеклиста:
    – На обложке КП нужно написать русским по белому какая именно услуга предлагается, название клиента и название агентства.
    – После обложки хорошо бы кратко представить агентство и вызвать доверие логотипами клиентов, рейтингами и значимыми цифрами.
    – Если показываете фотографию одного только основателя, агентство воспринимается как лавочка фрилансера. Покажите групповое фото или кружочки с командой.
    – Дизайн продаёт без слов. Возьмите на создание шаблона КП лучшего дизайнера, которого только сможете себе позволить — это быстро окупится.
    – КП нужно адаптировать под клиента и писать на языке клиента. Многие КП сделаны на языке агентства и клиенту не понятны.
    – Смету, медиаплан, десяток подробных кейсов, аудит и даже концепцию можно приложить дополнительными документами и дать ссылки.
    – Подрядчики на трафик любят делать разбор рынка клиента и его конкурентов. Выглядит, как будто агентство напрашивается на проверку домашки.
    – Агентства склонны сильно раздувать КП. Клиент не будет читать 40 слайдов, у него лежит целая пачка таких же КП. Нужно учиться зацепить клиента в 10 слайдов, включая обложку.
    – На последнем слайде — контактные данные менеджера по продажам и название агентства ещё раз. На этом слайде больше ничего не нужно.
    – Цена должна быть на одной из первых или последних страниц. Если она спрятана в середину КП, её будет очень сложно найти.
    – Не стесняйтесь писать цену большим шрифтом и заметно. Клиент ожидает, что вы назовёте цену, не нужно её прятать в таблицах.
    – Цена должна содержать полную стоимость для клиента: со стоимостью услуг агентства, рекламным бюджетом и НДС. Часто указывают только стоимость услуги, хотя клиент будет оплачивать всё вместе.
    – Окупаемость нужно считать исходя из полных затрат, включая услуги агентства, а не только из рекламного бюджета.
    – Указывайте на какой системе налогообложения вы работаете. Клиентам с НДС это важно.

    Вижу, что формат прожарки КП очень популярен в клубе. Так и просится собрать набор универсальных правил) Вместе с тем, я понимаю, что КП может успешно продавать своему покупателю и нарушать при этом все правила.

    Поэтому, универсальная рекомендация:
    – Сделать партизанскую разведку, чтобы отстроить КП от конкурентов.
    – Регулярно улучшать и изменять КП по результатам продаж.

  • Favicon для сайта

    Favicon для сайта

    Фавикон — иконка для избранного. То самое лого сайта с вкладки браузера.
    Раньше это была иконка 16х16px, но сейчас для корректной работы на всех устройствах можно сделать до 27 изображений разного размера и формата.

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

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

    Для полной поддержки нужен векторный логотип компании, из которого мы будем делать полный набор:
    – SVG-иконку, которая автоматически включает темную или светлую версию под тему оформления пользователя (а что, так можно было?).
    – PNG 512х512 и 192х192 без полей под Android.
    – PNG 512х512 и 180х180 с отступами от края под iOS.
    – PNG 32х32 и 16х16, запакованные как favicon.ico для совместимости со старыми девайсами.
    – JSON-файл manifest.webmanifest в корень сайта со ссылками на файлы иконок для мобилок и PWA.
    Полный гид по техническим подробностям от Злых Марсиан (обновлено в 2025 году).
    Инструкции такого размера ради одной иконки меня удручают. Выглядит как подарочный ребус для досуга дизайнера.

    Лайфхак: У моего блога ещё нет логотипа. Поэтому я решил взять в качестве иконки обычную эмодзи. Пусть будет 🤖

    Найденный сайт позволил выбрать эмодзи и сразу получить набор иконок всех нужных размеров. Не хватает только SVG-версии. Её нахожу на другом сайте по запросу robot emoji svg download. Обойдусь без тёмной версии, её создание выглядит для меня трудозатратно.
    В обоих случаях это одна и та же иконка из бесплатного набора, который выпустил Twitter под open source лицензией MIT — можно использовать в качестве фавиконки ничего не нарушая.

    Ещё полезные ссылки:
    – Генератор иконок из вашей картинки
    – Упаковщик favicon.ico
    – Инструкция как сделать SVG-иконку с темной и светлой версией

  • Фуллстек парадокс

    Фуллстек парадокс

    В начале 2000-х в веб-разработке не было фронтэндов или бэкэндов.
    Была профессия вебмастер. Этот человек мог сделать сайт целиком. Он умел общаться с полиграфическим дизайнером про внешний вид сайта, верстать HTML таблицами, оптимизировать графику, писать java script. Стек был небольшой и было мало слоёв абстракции.
    Если было нужно что-то покруче, звали программиста и он писал CGI-скрипты на Perl, PHP или C.

    Прошло 25 лет. В этом году искал для клиента fullstack-разработчика. Вакансии такие на рынке есть. Например, одновременно с моей вакансией продвигали объявление от Теремка на такой же стек. На такую вакансию массово откликаются фронтэнд-разработчики. Почему так?

    В момент, когда фронт научился писать запросы к базе данных и создавать API-методы, он достиг своей полноты. В его мировоззрении всё жизненное пространство в этот момент освоено. Всё так, но для бэкэнд разработчика уровень фронтов на его территории — Intern или Junior.

    Современный бэкенд разработчик часто знает HTML, CSS и Java Script. Может так случиться, что был у него опыт разработки на React, но он не будет считать это значительным достижением. Хорошо, если в резюме укажет. Его территория упирается с одной стороны в серверное администрирование и облака, с другой находится уровень железа: производительность процессора, работа с памятью, операции чтения и записи на жесткий диск. Пляж фронтэндов находится на периферии его владений и занимает небольшой участок с выходом в море.

    Зрелый бэкенд разработчик может в море не плавает, но может залезть в код на фронте, сделать необходимое “чтобы работало” и пойти делать свои дела. Вряд ли он уделает фронта на его территории, но у него есть ощущения “тут всё понятно”.

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

    Практические выводы:
    – Если вам нужен в команду разработчик с полным спектром знаний — ищите сеньора бэкендера, у которого был опыт работы на фронте. Вакансии Веб-разработчик, Программист или Backend-developer. Но делать фронт его руками очень дорого.
    – В команду нужно брать и фронтов и бэков. Бэки будут ворчать и не хотеть делать задачи фронтов, фронты не владеют всей картиной происходящего на бэке.
    – LLM уже сейчас помогает бэкендерам делать сносный фронтэнд. Скоро всё перемешается снова.

  • Продажи в чатах для агентств

    Продажи в чатах для агентств

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

    Долгое время для моего агентства чаты были основным источником новых лидов. Мы брались за разные работы: маркетинг, разработка, поддержка, SEO, закупка трафика, дизайн.

    Как это было устроено:
    – Завели роль Лидоруб — сотрудник, который первый сталкивается с лидами или ловит их в интернете. Его задача — быстро реагировать. Не нужно быть классным продажником, достаточно уметь общаться.
    – Завели тг-аккаунт, в котором постоянно сидел наш Лидоруб.
    – Аккаунт был подписан на несколько сотен чатов с предпринимателями, диджитал-специалистами, агентствами, обучающими курсами. Всё, что смогли найти.
    – Чаты отсортированы по папкам. Самые качественные вынесены в отдельные папки, чтобы быстрее реагировать.
    – Лидоруб половину рабочего дня просматривал чаты на предмет запросов на услуги.
    – Если видел сообщение с запросом “а подскажите хорошего директолога”, то публично отвечал “могу порекомендовать Никиту” и давал контакт нашего продажника.
    – Другой вариант — лидоруб сам откликался на запрос и проводил первичный диалог, выявлял потребность (что именно нужно) и квалифицировал клиента (а скиньте ссылку на ваш сайт).
    – Продажник ждал лиды, поэтому оперативно реагировал. Писал клиенту сам, подхватывал диалоги, назначал встречи.
    – Мы откликались на любые запросы, в том числе мелкие. Задача была наладить коммуникацию и завоевать доверие. Целевому клиенту можно было сделать самую маленькую задачу, а потом продавать комплекс услуг или долгий проект.

    Мой личный рекорд продажи из чатов в тот период — сделка на 1.3 млн рублей.

    Этой схемы хватало, чтобы создать в небольшом агентстве постоянный приток новых клиентов. Без каких-либо автоматических сервисов и спама. В чатах разнородные клиенты, разные ниши, очень разные чеки. Клиенты в чатах точно есть и они хотят покупать!

    Посты по теме:
    – Виды лидгена в агентство
    – Лидген на отраслевых выставках
    – Подборка материалов для агентств

  • NFT-коллекция аватаров PostHuman

    NFT-коллекция аватаров PostHuman

    Как отдыхает программист? Пишет код для удовольствия!

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

    Наши пиксельные аватары сделаны по принципу знаменитых Крипто Панков. Слои с головой, одеждой, причёсками и глазами комбинируются случайным образом. У других авторов аватары заранее генерируются, отбираются куратором и лучшие публикуются на блокчейне как коллекция. У нас всё получилось гораздо мощнее — фабрикатор постоянно онлайн и у коллекции нет модератора. Автомат генерирует случайные комбинации из 13 видов слоёв, от заднего фона до цвета глаз. Выпадет одна из 615,000,000,000,000,000 комбинаций!

    Как работает механика:
    – Валидатор Posthuman и Omniflix.TV распространяют NFT-сферы своим пользователям. Многие получат сферу бесплатно или за какие-то активности. Также сферы можно купить на маркете.
    – Сферы работают как билеты или жетончики. Их можно отправить в автомат, который сгенерирует новый NFT-аватар.
    – Аватар можно использовать в приложениях экосистемы или продать на маркете.
    – Аватар будет случайный, поэтому может не понравится пользователю.
    – Аватар можно за небольшую плату сдать в регенератор и получить взамен новую сферу.
    – Это вызывает цикл обменов и генераций, пока не выпадет подходящий аватар.
    – Аватары бывают трёх рас: Человеки (разного пола и цвета кожи), Роботы и Пришельцы.
    – Аватары и сферы бывают разной редкости: Обычные, Бронзовые, Серебряные, Золотые, Платиновые, Бриллиантовые.
    – У частей картинки разная вероятность выпадания. Робот в шапке-ушанке более редкий, чем просто робот. Костюм космонавта более редкий, чем рубашка.

    Как заработать на NFT-аватарах? Я не знаю — я программист :]
    Можно генерировать редкие классные аватарки и продавать на маркетплейсе. Сейчас это дополнительное развлечение для участников блокчейн-экосистемы. Мы запустились пару дней назад, а уже создано 1200 аватаров.

    Промо-лендинг коллекции https://avatars.posthuman.digital/
    Сгенерированные аватары на маркете: https://omniflix.market/c/collectNow/onftdenomf3c4a963c49747039217eba1dc10282e
    Посмотреть, какие аватары выпадают прямо сейчас https://t.me/posthuman_avatars
    Автомат по генерации аватаров https://mint-posthuman-avatar.omniflix.market/

  • Закрывайте тестовые сайты от индексации

    Закрывайте тестовые сайты от индексации

    Часто веб-студия разворачивает тестовый сайт для демонстрации клиенту: сделать приёмку сайта до публикации, посмотреть на новый дизайн или на экспериментальные функции.

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

    Самый простой и надёжный способ — HTTP Basic Auth. При вводе адреса тестового сайта вылезет диалог с логином и паролем. Задаётся всё в конфигурации веб-сервера, работает и для Nginx и для Apache. Девопсы и сисадмины знают, как быстро настроить эту фичу.

    Код проекта не затронут — разработчикам ничего не нужно делать. Поисковые роботы не могут посетить сайт — спокоен SEOшник. И случайные люди не смогут на сайт попасть.

  • Time & Materials: снижение рисков

    Time & Materials: снижение рисков

    Клиент обычно хочет договориться на фиксированную цену, заранее её обговорить и подписать контракт. Это самая понятная схема, которая встречается повсеместно — как потребители мы покупаем товары и услуги за “фикс” каждый день.

    Но если агентство делает что-то неизвестное и уникальное — начинаются проблемы.
    Качественный дизайн, разработка больших сайтов, интеграция с новыми сервисами, производство видео, консультации, внедрение новых технологий — во всех этих случаях может быть сложно сказать, когда работа будет готова исполнителем и принята заказчиком.
    Смотри: Почему Fix Price — это ловушка

    В проектах с неопределённостью нужно подписывать контракты по схеме Time&Materials:
    – Клиент оплачивает фактические трудозатраты (почасовка).
    – Клиент оплачивает потраченные материалы и инструменты.
    – Клиент оплачивает привлечённых субподрядчиков.

    Какие риски мы снимаем, переходя на T&M:
    – Убыточные проекты — себестоимость всегда оплачена клиентом.
    – Бесконечные правки за счёт агентства уходят в прошлое — клиент платит за свой перфекционизм.
    – Низкое качество работы при промахе в оценке — в фиксированной цене агентство будет стоять перед выбором: снизить качество или сделать в минус.
    – Конфликты с клиентом — стороны недовольны друг другом. Клиент не доплачивает, агентство не дорабатывает. Возникает это ближе к финалу работ, когда становится очевидно, что проект выходит за рамки бюджета.
    – Провал в мотивации — кому интересно делать убыточные проекты низкого качества и конфликтовать?

    В T&M агентство продаёт то, что закупило у сотрудников — часы работы. Агентству становится выгодно и комфортно делать крутые и сложные проекты.

  • Нарушение авторских прав на сайте

    Нарушение авторских прав на сайте

    Вы сделали сайт для компании — есть риск, что вы уже нарушили закон.
    За что может реально прилетать досудебная претензия, счёт или иск о нарушении авторских прав?

    Фотографии, иллюстрации, схемы, инфографика и графики — дизайнер, сеошник или контенщик добавил на сайт картинку из интернета. Авторы, фотобанки и музеи мониторят случаи использования и соответствие лицензии. А вы знали, что не можете использовать многие известные картины на сайте? С внедрением поиска по картинкам отслеживать такие случаи стало гораздо легче.
    Отдельный юридический случай — фотографии ваши, но отсутствует соглашение с людьми на фотографиях на съёмку. Закон другой, но фотографии придётся убрать.

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

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

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

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

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

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

    Как защитить себя?
    1) Получить от дизайнеров и разработчиков список всех использованных произведений и других объектов авторского права с указанием авторства и лицензии. Хорошо получить также подтверждение прав: чеки, инвойсы, договоры, ссылки на сайты, лицензии и файлы из фотобанка.
    2) Проверить, по какой лицензии используется этот объект, есть ли у вас право на изменение и использование его в коммерческих целях?
    3) В договоре с подрядчиком указать, что он отвечает за нарушение авторского права и будет нести материальную ответственность.
    4) В договоре передать авторские права на все создаваемые подрядчиками произведения.
    5) Проверить всё это с юристом.
    6) Хранить весь комплект документов, пока сайт опубликован, и три года после.

  • Роботы тоже посещают сайты

    Роботы тоже посещают сайты

    Обычный пользователь может удивиться, зачем его мучают капчей при входе на сайт.
    Происходит это потому, что помимо людей на сайты ходят роботы. Роботы сканируют страницы сайта, получают свежие цены из интернет-магазина, смотрят и копируют объявления, накручивают лайки и просмотры, оставляют комментарии. Всё то, что владелец сайта ожидает от настоящих посетителей.
    Но настоящий посетитель не будет загружать 3000 страниц за 3 минуты. А робот — легко. На роботов тратятся ресурсы и зачастую они создают нагрузку, которая мешает настоящим посетителям выполнять их действия.
    Есть роботы, которых владелец сайта ждёт, например — робота-паука от Яндекса. А есть те, которых нужно не пускать — они нарочно перегружают сайт и мешают настоящим покупкам.

    Вначале программисты придумали ставить для роботов препятствия. Разгадайте капчу, чтобы пройти дальше. Остановило ли это злоумышленников? Нет — за вредоносного робота капчи разгадывают за копейки сотрудники аутсорс-компаний из Пакистана или Бангладеша. Другую часть капчей разгадывают с помощью роботов с машинным зрением. Такие же определяют номера автомобилей на камерах контроля скорости.
    Наказание несём мы с вами — помогаем распознавать светофоры и пешеходные переходы. Да, это развивает автономный транспорт, но я хотел зайти посмотреть видосики, а не бесплатно обучать ещё одного робота для корпорации.

    Чтобы снизить нагрузку и облегчить жизнь программистам, многие сайты стали отдавать данные через API-шлюзы — без дизайна, рекламы и сразу оптом. Зачем листать страницы, если можно загрузить 100 статей сразу? Но только крупные или новые сайты сделали API. И владелец робота может хотеть именно ту информацию, которую владелец сайта в API не включил.

    Для легальных роботов появились согласованные точки доступа. Папка .well-known в корне сайта служит для общения с поисковыми роботами, проверкой SSL-сертификата и работе с автоматизированными сервисами. Также в корне сайта можно обнаружить файл robots.txt, который явно говорит, куда роботам можно ходить, а куда нельзя. Если бы все роботы были послушны!

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