Привет дорогой.

Подготовил для тебя перевод статьи от ведущего мирового эксперта в области пользовательского опыта - Nielsen Norman Group. В статье описаны пять основных принципов создания главной страницы сайта. Некоторые из этих принципов могут показаться очевидными, но, как ни странно, многие дизайнеры все еще допускают эти ошибки. Давай прочитаем, научимся и станем лучше.

В этой статье:

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

Принцип 1: Обеспечьте легкий доступ к домашней странице

Главная страница часто считается "парадной дверью" сайта, служащей основной точкой входа и важным ориентиром для посетителей. Хотя пользователи не всегда заходят на сайт с главной страницы, многие возвращаются на нее как в тихую гавань, когда теряются на сайте. Поэтому очень важно сделать главную страницу легкодоступной.

1.1 Убедитесь, что каждая страница содержит как скрытые, так и явные ссылки на главную страницу.

Люди обычно ориентируются на главную страницу, даже если попадают на внутреннюю страницу через поисковую систему. Прямая ссылка на главную страницу является обязательным элементом веб-сайта, поскольку она обеспечивает безопасный запасной вариант. Чтобы обеспечить легкий доступ к главной странице, используйте как неявные ссылки (через логотипы), так и явные (через ссылку с надписью Home).

1.2 Используйте простой и предсказуемый URL-адрес для вашего сайта.

URL должен легко выводиться из названия вашей компании. Предсказуемые URL, такие как company.com, позволяют пользователям угадать адрес сайта, не прибегая к помощи поисковой системы. (Это также снижает вероятность того, что предложения браузера будут ошибочными).

Если ваш продукт или компания часто упоминаются под альтернативными названиями, например "Coke" для Coca-Cola, заведите URL-адреса и для этих распространенных прозвищ. Например, попытка посетить www.coke.com перенаправляет на основной URL, www.coca-cola.com.

1.3 Выделите свою домашнюю страницу, сделав ее визуально отличной от других страниц.

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

Принцип 2: Расскажите о себе и о том, чем вы занимаетесь

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

2.1 Поместите название и логотип компании на видном месте в левом верхнем углу главной страницы.

Стало стандартом размещать логотип компании в левом верхнем углу главной страницы - именно там его ищут в первую очередь. Избегайте центрированных логотипов и убедитесь, что ваш логотип хорошо виден и отличается от других элементов на главной странице.

2.2 Включите теглайн, который четко передает, чем занимается ваш сайт или компания.

Не думайте, что посетители вашего сайта знают ваш бренд. Если название вашей компании само по себе не выдает, чем вы занимаетесь, разместите на главной странице лаконичный теглайн, сообщающий о том, кто вы и чем занимаетесь.

Люди редко читают в Интернете - они скорее сканируют. Поэтому ваш теглайн должен быть простым, удобным для сканирования и в самую точку. Форматируйте контент обдуманно, избегайте стен текста, которые загромождают главную страницу и отпугивают пользователей.

Более того, веселые "приветствия" на главных страницах не приносят пользы, поскольку не дают никакой информации о вашей компании. Вместо этого превратите эти приветствия в содержательные теглайны. Лучший способ поприветствовать пользователей - дать четкое объяснение предложений вашего сайта и указать отправную точку для навигации.

2.3 Подчеркните уникальную ценность вашего сайта для пользователей, а также то, чем он отличается от конкурентов.

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

Хорошо сформулированное ценностное предложение должно отвечать на вопрос: "Почему я должен выбрать этот сайт/компанию, а не другие?". Для этого каждый элемент на вашей домашней странице - от изображений до текста - должен работать слаженно и передавать убедительное послание с первого взгляда.

Ваша домашняя страница должна говорить на языке пользователей. Используйте слова, которые находят отклик у людей, и избегайте жаргона, бизнес-терминологии и языка, ориентированного на конкретные функции.

2.4 Убедитесь, что используемые изображения точно отражают ваш бренд.

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

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

Принцип 3: Раскрывайте содержание на примерах

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

3.1 Размещайте наиболее важный контент над сгибом и ведите пользователей вниз по странице, когда на ней остается больше контента.

Концепция сгиба страницы по-прежнему важна для домашних страниц, несмотря на множество доступных размеров экранов и повсеместное распространение отзывчивого дизайна. Сгиб - область страницы, видимая без прокрутки, - имеет ключевое значение, поскольку пользователи склонны прокручивать страницу дальше только в том случае, если то, что отображается над сгибом, вызывает у них интерес. Таким образом, контент над сгибом служит привратником, определяющим, будут ли пользователи дальше работать с вашим сайтом.

Разработка дизайна для сгиба имеет две стороны (каламбур не удался); она включает в себя:

• Размещение наиболее важного контента как можно выше на странице, чтобы он был виден над сгибом независимо от размера устройства пользователя.
• Создание макета, который побуждает пользователей прокручивать страницу вниз.
  

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

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

3.2 Приведите конкретные примеры содержания вашего сайта.

Ваша главная страница не должна ограничиваться общим обзором и должна содержать конкретные примеры ваших предложений. Вдумчиво подобранные примеры контента более эффективно передают вашу ценность, чем широкие, зонтичные термины. Отображение образцов контента вашего сайта на главной странице помогает пользователям сформировать мысленную модель вашего сайта и побуждает их к дальнейшему изучению. Например, простая ссылка с надписью Product Spotlight, ведущая на страницу категории, меркнет по сравнению с демонстрацией избранных продуктов.

Остерегайтесь размещения контента, который может не соответствовать предложениям вашего сайта. Сезонный или рекламный контент может сформировать у пользователей представление о предложениях вашего сайта и привести их к неправильному пониманию ваших основных предложений.

Принцип 4: Оперативные действия и навигация

Главная страница часто является началом изучения сайта пользователем и выступает в качестве центрального узла, связанного с другими страницами. Поэтому она должна четко указывать на доступные действия и направлять пользователей к следующим шагам.

4.1 Включите четкие, описательные метки ссылок, которые вызывают отклик у пользователей.

Хотя четкие, ценные надписи на ссылках важны для всех типов веб-страниц, они имеют решающее значение для главных страниц. Метки ссылок и призывы к действию должны быть конкретными и обладать высокой информативностью.

Общие формулировки типа "Нажмите здесь", "Изучите" или "Узнайте больше" не говорят пользователям, что они получат, когда нажмут на эти ссылки, и делают эти ссылки трудноотличимыми друг от друга, когда пользователи сканируют страницу.

Описывайте действия так, чтобы они соответствовали целям вашей целевой аудитории. Чего они надеются достичь на вашей домашней странице? Обратитесь к исследованиям пользователей и персонам и адаптируйте надписи на ссылках и кнопках в соответствии с их потребностями.

4.2 Выделите высокоприоритетные задачи с помощью четкой визуальной иерархии.

Дайте пользователям четкую отправную точку, визуально выделив ключевые задачи. Это связано с пониманием пользователей и их потребностей. Начните с определения списка основных задач. Используйте иерархию и визуальный вес, чтобы привлечь внимание к приоритетным задачам. Самые важные задачи должны быть визуально выделены. Избегайте визуальной конкуренции между элементами главной страницы - если все будет подчеркнуто, ничто не будет выделяться.

4.3 Расположите основную навигацию в хорошо заметном месте.

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

Принцип 5: Сохраняйте простоту домашних страниц

Хотя главные страницы содержат разнообразный контент и ссылки, они не должны быть слишком сложными, чтобы не перегружать пользователей. Сведите к минимуму анимированный контент, чтобы не отвлекать внимание. Беспорядок и неорганизованность могут испортить удобство пользования домашней страницей и подорвать доверие к бренду.

5.1 Отдавайте предпочтение простым, стандартным дизайнам домашних страниц.

Отчет WebAIM Million Report демонстрирует тенденцию к созданию сложных дизайнов домашних страниц. Хотя может быть заманчиво поэкспериментировать с креативными макетами на главной странице, люди проводят большую часть своего времени на других сайтах и предпочитают, чтобы ваш сайт работал так же, как и все другие сайты, которые они уже знают. Простой и предсказуемый дизайн улучшает пользовательский опыт, поскольку соответствует ожиданиям пользователей и сохраняет их ментальные модели.

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

5.2 Сведите к минимуму движение и анимацию.

