Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Создаем дизайн-систему

Productivity InsideВеб-дизайнДизайн мобильных приложенийГрафический дизайн
Перевод
Recovery mode
Вне всякого сомнения, о дизайн-системах меня спрашивают чаще, чем о чем-либо другом. За последние несколько лет я посвятил много времени размышлениям о том, как выстраивать, реализовывать и представлять дизайн-системы для таких продуктов, как Marvel, Bantam и Modulz, и теперь решил, что пришла пора поделиться тем, чему научился в процессе.



Что такое дизайн-система?

Ни для кого не секрет, что дизайнеры любят хорошие UI-киты. Но, по моим наблюдениям, в последнее время все больше внимания уделяется не просто наборам инструментов и руководствам по стилю, а созданию систем, которые связывают воедино целые продукты. Компании вроде Shopify и Intercom формируют особые команды, которые занимаются только и исключительно дизайн-системами. Люди начинают осознавать, как важен системный подход в дизайне. Это внушает оптимизм. Кто знает, возможно, в один прекрасный день появится инструмент для дизайнеров, который не будет предполагать, что в каждом новом проекте мы начинаем все с нуля.
Читать дальше →
Всего голосов 18: ↑16 и ↓2 +14
Просмотры20.3K
Комментарии 4

Библиотека компонентов как инструмент поддержания целостности вебсайта

Разработка веб-сайтовCSSHTML

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


Как следствие проблемы: на создание новых страниц тратится неоправданно много времени. Теряется целостность сайта. Растёт файл стилей и код.

Читать дальше →
Всего голосов 12: ↑10 и ↓2 +8
Просмотры10.6K
Комментарии 8

Как создавать библиотеки компонентов в Figma, экономя бюджет, на примере онлайн-аукциона

Разработка веб-сайтовИнтерфейсыДизайн


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

Это первая часть статьи, в которой будет много скучной, но конкретной практической информации по созданию компонентов в Figma, а также нюансы, подводные камни и реалии создания проектов с ограниченным бюджетом в провинциальной среде =)
Читать дальше →
Всего голосов 8: ↑8 и ↓0 +8
Просмотры15.9K
Комментарии 7

Сборка библиотеки angular-компонентов в виде веб-компонентов

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

Но, как правило, эти материалы ограничиваются рассмотрением довольно утопичной ситуации: мы делаем отдельный проект, создаем angular-компонент, настраиваем проект на сборку Elements и, наконец, компилируем несколько JS-файлов, подключение которых к обычной странице даст нам необходимый результат. Ура, компонент работает!..

image

На практике же возникает потребность вытащить несколько компонентов из готового работающего angular-проекта, да еще желательно так, чтобы не влиять на его текущую разработку и использование. Эта статья получилась как раз благодаря одной из таких ситуаций: я хотел не просто собрать отдельные элементы проекта, а сделать процесс компиляции целой UI-библиотеки на Angular в набор файлов с нативными веб-компонентами.
Читать дальше →
Всего голосов 19: ↑17 и ↓2 +15
Просмотры4K
Комментарии 0

Стартуем библиотеку компонентов на React и TypeScript

JavaScriptReactJS
Из песочницы
Tutorial

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

Читать дальше →
Всего голосов 16: ↑16 и ↓0 +16
Просмотры15.1K
Комментарии 12

Звуки для UI: подборка тематических ресурсов

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

Другие наши подборки:


Читать дальше →
Всего голосов 26: ↑25 и ↓1 +24
Просмотры12.9K
Комментарии 2

Cypress + Storybook. Хранение тестового сценария, данных и рендеринг компонента в одном месте

Тестирование IT-системJavaScriptTDDReactJS
Из песочницы

Важное обновление #1


Storybook используется в качестве хоста для компонентов. Вы можете собирать и хостить компоненты любым другим способом. Например, импортировать их в одном JavaScript-файле и скормить его webpack-dev-server запущенного параллельно с Cypress в течении тетса.


Еще более важное обновление #2


Статья писалась когда версия Cypress была ниже 4.5.
На текущий момент доступны важные обновления Cypress и аддона cypress-react-unit-test. Сейчас не обязательно иметь отдельный хост для компонентов — эту задачу взял на себя Cypress.
Единственная причина реализовать описанный ниже подход — скорость или какие-то баги. Настоятельно рекомендую попробовать аддон cypress-react-unit-test.

Читать дальше →
Всего голосов 4: ↑4 и ↓0 +4
Просмотры2.8K
Комментарии 9

Разработка корпоративной библиотеки React компонентов. Кросс-платформенный подход

LuxoftJavaScriptReactJS
В данной статье повествуется история успешного внедрения дизайн-системы в компании одного из крупнейших DIY-ритейлеров. Описываются принципы и подходы кросс-платформенной разработки UI компонентов с использованием библиотек React и React Native, а также решение задачи переиспользования кода между проектами для разных платформ.
Читать дальше →
Всего голосов 3: ↑3 и ↓0 +3
Просмотры2K
Комментарии 3

Тупые и умные компоненты

EPAMИнтерфейсыДизайн

Меня зовут Илона, я Senior Experience Designer в EPAM. Работа для меня удачно совпадает с хобби в EPAM я проектирую интерфейсы для зарубежных заказчиков, читаю лекции для сотрудников и студентов лабы, менторю дизайнеров. В свободное время преподаю проектирование интерфейсов в магистратуре Университета ИТМО и веду Телеграм-канал о UX-дизайне.
В работе и преподавании я часто сталкиваюсь с проблемой: сложно организовать компоненты интерфейса так, чтобы было всегда понятно, какой компонент использовать, чтобы похожие компоненты не плодились и не путали дизайнеров и разработчиков.
Делюсь подходом, который помогает мне удобно организовать компоненты и упростить жизнь себе и разработчикам.

Читать далее
Всего голосов 25: ↑19 и ↓6 +13
Просмотры8.4K
Комментарии 20

Что выбрать в качестве библиотеки компонентов для React-проекта

Разработка веб-сайтовOpen sourceJavaScriptReactJSTypeScript
Из песочницы

Меня зовут Ксюша Луговая. В СберКорусе я занимаюсь поддержкой библиотеки React-компонентов Korus-UI. 

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

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

Читать далее
Всего голосов 24: ↑23 и ↓1 +22
Просмотры11.3K
Комментарии 34

Taiga UI — библиотека компонентов под Angular, которую вам стоит попробовать

TINKOFFРазработка веб-сайтовJavaScriptAngularTypeScript

Привет!

Саша Инкин и я регулярно пишем на Хабр статьи по Angular. Почти все они основаны на нашем опыте разработки большой библиотеки компонентов.

Эту библиотеку мы развиваем, перерабатываем и дополняем уже несколько лет, а свои идеи проверяем на нескольких десятках проектов Тинькофф Бизнеса и внутренних систем компании. Мы рады сообщить: выложили нашу библиотеку в открытый доступ!

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

Что там за Taiga UI?
Всего голосов 43: ↑43 и ↓0 +43
Просмотры8.8K
Комментарии 26

Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular

TINKOFFРазработка веб-сайтовJavaScriptAngularTypeScript

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

Мы справились с помощью хитрых директив, которые назвали контроллерами. Они полностью решили проблему вложенности и сократили вес библиотеки.

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

Посмотреть
Всего голосов 26: ↑26 и ↓0 +26
Просмотры3.6K
Комментарии 14

Ховеры бывают разные

Веб-дизайнИнтерфейсы

Когда у нас в eLama компонентов в библиотеке стало достаточно много, мы заметили, что ховеры не имеют системы: меняется цвет заливки, цвет рамки, цвет текста, появляется тень и т.д.

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

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Просмотры3.9K
Комментарии 5

Упрощаем работу с Angular с помощью @taiga-ui/cdk: 5 наших лучших практик

TINKOFFРазработка веб-сайтовJavaScriptAngularTypeScript

CDK — базовый пакет библиотеки компонентов Taiga UI. Он не имеет никакой привязки к визуальной составляющей библиотеки, а скорее служит набором полезных инструментов для упрощения создания Angular-приложений.

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

Заглянуть в мультитул
Всего голосов 18: ↑18 и ↓0 +18
Просмотры2.5K
Комментарии 4

Как быстро и удобно документировать Angular проект с помощью модуля AddOnDoc из TaigaUI

ЕвропланAngular
Из песочницы

Не так давно вышла новая библиотека компонентов Taiga UI. Как говорят сами создатели Александр Инкин и Роман Седов, это конструктор Lego. И действительно: в нём есть много полезных модулей, которые можно использовать в своём проекте. В этой статье мы рассмотрим модуль AddOnDoc.

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Просмотры1.3K
Комментарии 2