Вайбкодинг: разработка сайта с авторской графикой и анимацией
Вайбкодинг — это сайт, собранный вручную на чистом коде, со своей графикой и движением: анимация, частицы, отклик на каждое действие. Не шаблон, перекрашенный в ваши цвета. Нужен там, где выглядеть дороже конкурентов — часть продажи.
Что такое вайбкодинг
Коротко
Слово из нашего цеха, и клиенты его не ищут — мы это знаем. По сути это обычная разработка сайта, но с двумя отличиями: вся графика и анимация делаются под проект, а не берутся из библиотеки шаблонов, и всё это пишется руками, поэтому вес страницы остаётся под контролем.
Проще всего показать на этом сайте. Фон с частицами, реакция карточек на курсор, движение при прокрутке — всё сделано кодом, без тяжёлых библиотек. Главная весит около 90 КБ в сжатом виде — меньше одной фотографии с телефона, а эта страница, которую вы читаете, — 11 КБ.
Когда это оправдано
Премиальные услуги и товары. Когда цена выше средней по рынку, сайт обязан ей соответствовать. Шаблонная страница за 3 000 ₽ обесценивает услугу за 300 000 ₽ быстрее любого конкурента.
Ниши, где все одинаковые. Если у десяти конкурентов сайты на одном шаблоне, отличаться проще всего именно этим.
Промо и запуски. Страница под конкретный продукт, событие или коллекцию, которую не жалко сделать яркой.
И когда не оправдано: если задача — быстро собрать заявки с рекламы, лучше вложиться в тексты и скорость, а не в анимацию. Скажем об этом прямо, если увидим такую задачу.
Что входит
- Своя графика и движение. Анимация, частицы, реакция элементов на курсор и прокрутку — под ваш проект, а не из набора эффектов.
- Контроль веса и скорости. Красота не должна тормозить: замеряем на слабом телефоне, а не только на своём ноутбуке.
- Работа без анимации тоже. При системной настройке «уменьшить движение» анимации выключаются — это требование доступности, и мы его соблюдаем.
- Всё, что входит в обычный сайт. Адаптив, форма заявки с доставкой сразу в несколько каналов — мессенджер и почту, — базовое SEO, документы по 152-ФЗ.
- Исходники вам. Проект остаётся вашим целиком.
Как проходит работа
-
1Разговор
Двадцать минут о том, кому и что вы продаёте и почему выбирают вас, а не соседа. Если увидим, что задача решается дешевле — скажем сразу, до сметы.
-
2Референсы и ДНК
Вы показываете два-три сайта со словами «хочу как здесь». Мы разбираем их на составляющие: цвет, шрифт, ритм, характер движения. Из разбора получается набор правил, по которому дальше собирается всё — чтобы страницы не разъехались между собой.
-
3Тексты
Пишутся до вёрстки, а не после. Дизайн под настоящий текст и дизайн под «рыбу» — разные дизайны, и переделывать приходится второй.
-
4Статика
Сначала собирается неподвижная страница. Показываем её вам и правим здесь: на этом шаге правка стоит час, после анимации — день.
-
5Движение
Анимация ставится последней и только на согласованную статику. Замеряем на слабом телефоне: движение, которое дёргается, хуже его отсутствия.
-
6Запуск
Домен, хостинг, форма заявки, счётчик, документы по 152-ФЗ, панели вебмастера. Сайт отдаётся работающим, а не «почти готовым».
От чего зависит цена
Цена начинается от От 65 000 ₽ и складывается из четырёх вещей. Ни одна из них не «сложность вообще» — на каждую можно посмотреть и посчитать.
- Сколько экранов. Один лендинг и сайт на восемь страниц — разная работа. Экраны считаются на первом же разговоре, до сметы.
- Сколько своей графики. Фон с частицами, свои иконки, схема процесса, разбор товара по частям — каждый такой элемент рисуется и программируется отдельно.
- Готовы ли тексты. Есть свои — дешевле. Пишем мы — это отдельная строка в смете, и она честнее, чем «тексты в подарок» с последующей переделкой.
- Нужна ли связка. Форма, которая просто шлёт письмо, и форма, которая заводит заявку в CRM и отвечает в мессенджере, стоят по-разному.
Что не влияет на цену: ваш город. Цены у нас одинаковые по всей России — разная цена для разных регионов читается как обман, если человек откроет две страницы сайта подряд.
Чем это отличается от анимации в конструкторе
В Tilda и подобных редакторах анимация тоже есть, и для многих задач её достаточно. Разница вылезает в трёх местах, и все три видны не сразу, а через месяц-другой.
Вес. Готовый набор эффектов тянет за собой библиотеку целиком, даже если вы используете один эффект из ста. Отсюда страницы на два-три мегабайта, которые на слабом телефоне открываются секундами. Когда движение пишется руками, в страницу попадает только то, что на ней есть.
Предел. В конструкторе можно ровно то, что в него заложили. Как только нужен эффект, которого в списке нет, работа упирается в стену — и дальше либо отказ от задумки, либо переезд на код с нуля.
Владение. Сайт в конструкторе живёт, пока оплачена подписка, и переехать с него нельзя — можно только собрать заново. Здесь исходники ваши после полной оплаты, и разместить их можно где угодно.
Развёрнутое сравнение с ценой владения за три года — в разборе «Конструктор или чистый код».
Чего мы не делаем
Это не оговорки мелким шрифтом, а то, о чём лучше договориться до денег.
- Не обещаем позиций в поиске. Базовое SEO закладываем при сборке, но «топ-1 за месяц» не гарантирует никто, а кто гарантирует — потом объясняется.
- Не делаем анимацию ради анимации. Если движение мешает читать или отвлекает от кнопки, мы его уберём и скажем почему.
- Не ставим шрифты с чужих серверов. Подключённый шрифт Google отправляет данные посетителя за границу до всякого согласия. Шрифты кладём к себе.
- Не рисуем в макете того, чего у бизнеса нет. Доставки, приложения, бонусной программы — если этого нет, на сайте этого тоже не будет.
Частые вопросы
Анимация не замедлит сайт?
Замедлит, если делать её тяжёлыми библиотеками — так чаще всего и происходит. Мы пишем анимацию руками и следим за весом: главная вместе со всем движением весит около 90 КБ в сжатом виде, внутренние страницы — по 10–15 КБ. Скорость проверяем на медленном соединении и слабом телефоне.
Такой сайт нормально открывается на телефоне?
Да, и собирается он сначала под телефон. На узком экране часть эффектов упрощается намеренно: телефон слабее ноутбука, и лучше меньше движения, чем рывки.
Чем это отличается от обычной разработки сайта?
Технически — ничем: тот же чистый код, те же формы и SEO. Разница в объёме работы над графикой и движением, и она же в цене. Если анимация не нужна, смотрите обычную разработку сайтов.
Сколько времени занимает такой сайт?
От 10 дней. Дольше обычного лендинга: графика и движение делаются под проект, а не берутся из набора эффектов. Точный срок фиксируем в смете.
Можно посмотреть, как это выглядит?
Вы уже смотрите: этот сайт собран вайбкодингом. Фон с частицами, реакция карточек на курсор, движение при прокрутке — всё сделано кодом, главная весит около 90 КБ в сжатом виде.
Анимацию потом можно упростить или убрать?
Да, это правка стилей, а не переделка сайта. И она уже частично встроена: при системной настройке «уменьшить движение» анимации выключаются сами.
Оставить заявку
Расскажите о задаче. Ответим в течение часа в рабочее время и назовём цену со сроком.
Посмотрим задачу и скажем ориентир по цене и сроку. Без обязательств и навязчивых звонков: ответим тем же способом, каким вы написали.