Всё, что нужно для начала: теория и примеры

Определения дизайн-системы:
— полный набор стандартов, документации и принципов, а также набор инструментов (юай-кит и компоненты кода), необходимый, чтобы достичь этих стандартов.
— Инструмент для всех, кто связан с производством диджитал-продуктов: гайды, паттерны, компоненты, методологии.
— всё, что входит в продукт: от типографики, лейаутов и сетки, цветов, иконок, компонентов и элементов кода, к голосу и тону, стайл-гайду и документации, дизайн-система соединяет всё это таким образом, которые позволяет всей вашей команде учиться, строить и расти.

Теория

Руководство по дизайн-системам от Инвижн (на английском; есть перевод)
Create a Design System with Figma — Full Course (7 ч 38 мин)

Примеры корпоративных дизайн-систем

Российские

• Альфа-Банк

• Рамблер

• БАРС Груп

• СКБ Контур

• Иви

• Тайга Ю-Ай — опенсорсная дизайн-система от Тинькофф

• Мейл-Ру + Видео: Развитие дизайн-системы Mail.ru Paradigm (26 мин)

• Конста — опенсорсная дизайн-система от Газпром нефти

• Дизайн государственных систем России

Зарубежные

• Материал Дизайн от Гугла
• Атласиан
• ИБМ

Видео по теме

• Дизайн-система Tinkoff.ru (28 мин)
• Организация и инфраструктура дизайн-системы Авито (32 мин)
• Figma design system for a marketing website (20 мин) — очень хороший практический пример использования дизайн-системы в Фигме

На Awwwards опубликовали подборку из 100 бесплатных шрифтов, а я выбрала те, где точно есть кириллица. Но и другие посмотреть стоит, хотя бы ради презентаций, там красота.

Neutral Face — стильный шрифт без засечек. Полностью бесплатный, даже для коммерческого использования.

Resist Sans: Neo Grotesque — большая шрифтовая семья, но бесплатны только два начертания.

Fornire Light — зауженный шрифт с засечками. Бесплатно одно начертание из 4-х, зато даже для коммерческого использования.

Pangram Sans Rounded — игривый закруглённый шрифт. Большая шрифтовая семья, много символов. Чтобы получить, нужно ввести электронную почту. И только для личного пользования — в клиентских работах использовать нельзя, нужно докупить лицензию.

Disket — моноширинный шрифт, есть два начертания. Полностью бесплатный, как и все шрифты агентства Rostype.

Dx Rigraf — шрифт без засечек. Довольно своеобразный, в хорошем смысле этого слова. Бесплатно доступны 4 варианта начертания из 54-х, но если вам просто нужен интересный шрифт для заголовков, этого будет вполне достаточно. Только для личного использования.

Elanor — элегантный шрифт с намёком на ретро. Доступны два начертания. Только для личного использования.

Mak — очень красивый экспериментальный шрифт. Полностью бесплатный.

Okta Neue — приятный шрифт без засечек. 2 из 22 начертаний доступны бесплатно.

Escucha Consuela — сразу дуэт шрифтов, графичного и рукописного. Кириллица есть только для первого. С лицензией неясно, но для личных проектов точно можно использовать.

Calama — геометричный вытянутый шрифт без засечек. Полностью бесплатный.

Borsok — милый шрифт без засечек. Полностью бесплатный.

VTF Lack — простой, но с характером шрифт без засечек. Полностью бесплатный, насколько я могу судить.

Минкомсвязи в 2017 году начали классный проект — единый цифровой стандарт для интернет-ресурсов страны.

Здесь не только визуальная составляющая, но и вся базовая теоретическая информация, которая может понадобиться для разработки сайтов и сервисов государственных учреждений:
— собственно дизайн-система, или, точнее, UI kit — набор компонентов и стилей;
— аналитика — как измерять результаты работы;
— исследования — как разобраться, что нужно пользователям;
— команда — немного рекомендаций по совместной работе в организации и с подрядчиками;
— аджайл — кратко о гибком управлении проектами;
— проектирование — как разработать удобный сервис;
— госконтракт — как поучаствовать в госзакупках, получить и исполнить госконтракт;
— доступность — что учесть, чтобы сервисом могли пользоваться люди с ограничениями по здоровью, устаревшими устройствами и т. д.;
— редактура — о том, как писать ясно, оформлять тексты аккуратно, и какие проблемы на этом фронте есть сейчас.

