Таймлайн
2024. Продолжительность ~ 2 месяца
Компания
AlmaMater — социальная сеть для студентов и ВУЗов на этапе стартапа
Команда
Основатели, дизайнер, консультанты
Проект
Стартап соцсеть AlmaMater, целью которого является помочь студентам адаптироваться в ВУЗе во время учебы, найти друзей и единомышленников. Также студенты могут следить за своим расписанием, становиться тьюторами, а преподаватели могут заниматься репетиторством
Задача
Создать с нуля дизайн-систему и разработать ключевые экраны
Контекст
Мой бывший руководитель предложил мне присоединиться к стартапу AlmaMater — социальной сети, которая помогает студентам адаптироваться в вузе, находить друзей, следить за расписанием, а преподавателям — заниматься репетиторством.
Передо мной стояла задача: сначала создать дизайн-систему, которая упростит разработку, а затем на ее основе разработать несколько ключевых экранов. Команда фокусировалась на мобильном приложении, чтобы скорее запустить MVP, которое можно показать инвесторам, поэтому дизайн-система собиралась именно под эти потребности.
1 этап
Фундамент
Сначала я заложила основу — создала глобальные токены. Это помогло установить единые правила.
2 этап
Основой бренда стал сиреневый градиент, предложенный основателями. Эта цветовая гамма хорошо соответствовала долгосрочной цели проекта — усилить геймификацию и создать атмосферу, близкую к казуальным мобильным играм, где подобные палитры встречаются часто.
Моя задача заключалась в том, чтобы адаптировать эти эмоциональные предпочтения в функциональную систему. Я разработала палитру, где сочетались:
- Яркие акцентные цвета для ключевых действий и геймифицированных элементов
- Сбалансированные оттенки для фонов и текста, которые не перегружают зрение при длительном использовании
На основе этой палитры я построила систему семантических токенов (primary, secondary, success, warning, error и т.д.), что позволит дизайнерам и разработчикам быстро применять цвета по их назначению, а не просто по внешнему виду.
Я сразу заложила в структуру токенов поддержку темной темы. Такой подход значительно экономит время в будущем, избавляя команду от необходимости пересобирать всю цветовую систему с нуля.
3 этап
Для основного шрифта я выбрала Inter — современный гротеск с открытой лицензией. Это шрифт, созданный именно для интерфейсов. У него высокая читаемость даже в мелких кнопках, есть все нужные начертания для иерархии. Плюс он бесплатный, что важно для стартапа.
4 этап
Сначала я сделала несколько ключевых экранов — ленту, профиль, расписание. Это помогло понять, какие компоненты понадобятся в первую очередь. Затем начала создавать библиотеку:
- Сначала базовые компоненты: кнопки, инпуты, чекбоксы, переключатели и т.д.
- Затем более сложные: карточки, навигацию, списки и т.д.
Все компоненты делала гибкими — с возможностью менять контент, состояние и размер и прочее без нарушения общего стиля.
Результат
- Ускорение разработки: команда получила готовую дизайн-систему, которую можно было использовать в работе
- Единообразие интерфейса: все экраны выглядели как часть единого продукта
- Подготовка к темной теме: Заложенная основа сэкономила время на будущие доработки