Материал дизайн цвета: Цвет — Material-UI

Содержание

Цвет - Material-UI

Используйте цвет, чтобы передать смысл. Вы получаете доступ ко всем цветам в спецификации Material Design из коробки.

Система цветов Material Design может быть использована для создания цветовой темы, которая отражает ваш бренд или стиль.

Picking colors

Официальный инструмент для работы с цветом

The Material Design team has also built an awesome palette configuration tool: material.io/resources/color/. This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.

Официальный инструмент для работы с цветом

The output can be fed into createMuiTheme() function:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

Песочница

To test a material.io/design/color color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. Либо можете ввести шестнадцатеричные значения в текстовые поля Primary и Secondary.

The output shown in the color sample can be pasted directly into a createMuiTheme() function (to be used with ThemeProvider):

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: '#f44336',
    },
  },
});

Only the main shades need be provided (unless you wish to further customize light, dark or contrastText), as the other colors will be calculated by createMuiTheme(), as described in the Theme customization section.

If you are using the default primary and / or secondary shades then by providing the color object, createMuiTheme() will use the appropriate shades from the material color for main, light and dark.

Инструменты, созданные сообществом

  • create-mui-theme: Is an online tool for creating Material-UI themes via Material Design Color Tool.
  • material-ui-theme-editor: A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
  • Material palette generator: Этот инструмент можно использовать для создания палитры на основе любого выбранного цвета.

2014 Material Design color palettes

These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.

Важные термины

  • Palette: A palette is a collection of colors, i.e. hues and their shades. Материал-UI предоставляет все цвета из руководящих принципов Material Design. This color palette has been designed with colors that work harmoniously with each other.
  • Зная тон HUE (red, pink и т. д.) и оттенок SHADE (500, 600 и т. д.), можно импортировать цвет следующим образом:

Цветовая палитра

Зная тон

HUE (red, pink и т. д.) и оттенок SHADE (500, 600 и т. д.), можно импортировать цвет следующим образом:

import HUE from '@material-ui/core/colors/HUE';

const color = HUE[SHADE];

Примеры

For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:

import purple from '@material-ui/core/colors/purple';
import red from '@material-ui/core/colors/red';

const primary = red[500]; 
const accent = purple['A200']; 
const accent = purple.A200; 
10 лучших генераторов цветных палитр Material Design / Полезное в сети / Постовой
Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Цвет — важнейший элемент веб-дизайна, поэтому, когда вы работаете с Material Design, стоит обратить внимание на активное использование насыщенных, контрастных и ярких цветов. Существует бесконечное множество комбинаций, и любому дизайнеру не избежать размышлений о подборе наиболее подходящих оттенков.

Так как выбор палитры задаст весь будущий дизайн, на это нужно потратить достаточно времени, и чтобы помочь с выбором идеальных комбинаций, в этой статье собрано топ 10 генераторов цветных палитр для стиля Material Design.

Также хочу заменить, что ранее мы уже публиковали подборку с генераторами цветовых палитр, но они к Material Design никак не относились. Называлась статья 5 генераторов цветовых схем для веб-дизайнера.

Material Palette
Material Pallete один из лучших инструментов подбора палитр в стиле Material Design. Его хорошо продуманный интерфейс точно не оставит вас равнодушным. Это приложение позволяет выбрать главный цвет и дополнительные к нему, после чего покажет вам превью созданной палитры и предложит несколько способов её скачать.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Material UI
Material UI пользуется популярностью среди графических и веб-дизайнеров. Он содержит основные и дополнительные цвета для использования или же поможет при работе над цветовой темой вашего проекта.
Создание палитры
начинается с выбора основных цветов, после чего заполняется спектром с соответствующими ему цветами. Так можно создать полноценную, готовую к использованию палитру для Android, Web, и iOS. 500 цветов Google рекомендует использовать как основные в вашем приложении, а также ряд других цветов как дополнительные.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Designskillz Material design
Этот ресурс отобразит для вас все цвета material дизайна вместе с их названиями (например Pink, Light Blue, и т. д.).

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Material UP
Material UP это инструмент, предоставляющий палитры для дизайна. Показывает основные цвета в ряд, один за другим. Кликнув на один из них можно увидеть все дополнительные цвета, которые привязаны к нему.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Material Mixer
Material mixer поможет вам выбрать сочетание основных и дополнительных цветов в material дизайне. Инструмент подбирает тени и оттенки цветов, основываясь на палитре Google. Сервис также позволяет выбрать запасной цвет на замену для каждого основного в вашей палитре. Для создания новой палитры просто выберите основной и дополнительный цвет из предлагаемых, чтобы отобразился идеально подобранный список сочетающихся с ними цветов.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Random Material Generator
Позвольте Random Material Generator выбрать палитру для вашего дизайна случайным образом.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Colordrop
Это расширение для браузера Chrome. Позволяет окрашивать DIV-блоки и шрифты с помощью Drag & Drop в цвета из палитры Material Design. Отличное решение в тех случаях, когда нужно быстро посмотреть, как будет выглядеть элемент на рабочем сайте. Расширение хоть и сыроватое, но занимательное.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Material Design css генератор
Простой инструмент, который позволяет удобно подобрать цветовую палитру для вашего приложения. После того, как определились с основными активными цветами, можно скачать CSS файл.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Material Colors
Material Colors — это простой в использовании ресурс для тестирования и быстрого копирования цветов Material Design. Здесь вы найдете 500 основных и 200 дополнительных цветов для создания цветовой темы.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Tint ui
Tint UI это инструмент для подбора цветов, где собраны официальные палитры Material Design, iOS, Flat UI Colors и Windows.

Полезное в сети: 10 лучших генераторов цветных палитр Material Design

Материальный дизайн — Цвет — CSS-LIVE

Перевод раздела Color официальной документации Google: http://www.google.com/design/spec/material-design/.

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

Цветовая палитра

Данная цветовая палитра содержит основные и акцентные цвета, которые могут быть использованы для отоображения или развития цветов вашего бренда. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.

Данная цветовая палитра начинается с основных цветов и заполняет весь спектр, создавая полноценную палитру, пригодную для использования в Android, iOS и в Сети. Google рекомендует в качестве основных цветов вашего приложения использовать оттенки с насыщенностью 500, а остальные – в качестве акцентных цветов.

Скачать цветовые образцы

Использование цветов в UI

Выберите палитру

Чтобы ограничить свою цветовую выборку выберите три оттенка из основной палитры и один акцентный цвет из вспомогательной палитры.

Пример основной цветовой палитры

Пример вспомогательной палитры

Используйте непрозрачность для текста, иконок и разделителей

Чтобы сообщить пользователю, насколько важна определенная информация относительно остального текста, вы можете изменять непрозрачность текста. 

Темный текст на светлом фоне

