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

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

что нужно знать, что почитать, что посмотреть, чтобы научиться строить такие системы дизайна,
с чего начинать , какие инструменты используются , какая нужна команда ?
  • Вопрос задан
  • 175 просмотров
Решения вопроса 1
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
Figma, всё включено. Почитай официальный сайт и блог, для начала, а потом уже гугли авторитетов вроде Романа Камушкена.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
odobrygin
@odobrygin
Front-end / Back-end Developer
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-тесты. А еще лучше, если разработчики будут делать это сами.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы