UX/UI дизайн для сайта и приложения в Бишкеке: процесс, цены, ошибки
Клиент приходит с запросом: "Сделайте нам красивый сайт, как у Apple, только с нашими цветами." Дизайнер делает красиво. Продукт запускается. Через месяц владелец смотрит в аналитику: конверсия 0.8%, люди уходят с главной страницы в первые 15 секунд, форма заявки не заполняется вообще.
Что пошло не так? Сайт красивый. По-настоящему красивый. Просто он не работает.
Это самая распространённая проблема в дизайне, которую мы видим на рынке Бишкека. Заказчик хочет красоту - и получает красоту. Но красота и юзабилити - разные вещи. Можно нарисовать потрясающий по виду интерфейс, который пользователь не поймёт за первые 5 секунд. А можно сделать внешне скромный, но такой понятный продукт, что конверсия растёт втрое.
Разница между этими двумя подходами - в понимании UX и UI, и в том, как выстроен процесс дизайна.
UX vs UI: в чём разница
Эти аббревиатуры часто путают, используют как синонимы, или вообще произносят одним словом "юиксюай". Разберём раз и навсегда.
UX (User Experience, пользовательский опыт) - это про то, как человек взаимодействует с продуктом. Структура страниц, навигация, логика переходов, сценарии использования. UX отвечает на вопросы: куда нажать, чтобы найти цены? Сколько шагов нужно пройти, чтобы оформить заказ? Понимает ли пользователь, что произошло после его действия?
UI (User Interface, пользовательский интерфейс) - это про то, как продукт выглядит. Цвета, типографика, иконки, кнопки, отступы, анимации. UI отвечает на вопросы: какой шрифт, какой оттенок синего, насколько скруглены углы кнопок.
Хорошая аналогия, которую мы используем на брифингах: UX - это план квартиры, UI - это ремонт.
Можно сделать великолепный ремонт с мраморными полами и дизайнерскими светильниками. Но если в плане квартиры ванная комната у входа, а кухня в дальнем углу без окон - жить в ней будет неудобно. Красота ремонта не компенсирует плохую планировку.
То же самое в дизайне продукта. Идеальная цветовая палитра и красивые иллюстрации не спасут сайт, где кнопка "Купить" спрятана ниже четвёртого экрана, а форма заказа требует 12 обязательных полей.
Почему нельзя начинать с UI без UX?
Потому что тогда приходится переделывать. Это выглядит так: дизайнер нарисовал красивые экраны. Клиент одобрил. Разработчик начал верстать. На этапе тестирования выяснилось, что пользователи не понимают, как перейти в корзину. Нужно переделывать структуру - а значит, частично переделывать и дизайн. Деньги потрачены дважды.
Правильный порядок: сначала выстраивается логика и структура (UX), потом всё это одевается в визуальный образ (UI).
Этапы дизайн-процесса
Профессиональный дизайн-процесс состоит из шести этапов. Пропуск любого из них - это риск переделок позже.
1. Исследование
Перед тем как открыть Figma, дизайнер должен ответить на три группы вопросов:
- Пользователи: кто они? Какие задачи решают с помощью продукта? Где спотыкаются на текущем сайте (если он уже есть)? Какие устройства используют?
- Конкуренты: как устроены их сайты? Что работает, что нет? Где можно взять лучшее, где - сделать иначе?
- Бизнес-цели: что должен делать продукт? Собирать заявки? Продавать онлайн? Информировать? Главная страница интернет-магазина и главная страница юридической фирмы решают разные задачи - и должны быть устроены по-разному.
Для бишкекских проектов на этом этапе часто выясняется, например, что 70% трафика идёт с мобильных устройств - а значит, мобильная версия должна быть приоритетом, а не адаптацией десктопа.
Клиенту на этом этапе нужно участвовать активно: заполнить бриф, ответить на вопросы, предоставить аналитику (если есть). Чем больше информации - тем точнее будет дизайн.
2. Информационная архитектура
На этом этапе выстраивается структура: какие страницы или экраны нужны, как они связаны между собой, какие элементы присутствуют на каждой странице.
Результат - карта сайта (sitemap) или схема экранов приложения. Это ещё не дизайн, это скелет логики. Клиент видит: главная → каталог → карточка товара → корзина → оформление заказа → подтверждение. И может сказать: "Подождите, мы хотим, чтобы можно было сравнивать товары." Лучше сказать это здесь, а не когда дизайн уже готов.
3. Wireframes
Wireframes - это чёрно-белые "скелеты" экранов. Никаких цветов, никаких красивых шрифтов. Только блоки, текст, расположение элементов.
Цель wireframes - проверить логику и расположение до того, как начнётся визуальный дизайн. Клиент на этом этапе должен смотреть не на цвета (их ещё нет), а на структуру: правильно ли расположен блок с ценами, удобно ли расположены кнопки действий, не перегружена ли страница.
Многие клиенты в Бишкеке хотят пропустить этот этап - "давайте сразу красивый дизайн". Мы не рекомендуем. Правки в wireframe занимают час. Те же правки в готовом дизайне - полдня.
4. Прототип
Кликабельный прототип - это wireframes или ранний дизайн, по которому уже можно "ходить" как по настоящему продукту. Нажимаешь на кнопку - переходишь на следующий экран.
Прототип позволяет протестировать сценарии использования до начала разработки. Дать пользователям задание: "Попробуйте найти наш прайс-лист." Посмотреть, куда они тыкают. Исправить то, что не работает.
В Figma прототипирование встроено - не нужны дополнительные инструменты.
5. Визуальный дизайн
Только теперь начинается "красота". Применяются цвета, шрифты, иконки, фотографии, анимации. Строится дизайн-система (о ней ниже).
На этом этапе важно не потерять логику wireframes в погоне за визуальным эффектом. Хороший дизайнер помнит: каждый визуальный элемент должен работать на пользователя, а не просто выглядеть эффектно.
6. Design Handoff
Передача дизайна разработчикам - отдельный этап, который часто недооценивают. Если дизайнер просто отправляет PNG-картинки, разработчик будет угадывать отступы, размеры шрифтов и поведение анимаций. Это приводит к расхождению между дизайном и реализацией.
Правильный handoff - это Figma с настроенным Dev Mode, где разработчик видит все параметры: отступы, цвета в HEX/RGB, шрифты с размерами и весами, экспортированные ассеты.
Инструменты: почему все работают в Figma
В 2026 году Figma - безусловный стандарт для UX/UI дизайна. Так было не всегда: несколько лет назад конкурировали Sketch (только Mac), Adobe XD, InVision, Framer. Figma выиграла по трём причинам:
Работает в браузере. Не нужна установка, работает на Windows, Mac, Linux. Клиент открывает ссылку и видит дизайн в браузере - без регистрации и скачивания.
Совместная работа в реальном времени. Несколько дизайнеров работают в одном файле одновременно. Разработчик заходит и смотрит параметры прямо в рабочем файле.
Figma Dev Mode. Специальный режим для разработчиков: можно кликнуть на любой элемент и увидеть его CSS-свойства, отступы, шрифты. Разработчику не нужно угадывать - всё прописано.
Что такое Design System?
Design System (дизайн-система) - это набор переиспользуемых компонентов и правил: кнопки всех состояний (обычная, наведение, нажатие, неактивная), поля ввода, карточки, модальные окна, цветовая палитра, типографическая шкала.
Дизайн-система нужна не всем. Для лендинга или небольшого корпоративного сайта - избыточно. Но если продукт будет расти, если над ним будут работать несколько дизайнеров, если планируется мобильное приложение параллельно с веб-версией - Design System окупится многократно. Изменить цвет бренда в продукте с дизайн-системой - это 5 минут. Без неё - полдня поиска всех вхождений.
Сколько стоит дизайн в Бишкеке
Рынок дизайна в Кыргызстане неоднороден. Можно найти студента с Figma за 10,000 сом и опытную команду с портфолио за несколько сотен тысяч. Разброс огромный - и он обоснован.
Ниже - ориентировочные цены на 2026 год для профессионального дизайна (не самый дешёвый рынок, но и не международные ставки):
| Тип проекта | Диапазон цен |
|---|---|
| Дизайн лендинга (1 страница) | 30 000 – 70 000 сом |
| Корпоративный сайт (5–10 страниц) | 70 000 – 150 000 сом |
| Мобильное приложение (20–30 экранов) | 100 000 – 250 000 сом |
| Сложный продукт с Design System | 250 000 – 600 000 сом |
Что влияет на цену:
- Количество экранов/страниц и их сложность. Лендинг с пятью блоками и интернет-магазин с каталогом, фильтрами, карточками товаров, корзиной и личным кабинетом - принципиально разные объёмы.
- Нужен ли прототип и UX-исследование. Если клиент приходит с готовой структурой и аналитикой - дешевле. Если нужно всё с нуля - дороже.
- Design System. Создание дизайн-системы - это отдельная работа, которая добавляет 30–50% к стоимости, но потом экономит время на всех будущих задачах.
Фрилансер vs студия: честное сравнение
Фрилансер дешевле. Студия - надёжнее и комплексно.
Фрилансер-дизайнер в Бишкеке может взять лендинг за 25,000–40,000 сом и сделать хорошую работу. Риски: он может заболеть, уйти в другой проект, не иметь опыта в вашей нише. Если нужен только дизайн - окей.
Студия включает дизайнера, арт-директора (который проверяет качество), менеджера проекта (который держит дедлайны) и часто разработчиков. Цена выше, но вы получаете продукт, а не просто файл в Figma. Если планируете разработку после дизайна - логично работать с одной командой.
Для разработки сайтов и мобильных приложений мы в Aunimeda работаем полным циклом: от UX-исследования до запуска и поддержки.
Типичные ошибки кыргызских сайтов
За годы работы с проектами в Бишкеке и регионах мы видели одни и те же проблемы раз за разом. Вот семь самых распространённых:
1. Нечитаемый текст
Белый текст на светло-сером фоне. Серый текст на белом фоне с контрастностью 2:1. По стандарту WCAG минимальный контраст для обычного текста - 4.5:1. Мы регулярно видим сайты бишкекских компаний, где основной текст не проходит даже этот базовый тест. Пользователь устаёт читать и уходит.
2. Кнопки слишком маленькие для пальца
По рекомендациям Apple и Google минимальный размер интерактивного элемента на мобильном - 44×44 пикселя. На многих локальных сайтах кнопки 24×24. Пользователь с телефоном промахивается, нажимает не то, раздражается.
3. Нет визуальной иерархии
Заголовки, подзаголовки и основной текст - одинакового размера. Кнопки "Купить", "Подробнее" и "Контакты" выглядят одинаково. Взгляд пользователя не знает, куда идти. Хорошая иерархия работает как дорожные знаки: главное - большое и заметное, второстепенное - меньше, вспомогательное - совсем мелко.
4. Слишком много анимации
Пять разных анимаций на одной странице: блоки выезжают снизу, текст появляется по буквам, фон меняется при скролле, иконки вращаются, кнопки пульсируют. Анимация должна помогать пользователю понять, что происходит (обратная связь от действия, переход между состояниями). Когда анимация просто "для красоты" - она отвлекает и замедляет.
5. Форма с 15 полями
"Заполните форму: имя, фамилия, телефон, email, город, улица, дом, квартира, предпочтительное время звонка, как вы о нас узнали, тип компании, ИНН, количество сотрудников, желаемый бюджет, дополнительные комментарии." Пользователь видит это и закрывает вкладку.
Исследования показывают: каждое дополнительное поле в форме снижает конверсию на 5–10%. Для первичного контакта нужны имя и телефон. Остальное - при звонке.
6. Нет мобильной версии
В 2026 году это звучит дико, но такие сайты ещё встречаются. Либо нет адаптивности вообще, либо "адаптив" сделан так, что на телефоне всё сломано: текст вылезает за экран, кнопки накладываются друг на друга, изображения растянуты.
В Кыргызстане по данным аналитики большинства наших клиентов 60–75% трафика идёт с мобильных устройств. Сайт, который плохо работает на мобильном - это сайт, который плохо работает для большинства посетителей.
7. CTA не выделен
CTA (Call to Action - призыв к действию) - это главная кнопка, которую должен нажать пользователь: "Оставить заявку", "Получить консультацию", "Купить". На многих сайтах эта кнопка выглядит так же, как и второстепенные ссылки, тонет в общем оформлении или вообще отсутствует в первом экране.
Правило простое: на каждой странице должен быть один главный призыв к действию. Он должен быть заметен без скролла. Вокруг него должно быть достаточно пространства, чтобы взгляд притягивался именно к нему.
A/B тестирование и данные
Дизайн нельзя проверять "на глаз" или мнением коллег. "Мне нравится синяя кнопка" - это не аргумент. Аргумент - данные.
Hotjar - инструмент тепловых карт. Показывает, куда пользователи кликают, до какого места скроллят, где задерживаются. Бесплатный тариф покрывает большинство задач небольшого бизнеса.
Яндекс.Метрика - для русскоязычной аудитории удобнее Google Analytics в части тепловых карт и вебвизора (запись сессий пользователей). Можно буквально смотреть, как конкретный человек взаимодействовал с сайтом.
Google Optimize (или его современные альтернативы) - A/B тестирование. Половина посетителей видит вариант A, половина - вариант B. Через неделю-две данных достаточно, чтобы сделать вывод, что работает лучше.
Пример из реальной практики: у одного из наших клиентов в Бишкеке (интернет-магазин электроники) кнопка "Добавить в корзину" была серой - "чтобы не бросалась в глаза". Мы заменили на насыщенный синий. Конверсия карточки товара выросла на 23% за три недели теста. Никаких других изменений не делалось.
Другой пример: сокращение формы заявки с 8 полей до 3 (имя, телефон, комментарий) увеличило количество заявок вдвое - при том же трафике.
Данные не лгут. Дизайн должен тестироваться, а не утверждаться на основе вкусов директора.
Дизайн для мобильных в Кыргызстане: особенности рынка
Дизайн для мобильных приложений и мобильных версий сайтов в Кыргызстане имеет свою специфику, которую важно учитывать.
Android доминирует. По нашим данным и данным клиентов, доля Android в Кыргызстане - около 84%. Это важно: Android-устройства значительно разнообразнее по размерам экранов, чем iPhone. Дизайн должен проверяться на нескольких типах экранов - от компактных 5-дюймовых до больших 6.7-дюймовых.
Бюджетные устройства. Значительная часть пользователей имеет телефоны нижнего и среднего ценового сегмента. Это означает: процессор слабее, память ограничена. Тяжёлые анимации, десятки шрифтовых начертаний, несжатые изображения - всё это приводит к тормозам на реальных устройствах, которые используют ваши клиенты.
Медленный интернет в регионах. За пределами Бишкека скорость мобильного интернета существенно ниже. Страница с изображениями без оптимизации может грузиться 10–15 секунд. Пользователь не ждёт - уходит.
Что это означает для дизайна:
- Изображения - только в WebP, оптимизированные по весу
- Минималистичный подход: только то, что нужно пользователю
- Контент первого экрана загружается приоритетно
- Критичные функции работают даже при слабом соединении
- Шрифты - системные или минимальное количество кастомных
Для мобильных приложений мы всегда учитываем реальное устройство целевой аудитории, а не только флагманские телефоны.
Отдельная тема - оффлайн-режим. Если приложение должно работать без интернета (например, приложение для курьеров в Ошской области, где связь нестабильна) - это закладывается в UX на этапе проектирования, а не как дополнение к готовому продукту.
Как оценить качество дизайна
Дизайн - не субъективное "нравится/не нравится". Его качество измеряется конкретными метриками.
Task Completion Rate (процент выполнения задач). Дайте 5–10 пользователям задание: "Найдите наш прайс и оставьте заявку на консультацию." Посмотрите, сколько из них справились без помощи. 80%+ - хороший результат. Меньше 60% - нужно переделывать.
Time on Task (время выполнения задачи). Как быстро пользователь выполняет целевое действие? Если оформление заказа занимает 7 минут - это проблема. На Wildberries - 2 минуты. Это ваш конкурент.
Error Rate (частота ошибок). Как часто пользователи нажимают не туда, получают ошибки валидации форм, кликают на некликабельные элементы? Высокий error rate - симптом плохой навигации или неочевидного интерфейса.
Bounce Rate (показатель отказов). Процент пользователей, которые зашли на страницу и сразу ушли, не совершив ни одного действия. Больше 70% на главной - сигнал тревоги. Хотя сам по себе bounce rate нужно смотреть в контексте: для новостных статей высокий показатель нормален.
NPS (Net Promoter Score). Один вопрос: "Насколько вероятно, что вы порекомендуете наш сервис?" по шкале 0–10. Простой и информативный индикатор общего впечатления.
Что спрашивать у дизайнера на брифинге:
- Покажите примеры проектов в нашей нише
- Как вы проводите UX-исследование?
- Сколько итераций правок входит в стоимость?
- В каком формате будет передача дизайна разработчикам?
- Есть ли опыт работы с проектами в Кыргызстане?
Последний вопрос важен: дизайнер, который работал только с европейскими или российскими проектами, может не учитывать специфику местного рынка - преобладание Android, языковые особенности (кириллица и кыргызский), локальные платёжные методы в интерфейсах.
FAQ
Можно ли обойтись без дизайнера?
Технически - да. Существуют конструкторы (Tilda, Wix, Webflow), где можно самостоятельно собрать сайт из готовых блоков. Для личного блога или простой визитки - вполне вариант.
Для бизнеса, где сайт или приложение - инструмент продаж, обходиться без профессионального дизайна рискованно. Первое впечатление о компании формируется за 50 миллисекунд. Шаблонный дизайн "как у всех" не выделяет вас среди конкурентов. А плохой UX напрямую снижает конверсию - а значит, выручку.
Нужен ли дизайн, если уже есть готовый шаблон?
Шаблон - хорошая отправная точка. Но шаблон создавался для абстрактного бизнеса, а не для вашего конкретного. Как правило, шаблон нужно адаптировать: переработать структуру под ваши реальные сценарии использования, убрать лишние блоки, добавить специфические для вашего продукта элементы.
Иногда работа с шаблоном выходит дороже, чем дизайн с нуля - потому что шаблон сопротивляется изменениям.
Кто лучше - фрилансер или студия?
Зависит от задачи. Если нужен только дизайн без разработки, и объём небольшой (лендинг, простой сайт) - хороший фрилансер справится дешевле. Если нужен полный цикл от концепции до работающего продукта, если важна предсказуемость сроков и наличие нескольких специалистов - студия надёжнее.
Сколько итераций правок входит в цену?
В нашей практике стандарт - две итерации на каждом этапе. Первая итерация - основные правки после первичной презентации. Вторая - финальные корректировки. Всё, что за пределами этого - доплата. Обговаривайте это на берегу и фиксируйте в договоре.
Правки бывают двух видов: в рамках технического задания ("цвет кнопки не тот") и изменение концепции ("давайте сделаем всё по-другому"). Второй вид - это фактически новая работа, и её стоимость должна считаться отдельно.
Что такое Design System и нужен ли он нам?
Design System - это библиотека компонентов и правил: все варианты кнопок, полей, иконок, цветов, шрифтов собраны в одном месте. Каждый новый экран собирается из этих компонентов, а не рисуется с нуля.
Нужен, если:
- Продукт будет активно развиваться (новые функции каждый квартал)
- Над дизайном работают два и более дизайнера
- Есть несколько платформ (веб + iOS + Android)
- Планируется масштабирование
Не нужен, если:
- Лендинг или небольшой сайт, который не будет существенно меняться
- Одноразовый проект без дальнейшей поддержки
Что дальше
Если вы читаете эту статью и думаете о сайте или приложении - хорошее место, чтобы начать, это разговор с командой, которая делала подобные проекты.
Мы в Aunimeda занимаемся разработкой сайтов, корпоративными сайтами и мобильными приложениями с полным дизайн-процессом - от UX-исследования до передачи в разработку и запуска.
На первом звонке мы задаём вопросы про ваш бизнес, аудиторию и цели - и честно говорим, какой объём дизайна реально нужен под вашу задачу. Иногда это минималистичный лендинг на 30,000 сом. Иногда - полноценный продукт с Design System. Главное, чтобы это решало задачу.
Написать нам - расскажите о своём проекте, и мы ответим в течение рабочего дня.