Не используйте анимацию или движение только для того, чтобы привлечь внимание к какому-либо элементу на главной странице - движущиеся элементы часто воспринимаются как реклама. Кроме того, чрезмерное движение и анимация вызывают проблемы с доступностью: параллакс, карусели с автоматической перемоткой и прокрутка могут вызвать дезориентацию и вестибулярные расстройства.

Избегайте автовоспроизведения видео. Посетители домашней страницы, как правило, не ожидают и не любят, когда их сразу же встречают громким, движущимся контентом. Автоматически запускающееся видео может быть настолько навязчивым, что мешает восприятию любого другого содержимого страницы.

Очень важно предоставить пользователям возможность контролировать автовоспроизведение и анимированный контент. Согласно рекомендациям WCAG 2.1, любое автовоспроизводящееся видео с движущимся, мигающим или прокручивающимся содержимым, которое длится более пяти секунд, должно предлагать возможность приостановить или остановить видео.

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

5.3 Обеспечьте мгновенный доступ к содержимому.

С момента появления Интернета скорость была важнейшим фактором, влияющим на удобство пользования сайтом. Несмотря на широкое распространение высокоскоростного интернета сегодня, время отклика остается таким же актуальным, как и 30 лет назад. Исследование Google показало, что вероятность того, что пользователи покинут страницу, возрастает на 32 %, если время загрузки страницы увеличивается с 1 до 3 секунд.

Главные страницы должны обеспечивать баланс между богатым контентом для изучения и быстрой загрузкой. Контент должен быть легко доступен для пользователей сразу после их прихода. Любые задержки с ответом на главной странице могут привести к путанице и спровоцировать уход пользователей.

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

5.4 Избегайте всплывающих окон и заставных экранов, если это не требуется по закону.

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

Всплывающих окон следует избегать, особенно до того, как пользователи смогут извлечь пользу из вашего сайта. Придерживайтесь принципа взаимности: предлагайте ценность своим посетителям, прежде чем требовать от них что-то. Еще хуже, когда всплывающие окна накладываются друг на друга, создавая еще один уровень сложности и раздражения.

Единственный приемлемый вариант отображения всплывающих окон или заставки до загрузки содержимого страницы - это когда ваш сайт по закону обязан запрашивать у пользователей согласие на использование файлов cookie или подтверждать их возраст.

Molson Coors, пивоваренная компания, представила проверку возраста на заставке перед отображением содержимого главной страницы. Этот дизайн соответствует требованиям законодательства и является приемлемым вариантом использования заставки.

Долговечность принципов домашней страницы

В 2001 году Якоб Нильсен в своей книге Homepage Usability: 50 Websites Deconstructed определил 113 рекомендаций по удобству использования домашней страницы. Большинство из этих рекомендаций остаются актуальными и сегодня и являются приложениями 5 основополагающих принципов, обсуждаемых в этой статье.

Такая долговечность не случайна. Десятилетия исследований неизменно показывают, что принципы и рекомендации по юзабилити стабильны в течение длительного времени, потому что они основаны на фундаментальном поведении человека, которое меняется очень медленно, если вообще меняется.

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

Спасибо, дорогой!

Уютная тележка: https://t.me/yetanotherdesigner
ВКшечка: https://vk.com/yetanotherdesigner

Чем будем работать

Source Foundation - это плагин для Figma, предназначенный для управления цветами, отступами и типографикой. Кроме того, он содержит несколько вспомогательных команд для поддержки других рабочих процессов, таких как замена переменных, исправление слоев и импорт/экспорт стилей компонентов.

Как будем работать

Основным поинтом процесса является автоматизация для быстрого адаптирования системы-источника под конкретные потребности.

Форк

Идея заключается в том, чтобы скопировать основной файл и создать безопасное пространство для экспериментов и проектирования под конкретную потребность.

Кастомизация

Всё дело в инструментах, которые делают настройку процесса максимально простой. Плагин Source Foundation позволяет изменять цвета, отступы, радиусы, типографию и стили компонентов.

Наводим красоту и публикуем

Финальные штрихи. Именно здесь вы дарите новой системе душу.

Результаты

1. Design system file (Figma)
2. Figma plugin
3. Tokens (Git Hub repo)
4. Branding samples (Figma)
5. Crypto Trader Pro (Figma)

Демо

