10 полезных фрагментов кода для дизайна материалов

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

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

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

Адаптивная таблица

Вот фрагмент дизайна материала с уникальным поворотом. Эта адаптивная таблица, созданная Сергеем Куплетским, на самом деле содержит другие ссылки на фрагменты дизайна материалов. Довольно круто!

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

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

Переходы пользовательского интерфейса карты

Разработчик Иван Вилламил создал этот очень уникальный дизайн пользовательского интерфейса карты с довольно сумасшедшей анимацией.

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

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

Компактный вход

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

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

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

Заполнить анимацию

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

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

Материал кнопок BS4

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

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

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

Меню выбора материалов

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

Этот выбор материального дизайна поднимает обычное меню выбора HTML на совершенно новый уровень.

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

Материальные тени

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

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

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

Пользовательский интерфейс карты погоды

Разработчик Томас Валлез создал эту замечательную карту погоды на чистом HTML и CSS. Он использует простой эффект плавного появления при загрузке страницы, но истинная красота здесь заключается в стиле материального дизайна.

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

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

Вкладки материалов

Вот интересный проект, основанный на идее вкладок в материальном дизайне. Майкл Ричинс создал эту ручку, используя базовый JavaScript и некоторые знания принципов дизайна Google.

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

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

Нажмите Анимация ответа

Разработчик Эммануэль Пиланд создал этот крутой эффект реакции как простой способ воспроизвести микровзаимодействия с материалами Google.

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

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