Как организовать стили и построить сложную дизайн систему «styleguide» с набором реиспользуемых компонентов?

Question

[ValeraValera]

Интересует общая методика построения таких систем и организации дизайна как
https://design.alfabank.ru/components/amount
codeforamerica.clearleft.com
https://getbootstrap.com/

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

Answer 1

[Нерон Лордов]

Figma, всё включено. Почитай официальный сайт и блог, для начала, а потом уже гугли авторитетов вроде Романа Камушкена.

Answer 2

[Oleg Dobrygin]

1) UX и представление того, что мы хотим получить. Используется для того, чтобы понять какие компоненты понадобятся, а также для того, чтобы понять какие Layouts будут в приложении.
Для накидки макетов и UX подойдет Axure.

2) Верстка дизайна макетов.
Sketch – по моему, самый удобный из всех, с большим количеством плагинов, но правда только для мака
Figma — тоже хороший, а главно бесплатный,
Photoshop — не самый лучший вариант, но тоже можно, если любите хардкор O_o

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

Avocode, Zeplin

4) Верстка макетов. Подойдет HTML+CSS. Для написания стилей можно выбрать препроцессор по вкусу: LESS, PostCSS. Обычно объединяется с пунктом 5.

5) Скриптинг, Логика, Компоненты, Javascript и десятки бессонных ночей.
Для написания логики работы и компонентов подойдет Nuxt.js или React

6) Тестирование и отладка. Исправление багов. Будет хорошо если в команде есть человек, умеющий писать Unit-тесты. А еще лучше, если разработчики будут делать это сами.

Comments

[Oleg Dobrygin]

Кстати, если вы работаете командой, то потребуется какой-нибудь тайм/таск-менеджер. И собственно потребуется сам менеджер.