How-To: дизайн материала для вашего сайта WordPress с CSS Hero

1. Используйте тени для создания осязаемых поверхностей и передачи иерархии элементов
2. Как добиться тонких эффектов тени с помощью CSS Hero (без кодирования!)
3. Создавайте реалистичные и интуитивно понятные анимации
4. Создание значимой анимации с помощью CSS Hero
5. Перейти на смелые цвета
6. Наслаждайтесь масштабной типографикой
7. Расскажите свою историю с изображениями от края до края
8. Точная настройка адаптивного дизайна

Если вы вообще были в сети в последние пару лет, вы наверняка видели дизайн материала в дикой природе, будь то в приложениях для Android или, все чаще, в веб-дизайне. Материал дизайна может быть поразительно красив, но при этом почти незаметен. Это создает изысканный внешний вид и позволяет посетителям сайта увлекаться и развлекаться.

Хотите применить чистый, современный внешний вид и удобство использования этого стиля дизайна на своем веб-сайте WordPress? В этой статье показано, как вы можете сделать материальный дизайн с ничего, кроме Google руководство по дизайну материалов , CSS Hero плагин и хорошая мера вдохновения. У CSS Hero есть много инструментов, чтобы этот проект «сделай сам» был таким, чтобы вы не потрудились и не набрали кучу кода.

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

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

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

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

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

Процитирую один из принципов дизайна материала, изложенный Google ,

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

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

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

Сравнительная таблица высоты компонентов от Google

Как добиться тонких эффектов тени с помощью CSS Hero (без кодирования!)

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

   Создание тени кнопки с помощью CSS Hero

2. На панели свойств CSS Hero нажмите « Дополнительные свойства». Настройки Box Shadow будут справа сверху. В приведенном выше примере мы устанавливаем тень для блока: 2px 2px 10px 1px # bac0cd. Эти числа являются настройками для горизонтального смещения, вертикального смещения, радиуса размытия, радиуса разброса и цвета соответственно. Вы можете использовать переключатели и палитру цветов для настроек, или просто ввести значения вручную.
3. В случае нескольких элементов с возвышением используйте параметры размытия и разброса, чтобы создать эффект увеличения / уменьшения высоты. Меньшие Размытие и Распространение создадут более плотную тень, подходящую для предметов, которые должны быть ближе к фону.

Бонусный совет: Для быстрого доступа к кнопке примените один из готовых стилей: Готовые стили - Кнопки - Материал . Затем вы можете дополнительно настроить Color, Box Shadow, Border Radius или другие свойства, чтобы кнопка идеально подходила для ваших нужд дизайна.

Используйте готовые стили, чтобы быстро применить стиль материала к кнопке

Создавайте реалистичные и интуитивно понятные анимации

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

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

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

Кстати, многие современные темы, такие как Zephyr, Divi, Material и MaterialWP, принимают различные принципы философии дизайна материалов Google и включают в себя тонкие анимации, переходы и эффекты параллакса «из коробки», так что если вы хотите, чтобы тема была общеизвестной Материальный дизайн капитальный ремонт, есть много вариантов там. Естественно, как только вы остановитесь на теме материала, вы можете настроить цвета и добавить еще больше эффектов дизайна материала с помощью CSS Hero .

Создание значимой анимации с помощью CSS Hero

В этом примере от Google тень становится мягче и больше по мере увеличения высоты объекта и становится более четкой и меньшей по мере уменьшения высоты.

Возвышение и теневая анимация в дизайне материалов

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

Вот как получить доступ к инструменту Status Editor, который вам понадобится для этой анимации:

Инструмент редактирования статуса CSS Hero

3 шага для создания масштабной и теневой анимации с помощью CSS Hero:

1. Статус зависания. Дополнительные свойства. Установите для свойства Transform большее значение (1.1).
2. Статус зависания. Дополнительные свойства. Нажмите на кнопку Box Shadow и увеличьте Blur и Spread, чтобы создать эффект возвышения.
3. Нормальный статус. Дополнительные свойства. Добавьте переход (0.5 с в порядке), чтобы сгладить эффект. Сохраните ваши изменения.

Масштабирование и теневая анимация - шаг 1

Масштабирование и теневая анимация - шаг 2

Масштабирование и теневая анимация - шаг 3

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

Кстати, в будущем будет еще проще добавлять CSS3-анимацию с помощью CSS Hero . Мы создаем расширение Animator для CSS Hero - посмотрите короткое видео-тизер ниже. Дата релиза еще не определена, но у нас есть ощущение, что вам понравится этот аниматор «наведи и нажми», так что следите за обновлениями.

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

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

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

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

Легко выбирайте и устанавливайте жирные цвета фона с помощью CSS Hero

Кстати, чтобы вам было проще, палитра цветов CSS Hero «запоминает» цвета, которые вы уже использовали, поэтому, когда вы остановитесь на палитре, будет очень легко применить те же цвета к другим элементам на вашем сайте.

Автообучение цветовой палитры в CSS Hero

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

Наслаждайтесь масштабной типографикой

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

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

Материал дизайн типографская шкала

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

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

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

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

Расскажите свою историю с изображениями от края до края

Наведите курсор на контейнер изображения, выберите « Размер» и установите ширину на 100% . Как правило, это сделает свое дело; однако вы также можете использовать единицы измерения в окне просмотра - относительные единицы измерения, которые выражают размер элемента в процентах от размера области просмотра или область экрана, используемую для отображения информации. Единицы просмотра особенно полезны для установки полноразмерных, полноразмерных изображений ( Узнайте больше о единицах просмотра здесь ).

Создайте изображение от края до края с помощью CSS Hero

Установите высоту 100vh ( единицы просмотра ) создать полноразмерное изображение

Точная настройка адаптивного дизайна

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

Большинство современных фреймворков и тем поставляются с адаптивным макетом, поэтому сетка контента удобно перемещаться с одного носителя на другой. А для мелкомасштабных адаптивных изменений, не связанных с макетом как таковым, вы можете использовать CSS Hero. Его инструменты, такие как Отзывчивый редактор а также " Только для рабочего стола »Поможет вам редактировать типографику, кнопки и анимацию, чтобы они были жирными и большими на больших экранах и при этом подходили для мобильных устройств.

Отзывчивый редактор CSS Hero

Как и любой тренд в веб-дизайне, дизайн материалов, вероятно, не удовлетворит всех ваших потребностей и стремлений. Более того, вам не нужно следовать руководству по стилю Google для тройника. (В противном случае все материалы дизайна сайтов будут выглядеть одинаково). Проявите творческий подход, комбинируйте и подбирайте, в зависимости от того, какие методы лучше всего подходят для вашего проекта. Наконец, черпайте вдохновение из те, кто хорошо разбирается в материалах , а затем используйте CSS Hero, чтобы воссоздать внешний вид на вашем собственном сайте.

К вам: Вы фанат материального дизайна? Вы реализовали какой-либо из его принципов на своем сайте? Напишите нам в комментариях!

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

Похожие

Комментарии