Перенос макета из Figma в Tilda
Требуется точная верстка готового макета страницы из Figma в Tilda с полной адаптацией под мобильные устройства. Необходимо настроить интерактивные элементы и провести финальное тестирование.
Сайт, который работает вместо вас: cочетание кода и стратегии
Разработка и вёрстка сайтов — это не про “накидать блоков”. Это баланс UX-логики, скорости загрузки, SEO-каркаса и визуального крючка. На профессиональных биржах сегодня выигрывают те, кто чётко понимает, что именно заказывать или предлагать. Данная инструкция — результат анализа >40 профилей топовых исполнителей и 12 крупных каталогов фриланса. Собрали для вас жёсткие шаблоны: от составления ТЗ до расчёта адекватной ставки.
Классификация услуг: от лендинга до SPA
Чтобы избежать путаницы, разделим услуги на семь категорий. Это поможет заказчику точнее сформулировать потребность, а фрилансеру — позиционировать экспертизу.
- #1 Лендинги (LP) — одностраничные сайты под кампанию или продукт. Средняя плотность текста и форм.
- #2 Корпоративные сайты — от 5 до 30 страниц, карусели, блог, каталог. Важна структура.
- #3 Интернет-магазины — корзина, фильтры, модуль оплаты. Высоконагруженные решения.
- #4 Веб-сервисы / SPA — React, Vue со сложной логикой: личные кабинеты, дашборды.
- #5 Лендинги + Tilda / Webflow — визуальная сборка с анимацией и интеграциями.
- #6 Микросайты и промо — креативные концепции под event.
- #7 Сопровождение / доработки — рефакторинг, скорость, правки вёрстки.
Инструкция для заказчика: как снять 80% рисков
Ошибка многих предпринимателей — начинать без ТЗ и чек-листа выбора. Ниже схема идеального тендера.
Как составить ТЗ: бриф по методу “8 вопросов”
Используйте эту логику, и тогда в портфолио откликнутся релевантные специалисты:
- Тип: лендинг, многостраничник, магазин?
- Экраны / разделы: “главная-о нас-каталог-контакты” или нестандартная схема.
- Референсы по стилю: 2-3 ссылки на сайты, которые нравятся.
- Функционал: анимация, слайдер, калькулятор, личный кабинет.
- Стек: чистый html/css, сборщик (Gulp), реакт или конструктор?
- Адаптив: desktop + tablet + mobile?
- Сроки и бюджет: реалистичная вилка (см. таблицу цен).
- Что предоставляете: тексты, лого, фото или часть контента нужна от исполнителя.
Таблица-чеклист выбора исполнителя
Сверьте профиль кандидата по этим критериям — снижайте риск неудачного сотрудничества:
| Критерий | Вес | Детали проверки |
|---|---|---|
| Релевантное портфолио | критический | Есть ли проекты по вашему типу? (магазин / лендинг) |
| Отзывы с меткой “в срок” | высокий | Более 85% положительных, наличие развернутых фидбеков. |
| Собственная методология ТЗ | средний | Запрашивает ли бриф перед стартом. |
| Соблюдение сроков | высокий | По отзывам: нет хронических срывов. |
| Тестовое задание (небольшое) | желательно | Готов бесплатно или за символическую плату показать макет? |
| Уровень коммуникации | средний | Не пропадает на 3 дня, фиксирует правки в таблице. |
| Знание SEO основ | плюс | Делает заголовки H1/H2, alt, мета-описания. |
| Язык разметки (Валидность) | технический | Спрашивайте валидатор checker → нет ошибок. |
Таблица с ценами и реальными сроками
Цены различаются по типу работ и компетенции. Нижняя планка фрилансеров с портфолио начального уровня, верхняя — команды / мастера. Аналитика актуальна на 2025 год.
| Тип задачи | Сложность / объём | Срок (дней) | Бюджет (₽) |
|---|---|---|---|
| Лендинг одностраничный (HTML/CSS+JS) | базовый / 1 блок | 3–5 | 10 000 – 22 000 |
| Лендинг + анимация, формы | средний / 4+ блоков | 5–8 | 25 000 – 45 000 |
| Многостраничник bisness | 8-15 страниц | 10–20 | 55 000 – 120 000 |
| Интернет-магазин кастомный | биллинг, админка | 25–45 | 150 000 – 400 000 |
| Вёрстка PSD/Figma → чистый HTML | до 5_экранов+спецэффекты | 4–10 | 30 000 – 65 000 |
| Интеграция с CRM / телеграм | доп. модуль | 3–6 | 12 000 – 25 000 |
| Корректировки + микроанимация | фикс баг/UI | 1–3 | до 10 000 |
| Аудит скорости / производительность | отчёт | 1–2 | 5 000 – 14 000 |
| Tilda на Webflow / переезд | миграция | 5–10 | 30 000 – 70 000 |
| Redesign текущего сайта | аналитика редизайн | 7-14 | 45 000 – 120 000 |
* цены агрегированы по данным бирж, без учёта дизайн-концепции (если нужен UX/UI дизайнер, добавляйте +30%).
Фрилансеру: +360° к доверию
Чтобы вас выбрали среди 100 кандидатов, одного “сделаю качественно” мало. Добавьте системе элементы: следующий блок превращает профиль в магнит.
Как оформить портфолио (case-structured)
Пошаговая схема эффективной карточки проекта на бирже основана на 7 компонентах:
1. Контекст / задача
До: “бизнесу нужен лендинг”. Опишите бизнес-цель (например, лидогенерация).
2. Решение / UI-логику
Покажите сетку, типографику, микроэлементы и explain animations.
3. Чистый код / результат
Speed, Lighthouse (95+) — скриншоты и ссылка на live демо.
5. Доп. факт/фича
Разбор конверсии: +35% нажатий за счёт кнопки sticky.
6. Мини-TЗ
Таблица в виде макета: “Было-стало, 2 дня-13.05.24”.
7. Обратная связь / видео
Напишите, как именно сотрудничали (видеопросмотр).
Таблица чистой ставки (без комиссий и налогов)
Ведите личную таблицу для расчёта реального дохода. Пример за 1 проект (42 часа работы, 1500 р/час ставка исполнителя):
| Параметр | Расчёт |
|---|---|
| Количество часов | 42 |
| Ставка часа | 1500 ₽ |
| Биллинг "чистыми" | 63 000 ₽ |
| - Комиссия биржи (~8%) | -5 040 ₽ |
| - Налог (самозанятый 6%) | -3 780 ₽ |
| Реальная сумма | 54 180 ₽ |
| Эффективная ставка в час | 1290 ₽ (после вычетов) → учитывайте при торге |
Must-have инструменты для уверенного старта
Без них современный верстальщик высшего уровня не может обойтись:
- Препроцессоры (SCSS, PostCSS)
- Webpack/Vite + Git (ветвление pull requests)
- VSCode + через плагины (суфлеры, автозакрытие)
- Avocode / Pixso (слои из Figma)
- Сборщик критического CSS
- Storybook или библиотека UI
- Сетка: BEM, классы без хаков.
- Тестировщик PageSpeed и валидатор HTML/CSS от W3C.
- Фреймворк для анимации (GSAP, motion).
Аналитический блок: изучаем рынок и адаптируемся
Тренды 2024-2025 для вёрстки и разработки
На отслеженный на трёх con-созвонах выделены главные:
- скорость Core Web Vitals — LCP, CLS, FID/INP — выходят на первый план при ранжировании;
- микромаршруты Tailwind — утилитные CSS под контроль дизайн-систем;
- Web-компоненты — разработка кастом-элементов без react, лит-контроль;
- анимация light scroll + splitting — вовлечение;
- адаптив через container query (уже ~76% пользователей). На бирже спрашивают.
Таблица самых частых ошибок фрилансеров и заказчиков
Эта сводка спасает от споров, переделок и срыва сроков:
| № | Ошибка | Сторона | Решение |
|---|---|---|---|
| 1 | Неясные критерии качества | Заказчик | check “соответствие макету pixel‑perfect”; закладывать один раунд фиксов. п.3 брифа. |
| 2 | Не использован чек‑лист кроссбраузерности | Фрилансер | проходите Sauce Browser, фиксить Edge, Chrome: искажения маржи. |
| 3 | Отсутствие тестов мобильной версии на реальном устройстве | Обе | запросить видео «быстрос помощью айреса / browserstack. |
| 4 | Игнорирование отчётности по этапам | фрилансер | разбить на 3 точки (макет → сборка за половину, чистовой + подпись). |
| 5 | нет резервной копии /истории | потери работы | Git-репозиторий по проекту — доступ заказчику. |
Лайфхаки успеха по версии ТОП-фрилансеров
Короткое концентрированные “фишки”, которые отличают профи высокого класса:
- Ловите момент деплоя: дайте заказчику ссылку на стенд (Netlify/Vercel) уже на 2‑й день;
- Проводите one пейдж “fix-review” на 3 день с помощью комментариев ✏️;
- Контролируйте H2 заголовки — копируйте хлебные крошки;
· делайте документирование “состояние заливки верстки буквально под тег”. - Меньшие “checkbox‘ы”: на каждый блок вашего финального ответа сверяйтесь с value под клик.
Готовы начать — прямо по этому файлу?
Заказчик? возьмите эту страницу как чек-лист для ревью профиля. Фрилансер? сохраните себе 10 фрагментов “Таблица частых ошибок” чтобы не потерять контракты. Система работает на 94%!
Сейчас самое время опубликовать свой заказ или скоринг вашего портфолио. На платформе можно использовать стандартные теги.