Проект
Детский сад, который должен выглядеть детским — и оставаться рабочим
Нужен был дизайн мобильного приложения и UI/UX для продукта с тремя аудиториями: родители заходят на минуту, воспитатель работает смену, администрация ведёт учёт и деньги. Один стиль должен был обслужить и детскую тему, и таблицы со счетами.
Клиент: Sadok.app
Объём: более 100 экранов
Работа: айдентика + UI-кит
Платформы: iOS + Android
Фирменный стиль
Знак, который работает буквой
Домик из кубиков — узнаваемый детский образ без единой иллюстрации. Тот же знак становится буквой «А» в названии, поэтому иконка на экране телефона и логотип внутри приложения читаются как одно целое.
Знак и вордмарк. В промо-материалах тот же домик складывается из настоящих детских кубиков — бренд выходит с экрана в предмет.
Палитра
Четыре цвета, у каждого своя работа
#FD5C29
Действие — кнопки, акценты
#2B9D4C
Присутствует, оплачено
#3297D1
Информация, навигация
Цвета знака стали функциональными состояниями: оранжевый ведёт к действию, зелёный подтверждает, синий поясняет, жёлтый ждёт.
Типографика
Четыре размера на все сто экранов
22 / 800Группа «Калина»
18 / 700Воспитатели
16 / 400Группа Pre-school для наших маленьких умников
14 / 400Помощник воспитателя · 7/10 детей
Шкала 22 / 18 / 16 / 14. Больше размеров не понадобилось даже тогда, когда добавили счета и отчёты.
Самое интересное
Три экрана, ради которых приложение открывают каждый день
Слева направо: карта садиков — переключатель «список / карта», пины заведений и фильтр по городу. Галерея дня — всё, что сняли в группе, собрано по дате, без поиска по чатам. Чат с воспитателем — видеосообщение прямо в ленте и быстрые ответы готовыми фразами: «опаздываем, будем через 10 мин», «приболели, сегодня нас не ждите». Родитель отвечает одним касанием, не набирая текст на ходу.
Сервисы
Разобрали интерфейс, чтобы показать, из чего он состоит
Календарь, карточка ребёнка и статус оплаты питания — то, за чем родитель заходит чаще всего, вынесено на поверхность.
Правило в действии
Каждая группа красится в свой цвет
«Малина» розовая, «Калина» зелёная. Карточка подхватывает светлый тон основного цвета из логотипа — воспитатель находит свою группу по цвету, ещё не читая название.
Живой контент
Детский сад — это фото, события и цифры
Слева направо: карточка садика — рейтинг, расстояние, бейджи программ вроде Cambridge English. Календарь событий — дни рождения, праздники и занятия разными цветами. Панель администратора — посещаемость, наполненность мест, начисления за кружки одним экраном.
Аватары
Форма говорит, кто перед тобой
Человек — всегда круг, садик, группа и чат — всегда квадрат. Размеры фиксированные: 36, 48, 100. Нет фото — остаются инициалы на сгенерированном цвете, насыщенном настолько, чтобы белый текст оставался читабельным. Аватар ребёнка при этом видит только его родитель.
UI-кит
Компоненты с правилами, а не набор макетов
Страница спецификации: к каждому компоненту выписано правило, а не пример.
Иконки
Одна линия на всю навигацию
Главная, календарь, чат, галерея, профиль — одинаковая толщина, одинаковый оптический вес, активное состояние оранжевым.
Результат
На чём сделали
FigmaАйдентикаИконка приложенияДизайн-системаUI-китAccessibility
Проверкой системы стал следующий модуль: когда в приложение добавили счета и питание, новых компонентов рисовать почти не пришлось. Как всё это собрано в коде — в кейсе о разработке приложения.