«...рекомендуем поизучать крупные дизайн-системы и гайдлайны, чтобы понять, как правильно работают компоненты...»

Вспоминаю тестовое задание от Самоката. Одна из задач была улучшить дизайн мобильного приложения для менеджера даркстора. Я проанализировал возможные несостыковки и нарисовал свое удобное и правильное решение. Фидбек был таким: «...рекомендуем поизучать крупные дизайн-системы и гайдлайны, чтобы понять, как правильно работают компоненты...».
Мой дезигн с точки зрения логики был неплохим, но были допущены ошибки: title в navbar был расположен неправильно, шеврон для раскрытия шторки повернут не в ту сторону и тому подобное. Осознание этих ошибок пришло уже впоследствии, когда я изучил необходимые фундаментальные вещи, типа гайдов от Apple (Human Interface Guidelines) и Android (Material Design). Благодаря этому опыту, сейчас я могу точно сказать, что во время проектирования своих первых работ необходимо изучить гайдлайны.

Что мы узнаем из гайдлайнов:
Компоненты и их названия: если не понятно, что такое Floating Button или в каких 3 позициях может быть Bottom sheet, то точно стоит начать прямо сейчас

Механика компонентов: их состояния, реакции на жесты, анимация

Навигация в приложениях: в каких случаях нужен нижний тапбар, а в каких нет; как работает поиск

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

Различия подходов Apple и Android в дизайне: полезно знать, хотя сейчас дизайн приложений часто становится более единообразным

Правила и антипаттерны: в Material Design детально описано, как нужно и как не нужно проектировать, с аргументацией на основе исследований

Эти знания повысят квалификацию и ценность как специалиста. Ниже ссылки на оригинальные ресуры на английском и на переведенный материал (спасибо @chim_mammedova )

Human Interface Guidelines 🍎(En)

Material Design 3 🤖(En)

Human Interface Guidelines 🍎(Ru)

Material Design 2 🤖(Ru)


#материалы
#дизайн_системы

💬 Тултип