И хотя эта система разработана в первую очередь для государственных сайтов поддомена gov, она станет хорошим подспорьем для разработки любых сайтов, а особенно — муниципальных. Чиновники уровня местного самоуправления нередко настаивают на, скажем так, неэффективных практически и сомнительных эстетически решениях. Дизайн госсистем, одобренный Министерством связи — весомый аргумент в переговорах с такими заказчиками.

Работать — как ехать вверх по холму, покрытому ямами и кочками.

Иногда везёт, выдаётся ровный участок, и можно ехать быстро.

Но чаще всего то и дело натыкаешься на что-то, что тебя тормозит. Иногда можно усилием перевалить это препятствие. А иногда приходится остановиться: подкачать колёса, почиститься от грязи, сбросить лишний груз, продумать дальнейший путь.

Но если эта остановка затягивается, а препятствие так и не преодолевается, потихоньку начинаешь съезжать вниз по холму. И чем дольше бездействие, тем быстрее катишься вниз, тем сложнее снова вскочить за руль.

Чтобы этого не случилось, важно адекватно оценивать свои силы. Если препятствие не удаётся преодолеть одним рывком, нет ничего стыдного в том, чтобы найти обходной путь к своей цели или сознательно немного сдать назад для разгона.

А тачка постепенно прокачается сама собой, и сможешь брать препятствия всё больше.

Однажды в метро я увидела маленькую потёртую рекламу приложения «Советы спасателя» и подумала: «какая замечательная идея, и какая топорная, похоже, реализация».

И оказалась права.

Проблем хватает: зато благодатная почва для того, чтобы их последовательно рассмотреть и попытаться исправить.
Здесь мы рассматриваем преимущественно приложение на Android.

Этап 1: меняем точку входа

С проблемой мы сталкиваемся, как только открываем приложение: первым отображается экран с информацией о заказчике и т. п.

По умолчанию нас приветствует бесполезный канцелярский текст

Последнее, что интересует пользователя в чрезвычайной ситуации — кто заказал разработку. Здесь написано, что основные возможности приложения — помощь в сложных и опасных ситуациях и вызов службы спасения. Так почему нам в этом препятствуют?

Итак, первое, самое простое изменение, которое можно внести: сменить точку входа. Раз приложение называется «Советы спасателя», пусть на советах и открывается.

Соблюдаем принцип «пользу вперёд»

Этап 2: Переносим вкладки

Разделы стоит перенести вниз: если человек в чрезвычайной ситуации, у него могут трястись руки, любое лишнее усилие мешает. Поэтому плохо, что к нужному разделу сейчас приходится тянуться — пытаясь попасть в нужную точку, пользователь рискует вовсе выронить телефон.
UPD: На iOS вкладки уже находятся внизу

Теперь вкладки более доступны

Этап 3: Прячем лишнее

Уберём малоинтересную информацию с глаз долой и вынесем вперёд только нужное.

Сайт и раздел «О приложении» — в дальний угол под кебаб.

Памятки и служба спасения — в самое доступное место, да покрупнее.

Увеличили область касания и скорость распознавания за счет иконок, а нерелевантное спрятали. UPD: На iOS иконки в приложении есть

Но вкладки неидеальное решение для этой проблемы — слишком разный функционал. Для звонка в экстренные службы лучше подойдёт плавающая кнопка. На iOS есть подобная кнопка, но только на внутренних страницах памяток.

Позвонить в экстренные службы по-прежнему просто, но центральное место полностью отведено памяткам, без лишних разделов

В следующей части расскажу, как переработала структуру каталога памяток, чтобы быстрее находить нужное.