Сколько интерфейсов вы открыли сегодня? Утром банк. Потом такси. Заказали кофе через приложение. Проверили почту. И если всё прошло гладко, вы об этом даже не думали. Так работает хороший ui дизайн – его не замечаешь, пока он не сломается.

Мы в KOTELOV делаем интерфейсы с 2012 года. За это время поняли главное: дизайн пользовательского интерфейса – это не про красоту, а про понятность. Если пользователь думает, куда нажать – вы уже проиграли. Разберём, как этого избежать.

13 лет
опыта в UI дизайне
100+
сотрудников в команде
50+
крупных проектов

Что такое UI дизайн простыми словами

UI расшифровывается как User Interface. По-русски – интерфейс пользователя. Кнопки, формы, иконки, цвета, шрифты, анимации. Всё, к чему можно прикоснуться на экране.

Зачем это нужно? Чтобы человек быстро получил то, за чем пришёл. Три клика – и покупка оформлена. Пять секунд – и адрес найден. Без инструкций, без обучения, открыл и понял. В идеале так должно работать.

Редизайн сайта IT-компании

Где применяется:

Сайты и лендинги – тут всё понятно. Мобильные приложения под iOS и Android – сейчас это основной рынок. Десктопные программы никуда не делись, особенно в корпоративном сегменте. А ещё терминалы в банках, киоски самообслуживания, панели в автомобилях. Кстати, последние – отдельная боль, потому что там водитель отвлекаться не должен вообще.

Какие продукты делают это хорошо? Telegram, Notion, Apple в целом. Почему? Потому что их не надо изучать. Первое открытие – и всё ясно.

Из чего состоит интерфейс?

Кнопки и ссылки
Основа взаимодействия с интерфейсом
Формы ввода
Везде, где есть данные от пользователя
Иконки
Картинка воспринимается быстрее текста
Типографика
Задаёт настроение и читаемость
Цветовая палитра
Айдентика плюс функциональность
Микроанимации
Делают интерфейс живым, но легко переборщить

Всё это работает на одну цель: не украсить экран, а помочь пользователю.

Чем UI дизайн отличается от UX дизайна

Вечная путаница. Объясняем на простом примере.

UX – это план дома. Где кухня, где спальня, как между ними ходить, чтобы не натыкаться на углы и не делать лишних шагов. UI – это отделка и мебель. Обои, люстры, диван с подушками.

Можно сделать красивый ремонт в неудобной квартире. Глаз радуется, а жить невозможно – коридор узкий, розетки не там, ванная на другом конце. Работает ли это? Нет.

Чем занимается UX-дизайнер Чем занимается UI-дизайнер
Исследует пользователей и их боли Создаёт визуальный стиль продукта
Строит сценарии поведения Рисует макеты каждого экрана
Проектирует информационную архитектуру Подбирает цвета, шрифты, иконки
Тестирует гипотезы на реальных людях Делает анимации переходов
Создаёт wireframes Собирает дизайн-систему для разработчиков

Сейчас роли часто совмещают. UI/UX дизайнер – стандартная вакансия. Особенно в небольших командах, где нет ресурсов держать двух специалистов.

У нас в KOTELOV работа идёт по принципу Design Thinking. Сначала исследуем пользователей – это UX-часть. Потом создаём интерфейс – это UI. Был проект для S7 Airlines, делали приложение для пилотов. Провели 14 встреч с фокус-группой из действующих пилотов и инструкторов, представляете? 35 дней – и дизайн, который считывается с первого взгляда. Без этого исследования ничего бы не вышло, потому что мы не пилоты и не знаем их рабочих сценариев.

Панель аналитики с графиками метрик и ключевыми показателями эффективности

Подробнее о том, как мы работаем – на странице UX/UI дизайн.

Принципы хорошего UI дизайна

Пять правил, которые всегда работают.

01
Консистентность
Одинаковые элементы ведут себя одинаково. Кнопка «Купить» зелёная на главной? Значит, зелёная и в каталоге, и в корзине, и на странице товара. Ссылки подчёркнуты? Подчёркнуты везде без исключений. Что бывает, когда консистентность ломается? На одной странице кнопка квадратная, на другой – круглая, на третьей вообще текстовая ссылка. Пользователь в замешательстве.
02
Иерархия
Главное должно выделяться. Звучит просто, но на практике – сложнее. Если выделить всё, выделено будет ничего. При редизайне сайта Subway мы столкнулись именно с этим. Все элементы равнозначные, внимание распыляется, call-to-action теряется среди десятка других блоков. Что сделали? Визуальная иерархия: ключевые CTA стали заметнее, второстепенное ушло на второй план.
03
Обратная связь
Пользователь должен понимать, что происходит прямо сейчас. Нажал кнопку? Она изменилась, показала реакцию. Отправил форму? Появилось подтверждение. Страница грузится? Виден индикатор. Ноль обратной связи – ощущение, что всё зависло. Пользователь жмёт повторно, отправляет форму три раза, злится.
04
Доступность
Интерфейс должен работать для всех. Люди со слабым зрением пользуются скринридерами. Дальтоники не различают красный и зелёный – а это часто цвета ошибки и успеха. Пожилые пользователи плохо видят мелкий шрифт. Это не опция, а базовое требование.
05
Простота
Минимум элементов для решения задачи. Если можно что-то убрать без потери смысла – убирай. Мы это применили на практике с Subway: промежуточная страница «Меню» не несла ценности. Убрали — путь пользователя сократился. Зато конверсия выросла.

Кейс с редизайном Subway: Редизайн сайта Subway и UX/UI анализ.

Инструменты UI дизайнера

Чем работают профессионалы? Инструментов много, но основных – штук пять.

Figma
Стандарт индустрии. Работает в браузере, командная работа в реальном времени, прототипы, анимации, дизайн-системы – всё в одном месте. Бесплатна для личного использования. Мы в KOTELOV используем Figma как основной инструмент.
Sketch
Долго был лидером, особенно на Mac. Большая библиотека плагинов, освоить легко. Минус один, но существенный – работает только на macOS. Если команда на Windows, Sketch отпадает.
Adobe XD
Хорош для тех, кто уже живёт в экосистеме Adobe. Интеграция с Photoshop и Illustrator, привычные инструменты. Но рынок всё равно выбрал Figma.
Framer
Для сложных прототипов с реальной интерактивностью. Можно добавлять код, делать штуки, которые в других инструментах невозможны.
Zeplin
Не для дизайна, а для передачи макетов разработчикам. Автоматически генерирует спецификации: цвета в hex, отступы в пикселях, всё что нужно для вёрстки.
Когда что использовать?
Для большинства задач хватит Figma. Нужны сложные прототипы – Framer. Работаете с командой разработки и хотите упростить им жизнь – добавьте Zeplin.
Проект UX/UI аудита сайта Subway и дизайн-концепт

Для сети пекарен буше мы собрали полноценный UI-kit в Figma, который потом сильно упростил и разработку, и поддержку приложения.

Актуальные тренды UI дизайна

Тренды меняются каждый год. Что работает сейчас?

Glassmorphism
Эффект стекла с размытием фона. Полупрозрачные панели, мягкие тени. Выглядит современно, но есть подводный камень: слишком много стекла – и текст становится нечитаемым. Пользуйтесь осторожно.
3D-элементы
Добавляют глубину и привлекают внимание. Объёмные иконки, иллюстрации с перспективой. Проблема? 3D тяжелее плоских элементов, страница может тормозить. Переборщить легко.
Микроанимации
Маленькие отклики на действия пользователя. Кнопка слегка уменьшается при нажатии. Иконка плавно меняет форму. Это и обратная связь, и характер продукта одновременно. Для буше мы сделали анимированную заставку «Круассан Шредингера» при входе в приложение. Пасхалка для постоянных клиентов. Мелочь, а запоминается.
Dark mode
Стал стандартом. Тёмные темы экономят батарею на OLED-экранах и снижают нагрузку на глаза вечером. Многие пользователи включают тёмную тему и не выключают никогда.
Neumorphism
Мягкие тени, эффект выдавливания, элементы выглядят как физические объекты. Красиво? Да. Проблема с доступностью? Огромная. Элементы плохо видны людям со слабым зрением. Поэтому тренд так и не стал мейнстримом.
Переменные шрифты
Один файл с разной жирностью и шириной символов. Меньше размер страницы, больше гибкости в типографике.

Главное правило по трендам: они не должны вредить юзабилити. Glassmorphism мешает читать? Не используй. Красота не стоит удобства. Никогда.

Сколько стоят услуги UI дизайнера

От чего зависит цена? Разберём по пунктам.

Сложность проекта
Лендинг на одну страницу и мобильное приложение с полусотней экранов – это совершенно разные бюджеты.
Количество экранов
Напрямую влияет на сроки и стоимость. Но не всегда линейно – первые 10 экранов сложнее, чем следующие 10, потому что в начале создаётся система.
Наличие дизайн-системы
Если компоненты нужно создавать с нуля– это дополнительное время. Если дизайн-система уже есть – работа идёт быстрее.
Формат работы
Фрилансер дешевле студии. Зато студия даёт команду: аналитик, несколько дизайнеров, арт-директор на контроле качества. И юридические гарантии.

Что обычно входит в стоимость профессионального UI дизайна?

UX-исследование с анализом конкурентов
Wireframes – каркасы экранов
Визуальные макеты с цветами и шрифтами
Интерактивный прототип для тестирования
Дизайн-система с компонентами
Передача файлов в нужном формате

Хотите узнать стоимость для своего проекта? Оставьте заявку на бесплатную консультацию – обсудим детали.

Почему выбирают KOTELOV для UI дизайна

13 лет на рынке. Больше 100 сотрудников. Больше 50 крупных проектов, где ui дизайн был ключевой частью работы.

Как мы работаем? Сначала UX-исследование – понимаем пользователей и их задачи. Потом UI – создаём интерфейс под эти задачи. Создаём масштабируемые дизайн-системы, которые живут годами. Вся команда inhouse: дизайнеры, аналитики, разработчики сидят рядом и общаются напрямую.

Мобильное приложение с интерфейсом мессенджера, профилем пользователя и системой достижений

С кем работали? S7 Airlines, Т-Банк, Альфа-Банк, ПИК, Microsoft, Газпромбанк, VK, Сбер.

Примеры работ

Редизайн сайта Subway и UX/UI анализ

Провели аудит, нашли проблемы с визуальной иерархией, создали дизайн-концепт с чёткими приоритетами.

Интерфейс для пилотов S7 Airlines

14 встреч с фокус-группой и 35 дней до интуитивного дизайна.

Мобильное приложение буше

Больше 195 000 пользователей, UI-kit с нуля, 9 месяцев разработки.

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

Заключение

UI дизайн – это то, что делает продукт понятным. Хороший интерфейс не замечаешь, но плохой раздражает.

Что это даёт бизнесу? Выше конверсия, меньше отток, больше лояльных клиентов. Это не расходы на красоту, а иинвестиция в продукт.

Нужен профессиональный UI/UX дизайн?
Оставьте заявку на бесплатную консультацию. Обсудим ваш проект и предложим решение.

Оставить заявку