Дизайн системы

[Glajik]

• Загуглить и почитать про дизайн системы.
• Понять что такое на самом деле Bootstrap, Material.io
• Поискать альтернативные, предоставить ссылки в комментариях (только не дублируйте)
• Поделиться в комментариях своим мнением - для чего разрабатывают дизайн системы

[AndriiStolitnii]

• Atomic design - принцип создания дизайн-систем Аtomic design.
• Создание собственной дизайн-системы с помощью Figma - статья для дизайнеров, пошаговая инструкция как создавать собственную дизайн-систему.
• Дизайн-системы решают несколько задач: 1) Единый стиль приложения - во-первых, это красиво, а во-вторых, не нужно заново придумывать стиль для каждого элемента на странице, если эти элементы повторяются. 2) Скорость - использование уже созданных дизайн-систем(Bootstrap, Material design) значительно сокращает время на разработку дизайна, упрощает работу разработчикам. 3) Надежность - уменьшает количество ошибок в применении стилей, страхует от совсем плохих дизайнерских решений, того что код "поплывет" и т.д.
• Недостаток готовых дизайн-систем - из-за повсеместного использования самых популярных дизайн-систем сайты выглядят похоже друг на друга, приедаются и не вызывают визуального удовольствия, интереса у пользователя.

[Glajik]

• Atomic design - принцип создания дизайн-систем Аtomic design.

В точку!! Я хотел чтобы вы это накопали!! Бред Фрост, вебдизайнер, автор книги Atomic Web Design. Brad Frost - Atomic web design

Я думаю, что благодаря ему сегодняшний фронт - таков каков он есть. Сайт разбит на блоки, а блоки на компоненты которые можно комбинировать и использовать повторно. Инструменты, которые позволяют нам управлять этим (React, Angular, Vue, and more). Дизайн системы, которые по сути набор правил, систематизированных и стандартизированных (Bootstrap, Material, ....) о том как когда и как комбинировать компоненты и блоки.

[Glajik]

Material Design

Overview Video

Смотрим не спеша Guideline for designer. Обратите внимание на такие разделы:

• Surfaces
• Spacing methods
• Understanding navigation
• Color usage
• Understanding typography
• About shape
• States

Так же посмотрите Components - выберите по крайней мере один знакомый и один который вы еще не знаете, и посмотрите как можно и как нельзя его использовать.

Мотивация: Зачем нам это? Frontend разработчик разрабатывает интерфейсы, а тут наиболее полное и хорошо оформленное руководство по UI, с картинками))