01 · дизайн сайтов и интерфейсов

Дизайн сайтови интерфейсов

Прототип, макеты в Figma и дизайн-система — комплект, готовый к вёрстке. Рисуем под свою разработку и отдельной услугой для вашей команды

Цена
от 120 000
Срок
от 2 недель

Шесть задач, с которыми приходят

Сайт с нуля и библиотека компонентов для чужой разработки — разные работы с разным составом. Считаем и делаем их по-разному

  • 01

    Дизайн сайта с нуля

    Есть услуга и есть клиенты, нет ни структуры, ни макетов. Собираем сайт с чистого листа — от порядка экранов до последней кнопки

    • Структура и прототип экранов
    • Два направления стиля на выбор
    • Макеты десктопа и телефона
    • Комплект, готовый к вёрстке
  • 02

    Редизайн существующего сайта

    Сайт работает и приносит заявки, но выглядит старше продукта и теряет людей на первом экране

    • Разбор нынешнего сайта по экранам
    • Что оставляем, что переделываем
    • Новый стиль на живых текстах
    • Переезд без потери смысла
  • 03

    Интерфейс кабинета и админки

    В этом экране работают каждый день по восемь часов. Важны таблицы, фильтры и то, как ведёт себя интерфейс при ошибке

    • Сценарии вместо красивых экранов
    • Таблицы, фильтры и поиск
    • Пустой экран, загрузка, ошибка
    • Разные роли и права на экранах
  • 04

    Дизайн-система и компоненты

    Когда экранов десятки, каждый следующий должен собираться из готовых деталей, а не рисоваться заново

    • Палитра, шрифты, сетка и отступы
    • Библиотека компонентов в Figma
    • Дизайн кнопок, полей и форм
    • Правила, как собрать новый экран
  • 05

    Макеты для мобильных экранов

    Телефон — первый экран, на котором увидят ваш сайт. Мобильный макет рисуем сразу, а не сжимаем десктопный в конце проекта

    • Отдельные макеты под узкий экран
    • Меню, формы и таблицы на телефоне
    • Кнопки под палец, а не под курсор
    • Проверка на длинных текстах
  • 06

    Авторская графика и иллюстрации

    Стоковые картинки делают сайт похожим на соседний. Иконки, схемы и иллюстрации рисуем под ваш проект

    • Иконки одним набором в SVG
    • Иллюстрации под ваши услуги
    • Схемы и инфографика для текстов
    • Обложки для соцсетей и писем

Путь проекта от брифа до вёрстки

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

  1. 01Бриф и аудитория

    Разбираем задачу

    Кто покупает, что мешает выбрать, какие экраны обязательны. Смотрим ваш нынешний сайт и то, что показывают конкуренты

  2. 02Проектирование

    Собираем прототип

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

  3. 03Направление

    Показываем два стиля

    Главный экран в двух вариантах — разных по характеру, но оба про вас. Выбираете направление, дальше все экраны идут в нём

  4. 04Макеты экранов

    Рисуем все состояния

    Каждый экран в десктопной и мобильной версии, с настоящими текстами. И рядом — пустой список, загрузка, ошибка, длинное название

  5. 05Библиотека

    Собираем дизайн-систему

    Цвета, шрифты, сетка и компоненты в одном файле. Новая страница собирается из готовых деталей за час, а не рисуется неделю

  6. 06Передача и надзор

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

    Отдаём исходники, иконки и спецификации, отвечаем на вопросы вёрстки и сверяем собранные страницы с макетом до самого запуска

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

  1. 01Прототип всех ключевых экранов
  2. 02Два направления стиля на выбор
  3. 03Макеты десктопа и мобильных экранов
  4. 04Состояния кнопок, полей и форм
  5. 05Пустой список, загрузка и ошибка
  6. 06Дизайн-система и библиотека компонентов
  7. 07Иконки и графика в SVG
  8. 08Шрифты с лицензией для веба
  9. 09Спецификации сеток и отступов
  10. 10Авторский надзор во время вёрстки

Отдаём так, чтобы приняла любая команда

Макеты уезжают разработчикам вместе с дизайн-системой, иконками и спецификациями. Вёрстка не додумывает отступы, цвета и состояния

В комплекте передачи: Figma, Дизайн-система, Макеты мобильных, Состояния кнопок и форм, Иконки в SVG, Шрифты и лицензии, Спецификации отступов, Передача исходников

Если у вас уже есть разработчики, работаем их привычным способом: файл в Figma с правами доступа, задачи в вашем трекере и созвон на вопросы по вёрстке. Макет без ответов на вопросы — половина работы

Дизайн, который доживает до запуска

