Дизайн сайта / макет в Figma

Дизайн сайта и макет в Figma для заявок, SEO и разработки

Проектируем не просто красивую картинку, а рабочий макет: структура, UX, адаптивные экраны, UI-kit, состояния элементов и понятная передача в верстку.

Рассчитать стоимость Смотреть подход

Figma: макеты под верстку
UX: сценарии и CTA
SEO: структура до дизайна

Design-ready прототип, UI-kit, адаптив, handoff

Прототип и UX логика блоков и сценарии Дизайн лендинга одна услуга и быстрые заявки Макет сайта компании главная, услуги, кейсы, контакты Редизайн сайта новый визуал без потери смысла

Зачем нужен макет

Макет сайта - это инструкция для продаж, верстки и будущего продвижения

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

Красивый экран легко нарисовать. Сложнее сделать макет, который не развалится в верстке, не потеряет SEO-смысл и не заставит пользователя искать заявку глазами.

От смысла к экрану

Собираем Figma-макет как систему, а не набор случайных блоков

Внутри макета видны сценарии, сетка, компоненты, состояния, адаптивы и подсказки для разработки. Это экономит время на верстке и снижает риск переделок после запуска.

Структура: какие страницы, блоки и CTA нужны.
UX: как пользователь проходит от вопроса к заявке.
UI: визуальный стиль, типографика, компоненты.
Handoff: что получает верстальщик и программист.

wireframe Прототип

ui concept Главный экран hero + CTA + trust

components UI-kit

mobile Адаптив

SEO-структура до визуала

Состояния кнопок и форм

Ориентиры

Стоимость зависит от количества экранов, адаптивов и глубины UX

Прототип страницы

от 35 000 ₽

Структура, порядок блоков, логика CTA, сценарий пользователя и комментарии.

3-5 дней

Дизайн лендинга

от 70 000 ₽

Прототип, визуальная концепция, desktop и mobile, формы, состояния, handoff.

1-2 недели

Многостраничный сайт

от 120 000 ₽

Главная, услуги, типовые страницы, адаптивы, UI-kit и подготовка к верстке.

2-4 недели

UI-kit / дизайн-система

по оценке

Компоненты, состояния, сетки, типографика, цвета и правила масштабирования.

после брифа

Передача в разработку

Дизайн должен быть понятен не только клиенту, но и команде разработки

01 Файл Figma

Аккуратные страницы, именованные фреймы, компоненты и порядок экранов.

02 Адаптивные версии

Desktop, mobile и при необходимости tablet, чтобы верстка не додумывала поведение.

03 Состояния интерфейса

Кнопки, формы, ошибки, hover, активные пункты, карточки, раскрывающиеся блоки.

04 Сетка и отступы

Единая логика размеров, контейнеров и ритма, чтобы сайт выглядел собранно.

05 SEO и контент

Заголовки, зоны текста, FAQ, перелинковка и блоки, которые нужны для продвижения.

06 Комментарии

Подсказки для верстки, CMS, анимаций, ограничений и будущих доработок.

Состав работ

Что входит в разработку дизайна сайта

Аналитика цель страницы, аудитория, конкуренты, спрос, сильные смыслы дизайн не в вакууме

Прототип структура блоков, сценарий, CTA, смысловая логика страницы понятный каркас

UI/UX визуальный стиль, типографика, сетка, карточки, формы, навигация удобный интерфейс

UI-kit кнопки, поля, состояния, цветовые правила, повторяемые компоненты масштабирование

Адаптив мобильные экраны, перестроение блоков, читаемость, формы без сюрпризов на телефоне

Handoff структурированный файл Figma, комментарии и подготовка к верстке быстрее разработка

Процесс

От брифа до макета, который можно отдавать в разработку

01 Разбираем задачу
Фиксируем цель, аудиторию, продукт, конкурентов, ограничения и будущий способ разработки.
02 Собираем структуру
Проектируем страницы, блоки, CTA, форму, FAQ, навигацию и коммерческие акценты.
03 Делаем визуальную концепцию
Подбираем стиль, типографику, сетку, ритм, компоненты и общий характер интерфейса.
04 Готовим адаптивы
Проверяем, как макет работает на мобильных экранах, в формах и длинных текстах.
05 Передаем в разработку
Собираем Figma-файл, состояния, комментарии и обсуждаем реализацию с командой.

Портфолио

Проекты, где дизайн связан с задачей бизнеса

Все работы →

Абразивные материалы Полировка Новосибирск Интернет-магазин

MINAMO Разработка интернет-магазина автотематики "MINAMO"

Дизайн интерьера Маркет-плейс Новосибирск Интернет-магазин

RIDU Разработка маркетплейса стройматериалов "RIDU"

Полезное питание Новосибирск Корпоративный сайт

NUTRI'NCO Разработка сайта по доставки ПП "NUTRI'NCO"

Противопожарное оборудование Новосибирск Интернет-магазин Корпоративный сайт