1. Crypto Trader Pro (Figma)
2. Branded components demo (Figma)
3. Source Foundation Dev Docs (Сайт)

Погнали!

Идея

Я занимаюсь созданием мультибрендовой дизайн-системы уже несколько лет. И по мере того, как я становлюсь более опытным, а наши инструменты становятся более продвинутыми, я чувствую, что приблизился к своей цели.

Мой подход заключается в том, чтобы иметь один общий файл с компонентами, стилями и переменными. Для начала работы над новым проектом я копирую этот файл и настраиваю его под нужды проекта. Копия предоставляет безопасное место, где я могу экспериментировать с дизайн-элементами, не затрагивая основную библиотеку.

В двух словах, это похоже на создание форка репозитория или проекта на CodePen.

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

Челлендж

Хотя создание копий просто, изменение всей системы сложно. Дизайнер, конечно, может сделать это вручную, однако это монотонный процесс, лишенный креативности, и именно здесь я увидел возможность автоматизировать процесс.

Я хотел легко изменять несколько основных аспектов дизайн-языка.

1. Цветовая палитра
   Я хотел иметь полный контроль над нейтральными и акцентными цветами с возможностью тонкой настройки как светлых, так и темных режимов.
2. Типографика
   Должен быть способ выбора шкалы типографии и базового размера шрифта.
3. Отступы
   Широкий диапазон масштабов для проектирования под нативные рабочие столы, веб-сайты и мобильные приложения.
4. Радиусы
   Несколько предустановленных значений от консервативных до более игривых.
5. Элевация
   Должно хватить шести уровней элевации.
6. Стили компонентов
   Целью было обеспечить разнообразие различных визуальных стилей для основных компонентов дизайна, таких как кнопки, выпадающие списки и элементы форм.

Цветовая палитра

Это самая сложная задача для освоения. Это было самое интересное решение. Рабочий процесс вокруг палитры всегда одинаков.

1. Выбираем основные цвета
2. Создаем оттенки
3. Проверяем доступность
   

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

У меня уже есть надежная цветовая система, которая работает для меня и десятков других дизайнеров в моей компании.

Теперь мне нужен был способ изменить палитру с минимальным или без ручного труда.

Чтобы справиться с этими задачами, я создал плагин Source Foundation для Figma, который выполняет всю предварительную работу по управлению цветами.

Он дает вам полный контроль над семантикой, нейтральными и акцентными цветами. Был разработан с учетом доступности, все акценты соответствуют WCAG 2.2 с минимальным контрастным соотношением 4,5:1. И, что самое важное, им приятно пользоваться.

Демо, где вы можете поиграть с разными цветовыми темами и другими аспектами дизайна → ссылка на демо.

Типографика, отступы и радиусы

Это важные аспекты, которые влияют на общий размер элементов пользовательского интерфейса и их тон.

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

Стили компонентов

Стили компонентов определяют внешний вид и ощущение всех основных компонентов в системе. Это будет плоским? Или, может быть, немного блестящим? Поднятым или опущенным? Как насчет немного неровностей?

Как дизайнер, я хотел иметь гибкую и легко поддерживаемую систему стилей, которую я мог бы адаптировать для любого клиента на любой платформе с помощью простого в использовании рабочего процесса plug-and-play. Если угодно, CSS-подобные классы.

Концепция

Для того чтобы это сделать, мне нужно разделить компоненты и их стили. Это похоже на создание CSS-классов для кнопок, выпадающих списков и форм, но с использованием компонентов Figma. Я называю их стиль-компонентами.

Стиль-компонент представляет собой многоразовый стиль элемента пользовательского интерфейса, очень похожий на CSS-класс.

В Figma экземпляр стиль-компонента находится в абсолютном положении и находится за контентом.

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

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

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

Моим абсолютным must-have являются следующие элементы:

1. Общий элемент интерфейса
• Базовый стиль для всех интерактивных элементов интерфейса, которые можно нажимать, наводить и выбирать. Например, пункты меню, элементы списка и элементы навигации.
2. Кнопки
• Кнопки по умолчанию, основные, разрушающие и призрачные кнопки.
3. Элементы формы
• Поля ввода, флажки, радиокнопки и переключатели.
4. Фокус-визуализация
• Повторно используемая и последовательная фокус-визуализация, которую я могу применять к любому элементу, который мне нравится.
5. Оверлеи
• Стили для модальных окон, выпадающих списков, тостов и всплывающих окон.