Красивый макет из презентации часто разваливается в вёрстке: текст оказался длиннее, данных нет, экран уже. Мы проверяем это заранее

  • Настоящие тексты вместо рыбы

    В макет идут ваши заголовки и описания услуг. Чаще всего вёрстку переделывают именно из-за того, что настоящий текст оказался длиннее красивой заглушки

  • Пустой экран, загрузка и ошибка

    Отзывов пока нет, форма отправляется, платёж не прошёл. Эти три состояния рисуем сразу, иначе их придумывает разработчик на ходу

  • Длинное название не ломает блок

    Проверяем карточки и меню на крайних случаях: название в четыре слова, цена в семь знаков, фамилия, которая не помещается в строку

  • Сетка и отступы кратные

    Все расстояния кратны одному шагу. Верстальщик не угадывает 13 или 14 пикселей, а берёт значение из спецификации

  • Мобильный макет рисуется сразу

    Узкий экран идёт рядом с широким на каждом шаге. Так видно заранее, что меню, таблица и длинная форма переживут телефон

  • Компоненты вместо копий

    Кнопка, поле и карточка живут в библиотеке в одном экземпляре. Правка расходится по всем экранам сразу, а не остаётся только там, где о ней вспомнили

Сколько стоит дизайн сайта

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

  • Дизайн сайта-визитки

    от 120 000

    2 недели

    • До 5 экранов с мобильной версией
    • Прототип и два круга правок
    • Иконки и графика в SVG
    • Исходники в Figma со стилями
    Получить смету
  • Дизайн сайта компании

    от 300 000

    4–6 недель

    • До 20 экранов и типовые страницы
    • Два направления стиля на выбор
    • Дизайн-система и компоненты
    • Состояния форм, ошибок и пустых списков
    Получить смету
  • Интерфейс и дизайн-система

    от 600 000

    от 8 недель

    • Кабинет или админка по сценариям
    • Библиотека компонентов и правила
    • Мобильные макеты всех разделов
    • Авторский надзор до запуска
    Получить смету

Что удорожает проект

  • Десятки уникальных экранов: кабинет, калькуляторы, длинные формы
  • Авторские иллюстрации и трёхмерная графика вместо стоковых картинок
  • Фирменный стиль с нуля: знак, палитра, шрифтовая пара
  • Анимация интерфейса и кликабельный прототип с переходами
  • Две версии сразу: сайт и экраны мобильного приложения

Как проходит работа

  1. 01

    Бриф и смета

    1–2 дня

    Созвон на 30 минут: задача, аудитория, список экранов. На следующий день присылаем смету с этапами и сроком

  2. 02

    Прототип и стиль

    5–10 дней

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

  3. 03

    Макеты по этапам

    по смете

    Показываем экраны частями и правим до согласования. Каждый этап закрываем актом, оплата по этапам

  4. 04

    Передача и надзор

    30 дней

    Отдаём исходники и спецификации, отвечаем вёрстке и сверяем собранные страницы с макетом. Месяц надзора входит в цену

Частые вопросы

Открыт 01 из 07

Не нашли свой вопрос — задайте его в Телеграме, ответим в рабочее время

Спросить в Телеграме
  1. От 120 000 ₽ за визитку, дальше — по числу экранов

    Считаем не «за сайт», а по экранам и состояниям: сколько уникальных страниц, нужна ли мобильная версия каждой, есть ли кабинет и формы. Сайт-визитка — от 120 000 ₽, сайт компании с дизайн-системой — от 300 000 ₽. Точную сумму называем после брифа и не меняем её, пока не меняется задача

  2. Да, услуги веб-дизайнера берём отдельно

    Дизайн берём и связкой «веб-разработка и дизайн», и отдельной услугой — только макеты для вашей команды. Во втором случае отдаём исходники, дизайн-систему и спецификации, а во время вёрстки отвечаем на вопросы разработчиков и сверяем собранные страницы с макетом

  3. Файл в Figma со слоями, компонентами и стилями

    Макеты десктопа и телефона, библиотека компонентов, палитра и шрифтовые стили, иконки в SVG, спецификации сеток и отступов. Файл передаём вам целиком: дальше его может вести любая студия или штатный дизайнер

  4. Да, это первый тариф

    Маленький сайт делаем по той же схеме, только короче: прототип, один стиль, пять экранов с мобильной версией и иконками. Если задача ещё меньше — скажем честно, что хватит готового шаблона, и не будем продавать лишнее

  5. Они входят в любой проект

    Мобильный дизайн сайта идёт рядом с десктопным на каждом шаге, а не пририсовывается в конце. Отдельно проверяем меню, таблицы, длинные формы и размер кнопок под палец

  6. Два круга на каждом этапе

    Прототип, стиль и макеты правим по два раза на этапе — этого обычно хватает. Если после согласования меняется сама задача (появляется новый раздел или кабинет), считаем это отдельной работой и заранее называем сумму

  7. Работаем в нём, стиль не переизобретаем

    Берём ваш брендбук: знак, цвета, шрифты — и разворачиваем их в элементы веб-дизайна, которых в брендбуке обычно нет: кнопки, поля, карточки, таблицы, состояния. Если брендбука нет, рисуем минимальный набор правил прямо в дизайн-системе

Обсудим дизайн проекта

Расскажите, что за проект и к какому сроку нужны макеты. Работаем по Москве и удалённо: ответим в рабочее время в течение двух часов, смету пришлём на следующий день

Что нужно нарисовать

Нажимая кнопку, вы соглашаетесь на обработку персональных данных