Пирант Создание интернет-магазина "Пирант"

Коучинг Саморазвитие Новосибирск Корпоративный сайт

ROSTO Написание корпоративного сайта учебного центра "ROSTO"

Молочный комбинат Новосибирск Интернет-магазин

Коченёвская Бурёнка Разработка корпоративного сайта для завода "Коченёвская Бурёнка"

Террасная доска Новосибирск Интернет-магазин

DPK-NSK.RU Разработка интернет-магазина по продаже ДПК "DPK-NSK.RU"

Производство Мороженое Новосибирск Интернет-магазин

ПОЛЯРИС Создание интернет-магазина мороженного для завода "ПОЛЯРИС"

Обучающие курсы Парикмахер Визажист Маникюр Педикюр Новосибирск Корпоративный сайт

Beauty Point Разработка сайта учебного центра Beauty Point

Новосибирск Корпоративный сайт

Бестужевский бульвар Создание сайта для застройщика ЖК в Новосибирске "Бестужевский бульвар"

Modx Новосибирск Корпоративный сайт Интернет-магазин

PRIME IMPORT Разработка сайта по импорту автомобилей в Россию

Автомобили Барнаул Корпоративный сайт

Hyundai Доработка сайта грузовых автомобилей Hyundai

2014 работаю на стыке дизайна, SEO, рекламы и разработки

Руководитель студии

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

Меня зовут Кирилл Перфильев. Я профессиональный интернет-маркетолог и разработчик, который запустил более 300 проектов в 37 нишах. Поэтому смотрю на макет как на будущий рабочий сайт: реклама, SEO, заявки, CMS, скорость, поддержка и развитие.

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

300+ запущенных проектов

37 ниш бизнеса

10+ лет в SEO

80 млн ₽+ рекламного бюджета

UX/UI Figma SEO MODX Laravel Яндекс Директ Google Ads

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

Figma, UI-kit и разработка

Выстраиваем макет так, чтобы его можно было быстро превратить в сайт

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

design system REDBE / figma handoff

Figma

Фреймы, сетки, компоненты, варианты, комментарии и аккуратная структура файла.

single source of truth

UX-прототип

Сценарии пользователя, порядок блоков, CTA, логика формы и коммерческие акценты.

сначала логика

UI-kit

Кнопки, поля, карточки, типографика, цвета и состояния для повторяемых элементов.

масштабирование

Handoff

Передача в верстку с пониманием адаптива, CMS, анимаций и интерактивных состояний.

меньше переделок

design.goal = "leads";
ux.map(user_path);
figma.frames = adaptive;
ui.kit = components;
seo.blocks = ready;
dev.handoff(specs);

Briefцель и ограничения

Wireframeлогика экранов

UI-kitкомпоненты

Launchпередача в разработку

FAQ

Вопросы по дизайну сайта и макету

Коротко о Figma, прототипе, адаптивах, цене и передаче в разработку

01Что входит в дизайн сайта?

Аналитика, структура, прототип, визуальная концепция, UI/UX, адаптивные версии, UI-kit, состояния элементов и подготовка макета к верстке.

02Чем макет отличается от прототипа?

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

03Вы делаете дизайн сайта в Figma?

Да. Макет собирается в Figma: фреймы, компоненты, сетка, UI-kit, адаптивные версии и комментарии для разработки.

04Сколько стоит разработка дизайна сайта?

Прототип страницы - от 35 000 ₽, дизайн лендинга - от 70 000 ₽, многостраничный сайт - от 120 000 ₽. Точная стоимость зависит от количества экранов, адаптивов и глубины UX.

05Сколько времени занимает дизайн?

Прототип обычно занимает 3-5 дней, лендинг - 1-2 недели, многостраничный сайт - 2-4 недели. Срок зависит от согласований и объема страниц.

06Нужен ли адаптивный макет?

Да. Если мобильная версия не продумана в дизайне, ее будут додумывать во время верстки. Это почти всегда приводит к компромиссам и лишним правкам.

07Можно заказать только дизайн без разработки?

Да. Мы можем подготовить только Figma-макет с прототипом, адаптивами, UI-kit и комментариями для вашей команды разработки.

08Подготовите макет к верстке?

Да. Структурируем файл, называем фреймы, собираем компоненты, показываем состояния, адаптивы, сетки и оставляем комментарии для разработчика.

09Можно сделать редизайн существующего сайта?

Да. В редизайне сначала смотрим текущую структуру, SEO, аналитику, слабые места интерфейса и только потом предлагаем новый визуал.

10Что будет после согласования макета?

Макет можно передать вашей команде или продолжить с REDBE: верстка, CMS, программирование, SEO-база, аналитика, запуск и дальнейшее развитие сайта.

Начнем с макета

Расскажите о задаче - предложим структуру, формат дизайна и ориентир по стоимости

Ваше имя Ваш телефон Что нужно сделать Согласен с политикой конфиденциальности