Какую задачу решает
Запутанная навигация, непонятные кнопки или длинная форма останавливают пользователя — и это часто видно только после запуска, по потерянным заявкам. Прототип позволяет заметить и исправить эти проблемы до программирования, пока изменения дёшевы.
Для кого
Авторы новых цифровых продуктов, стартапы, бизнес, который хочет улучшить опыт существующего сайта или приложения, и команды разработки, которым нужен готовый структурированный дизайн.
UX: структура и путь пользователя
Работа над UX начинается до рисования интерфейса. Определяем, кто пользователь, с какой задачей он приходит и какими шагами достигает цели. Создаём карту страниц, иерархию информации и схемы экранов (wireframes) — чёрно-белые макеты, в которых сначала согласуется логика, а не цвета. Именно на этом этапе возникает большинство вопросов: где должна быть цена, сколько полей нужно форме, что посетитель видит на первом экране.
UI: визуальная система и компоненты
На этапе UI схемы получают фирменный стиль: цвета, шрифты (с учётом особенностей грузинской типографики), кнопки, поля форм, карточки и их состояния — обычное, наведение, активное, отключённое, ошибка. Компоненты собираются в систему в Figma, чтобы добавление новой страницы не начиналось каждый раз с нуля, а у разработчика были точные, повторяемые правила.
Интерактивный прототип
Прототип в Figma показывает экраны и переходы между ними на реальном устройстве — нажимая кнопку, вы переходите на следующий экран, как если бы продукт уже существовал. Это позволяет принимать решение по осязаемому результату, показывать команде или инвестору и проверять с пользователями до начала программирования.
Передача дизайна разработчику
Дизайн завершён, когда его можно точно реализовать. Готовим структурированные файлы: библиотеку компонентов, размеры и отступы, переменные цветов и шрифтов, мобильные и настольные версии экранов, экспортированные иконки и изображения. Если проект программируем мы сами (сайт или приложение), этот этап продолжается без разрывов.
Что входит в услугу
- Пользовательские пути, карта страниц и структура информации
- Схемы экранов (wireframes) и их согласование
- Визуальный стиль: цвета, типографика, компоненты и их состояния
- Мобильная и настольная версии каждого экрана
- Интерактивный прототип в Figma для обсуждения и проверки
- Базовые правила доступности: контраст, размеры, читаемость
- Дизайн-система и структурированная передача разработчику
- Согласованное количество раундов правок
Этапы работы
1. Знакомство
Определяем цель, аудиторию и основные функции.
2. Дизайн
Согласовываем структуру, стиль и путь пользователя.
3. Разработка
Создаём и проверяем согласованные функции.
4. Запуск
Готовим публикацию, доступы и план поддержки.
Выбор технологии
Окончательный выбор делаем после обсуждения требований. Ниже — возможные направления.
Что влияет на срок
Срок определяют количество экранов, сложные состояния (пустые списки, ошибки, загрузка), объём исследования и необходимость тестирования. Скорость обратной связи на каждом раунде напрямую влияет на срок.
Что влияет на стоимость
Стоимость зависит от количества экранов и сценариев, масштаба дизайн-системы, исследования и объёма согласованных правок. В проекте сайта или приложения дизайн обычно входит в общую стоимость; отдельный дизайн-проект оценивается после короткого обсуждения. См. страницу стоимости.
Стоимость ↗Поддержка после запуска
Вместе с продуктом развивается и дизайн-система — новые экраны и компоненты добавляются по тем же правилам, по желанию в формате постоянного сотрудничества.
Почему webandapp
Фиксируем задачу, согласовываем этапы и определяем результат до начала разработки. Вы видите, что входит в работу и что нужно обсудить отдельно.
Вопросы
Чем отличаются UI и UX?
UX охватывает путь выполнения задачи — структуру, шаги, логику. UI — видимый интерфейс и его компоненты: цвета, шрифты, кнопки. Оба должны работать вместе.
Прототип — это рабочее приложение?
Нет. Он показывает экраны и переходы на реальном устройстве; серверные функции, авторизация и данные требуют отдельной разработки.
Вы используете существующий фирменный стиль?
Да. Предоставьте логотип, цвета, шрифты и действующие правила. Если фирменного стиля нет, базовую визуальную систему создаём в рамках проекта.
Мобильный дизайн входит?
Да — размеры экранов и их состояния прописываются в объёме работ. Для сайта мобильная версия обязательна, и часто именно с неё мы начинаем.
Я получу файлы?
Да. Передаваемые файлы и права использования определяются заранее. Файл Figma передаётся в структурированном виде вам или вашему разработчику.