Дизайн сайта / макет в 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-база, аналитика, запуск и дальнейшее развитие сайта.

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

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

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