Структура стиль-компонента

Хорошая идея иметь последовательную структуру для стиль-компонентов. Это упрощает поддержку и замену слоев по мере необходимости.

После нескольких экспериментов вот с чем я остановился.

Давайте разберем подробнее.

1. Слой фона предназначен для основного цвета и применения эффектов к слою. Слой изображения фона внутри выполняет ту же работу, что и свойство background-image в CSS.
2. Компонент тени - это собственно созданный эффект элевации, который поддерживает colour bleed shadows. Таким образом, я могу изменить цвет тени как мне угодно, не создавая отдельного стиля эффекта в Figma. И я могу даже изменить режим shadow blending тоже!

На изображении ниже показано, что я могу получить, используя базовый стиль-компонент с всего несколькими цветами.

Не забудем и про тёмный режим.

Визуальные состояния

Все интерактивные элементы должны иметь визуальные состояния. Я использую варианты компонентов для их реализации.

Вот, например, мой стиль основной кнопки.

И элемент формы.

Настройки цвета

Очень важная функция в современной разработке пользовательского интерфейса - это возможность изменять цвета.

Например, в CSS мы можем использовать функцию color-mix() и наложить любой цветовой градиент. Все современные препроцессоры CSS имеют цветовые функции в той или иной форме.

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

Opacity

Возможность изменять прозрачность любого цвета - это неотъемлемый инструмент в нашем арсенале.

В настоящее время мы не можем изменить альфа-канал для псевдонима цветовой переменной в Figma. Однако мы можем изменить прозрачность слоя, даже есть переменные прозрачности для этого. Как только вы установите цвета в отдельные слои, нетрудно настроить их для работы с любым цветовым диапазоном.

Tints and Shadows

Оттенки и тени делают целевой цвет светлее или темнее.

В CSS есть свойство background-image, которое создает виртуальный слой поверх сплошного заливки. Это позволяет наложить фоновый цвет либо градиентным заливкой, либо изображением.

В Figma я собираюсь использовать слои, чтобы добиться аналогичных результатов.

Это работает так же, как и в CSS. Есть несколько реальных примеров того, как это работает для веба → ссылка на документацию

Gradients

Для создания градиента мы смешиваем несколько цветов.

Для реализации этого в Figma я использую маску градиента, чтобы создать линейный градиент, подобный CSS.

Вот пример того, как это переводится в HTML+CSS → ссылка на пример в CodePen

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

Этот метод создает красивые и чистые градиенты поверх любого выбранного мной цвета. Вы можете найти более подробную информацию здесь → ссылка на документацию

Теперь я могу использовать эти специальные компоненты как цветовые функции или градиенты поверх любого сплошного цвета из моей палитры.

Подключаемые стили

Это был последний кусочек, который нужно было решить. Мне нужны были некоторые виды стилей, которые я мог бы применять поверх моих компонентов, чтобы полностью изменить их внешний вид и ощущения. Желательно что-то визуальное, чтобы я мог видеть результат заранее.

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

Автоматизированные шаблоны стилей в файле

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

Теперь я могу создавать столько предустановок, сколько захочу, и применять их обратно с помощью автоматизации импорта. Эта автоматизация передает все свойства и переопределения из предустановки обратно в активные компоненты, полностью изменяя их визуальное представление.

И вот все, что мне нужно сделать, мой файл пользовательской системы дизайна готов к использованию.

Резюме

Создание брендированных систем - это сложно.

Несколько лет назад меня поразило видео о командах, пытающихся решить очень сложную головоломку.

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

С тех пор я поставил цель разработать полноценный продукт Figma - систему, которая является реальной и способной обслуживать несколько брендов. Это сочетание правильно спроектированных дизайнерских компонентов, продвинутого инструментария и четких рабочих процессов.

Оригинал статьи: https://uxdesign.cc/flexible-styles-for-multi-brand-design-systems-638f9c25c227

Спасибо, дорогой!

Уютная тележка: https://t.me/yetanotherdesigner
ВКшечка: https://vk.com/yetanotherdesigner