Белый текст на темном фоне

Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%. Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%.

Темный текст (#000000) Непрозрачность
Основной текст 87%
Вспомогательный текст 54%
Подсказки (текстовые поля, метки) 26%

Светлый текст на темном фоне

Значения в таблице отражают относительную значимость светлого текста на темном фоне.

Светлый текст (#FFFFFF) Непрозрачность
Основной текст
100%
Вспомогательный текст 70%
Подсказки (текстовые поля, метки) 30%

Текст на цветном фоне

Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими таблицами цветовых палитр, в которых указаны оптимальные значения контраста и альфа-канала.

Прочие элементы

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

Панели инструментов и панели состояния

Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.

Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.

Акцентный цвет

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

В плавающей кнопке действия используется акцентный цвет.

Переключатель, использующий акцентный цвет.

Правильно.

В основном тексте используйте акцентный цвет только для привлечения внимания к веб-ссылке.

Неправильно.

Не используйте акцентный цвет в качестве цвета основного текста.

Правильно

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

Неправильно.

Не используйте акцентный цвет для панелей своего приложения или для крупных цветных участков. Избегайте использования одного и того же цвета для плавающей кнопки действия и для фона.

Запасные акцентные цвета

Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.

Правильно

Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.

Неправильно.

Не используйте акцентный цвет на цветном фоне, если контраст недостаточно высок.

Темы

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

Скачать темы

Светлая тема

  1. Панель состояния
  2. Панель приложения
  3. Фон
  4. Карточки/Диалоговые окна

Палитра светлой темы

Применение в UI

Темная тема

  1. Панель состояния
  2. Панель приложения
  3. Фон
  4. Карточки/Диалоговые окна

Палитра темной темы

Применение в UI

10 лучших генераторов цветовой палитры Material Design

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

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


Этот инструмент позволяет быстро и легко создавать или импортировать наборы цветов для разработки собственной, идеальной темы из полностью настраиваемых палитр. После того, как вы настроите тему, присвойте имена теме и палитре, а затем быстро экспортируйте их в любой front-end фреймворк!

Поддерживается экспорт в JSON и AngularJS, Materialize, CSS, Polymer и некоторые другие среды.


MaterialPallete.com — это один из моих любимых генераторов цветов. Удобный пользовательский интерфейс обеспечивает прекрасный опыт взаимодействия. С помощью этого инструмента можно выбрать основные и специальные цвета для своего проекта. Затем вы сможете вывести на предварительный просмотр сгенерированную цветовую палитру и скачать ее различными способами на выбор.


Tint ui — это инструмент для выбора цвета из стандартных палитр Material Design, iOS, Flat UI Colors и Windows.


Material UI — включает в себя основные и специальные цвета, которые могут быть использованы для иллюстраций или разработки палитры бренда. Вы начинаете создавать цветовую палитру с основных цветов, а затем дополняете ее оттенками для создания полной палитры. Палитру можно использовать под Android, Web и iOS. Сервис предлагает на выбор 500 цветов в качестве основного цвета приложения, а также дополнительные цвета в качестве специальных.


MaterialColors.com — простой ресурс для тестирования и быстрого копирования цветов Material Design. Этот инструмент отображает только 500 основных и 200 специальных оттенков.


Этот простой инструмент поможет визуализировать все образцы цветов материального дизайна вместе с их официальными названиями (например, Pink, Light Blue и т.д.).


Сервис отображает основные цвета друг рядом с другом. При нажатии на одну «панель цвета» выводятся все оттенки, связанные с этим основным цветом.


Инструмент Material Mixer позволяет подбирать сочетание первичных и вторичных цветов. Основываясь на принципах материального дизайна от Google, программа вычисляет оттенки и тона, а также позволяет выбрать резервные цвета для каждого первичного и вторичного (специального) цвета. Выберите первичный и «А» (специальный) цвета и посмотрите, как они сочетаются друг с другом.


Позвольте инструменту Random Material Generator выбрать для вас цвета Material Design случайным образом.


Инструмент выбора цвета для палитры материального дизайна от Google.

Данная публикация представляет собой перевод статьи «10 Best Material Design Color Palette Generators» , подготовленной дружной командой проекта Интернет-технологии.ру

Цвет в дизайне / Блог компании ua-hosting.company / Хабр

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

Базовый цветовой круг пригодится в выборе наиболее подходящего сочетания цвета (или поможет гармонично совместить между собой определенные оттенки). Он изображает базовые и известные еще со школы правила смешивания основных цветов: красного, синего и желтого. Если смешать красный и желтый — получится оранжевый, синий и желтый дадут зеленый, а красный с синим — фиолетовый. Оранжевый, зеленый и фиолетовый — это вторичные цвета. Третичные цвета, как красно-фиолетовый и фиолетово-синий, получены от смешивания основных с вторичными.

Согласно теории цвета, гармоничные комбинации используют: два противоположные друг другу цвета; любые три цвета, равномерно распределенные вокруг круга и формирующие треугольник; любые четыре цвета, формирующие прямоугольник (фактически, две пары цветов друг напротив друга).

Правила соответствия цветов

Взаимодополняющие цвета — расположены друг напротив друга. Например, синий и оранжевый, или красный и зеленый.

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

Разделение взаимодополняющих цветов осуществляется за счет трех цветов. Они также находятся друг напротив друга, но общая комбинация выглядит более спокойной и разнообразной за счет добавления третего цвета.

Аналогичные цвета любые три цвета, которые находятся рядом с другом. Например, оранжевый, желто-оранжевый и желтый.

Триада образовывается из трех цветов, равномерно удаленных друг от друга. Схема триады создает контраст, где один цвет доминурует, а два других — расставляют акценты.

Две пары используют четыре цвета вместе в форме двух наборов дополнительных цветов.

Полезные веб-сайты

В сети немало ресурсов, которые предоставляют готовые цветовые палитры, паттерны и шаблоны. Ниже подобран небольшой список из полезных для дизайнера «цветовых» ресурсов.

СOLOURlovers

www.colourlovers.com/palettes/most-views/all-time/meta

Творческое сообщество, где люди со всего мира выкладывают готовые цветовые решения и шаблоны. Все выложенное оценивается пользователями.

Color Safe

colorsafe.co

Веб-сайт с красивыми и доступными цветовыми палитрами, основанными на рекомендациях WCAG Guidelines.

COLORS

clrs.cc

Простая палитра цветов для веб-разработки.

UiGradients

uigradients.com/#PinotNoir

Большая коллекция уже готовых цветных градиентов.

Couleurs

couleursapp.com

Удобное приложение для того, чтобы «выхватывать» и сохранять цвета, которые отображаются на экране.

Web Colour Data

webcolourdata.com

Делает разбивку любого сайта по цветовой гамме (по номерам и образцам).

Material Palette

www.materialpalette.com

Генерирует цветовую палитру дизайна.

Material Colors

materialcolors.com

Подборка цветовых образцов из Google's Material Design Guidelines.

Material Design Colors

www.designskilz.com/colors

Это небольшое веб-приложение помогает визуализировать цвета дизайна и скопировать их в различных форматах.

Material Design Palette

codepen.io/addyosmani/full/jlvoC

Цветовая палитра на 500 диапазонов оттенков для Android, веб и iOS.

Colours

colours.neilorangepeel.com

Цвет по номерам и расположению на палитре.

Rrggbb

rrgg.bb

Образцы цвета с номерами для программ.

Fifty Shades Of Grey For Web Designers

www.mynameisq.com/web-lab/fifty_shades_of_grey

Оттенки и образцы серого для веб-дизайна.

Fifty Shades Of Grey For Web Designers

hex.colorrrs.com

Сайт, подбирающий цвет.

Material UI Colors

www.materialui.co/colors

Палитра UI-цветов от Google, включает основные и дополнительные цвета, которые могут быть использованы для иллюстраций или веб-разработки.

Adobe Color CC

color.adobe.com/ru/create/color-wheel

Выхватывает цвета и оттенки из внешней среды — достаточно навести камеру телефона на что-то красочное.

Coolors

coolors.co/app/f2ee7a-7c6582-6252aa-f1ffc9-cdc5bb

Быстрый генератор цветовой схемы для дизайнеров.

BADA55.Io

bada55.io

Сайт предлагает наиболее агрессивные названия для цветов CSS.

Paletton

paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Цветовая схема для дизайнеров.

Colourcode

colourco.de

Выбор цвета, основанные на hsl. Схема включает разные комбинации цвета.

Color Palette Generator

www.degraeve.com/color-palette

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

Color Palettes Color Schemes

www.color-hex.com/color-palettes

ColorSchemer

www.colorschemer.com/online.html

Он-лайн схема, генерирующая цвет.

Colllor

colllor.com

Генератор цветовой палитры.

Contrast-A

www.dasplankton.de/ContrastA

Приложение позволяет пользователям экспериментировать с цветовыми комбинациями, создавать собственные.

Color Hex

www.colorhexa.com

Сайт предоставления информации о любом цвете. Достаточно ввести любые цветовые значения в поле поиска и Color Hex выдаст подробное описание, автоматически преобразовывая в RGB, CMYK, HSL, HSV, CIE-Lab, Хантер-Lab, CIE-Luv, CIE-LCH, XYZ и XYY.

СolorExplorer

www.colorexplorer.com

Полезный сайт, предоставляющий целый набор она-лайн инструментов для работы с цветовой палитры.

ColorLuck

7act.ru/colorluck.php

Инструмент для поиска максимально различных цветов.

на Луну и обратно / Блог компании Redmadrobot / Хабр

“Это унылое диалоговое окно действительно нужно?”

В этой статье я изложил главные принципы Material Design и дал советы по их воплощению. Текст написан по следам мастер-класса для разработчиков, который мы, Роботы, устраивали совместно с российским офисом Google (Think Mobile).


Когда-то все продукты Google выглядели по-разному плохо. Даже один продукт на разных платформах выглядел неконсистентно.

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

При чем тут Кеннеди?

Легенда такова: президент Кеннеди инициировал программу полёта человека на Луну (если верить, что этот полёт когда-либо был). А большой начальник в Google Ларри Пейдж исповедует принцип, что продукты нет смысла улучшать на 10% — они должны быть в 10 раз лучше, чем у конкурентов. Если уж запускать продукт, то сразу на Луну. Вот и здесь было решено круто всё переделать.



Результат в первую очередь коснулся веба, но затронул и некоторые мобильные продукты. В то же время шла отдельная работа над дизайном Android — Holo, который пришел на смену не слишком эстетически приятным интерфейсам старой Android.
Но оставалась одна проблема: Holo по-прежнему отличался от Project Kennedy.

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

В 2014 году на конференции I/O была представлена новая дизайн-система, подход, который получил название Material Design. Новая дизайн-система позволяет создавать консистентный пользовательский опыт на всех экранах: десктоп, смартфон, планшеты, часы, телевизоры, машины. Для Android-приложений Material Design представляет собой эволюцию визуального языка Holo и дизайн-гайдлайнов. Во многих смыслах это более гибкая система, которая создавалась с учетом того, что пользоваться ей будут другие дизайнеры — Google был лишь первым пользователем.

Material Design позволяет более объективно подходить к принятию дизайн-решений: как что-то выглядит, как что-то работает, как осуществляется анимация и так далее. Она задает разумные рамки, но не излишние ограничения.

4 принципа Material Design



Material Design зиждется на четырех основных принципах:
  1. Тактильные поверхности. В Material Design интерфейс складывается из осязаемых слоёв так называемой «цифровой бумаги». Эти слои расположены на разной высоте и отбрасывают тени друг на друга, что помогает пользователям лучше понимать анатомию интерфейса и принцип взаимодействия с ним.
  2. Полиграфический дизайн. Если считать слои кусками «цифровой бумаги», то в том, что касается «цифровых чернил» (всего того, что изображается на «цифровой бумаге»), используется подход из традиционного графического дизайна: например, журнального и плакатного.
  3. Осмысленная анимация. В реальном мире предметы не возникают из ниоткуда и не исчезают в никуда — такое бывает только в кино. Поэтому в Material Design мы всё время думаем о том, как с помощью анимации в слоях и в «цифровых чернилах» давать пользователям подсказки о работе интерфейса.
  4. Адаптивный дизайн. Речь идет о том, как мы применяем предыдущие три концепции на разных устройствах с разными разрешениями и размерами экранов.

Итак, будем двигаться по порядку.

Тактильные поверхности



Начнём с тактильных поверхностей. Это те самые кусочки «цифровой бумаги», которые в отличие от обычной бумаги обладают сверхспособностями — умеют растягиваться, соединяться и менять свою форму. В остальном же ведут себя в полном соответствии с законами физики и законодательством РФ.
Поверхность


Что такое поверхность? В основе своей это “контейнер” с тенью и ничего больше. Но и этого вполне достаточно, чтобы отличить один объект от другого и показать, как они расположены друг относительно друга. Философия Material Design стремится к простоте и “чистому” дизайну.

Нет необходимости заходить слишком далеко и использовать текстуру, накладывать градиенты для изображения светотени. Не нужно давать визуальные свойства кожи как у бабушкиной двери в квартиру — аккуратная тень может выразить очень многое. Но у каждой поверхности есть своя высота — расположение на оси Z. И каждая из поверхностей отбрасывает тень на нижнюю, как и в реальном мире.

Глубина


В традиционном «плоском дизайне» избегают таких теней, как всяческих проявлений объема, но они исполняют важную функцию обозначения структуры и иерархии элементов на экране. Например, если подъем элемента больше, то и тень у него больше. Эта увеличенная глубина помогает сфокусировать внимание пользователя на критически важных вещах и сделать это изящно.

Глубина также задаёт подсказки о взаимодействии. Здесь по мере того, как пользователь делает скролл, зеленая плашка прилипает к верхнему слою и добавляется тень. Это показывает, что двигаются не только «чернила», а белый фон находится ниже и перемещается целиком.

Важно заметить, что у глубины есть “дно”. Предполагается, что она ограничена толщиной самого мобильного устройства. То есть, если на смартфоне это сантиметр от стекла до задней стенки, а у вас в интерфейсе есть кредитная карточка, то её нельзя просто перевернуть — она упрётся в стекло и заднюю стенку.

NB!
  1. Глубина должна иметь смысл. Задавайте себе вопрос: «Почему так, а не иначе?» Если ответа нет, имеет смысл поискать другое решение.
  2. Позаботьтесь о логистике. Плавающие кнопки, тулбары и диалоговые окна находятся на определенной высоте. Иногда им нужно перемещаться по оси Z, чтобы избегать столкновений, когда что-то происходит. С этой вот хореографией нужно быть предельно внимательным.
  3. Не надо насиловать кнопку. Плавающая кнопка — очень характерный элемент. Многие считают, что стоит добавить её в интерфейс: так это сразу становится Material Design. Но она должна использоваться только для ключевого действия в вашем приложении. Если вам нужно закрыть какое-то окошко или подтвердить действие, то не нужно использовать плавающую кнопку. Для этого есть другие элементы.
  4. Не все должно быть на карточке. Если у какого-то объекта есть много форм и он содержит в себе много разного контента, то карточка подходит. А если нет, то, может, лучше сделать это обычным текстом или текстовым списком?
  5. Это унылое диалоговое окно действительно нужно? Дизайнеры Google постарались, чтобы сделать диалоговые окна получше, но всё равно для большинства задач больше подходят Bottom Sheets. Есть еще Snackbars. Диалоговые окна нужны только чтобы задать вопрос пользователю.
  6. Используйте раскрытие списков. Это недооценённый паттерн, но он вполне себе Material и хорошо решает задачу.

Полиграфический дизайн


Раз поверхности в Material Design мы называем «цифровой бумагой», то всё, что на ней размещается — текст, изображения, пиктограммы — нанесены «цифровыми чернилами». И Material Design использует классические принципы полиграфического дизайна в оформлении интерфейсов.

Изящная типографика

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

На этом экране довольно много текста. Но если отбросить иконки и превратить текст в серые блоки, то станет очевидно, что структура вполне различима.

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

Размер шрифта

На сайте google.com/design/spec есть стандартная палитра шрифтов, которую можно смело использовать. В палитре используется шрифт Roboto, но его можно заменять своим фирменным шрифтом, чтобы поддержать бренд. Важно всё внимательно протестировать, так как на разных устройствах рендеринг шрифтов может работать по-разному. Обычно OTF шрифты работают лучше, чем TTF.

Контрастная типографика

Еще один принцип из мира полиграфии, который хорошо уживается в Material Design, это контрастная типографика — действительно заметный контраст между размерами шрифта заголовка и наборного текста. Это красиво и хорошо выделяет главное.

Модульная сетка и направляющие


Теперь к расположению контента на экране. В полиграфическом дизайне используются модульные сетки, в экранном дизайне это больше базовые сетки с очень маленькими модулями. Так, в Material Design используется сетка с шагом в 8dp. DP — это density-independent pixel, единица во многом аналогичная единице point в iOS.

Но главная отличительная черта размещения контента в соответствии с принципами Material Design — расположение ключевых направляющих. Они задают отступы от краёв экрана, структурируя информацию и управляя взглядом пользователя. Если вы знакомы с дизайном многостраничных изданий или читали Чихольда, то наверняка многое знаете о сетке и полях и понимаете, откуда тут растут ноги.

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

Геометрическая иконографика


Если говорить про иконографику, то простые иконки использовались в Android уже на протяжении какого-то времени, но в Material Design они стали еще проще и дружелюбней. На неофициальном ресурсе materialdesignicons.com дизайнеры могут найти пиктограммы для своих целей и по возможности внести свой вклад.
Цвет

Как и в полиграфическом дизайне, в дизайне интерфейсов цвет является важным средством выразительности. В прежнем Android цвет был чем-то дополнительным, теперь же он играет более заметную роль. В Material Design стандартная цветовая палитра приложения состоит из основного и акцентного цветов.

Основной используется для больших областей вроде action bar, а в его более тёмную вариацию красится status bar. Более яркий акцентный цвет используется точечно в элементах управления, кнопках, полосках, индикаторах и т.д. Акцентный цвет призван привлекать внимание пользователя к ключевым элементам, таким как плавающая кнопка.

Насколько много цвета применять? Акценты ставятся точечно, в небольшом количестве. Для раскрашивания остальной части интерфейса есть простое базовое правило. Когда текста много, например, это список почты, стоит оставить app bar стандартного размера и покрасить его, чтобы позволить пользователю сосредоточиться на содержимом. Если контента не так много, например, детальный просмотр отдельного элемента, фото или калькулятор, то это отличная возможность для применения больших цветных плашек — 2х или 3х высоты app bar.

Android поддерживает библиотеку под названием Palette, которая позволяет экстрагировать цвет из фотографий. То есть имеется возможность динамически красить интерфейс, исходя из фотоиллюстраций в приложении.

Мы взяли фотографию, и алгоритм выделил из него 6 цветов с разными характеристиками:
— есть 3 сочных и 3 приглушенных цвета;
— они делятся на светлые, стандартные и тёмные тона;
— для каждого цвета фона определяется свой цвет текста, который также можно использовать.

Красивые фото

И наконец, как и в печатном дизайне, в Material Design поощряется использование фотографии и иллюстраций во всей красе. Картинки в основном размещаются без рамок, часто «навылет». Даже status bar специально делается прозрачным, чтобы не мешать. При этом каждая капля «цифровых чернил» на экране имеет функцию, почти ничего нет просто для украшения.

NB!
  1. Брендируйте с удовольствием. Google находится в более выгодном положении с тем, что может использовать яркие цвета в качестве фирменных, но это не стоит воспринимать как проблему. Цвета можно выбрать из корпоративного брендбука и вообще использовать логотип.
  2. Не забывайте отступы и “давайте воздуха”. Базовая сетка в 8dp и отступ слева в 72dp — практически правило. Пусть контенту будет хорошо и свободно.
  3. Выразительные фото делают погоду. Фотографии и иллюстрации в качестве выразительных средств — наш выбор.

Осмысленная анимация


В реальном мире объекты не могут просто появляться из ниоткуда или исчезать в никуда. Это вызывало бы недоумение и ставило людей в тупик. Поэтому и в Material Design осмысленная анимация используется, чтобы показать, что именно только что произошло.

Пример 1. Анимация показывает, что именно эта конкретная карточка после нажатия вышла на передний план, раскрылась, и стало видно больше информации.

Пример 2. Событие в календаре после нажатия отрывается от поверхности, превращается в отдельный слой «бумаги», начинает трансформироваться и раскрывается в виде подробной информации о событии.

Интересный момент в том, что активное движение привлекает взгляд — это естественно для нашего зрения. C помощью анимации мы управляем вниманием пользователя.

Асимметрия

Поскольку глубина интерфейса ограничена толщиной устройства, все трансформации объектов приходится производить в плоскости. Это также приводит к тому, что анимация трансформаций должна быть асимметричной — то есть изменение ширины и высоты объекта должно быть независимым. В противном случае возникает иллюзия приближения или отдаления от зрителя, причём на очень большое расстояние.

Реакция

Другой очень важный принцип анимации в Material Design — реакция на действия пользователя. Там, где это возможно, эпицентром изменений в интерфейсе должно быть прикосновение к экрану устройства. Например, волна, которая появляется и идёт от точки касания пальцем. Этот эффект без проблем реализуется в Android L.

Микроанимации

В Android L мы можем анимировать каждый элемент приложения — будь это переходы между контентом или маленькие иконки действий. Каждая деталь приложения важна, и микроанимации добавляют приложению более полную детальность и отзывчивость на каждое действие пользователя.

Четкость и резкость

И последний, ключевой принцип анимации: движение должно быть быстрым и чётким. В отличие от банального ускорения в начале и замедления в конце кривая анимации в Material Design более натуральная и интересная. Объекты быстрее реагируют и достигают целевого состояния, резче возвращаются назад, но чуть дольше идут к состоянию покоя в конце. В результате пользователю нужно меньше ждать (это меньше раздражает). При этом там, где объект уже вышел из сферы интересов пользователей, он позволяет себе вести себя более естественно.

NB!
  1. Не оставляйте анимацию напоследок. Не стоит оставлять анимацию на самый конец — она может служить ключевым фактором пользовательского опыта, и её нужно продумывать заранее.
  2. Знайте меру. Слишком много анимации — тоже плохо. Держите себя в руках и помните, что она должна быть осмысленной.

Адаптивный дизайн



Последний главный аспект Material Design — это концепция адаптивного дизайна. То есть как мы можем применить все три первые концепции на разных устройствах и экранах в разных форм-факторах.
От общего к частному


Самый распространенный приём — уменьшение количества информации, отображаемой на экране вместе с уменьшением экрана. Если на большом экране мы можем позволить себе показать и список, и детальную информацию по выбранному элементу, то на смартфонах сперва отображается список, а для подробностей нужен отдельный экран. В случае с планшетами app bar иногда можно увеличивать, чтобы хоть немного справиться с избытком свободного места.
Отступы


Размещение контента с помощью блоков сильно упрощает работу со свободным пространством на больших экранах. Мы знаем содержимое каждого блока, понимаем, насколько широким он может быть, чтобы не потерять в читаемости, а также насколько узким, чтобы не было слишком тесно. На широких экранах блоки растягиваются до своих пределов удобочитаемости, а потом добавляются отступы от краёв, которые вполне могут быть большими. Их можно заполнять плавающей кнопкой и цветными плашками.
Whiteframes


Идеи по организации пространства и отступам для разных экранов можно подсмотреть на сайте google.com/design/spec в разделе Whiteframes. Это отличное место, чтобы начать, понять общий смысл и затем продолжить собственные эксперименты.
Направляющие


Направляющие задают нам отступы для «чернил» на отдельных листах «бумаги». На смартфоне у нас один лист и один хороший отступ слева, а на планшете их два и в обоих случаях есть отступ. Важно, что для этих двух форм-факторов отступ будет разным. На планшете это 80dp, а на смартфоне — 72dp. Отступы от краёв экрана также разные.
Размеры


Рекомендуется брать кратные пропорции для всех элементов. В частности — выбирать размер app bar значительно удобнее, если делать его кратным: 1х, 2х, 3х. На смартфонах и планшетах этот размер разный, но приложение без проблем адаптируется.
Блоки


Мышление блоками вообще может быть полезным. Если задать такую вот модульную сетку из блоков, кратных 8dp, то получится отличный визуальный ритм и принимать решения будет удобнее. Зайдите на сайт с вайтфреймами и посмотрите материалы.
Toolbar


Action bar — одна из самых важных частей интерфейса. В нём размещается заголовок, кнопки действий и навигация. В Android Lollipop action bar превратился из скованной полоски сверху в полноценный виджет — функциональный и красивый блок управления приложением. Это стало возможным благодаря тому, что теперь в тулбар можно поместить много функциональных элементов, о которых раньше и мечтать не приходилось:
— поля ввода, формы;
— плавающая кнопка основного действия;
— тулбар скрыт выдвинутой навигацией, но и здесь мы видим вполне функциональный виджет;
— тулбаром удобно управлять при необходимости.
NB!
  1. Далеко не всегда нужен navigation drawer. Google очень часто использует выдвижную навигацию в своих приложениях, поэтому вы можете видеть её в разных примерах. Но у Google очень много задач, которые можно решить с её помощью: разместить помощь, настройки, логин/логаут, информацию о пользователе и так далее. Если у вас похожие задачи, то всё OK, а если вы делаете простой инструмент, то не стоит.
  2. Cмелее и остроумнее с тулбарами. Возможность менять размер тулбара динамически, делать его двойного и тройного размера — это очень круто и удобно. Большинство дизайнеров боится с этим связываться и выбирают один размер раз и навсегда, но тут можно и стоит быть смелее.
  3. Не надо делать из нижнего угла гетто для плавающей кнопки. Плавающая кнопка может быть где угодно: снизу, сверху, справа, слева. Конечно, в углу до неё может быть удобно дотягиваться, но это не единственный вариант. Кнопка может перемещаться с места на место в зависимости от задач.
  4. И смартфоны, и планшеты; и вертикально, и горизонтально. Линейка Android-устройств велика, и это не упрощает жизнь разработчикам. Но правда в том, что у пользователей действительно есть все эти устройства, которые они поворачивают и так и этак (даже если речь идет о смартфонах). Этот момент надо отрабатывать.

Это Material Design. Не бойтесь экспериментировать и ошибаться: не стоит зацикливаться на копировании существующих решений. Пробуйте!
Методы построения гибкой цветовой палитры для вашей дизайн-системы

Дисклеймер: в данной статье будут использоваться следующие термины и их переводы:

color palette — «цветовая палитра»;  color theme — «цветовая тема»; практически то же, что и color ramp — «схема цветовых переходов», «схема переходов» и иногда просто «схема».

Если вам покажется, что перевод можно улучшить — пишите на [email protected], поговорим.


Mineral UI  это open source дизайн-система, которая создается компанией CA Technologies и будет использоваться во всех наших продуктах. Цвет — это центральный строительный блок любой дизайн-системы; кроме того, именно цвет оказался одной из самых сложных проблем в дизайне, с которыми мы когда-либо сталкивались, в особенности из-за большого количества требований к себе:

  • У Mineral есть встроенные по умолчанию функции обеспечения доступности — вся наша работа с цветом должна осуществляться согласно требованиям WCAG 2.1 по контрасту уровня соответствии АА.

  • Mineral предназначена для последовательного моделирования, и схемы цветовых переходов (color ramps) в ней можно заменять в любое время. Значения в схеме перехода (но не значения отдельных цветов) применяются к каждому элементу интерфейса. Например, цвет синий-60 должен восприниматься таким же по контрастности как красный-60 или бирюзовый-60.

  • Впоследствии Mineral будет поддерживать тёмный (ночной) режим, и мы хотим, чтобы цвета из созданных схем цветовых переходов выглядели визуально привлекательными как в темном, так и в светлом режиме.

  • Цвет используется, чтобы показать статус. Множество продуктов компании CA Technologies используется чтобы описать и/или сообщить о различных статусах — ошибках, развитии истории, доступности маршрутизатора и т.д. Цвет — это важный инструмент для моментальной передачи значения, поэтому у нас есть несколько вариантов UI-компонентов, которые служат основополагающими концепциями в нашей системе. Эти цветные элементы интерфейса должны гармонично сочетаться со всеми нашими цветовыми схемами.

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

Новые схемы цветовых переходов (color ramps), описанные в этой статье, используются на сайте mineral-ui.com. Если вам хочется попробовать их у себя — взгляните на наши дизайн ассеты.

mineral-ui.com

Mineral UI это open source дизайн-система, построенная на библиотеке React, и созданная для разработки привлекательных продуктов. Это апогей совместной работы дизайнеров и разработчиков, который предоставляет командам возможность быстрее реализовывать высококачественные продукты.

Ретроспективный обзор

Одна из самых первых вещей, о которых мы подумали, создавая дизайн-систему, — это создание цветовой палитры (color palette), ведь она имеет столь важное значение в принятии решений в области дизайна и разработки. Мы постоянно учимся — и часто видим очевидные ошибки уже оглядываясь назад. Наше желание развиваться подтолкнуло нас исследовать то, как другие команды принимают решения — и только потом принимать свои собственные.

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

Взято из Plasma Design System. Основные элементы, такие как цвет, сложно поменять позже.

Анализируя цветовые схемы во время ревизии, мы определили, что наша цветовая палитра должна содержать следующие характеристики:

  • Темы: они обеспечивают последовательные ощущения и внешний вид во всех продуктах, избавляя от необходимости работать наугад.

  • Тематическая гармония: в каждой цветовой теме должно быть одно значение тона.

  • Четкие контрольные точки цвета (hue breakpoints): у нас многие продукты продаются модулями или наборами, поэтому цвета должны быть настолько похожи, чтобы восприниматься как цветовая «семья», но в то же время достаточно ясно давать понять юзеру, что есть разные модули в рамках одной семьи.

  • Маштабирование и дополняемость: цветовая палитра должна иметь систематический паттерн, которую можно расширять по мере роста потребностей дизайн-системы.

  • Никаких фундаментальных перемен: развиваясь, мы хотели, чтобы наша цветовая система работал

Лучший список материалов Дизайн Цветовые палитры, инструменты и ресурсы

Поскольку дизайн материалов Google используется на многих веб-сайтах и ​​в приложениях, дизайнеры неизбежно использовали принципы дизайна материалов с выдающимися цветовыми схемами, чтобы отличить свой бренд. Примечательно, что цвета Material Design смелые и яркие.

Согласно официальным документам Material Design:

«Цвет в материале Дизайн вдохновлен смелыми оттенками, сочетающимися с приглушенным окружением, глубокими тенями и яркими бликами."

Цвет - один из важнейших элементов фирменного стиля. Например, черно-белая тема в UBER или сине-белая на Facebook. Как разумно использовать цвет в дизайне пользовательского интерфейса, чтобы создать индивидуальность бренда? Есть ли цвета, которые более эффективны, чем другие? Какие инструменты являются наиболее полезными? Я собрал список полезных инструментов цветового дизайна материалов, которые помогут ответить на эти вопросы.

Материал Дизайн Цвет Инструменты

1. Material.io

Material.io

Особенности: полная цветовая схема

Материал.io - официальный инструмент Google для подбора цвета материалов. Пользователям нужно только выбрать свой любимый цвет в палитре, и он сразу же отобразится в интерфейсе приложения. Используйте палитру цветовой схемы, расположенную в правом нижнем углу, чтобы применить текущий основной цвет, дополнительный цвет и номер цвета текста.

Советы:

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

(2) Вторичные цвета лучше всего использовать для:

  • Кнопка, плавающая рабочая кнопка и текст кнопки
  • Текстовое поле, курсор и выделение текста
  • Прогресс-бар
  • Выбор элементов управления, кнопок и ползунков
  • ссылки
  • Заголовок

2. Материал Цвета

Material design palette Особенности:

  • Color Preview
  • Поддержка загрузки
  • Поделиться в сети

Material Colours - это не только палитра, но и инструмент для пиктограмм и инструмент для работы с цветом.Главная особенность Material Colours заключается в том, что он позволяет пользователю выбирать цвет и просматривать цветовой эффект в режиме реального времени. Это просто и легко работать. Вам нужно только выбрать 1 или 2 цвета, и система будет соответствовать набору цветовых схем пользовательского интерфейса приложения. Стоит отметить, что этот сайт предоставляет онлайн-обмен и загрузку в различных форматах.

3. Материал УИ

Material UI

Особенности:

  • Цветовой код можно напрямую скопировать и вставить
  • Поддерживает переключение нескольких цветовых форматов

Этот инструмент предназначен в первую очередь для разработчиков и дизайнеров, которые хотят быстро разработать цветовой код, соответствующий стандартам Material Design.Пользователь может щелкнуть поле цвета, и оно автоматически скопирует соответствующий код цвета в буфер обмена. Этот сайт также известен как «шпаргалка», которая объединяет все доступные цвета на одной странице, чтобы пользователь мог выбирать.

4. Генератор палитры дизайна материалов

Material Design Palette Generator

Особенности: пользовательские образцы

Если вы заинтересованы в пользовательских образцах, попробуйте Генератор палитр дизайна материалов. Чтобы установить цвет вручную, введите цветовой код или выберите цвет из цветовой палитры в диалоговом окне, которое можно открыть, щелкнув поле цвета в открытой палитре.Конструктор панелей Material Design сгенерирует ваши образцы на основе выбранного вами цвета.

5. Цвет - материализуйте

Color - Materialize

Особенности: Поддерживает регулировку цвета

Это цветовая палитра на основе базового цвета дизайна материала. Каждый цвет определяется базовым классом цвета и необязательным классом яркости или затемнения.

Android Материал Цвет Ресурсы

1. Sketchappsources

Sketchappsources

Этот сайт предлагает множество бесплатных ресурсов, связанных с дизайном, для скачивания.Вы можете найти ресурсы палитры для дизайна материалов Android здесь и скачать бесплатно.

2. Android Материал Дизайн Цвета

Android material design colors

Это цветовой код материала Android, предоставленный пользователями на Github. Каждый цвет охватывает множество различных цветовых кодов. Режим прямого копирования и вставки экономит много времени для дизайнеров.

Материалы Дизайн приложения

1. Google Hangouts

Google-Hangouts

Google Hangouts - один из продуктов Google, который следует принципам дизайна и цветовой гамме Material Design.Это типичный пример дизайна материалов Google, в котором эффективно применяется цветовая схема дизайна материалов.

2. Хронология погоды

Weather Timeline

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

Сайты дизайна материалов

1.Google

google

Что касается дизайна материалов, как мы можем не упомянуть Google? Это лучшая практика из собственных руководств по дизайну материалов. Стиль дизайна материала характеризуется четкой типографикой и простым макетом, который легко понять, чтобы пользователь мог сосредоточиться на контенте.

2. WhatsApp

WhatsApp

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

Эти цветные инструменты и ресурсы Material Design помогут вам перейти к следующему шагу в создании веб-сайта или приложения.

На самом деле, это не так сложно. Чтобы создать веб-сайт или приложение, которое включает в себя Material Design, вам нужен только инструмент для создания макетов . Здесь я отдаю свой голос Mockplus, поскольку он обладает уникальным преимуществом как в разработке прототипов веб-сайтов, так и в разработке прототипов мобильных приложений.Комбинируя встроенные компоненты дизайна материала Mockplus с цветовой схемой дизайна материала, которую я кратко описал выше, разработка приложения или веб-сайта в стиле дизайна материалов больше не является сложной задачей.

Mockplus

Резюме

Цвет, как наиболее важный элемент фирменного стиля, требует тщательного рассмотрения при его фактическом использовании. Как правильно использовать коллокацию цвета может быть сложно, но это упрощается с помощью цветовых инструментов и ресурсов Material Design, которые я суммировал выше.

Подробнее о Материал Дизайн :

1. Что и как дизайн материала для разработчиков Android?

2. 12 лучших бесплатных наборов пользовательского интерфейса для дизайна материалов для Sketch & PSD в 2018 году

3. 12 лучших примеров веб-дизайна материалов для привлечения вдохновения

,
20 Материал Дизайн Цвет Инструменты Каждый дизайнер должен использовать

У вас нет идей цветовой палитры? Что ж, выбор правильных цветов для вашего сайта или мобильного приложения может быть затруднен. Мы собрали удивительную коллекцию из 20 материалов для дизайна цветов , которые вы должны использовать. Просмотрите все эти инструменты и посмотрите, какой из них соответствует вашим требованиям.

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

. Внимательно посмотрите на эти инструментальные средства Color design color и посмотрите, какие из них имеют функции, которые вы ищете. Каждый инструмент имеет свой стиль и способ получения цветовых комбинаций. Кроме того, вы можете искать различные палитры, используя базовые цвета, а затем сохранять избранное для будущих проектов.

Итак, ищите ли вы смелые, яркие цвета или мягкие, пастельные цвета, вы должны найти все, что вам нужно, прямо здесь.

Хотите узнать больше о материалах? Ознакомьтесь с этими Каркасами материалов, Темы материалов WordPress и Элементы пользовательского интерфейса материалов .

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

Material Design Colors, Material Colors, Color Palette

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

Material Design Colors - Material Palette

Это прекрасная материальная цветовая палитра, которая включает в себя красивые цвета. Если вы ищете яркие или мягкие цвета, вы можете найти что-то интересное здесь.

Material UI Colors

Перейдите по этой ссылке, чтобы открыть для себя прекрасные сочетания цветов и дизайна Это несколько плоские цвета и будут выглядеть потрясающе в различных проектах.

Material Design Color Chart — HTML Color Codes

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

Material Design Lite

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

Material Design Theme & Palette Color Generator

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

Color - Style - Material Design Guidelines

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

Random Material Generator

Это отличный источник, где вы можете найти красивые материалы дизайна цветов. Перейдите по этой ссылке и посмотрите, какие полезные вещи вы можете встретить.

Material Colors - Material Design Color Selection

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

Curated Material Design Color Palettes

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

Material Design Color Tool

Откройте для себя возможности этого инструмента для дизайна цвета материала. Перейдите по ссылке ниже и посмотрите, вдохновляет ли вас эта цветовая палитра в ваших проектах.

Material Design #3 Color Palette - Color Hex

Это потрясающая цветовая палитра, которую вы можете использовать для сбора цветов для ваших будущих проектов.Проверьте это по ссылке ниже.

Materialette - A color palette for material design - Mike Schultz

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

Material Mixer

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

Malette -Color Picker

Этот цветной инструмент для дизайна материалов предлагает быстрый и простой способ выбора идеальных цветовых смесей.

Color Picker - Material Design

Цветовая палитра дизайна материала включает в себя вариации базовых цветов, которые смешиваются с более светлыми или более темными оттенками.

Color - Materialize

Это еще одна удивительная цветовая палитра, которая включает в себя множество красивых плоских цветов. Их можно быстро интегрировать в различные конструкции.

Flat UI Colors - Color Pallette from Flat UI Theme

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

Paletton - The Color Scheme Designer

,

Google Updates Material Design и добавляет Color Tool

Новости Дору Чобану • 7 апреля 2017 г. • 3 минуты ЧИТАТЬ

Дизайнеры, Material Design упакован с новым цветным инструментом! Созданный три года назад, Material Design, собственный язык дизайна Google, повлиял на переход от древних пользовательских интерфейсов к современному виду современного Интернета. Материальный дизайн стал последним ударом по скейоморфизму, глянцевым значкам, градиентам и особенно этим ужасным значкам «специального предложения».

Разработанная для придания некоторой связности продуктам Google, документация Material Design стала обязательной для прочтения не только для разработчиков Android, стремящихся создавать великолепные приложения, но и для каждого веб-дизайнера, ориентированного на обеспечение отличного пользовательского опыта. У нас есть отличная статья о Material Design, поэтому, если вы только начинаете свои усилия в UI / UX или нуждаетесь в резюме, наслаждайтесь.

Нам нужно больше цветов!

Цвет играет важную роль в текущей сцене UI / UX.Правильная палитра - это то, что отличает отличную идею от ужасной реализации. Нравится вам это или нет, на удобство и простоту использования веб-сайта или приложения напрямую влияет выбор цвета, который делает дизайнер. И хотя это инструмент, предназначенный для разработчиков Android, его не стоит пропускать.

Нужен ли нам еще один цветной инструмент?

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

Material Design Color Tool

Online Email Template Builder

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

Попробуйте бесплатные другие продукты Material Design Color Tool

Цветовой инструмент - самая важная часть обновления Material Design.Это позволяет любому экспериментировать с выбором цвета в режиме реального времени. Очевидно, что любой выбор цветовой схемы должен основываться на исследованиях и испытаниях, но инструмент идеально подходит для запуска творческого процесса.

Эксперименты с цветовыми схемами с новым инструментом Google

Инструмент работает, имитируя среду Material Design, в которой можно применять цвета одним нажатием кнопки. Существует шесть интерфейсов, охватывающих типичный пользовательский интерфейс приложения Android, для проверки выбора цвета. Конечно, для сложных сайтов инструмент может показаться ограниченным, однако информации, которую он предоставляет, более чем достаточно для создания прототипов.Каждый сложный интерфейс вначале был прототипом.

Color Tools Android interfaces simulation

Color Tools Android interfaces simulation

Улучшение доступности с помощью цвета

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

Color Tool accesibility features

Color Tool accesibility features

Что еще нового?

Другие заметные обновления дизайна материалов:

Hot air baloon

Hot air baloon

Приятно видеть, что Material Design развивается. Особенно приятно видеть акцент на всеобщей доступности. Но помните, руководящие принципы не являются обязательными.Не избегайте экспериментов. Не стесняйтесь давать рекомендации лучшим из вас. Читать, создавать и испытывать. Руководящие принципы, на данный момент, созданы людьми, такими же, как вы и я. Это захватывающие времена для дизайнеров, чтобы жить. И в то время как А.И. Грядет революция, человеческий фактор все еще будет играть жизненно важную роль, потому что, в конце концов, небо выглядит лучше в синем, чем в двоичном виде.

Как то, что вы читаете? Подпишитесь на наши главные истории.
,
Модные веб-палитры и дизайн материалов Цветовые схемы и инструменты

Несколько недель назад Matt DesLauriers @mattdesl, графический программист, работающий в Jam3, показал нам интересную разработку, выполненную на нашей платформе. Как вы уже знаете, Awwwards собирает информацию о наиболее значимых веб-сайтах с 2009 года, что делает нас важным источником для анализа тенденций веб-дизайна.

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

Мэтт разработал инструмент, который запрашивает каждую страницу галереи победителей Awwwards, а затем ищет в HTML все доступные метаданные, такие как имя сайта, автор, дата, URL, миниатюра и т. Д. Пиксели RGB каждой миниатюры анализируются, чтобы получить приблизительный цвет. палитра из 3 основных цветов.

Color Palettes

Результатом является блестящая визуализация данных, в которой каждый сайт представлен в виде круговой диаграммы, показывающей распределение его трех основных цветов. Визуализация была выполнена с использованием Canvas2D.Мэтт также использовал множество инструментов с открытым исходным кодом, включая Node.js, d3.js, Cheerio и Browserfy.

.........

1. 20 сайтов дня с великолепными цветовыми схемами

Во второй части этой статьи мы составили список цветовых палитр, которые были наиболее представлены за последние несколько месяцев. Указанный список должен включать самый последний SOTM.

Color Palettes

# c0dfd9 # e9ece5 # b3c2bf # 3b3a36

УРОВЕНЬ от Vide Infra Color Palettes

# edd9c0 # c9d8c5 # a8b6bf # 7d4627

Brdr.Krüger By Relax, мы хорошие парни Color Palettes

# dddfd4 # fae596 # 3fb0ac # 173e43

QED Group By madeo Color Palettes

#feffff # 98dafc # daad86 # 312c32

Teye By denkwerk Color Palettes

# 6534ff # 62bcfa # fccdd3 # bbc4ef

Crea Carte By Dataveyes Color Palettes

# 16174f # 963019 # f6f1ed # 667467

Bonhomme By Bonhomme Color Palettes

# 262216 # 49412c # 97743a # b0a18e

Well Storied By Tool и Y & R NY Color Palettes

#bccbde # c2dde6 # e6e9f0 # 431c5d # e05915 # cdd422

Антон и Ирэн Автор Антон и Ирэн, студия Олега Чулакова

,........

2. Цвет в материальном дизайне: теория и инструменты

Как и ожидалось, в последнее время появилось множество цветовых инструментов, основанных на философии материального дизайна, которую Google представил на I / O 2014. Это была самая важная тенденция в последнее время, и именно поэтому мы составили список ресурсов. что поможет вам понять и реализовать цветовые оттенки, предоставленные нам Material Design.

Palette Perfect: как дизайн материала делает цвет легким

Рекомендации по дизайну материала: Цвет должен быть неожиданным и ярким.

Color Palettes

Материал Цвета

Color Palettes

Палитра материалов

Color Palettes

Материал UP: Цвета

Color Palettes

.........

3. Полезные инструменты для создания и понимания цветовых палитр

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

Кулеры

Coolors - это интуитивно понятное приложение, которое позволяет нам просто создавать комбинации цветов, обмениваться палитрами и даже экспортировать их в различные форматы, такие как SVG, PDF или SCSS.

Color Palettes http://coolors.co

Стилизовать меня

Stylify me предоставляет нам основы руководства по стилю сайта, включая цвета, шрифты, размеры и интервалы.

Color Palettes http://stylifyme.com

Adobe Color CC

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

Color Palettes https://color.adobe.com

Палеттон

Дизайнерский инструмент для создания цветовых комбинаций, которые хорошо работают вместе.

Color Palettes http://paletton.com/

Color-Hex

Color-hex - это интересный инструмент, который помогает нам выбирать монохроматические цвета, триадные цвета, аналогичные цвета или оттенки. Это позволяет нам визуализировать нашу палитру в различных цветовых моделях, таких как RGB, HSL, HSV и CMYK. Он также генерирует код CSS для выбранного цвета с предлагаемыми комбинациями для текстовых теней, фона и т. Д.http://www.color-hex.com/

Color Palettes http://www.color-hex.com ,
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *