Гизатова Анастасия
Проекты
Резюме
Контакты
Гизатова Анастасия
АО “Эффективные технологии”
Работа с иконками
В рамках проекта с уже существующей дизайн — системой я работала с иконками.
В проекте использовался набор иконок Vuesax.
Поскольку готового набора не хватало, я разработала дополнительные иконки, сохраняя стилистическое единство системы.
Outline
Ход работы:
Результат:
В результате работы получился расширенный набор иконок, который покрывал потребность продукта, где:
Единая система нейминга и структуры.
Новые иконки органично вписываются в стилистику библиотеки.
Улучшилось удобство работы дизайнеров с иконками. Время на поиск нужной иконки сократилась.
Ход работы:
Провела аудит более 200 иконок. Привела все иконки к единой толщине линий и одинаковым скруглениям.
Оптимизировала структуру фреймов и групп. Привела нейминг к единому стандарту.
Cделала компонент для масштабирования иконок.
Расширила набор существующих иконок. Включены залитые версии на базе стандартного набора.
Проблема:
Все иконки собраны в один компонент. Когда количество иконок увеличилось, искать их по списку в компоненте стало неудобно.
Иконки из набора были неупорядоченные, лишние фреймы, нейминг неконсистентный.
Более 150 иконок
в одном компоненте
в одном компоненте
Необходимость расширить набор новыми иконками, которые гармонируют со стилем.
Essetional
Outline
Filled
Ход работы:
Проблема:
Работа со списками:
Цвет при наведении и нажатии, по тональности, был слишком близок к фону. Состояние почти не наблюдалось.
Default
Hover
Pressed
Active
Disabled
Кликабельная зона была узкой, что усложняло работу пользователя с продуктом.
Чтобы включить или выключить один из составляющих компонента, например шеврон, нужно было залезать в слои компонента.
Результат:
В результате работы элементы стали лучше читаться, пользователи быстрее ориентируются в списке и реже промахиваются в выборе.
Переделала основной компонент списка, чтобы повысить удобство работы дизайнеров.
Default
Hover
Pressed
Disabled
Настроила контраст состояний (hover, pressed).
Проблема:
Работа с раскрывающимся списком
Цвет при наведении и нажатии, по тональности, был слишком близок к фону. Состояние почти не наблюдалось.
Default
Hover
Pressed
Selected
Кликабельная зона была узкой, что усложняло работу пользователя с продуктом.
Чтобы включить или выключить один из составляющих компонента, например шеврон, нужно было залезать в слои компонента.
Разный дизайн у элементов
Ход работы:
Переделала основной компонент списка, чтобы повысить удобство работы дизайнеров.
Настроила контраст состояний (hover,selected).
Переделала основной компонент списка, чтобы повысить удобство работы дизайнеров.
Default
Hover
Selected
Disabled
Результат:
В результате работы элементы стали лучше читаться, пользователи быстрее ориентируются в списке и реже промахиваются в выборе.
Работа с кнопками
Ход работы
Результат
Кнопки стали визуально и функционально консистентными во всех сценариях
Повысилась читаемость и доступность интерфейса
Команде разработки стало проще внедрять и поддерживать элементы
Переработала цветовые значения для «text button» с учётом контраста и читаемости.
Ввела новый тип — «icon button» — с понятной системой размеров и отступов
Ввела новый тип — «icon button» — с понятной системой размеров и отступов
Переделала основной компонент кнопки, чтобы повысить удобство работы дизайнеров.
Ход работы
Проблема
В продукте кнопки были реализованы через ссылки, без системного описания состояний. Цвета состояний у текстовых кнопок имели низкий контраст с фоном. Кроме того, состояние «pressed» было малоконтрастным и фактически заменено на «active», что создавало путаницу в логике состояний.
Кликабельная зона была узкой, что усложняло работу пользователя с продуктом.
Чтобы включить или выключить один из составляющих компонента, например шеврон, нужно было залезать в слои компонента.
Не были задокументированы все состояния кнопок, отсутствовал тип «icon button», хотя он активно использовался в интерфейсе.
