- Системы дизайна:
📘 Google: Material Design System
📘 Microsoft: Fluent Design System
📘 Apple: Human Interface
📘 IBM Design Language
📘 Язык проектирования Atlassian для создания простых и красивых впечатлений.
📘 Polaris Shopify
- Атомарный дизайн
Atomic Design подробно описывает все, что входит в создание и поддержание надежных систем проектирования, позволяющих развертывать более качественные, более согласованные пользовательские интерфейсы быстрее, чем когда-либо прежде.
Дизайн разделяется на компонерты: атомы, молекулы, организмы, шаблоны, страницы. Кадлый более мелкий компонент объединяется с подобным себе, для построения более сложного компонента - атомы дизайна объединяются в молекулы, дальше в организмы, потом в шаблоны, и наконец, после добавления реального контента, в страницы.
• Атомы - это элементы пользовательского интерфейса, которые нельзя разбивать дальше и которые служат элементными строительными блоками интерфейса.
• Молекулы представляют собой наборы атомов, которые образуют относительно простые компоненты пользовательского интерфейса.
• Организмы - это относительно сложные компоненты, которые образуют отдельные участки интерфейса. Организм - это основа для построение частичного представления.
• Шаблоны размещают компоненты в макете и демонстрируют структуру содержимого, лежащую в основе дизайна. Шаблон состоит в основном из групп организмов, сшитых вместе для формирования страниц.
• Страницы применяют реальный контент к шаблонам и формулируют варианты, чтобы продемонстрировать окончательный интерфейс и проверить устойчивость системы проектирования.
📘 Книга Atomic Design
◻ Атомарный дизайн-методология - краткое описание кнцепции.
◻ Атомарный дизайн: начало работы
◻ Цветовая палитра Google 2014 Material Design color palettes
◻ Adobe color
◻ Microsoft Color palettes
◻ На основе ваших любимых цветов комбинируются различные палитры khroma.co
-
Форматы
◻ Размеры логотипа Какой размер логотипа лучше всего? Рекомендации для веб-сайтов, социальных сетей и печати
Начинать можно с векторного логотипа 800х800 (профиль фейсбка), чтобы в дальнейшем модифицировать его под любой формат и размер. -
Иконки
◻ Иконки Google, Андроид Icons Material Design
◻ HTML символы - часто, вместо иконок достаточноиспользовать специальные символы, которые содержит стандартный шрифт. Это общая пунтуация, сиволы валют, матемаические, блоки, стрелки смайлики и т.д.
✅ Как поменять цвет иконки SVG:
Если без CSS, то надо дополнить тег path кодом style="fill:white;fill-rule:nonzero;" - будет белый цвет. Весь код иконки:
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" style="fill:white;fill-rule:nonzero;"/></svg>
◻ Изменить цвет и размер иконки SVG с помощью CSS
- Картинки
◻ Поиск векторных и png артинок SVG Silh.
◻ Удаление фона картинки remove.bg. Бесплатно и без регистрации для небольших изображений.
◻ Увеличение качества изображения, из маленького можно увеличить без потери качества letsenhance.io. Требуется регистрациия.
-
SVG
◻ Использование SVG
.bg-circle {
background: url("/img/app/circle-orange32.svg") no-repeat top 2px left;
background-size:32px auto;
}
Картинка представляет собой кружок размером 32px, располагается слева, без повторов, с небольшим отступом сверху.
📘 background CSS
Практические консультации вы можете получить на наших веб курсах в Сочи, Адлер:
