Создать дизайн-систему, которая объединит визуальный язык продукта и позволит собирать новые сценарии
из переиспользуемых компонентов.
из переиспользуемых компонентов.
Задача
Верли – концепт мобильного приложения, которое объединяет визуальный подбор одежды с возможностью последующей покупки.
Контекст
Что внутри?
Спецификация
Правила интервалов и отступов для предсказуемости макетов
Кнопки
Система вариантов и состояний для понятного взаимодействия
Иконографика и логотип
Разработанный логотип и набор иконок интерфейса
Система сетки
Единая структура и ритм для цельного интерфейса
Типографика
Система типов текста
для удобочитаемого интерфейса
для удобочитаемого интерфейса
Система цветов
Цветовые палитры для тем
и единой визуальной иерархии
и единой визуальной иерархии
...и еще больше компонентов
Эффекты
Система цветов
Тени и размытие создают ощущение глубины
и акцентируют внимание на интерфейсе.
и акцентируют внимание на интерфейсе.
Тени, размытие и эффект стекла для визуальной иерархии.
Гибкая палитра цветов, которая обеспечивает единую иерархию, ясность и выразительность интерфейсов во всем продукте.
Успех
Успешные действия и положительные состояния.
Ошибка
Ошибки, предупреждения и негативные состояния.
Градация серого
Фоны, текст и вторичные элементы интерфейса.
Лавандовый
Дополнительный акцент для второстепенных элементов и состояний.
Фиолетовый
Основной акцентный цвет интерфейса и ключевых действий.
Типографика
Система типографики определяет стили текста
как элементы дизайна и объясняет, как следует применять заголовки и основной текст.
как элементы дизайна и объясняет, как следует применять заголовки и основной текст.
Система сетки
Отступы
Установив одинаковые значения интервалов для полей, отступов и выравнивания, можно добиться визуальной гармонии и улучшить общее впечатление пользователей
от интерфейса.
от интерфейса.
Сетка
Сетка из 4 колонок позволяет сохранять структуру
и читабельность макетов на мобильных экранах, обеспечивая четкую иерархию, равномерные интервалы
и удобство восприятия контента.
и читабельность макетов на мобильных экранах, обеспечивая четкую иерархию, равномерные интервалы
и удобство восприятия контента.
Спецификация
Зафиксированы размеры элементов и система отступов внутри компонентов и между блоками, чтобы интерфейс сохранял единый ритм и структуру на всех экранах.
Иконографика и логотип
Логотип
иконка приложения
*Название приложения происходит от английского слова «Wearly», образованного от слова «wear» («носить», «одежда»).
Разработан логотип для приложения, графический знак которого основан на стилизованной букве W.
Иконки
Единая система иконок, основанная на правилах обводки, размера и сетки, которые остаются четкими
и читабельными.
и читабельными.
Цвета
Тени
Кнопки
True/False
Разработаны размеры, варианты
и состояния кнопок для единого
и понятного взаимодействия
во всех сценариях продукта.
и состояния кнопок для единого
и понятного взаимодействия
во всех сценариях продукта.
Поля ввода / навигация
Отдельно вынесена кнопка поиска, которая расположена справа. При переходе на страницу «Поиск» и конка поиска сменяется полем ввода и растягивается по ширине,
а слева появляется кнопка возврата на главную страницу, при нажатии на которую меню возвращается в прежнее состояние.
а слева появляется кнопка возврата на главную страницу, при нажатии на которую меню возвращается в прежнее состояние.
В интерфейсе используется система навигации, которая включает верхнее и нижнее меню, что обеспечивает быстрый доступ к основным разделам приложения.
Разработана единая система полей и навигации
для понятного взаимодействия с интерфейсом и быстрого доступа к основным сценариям.
для понятного взаимодействия с интерфейсом и быстрого доступа к основным сценариям.
Навигация
Способ оплаты
Сортировка и фильтры
Карточки
Компоненты
Набор переиспользуемых компонентов
для сборки интерфейса и сохранения единого визуального и функционального языка продукта.
для сборки интерфейса и сохранения единого визуального и функционального языка продукта.
*...и многое другое
Санкт-Петербург, работаю удаленно
©2026finkelberg
