Дизайн сайта
Проектируем внешний вид и поведение нужных страниц. Передаем рабочий файл Figma, по которому ваша команда или специалисты Менокома смогут сверстать сайт.
- Нужные типы страниц и ключевые экраны
- Мобильные экраны для важных сценариев
- Состояния форм, кнопок и других элементов
- Рабочий файл Figma с комментариями для передачи
Из чего состоит комплект макетов
Набор страниц, мобильных экранов и состояний зависит от задачи сайта. Простая посадочная страница и каталог с фильтрами требуют разной глубины проработки.
Один макет становится основой визуального направления
Выбираем страницу, на которой можно увидеть основные решения проекта вместе. Ее прорабатываем первой, а подробный порядок работы раскрываем ниже.
- Главная, посадочная или другая страница, которая лучше всего раскрывает задачу проекта.
Каждый нужный тип страницы получает свой макет
Каталог, карточка, услуга, статья и контакты решают разные задачи. Поэтому мы проектируем уникальные типы страниц, а не механически размножаем один шаблон.
- Нужные проекту типы страниц в подходящей для них глубине.
Важные сценарии продумываем для узкого экрана
Показываем, как меняются навигация, порядок блоков и ключевые действия на мобильных устройствах. Перечень экранов зависит от сценариев конкретного сайта.
- Ключевые мобильные экраны и переходы, нужные для проекта.
Макет показывает не только спокойный экран
Для важных элементов показываем нужные состояния: например, ввод данных, ошибку, успешную отправку, открытое меню или выбранный фильтр. Перечень определяем по функциям сайта.
- Формы, меню, фильтры и другие важные интерактивные элементы.
Общие решения собираем последовательно
Кнопки, поля, карточки, заголовки и навигация должны выглядеть и работать единообразно. Выделяем элементы, которые повторяются на выбранных страницах и понадобятся при верстке.
- Набор зависит от страниц, функций и состояний конкретного проекта.
Команда разработки получает рабочий файл
Открываем доступ к Figma и поясняем решения, которые важно учесть при верстке. Если разработку продолжает Меноком, тот же файл становится основой следующего этапа.
- Макеты, состояния, повторяемые элементы и комментарии, вошедшие в проект.
Выберите результат, который нужен дальше
Главное различие — кто определяет структуру и кто превращает макеты в работающий сайт.
Самостоятельный комплект макетов
от 12 000 руб.Результат — рабочий файл Figma со страницами, мобильными экранами, состояниями и комментариями для ваших разработчиков.
Подходит, еслиструктура и тексты уже подготовлены, а версткой и программированием займется ваша команда.
Риск неверного выбораЕсли структура еще меняется, разработчикам придется самостоятельно восполнять решения, которых нет в макетах.
Проектирование плюс дизайн
от 12 000 руб. плюс прототип от 9 000 руб.Результат включает сначала структуру и логику будущих страниц, а затем их визуальные макеты.
Подходит, еслипока неясны разделы, содержание экранов или путь посетителя к целевому действию.
Риск неверного выбораЕсли пропустить проектирование при таких вводных, оформление начнется раньше, чем решится устройство сайта.
Разработка готового сайта
Оцениваем отдельноРезультат — работающий сайт с дизайном, версткой и программированием; при необходимости подключаем CMS.
Подходит, еслинужен запуск и нет отдельной команды, которая возьмет реализацию макетов.
Риск неверного выбораЕсли заказать только дизайн, после Figma все равно понадобятся верстка и код, а для части проектов — настройка системы управления.
Цены на дизайн
- Локальный экран или блок — от 12 000 руб.
- Лендинг или одна страница — от 25 000 руб.
- Корпоративный сайт — от 45 000 руб.
- Премиум-корпоративный — от 75 000 руб.
- Каталог или магазин — от 90 000 руб.
- Портал, кабинет, сервис — по смете от 120 000 руб.
- Доработка после утверждения — 3 000 руб./час
Объем определяют экраны и сценарии
- Уникальные типы страниц и ключевые сценарии
- Мобильные экраны и состояния интерфейса
- Готовность структуры, прототипа и текстов
- Сложность данных и число участников со стороны заказчика
Два сайта с одинаковым названием услуги могут требовать разного набора макетов. Точную стоимость и срок определяем после знакомства с вводными. Так оценка относится к вашему проекту, а не к условному сайту вообще.
Как формируется оценка
Проектирование, дизайн и разработка не складываются в единый пакет автоматически. Оцениваем только выбранные этапы и нужные на них работы.
Границы услуги до начала верстки
Дизайн показывает внешний вид и поведение согласованных экранов. Проектирование структуры, исследование, написание текстов, съемка и обработка материалов, верстка и программирование относятся к отдельным видам работ.
Отдельно, если это нужно проекту
Техническое задание и большой прототип
Подробное описание функций и интеграций, а также проработка структуры и логики множества экранов могут стать отдельным этапом.
Маркетинговое исследование
Анализ рынка, аудитории, конкурентов и позиционирования заказывают отдельно, когда он нужен для решений по сайту.
Тексты
Написание и редактура текстов оцениваются отдельно. Для точного макета нужен хотя бы их рабочий объем.
Фото и видео
Фотосъемку, видеосъемку, монтаж, подбор и обработку материалов можно добавить как самостоятельные работы.
Айдентика
Если логотипа и фирменного стиля еще нет, их разработка становится отдельной задачей. Готовые материалы используем в макетах.
Лицензии на платные материалы
Шрифты, фотографии, иллюстрации и другие платные материалы приобретаются отдельно по согласованному перечню.
Верстка
Превращение макетов в страницы сайта — следующий самостоятельный этап.
Программирование и подключение CMS
Функции, интеграции и систему управления разрабатывают после дизайна и оценивают отдельно.
Приемка работы внешнего разработчика
Проверку реализации и контроль кода сторонней команды нужно согласовать как отдельную работу.
Точный перечень страниц, экранов и состояний фиксируется до начала.
Чем дизайн отличается от прототипа
Если структура не определена, проектирование может понадобиться раньше визуального дизайна.
Прототип определяет структуру, содержание и логику экранов.
Дизайн добавляет визуальное направление и подробно показывает, как выглядят страницы, элементы и состояния.
Дизайн — сайты, которые мы сделали: общие примеры выполненных сайтов Менокома, а не подтверждение отдельного заказа только на дизайн-макеты.
Сайты, которые мы сделали
Посмотрите, как мы работаем с разными задачами, содержанием и устройством страниц. Это общие примеры выполненных сайтов Менокома, а не подтверждение отдельного заказа только на дизайн-макеты.
Сайт-каталог с сотнями товаров, фильтрами и региональными страницами.
Посмотреть проект →
Сайт академии тенниса с занятиями, тренерами, расписанием и ценами.
Посмотреть проект →
Сайт школы финансовой грамотности с программами и онлайн-оплатой.
Посмотреть проект →
Корпоративный сайт с услугами, ценами, проектами и статьями.
Посмотреть проект →
Сайт сети центров кузовного ремонта с услугами и быстрым обращением.
Интернет-магазин морепродуктов с каталогом и оформлением заказа.
Интернет-магазин электроинструмента с большим каталогом и поиском.
Сайт-каталог строительной компании с проектами домов и бань.
Корпоративный сайт компании с направлениями работы и каталогом продукции.
Интернет-магазин косметики с каталогом, акциями и подборками.
Сайт детейлинг-центра с услугами, ценами и записью.
Златолит-Урал
Определим набор дизайн-макетов и подготовим оценку
Напишите, для какого сайта нужны макеты, какие страницы вы планируете, что уже подготовлено и кто будет верстать.
- Стоимость и срок — после знакомства с вводными
- Техническое задание для первого сообщения не обязательно
- Макеты для вашей команды или специалистов Менокома
Вводные, которые экономят переделки
Чем яснее задача к работе над ключевым макетом, тем меньше решений придется пересматривать на следующих страницах.
Структура или прототип
Начните со структуры или прототипа: какие разделы и типы страниц нужны, что посетитель должен на них узнать или сделать. Профессиональное техническое задание для первого сообщения не обязательно. Если структура пока не определена, может понадобиться отдельное проектирование.
Тексты
Подготовьте тексты или хотя бы их рабочую версию. Реальный заголовок, таблица характеристик и объем описания влияют на композицию сильнее, чем условные строки-заполнители.
Фирменный стиль и материалы
Соберите логотип, фирменные цвета, шрифты и правила, если они уже приняты. Добавьте фотографии, иллюстрации и другие материалы, которые точно должны появиться на сайте.
Референсы с пояснениями
Покажите референсы и поясните, что именно в них полезно: навигация, плотность страницы, подача каталога или характер графики. Список ссылок без пояснений оставляет слишком много вариантов толкования.
Мобильные сценарии и особые состояния
Назовите ключевые мобильные сценарии и особые состояния: например, длинную форму, фильтрацию каталога или экран без результатов. Так их можно учесть в макетах, а не обнаружить только на верстке.
От вводных к комплекту макетов
Сначала проверяем визуальную основу на одной важной странице, затем раскрываем ее на остальных экранах.
- 01
Собираем вводные
Собираем задачу сайта, структуру, тексты, фирменные материалы, референсы и технические ограничения. Так становится видно, какие типы страниц, мобильные сценарии и состояния предстоит проработать.
- 02
Делаем ключевой макет
Выбираем страницу, на которой одновременно видны характер содержания, навигация, основные действия и повторяемые элементы. Она становится ключевым макетом: на конкретном экране можно проверить, как композиция, типографика, цвета и графика работают вместе, а не обсуждать каждое решение в отрыве от остальных.
- 03
Переносим решения на остальные страницы
Разбираем замечания к ключевому макету и уточняем визуальную основу. После этого переносим принятые решения на остальные типы страниц, меняя композицию там, где другая задача или содержание требуют иного устройства.
- 04
Готовим мобильные экраны и состояния
Для важных сценариев готовим мобильные экраны и состояния элементов. Простой странице и каталогу с фильтрами нужна разная детализация, поэтому набор таких экранов следует за функциями сайта.
- 05
Сверяем результат с согласованным составом
До начала фиксируем типы страниц, ключевые мобильные экраны и состояния, которые должны быть показаны. По этому перечню проверяем комплект: каждый согласованный результат должен быть доступен в рабочем файле.
- 06
Передаем рабочий файл
После согласования передаем доступ к Figma и комментарии, необходимые для дальнейшей верстки. Ваша команда получает не набор картинок, а рабочий источник с принятой структурой макетов и повторяемыми элементами.
Почему Меноком
Нас стоит выбирать, если важно связать визуальные решения с устройством страниц и будущей разработкой.
Дизайн связан с разработкой
Работаем с сайтами с 2004 года, поэтому уже на макете проверяем зависимости от будущей верстки, программирования и CMS.
Понимаем дальнейшую верстку и CMS
Еще на макетах задаем вопрос, можно ли последовательно собрать придуманное решение и как оно поведет себя с реальными данными.
Обсуждаем решения на конкретном экране
На ключевом макете спорные детали видны в окружении текста, навигации и других элементов, а не как отвлеченные образцы.
Проверяем приоритеты узкого экрана
Смотрим, какое действие должно остаться главным, когда места меньше, а блоки выстраиваются в одну колонку.
Различаем типы страниц
Отделяем повтор одного шаблона от страницы с другой задачей, данными или пользовательским сценарием.
Разделяем вопросы дизайна и разработки
Не смешиваем решение о внешнем виде экрана с написанием текста, версткой, программированием и подключением CMS.
Отзывы клиентов
Благодарственные письма на бланках компаний о разработке сайтов, в которых клиенты отмечают дизайн.
Фермер
Частые вопросы о дизайне сайта
Коротко о результате, границах услуги и подготовке к работе.
01Чем дизайн отличается от прототипа?
Прототип определяет структуру, содержание и логику экранов. Дизайн добавляет визуальное направление и подробно показывает, как выглядят страницы, элементы и состояния. Если структура не определена, проектирование может понадобиться раньше визуального дизайна.
02Входит ли верстка в стоимость дизайна?
Нет. Результат этой услуги — комплект макетов в Figma. Верстку, программирование и подключение CMS оцениваем отдельно, если вы хотите продолжить разработку с Менокомом.
03Можно ли передать макеты своей команде?
Да. Вы получите доступ к рабочему файлу Figma и комментарии к макетам. По ним ваша команда сможет продолжить верстку и программирование. При передаче сторонней команде мы отвечаем за согласованный комплект макетов и пояснения к нему. Качество кода и соответствие реализации макетам требуют отдельной проверки, если разработку выполняют другие специалисты.
04Нужен ли готовый текст для дизайна?
Желательно подготовить хотя бы рабочую версию. Объем заголовков, описаний, таблиц и карточек влияет на композицию. Написание и редактура текстов в самостоятельный комплект макетов не входят.
05Входит ли мобильная версия?
В комплект могут входить ключевые мобильные экраны. Их выбираем по основным действиям посетителя и отличиям от версии для компьютера; одинаковая глубина для всех проектов не предполагается.
06Сколько вариантов визуального направления вы подготовите?
Объем вариантов зависит от того, что требуется для обоснованного выбора направления на ключевом макете. В договоренности будет указано, какие материалы мы показываем и по каким признакам выбираем основу для остальных страниц.
07Сколько этапов замечаний предусмотрено?
Порядок зависит от числа участников и способа собирать их комментарии. В описании работы будет видно, кто объединяет замечания, в какой момент они поступают и по какому признаку можно переходить от ключевого макета к остальным страницам.
08Что входит в UI-kit?
Глубина зависит от элементов, которые действительно повторяются на выбранных страницах, и состояний, нужных для их верстки. До начала в перечне работ фиксируем конкретные элементы, состояния и форму их передачи. Отдельную библиотеку по умолчанию не обещаем.
09Кто покупает шрифты, фотографии и другие платные материалы?
Платные лицензии не входят в дизайн по умолчанию. Если такие материалы понадобятся, согласуем перечень и порядок приобретения.
10Что еще оценивается отдельно?
Дизайн показывает внешний вид и поведение согласованных экранов. Отдельно, если это нужно проекту, оцениваются техническое задание и большой прототип, маркетинговое исследование, фотосъемка, видеосъемка, монтаж, подбор и обработка материалов, разработка логотипа и фирменного стиля, если их еще нет, а также приемка работы внешнего разработчика. Готовые материалы используем в макетах.
11Что считается новым объемом после согласования?
Новые типы страниц, мобильные сценарии, функции или состояния, которых не было в принятом перечне работ. Их сначала описываем, затем отдельно оцениваем изменение задачи.
12Можно ли заказать дизайн одной страницы?
Да, если задача действительно ограничена одной страницей и понятны ее состояния и мобильный сценарий. В результате должны быть прямо названы сама страница и дополнительные экраны, иначе за одним названием может скрываться разный объем.
13Сколько стоит дизайн сайта?
Экран или блок — от 12 000 руб., лендинг — от 25 000 руб., корпоративный сайт — от 45 000 руб., премиум-корпоративный — от 75 000 руб., каталог или магазин — от 90 000 руб., портал, кабинет или сервис — по смете от 120 000 руб. На объем влияют типы страниц, мобильные сценарии, состояния, сложность данных и готовность структуры и текстов. После вводных мы можем оценить конкретный комплект, а не усредненный сайт с неизвестным устройством.
Дизайн или сайт под ключ
Если вам нужен запуск, а не только макеты, выберите услугу разработки. Ее результат — работающий сайт с версткой и программированием; CMS подключаем, когда она нужна проекту.
Расскажите, какой дизайн вам нужен
Напишите, для какого сайта нужны макеты, какие страницы вы планируете, что уже подготовлено и кто будет верстать. По этим вводным мы определим набор дизайн-макетов и подготовим оценку.
