Макет дизайна сайта в стиле Material Design. Примеры сайтов материал дизайн


Макет дизайна сайта в стиле Material Design : разработать сайт, фриланс, FL.ru

Задача: Разработать и предоставить макеты дизайна в стиле material design в полном соответствии с рекомендациями компании Google.  Конечный результат предоставить в виде полноценных макетов. Демонстрации любой динамики в виде примеров на других сайтах и в гифках. Текстовые комментарии к предоставленной работе.

Ссылка на рекомендации:  www.google.com/design/spe...

Обязательно предоставить макеты следующих страниц: 1) Главная (ihi.ru) 2) Страница справочника (ihi.ru/index/help)  3) О Нас (ihi.ru/index/about-us)4) Страницы, макеты которых прикреплены к данному заданию в архиве.

Основные требования к разрабатываемому дизайну страниц: 1) Создание единой интуитивно понятной генеральной логики во взаимодействии с интерфейсом. То есть, при создании вы примерно представляете как будет  происходить взаимодействие что и как изменятся и т.д. Таким образом всё это должно соответствовать единой логике. 2) Возможность использования дизайна в нескольких цветовых схемах. Т.к. ресурс многопрофильный, планируется разные разделы делать в различных цветовых схемах. Соответственно при разработке макетов требуется учитывать это. 3)  Дизайн должен нормально отображаться на не очень качественных мониторах. То есть не использовать переходные оттенки одного цвета. Опять же, используйте рекомендации компании Google касательно этого пункта. 4) Дизайн должен предполагать взаимодействие с интерфейсом без перезагрузки страницы. То есть, практически все действия должны быть визуализированы. 5) Проработать появление и исчезновение модальных окон, блокировку экрана при подгрузке, переходы.

Для примера, элементы которые нам интересны и которые мы хотели бы видеть в дизайне:  materialdesignblog.com/wp...materialdesignblog.com/wp...materialdesignblog.com/wp...materialdesignblog.com/wp...materialdesignblog.com/wp...materialdesignblog.com/tw...

P.S. Огромная просьба, вести только содержательную дискуссию и задавать вопросы только по существу.

Разделы:

Конкурс

www.fl.ru

7 Material Design CSS фреймворков на 2017 год

В 2014 году Google анонсировали Material Design и установили его стандартом для всех своих продуктов. Он используется как в Web так и в мобильных Android приложениях, которые выпускает компания.Многие, кто занимается web разработкой, и желает идти в ногу со временем, стали использовать Material Design в своей работе. В этой статье я рассмотрю несколько самых популярных Material Design CSS фреймворков и некоторые их фичи, которые помогут вам выбрать лучший и использовать его в своих проектах.

Materialize

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

  • Ссылка: materializecss.com
  • Релиз: 2014
  • Версия: 0.100.1
  • Популярность: 27,000 звёзд и 3,900 фокров на GitHub
  • Концепт/принципы: Адаптивный веб дизайн и UX
  • Вес: 931 KB (download)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Да
  • Иконки: Material Design Icons
  • Типография: Roboto
  • Документация: Хорошая
  • Поддержка браузерами: Firefox 31+, Chrome 35+, Safari 7+, IE 10+
  • Лицензия: MIT

MUI

MUI тоже довольно популярный фреймворк. Несмотря на единоличную разработку и поддержку, он обеспечивает поддержку Angular, React и WebComponents из коробки. Очень подробная документация так же заслуживает отдельной похвалы.

  • Ссылка: muicss.com
  • Релиз: 2015
  • Версия: 0.9.20
  • Популярность: 3,400 звёзд and 370 фокров на GitHub
  • Концепт/принципы: поддержка кроссплатформенности
  • Вес: 461 KB (download) / 6.7 KB (NPM package, minified)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Да
  • Иконки: Нет
  • Типография: Arial, Verdana, Tahoma
  • Документация: Очень хорошая
  • Поддержка браузерами: Firefox, Chrome, Safari, IE 10+
  • Лицензия: MIT

Surface

Surface это очень легковесный и минималистичный CSS фреймворк ориентированный на Material Design. У него довольно слабая документация, однако её вполне достаточно для знакомства с фреймворком и работы с ним. Фреймворк создавался для быстрого прототипирования и тестирования новых проектов.

  • Ссылка: mildrenben.github.io
  • Релиз: 2015
  • Версия: 1.01
  • Популярность: 130 звёзд и 40 форков на GitHub
  • Концепт/принципы: Минимализм
  • Вес: 195 KB (download)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Нет
  • Иконки: Нет
  • Типография: Roboto, sans-serif
  • Документация: Удовлетворительная
  • Поддержка браузерами: Firefox, Chrome, Opera, Safari 6.1+, IE 10+
  • Лицензия: MIT

Material Foundation

Уже набрались опыта с Foundation Framework от Zurb? Тогда Material Foundation создан специально для вас! Однако есть и плохие новости: развитие фреймворка кажется очень медленным, новые версии выходят достаточно редко, можно сказать, что не выходят вовсе. Пользователей тоже не так уж и много. Очень надеемся что кто-то возобновит развитие фреймворка.

  • Ссылка: eucalyptuss.github.io
  • Релиз: 2014
  • Версия: 6.4.1
  • Популярность: 329 звёзд и 69 форков на GitHub
  • Концепт/принципы: основан на Zurb Foundation
  • Вес: 218 KB (download)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Нет
  • Иконки: Material Design Iconic Font
  • Типография: Нет, подключаемая
  • Документация: Не полная
  • Поддержка браузерами: Firefox, Chrome, Opera, Safari 6.1+, IE 10+
  • Лицензия: MIT

Material Design Lite

Material Design Lite был создан инженерами из Google, следовательно вы можете ожидать строгое следование принципам Material Design. Но, не смотря на высокую популярность фреймворка, поддержка весьма ограниченна так как развитие ушло к «Material Components for the Web».

  • Ссылка: getmdl.io
  • Релиз: 2014
  • Версия: 1.3.0
  • Популярность: 28000 звёзд и 4800 форков на GitHub
  • Концепт/принципы: поддержка кроссплатформенности
  • Вес: 205 KB (download) / 62 KB (NPM package, minified)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Да
  • Иконки: Material icons
  • Типография: Roboto
  • Документация: Очень хорошая
  • Поддержка браузерами: Firefox, Chrome, Opera, Safari, IE 10+
  • Лицензия: Apache License 2.0

Material Components for the Web

Material Components for the Web является приемником фреймворка «Material Design Lite» и активно поддерживается инженерами и дизайнерами Google. Его основными принципами являются: модульность, следование Material Design и отличную интеграцию с другими javascript фреймворками и библиотеками.

  • Ссылка: material.io
  • Релиз: 2014
  • Версия:  0.13.0
  • Популярность: 5400 звёзд и 540 форков на GitHub
  • Концепт/принципы: Модульность и интеграция с JS фреймворками и библиотеками
  • Вес: 117 KB (NPM package, minified)
  • Препроцессоры: Sass
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Нет
  • Иконки: Material icons
  • Типография: Roboto
  • Документация: Очень хорошая
  • Поддержка браузерами: Firefox, Chrome, Safari, IE 11/Edge
  • Лицензия: Apache License 2.0

Material-UI

Это не совсем CSS фреймворк, Material-UI использует интересный подход и имплементацию Material Design используя React компоненты. Разработан call-em-all, которые используют его в своих проектах. Фреймворк набрал тысячи звёзд на GitHub.

  • Ссылка: material-ui.com
  • Релиз: 2014
  • Версия: 0.18.7
  • Популярность: 27600 звёзд и 4900 форков на GitHub
  • Концепт/принципы: поддержка кроссплатформенности
  • Вес: 429 KB (NPM package, minified)Препроцессоры: Less
  • Адаптивность: Да
  • Модульность: Да
  • Наличие стартового шаблона: Да
  • Иконки: Нет
  • Типография: Roboto
  • Документация: Хорошая
  • Поддержка браузерами: Firefox, Chrome, Safari
  • Лицензия: MIT

Заключение

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

Как бы то ни было, выбирая CSS фреймворк, вы должны учитывать следующее:

  • Сообщество: как много людей пользуются фреймворком? Большая пользовательская база значит не только то, что он хорошо протестирован, но и так же наличие поддержки пользователями в виде готовых шаблонов.
  • Разработчики: кто является разработчиком — компания или сообщество индивидуальных программистов? Частные дополнения кода, в том числе и исправление багов и принятые pull request’ы, важно чтобы были, заинтересованные в развитии проекта, стороны.
  • Развитие: Как часто выходят новые версии? Некоторые фреймворки обновляются постоянно, в то время как другие предпочитают идти более медленным темпом, в ногу с устоявшимися технологиями. Если вы хотите создавать прототипы и тестировать новые фичи, вероятнее всего вы выберете первое.
  • Документация: на сколько чиста и подробна официальная документация? Хорошая документация сильно помогает в использовании, особенно если это ваше первое знакомство с фреймворком. Готовые примеры позволяют разрабатывать очень быстро и не останавливаться на мелких загвоздках.
  • Обучаемость: Есть ли какие-то условия для использования? Если вам нужно быстро выпустить приложение в продакшн и нет времени экспериментировать с технологиями, с которыми вы ранее не работали, то вам лучше выбрать фреймворк, который не требует изучения нового синтаксиса и технологий для использования.

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

comments powered by HyperComments

lets-code.ru

Material design: видео-уроки по особенностям стиля

Еще летом 2014 года зародился новый тренд в дизайне под названием Material Design. Это дело рук корпорации Google и теперь это направление в визуальном оформлении интерфейсов внедряется на всей линейке продуктов компании (от операционки Андроид до браузера Хром). Сторонние разработчики тоже не дремлют — стиль пошел в массы.

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

Принцип будет более понятен, если посмотреть для начала официальное промо (ставьте сразу Full HD качество, а то вряд ли получите должное впечатление).

Официальный промо-ролик: Design is the art of considered creation

Я впервые заметил новшества в приложениях Google на айфоне (в Google Search и в приложении Adsense для телефона). Там эти фишечки реализованы идеально. Гифки по этим приложениям не нашел, но есть другой пример из ОС Андроид.

Для тех, у кого хорошо с английским или есть время воспользоваться словариком, советую ознакомиться с документацией Гугла http://www.google.com/design/spec/material-design/introduction.html. Там есть и определение стиля и правила анимации.

Важно подходить к развитию сайта комплексно и внимательно следить не только за его работоспособностью, но и отслеживать позиции сайта в поиске. Например, Line.pr-cy.ru — сервис для мониторинга позиций отлично с этим справляется.

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

Презентация со SlideShare — Короткое ревью дизайнера

Видео: Material Design на примере приложения Google I/O 2014

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

Далее серия видео-уроков от DevColibri. На данный момент серия включает три ролика.

Урок 1. Основные принципы

Урок 2. Ripple Effect

Урок 3. Floating action button

designfire.ru

Стиль дизайна Google Material Design

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

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

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

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

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

avada-media.ua

Шаблоны WordPress в стиле Material Design ТОП 10

Любой, кто хочет быть в тренде, должен быть в курсе всех современных технологий дизайна веб-сайтов. По крайней мере, надо знать Material Design – Материальный Дизайн. Все лучшие темы WordPress материальный дизайн 2016 были разработаны, чтобы стать истинным облегчением для всех веб-мастеров за счет своей простоты, потенциала и универсальности.

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

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

Все лучшие темы WordPress материальный дизайн 2016

Rare – тема Вордпресс Material Design

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

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

Блогинг превращается в удовольствие с Rare. Тема будет работать одинаково идеально на всех возможных устройствах. Полная поддержка таких мощных плагинов как Jetpack не оставляет места для беспокойства. Rare – действительно правильный выбор!

Посмотреть подробнее / Cкачать

Unika – отзывчивая WP тема материальный дизайн

Хотите иметь современную презентацию? Используйте Unika для этой цели. Это красивая целевая страница Вордпресс. Информативная и стильная с элементами материального дизайна.

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

Посмотреть подробнее / Cкачать

Material – универсальная WordPress тема

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

Material сделана в основном для поддержки бизнеса, портфолио и веб-сайтов с резюме или CV. Она имеет более 200 элементов для разработки веб-сайта, 17 интересных и стильных демо главной страницы, 40 креативных блоков исключительно для вашего контента; огромное количество опций, стоит попробовать! Возможные варианты страниц поистине безграничны. Вдохновленная Google, тема Material поможет вам превратить любую идею в шедевр.

Посмотреть подробнее / Cкачать

Dragon – бизнес шаблон WordPress  в стиле Material design

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

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

Посмотреть подробнее / Cкачать

Ruby – шаблон Вордпресс для портфолио и блога

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

Два варианта портфолио с неограниченными вариантами цвета и настройки. Элементы материального дизайна полностью вас удовлетворят, а зона блога с премиум слайдером приятно удивит. Шаблон готов к SEO, это означает, что вы будете продвигать сайт быстро и эффективно. Полная отзывчивость и бесплатные обновления в качестве бонуса – также в комплекте!

Посмотреть подробнее / Cкачать

Smaze – универсальный современный WP шаблон

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

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

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

Посмотреть подробнее / Cкачать

Impala – яркий и красочный шаблон Вордпресс

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

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

Шаблон очень удобен, у вас не будет никаких проблем с его настройкой. Бесчисленные возможности! Выберите шаблон Impala и почувствуйте реальную поддержку в создании идеального сайта!

Посмотреть подробнее / Cкачать

Obsession – шаблон Material Design на WordPress

Obsession является очень гибким многостраничным шаблоном для WordPress сайта. Он использует модные приемы материального дизайна. Современный и красивый шаблон с 4 демо страницами, Obsession является идеальным решением для любого веб-сайта.

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

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

Посмотреть подробнее / Cкачать

Zephyr – шаблон WordPress материальный дизайн

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

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

Посмотреть подробнее / Cкачать

Tactile – современный шаблон WordPress

Tactile – очень стильный и современный шаблон с более чем 10 различными демо-страницами. Хороший выбор для любых целей: блог, презентация, магазин и пр.

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

Вам нравится эффект параллакса, эффекты перехода и различная анимация? Тогда Tactile для Вас! Тема поддерживает систему электронной коммерции WooCommerce, так что установка магазина займет всего пару минут.

Посмотреть подробнее / Cкачать

inbenefit.com

философия и практика / Блог компании JUG.ru Group / Хабр

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

— Добрый день! Расскажите, пожалуйста, о себе и своей работе.

— Здравствуйте! Меня зовут Владимир Иванов, уже более 6 лет я пишу приложения под Android (и не только). Ранее занимался Kaspersky Safe Browser, а на данный момент работаю в компании, которая выпускает универсальное коммуникационное приложение Fonum. Правда, мы еще достаточно молоды: у нас есть только приложение под Android, и пока оно некоторым образом отстает от популярных мессенджеров. Однако у нас есть несколько инновационных идей, за счет которых мы планируем быстро нагнать конкурентов. В компании я руковожу разработкой мобильных приложений, в частности, под Android.

— Ваше приложение построено по принципам material design, т.е. с концепцией вы сталкиваетесь на работе?

— Да, мы изначально выбрали material design в качестве основы подхода к приложению в целом. Т.е. можно сказать, что Fonum целиком и полностью воплощает идеи material design. Я буквально живу последний год с этой концепцией, пропитался духом и буквой этого подхода. — Почему Вы, как разработчики (имею в виду Вашу компанию), выбрали именно этот подход?

— На наш взгляд, material design сочетает в себе принципы, позволяющие сделать очень удобный интерфейс, ориентированный не только на пользователей с идеальным зрением и слухом, но и, например, на слабовидящих людей. Т.е. material design позволяет передать удобство и смысл приложения. Сравнивая material design со всеми остальными подходами, например, с философией, которую сейчас исповедует iOS, или Metro-UI, который широко распространен среди Windows-приложений, мы решили, что material design — это лучшее, что сейчас есть на рынке.

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

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

— Сложна ли концепция для понимания? Не препятствует ли распространению концепции обилие документации, единовременно выпущенной компанией Google по material design?

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

— Можно ли сказать, что концепция material design ориентирована только на приложения с простым интерфейсом (или, наоборот, только на перегруженные информацией интерфейсы)? Или заложенные в ней идеи “универсальны”?

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

— Насколько сильно Google настаивает на внедрении концепции в приложениях, в частности, под Android?

— Material design — вещь полностью добровольная. Google ведет себя совсем не так, как раньше делала компания Apple (политика Apple — если у вас интерфейс приложения построен не по гайдлайнам, оно не допускается в iTunes; вы можете выпрыгивать из штанов, но интерфейс придется сделать по их правилам). Разработчики Google просто выпустили концепцию и даже не сказали, что сторонние разработчики должны ей следовать. Они просто представили классную идею с документацией и примерами, а заодно кодом, который это реализует, и вспомогательными библиотеками. И, честно говоря, я очень рад, что material design увидел свет, и что мы имеем возможность им пользоваться. Это на самом деле замечательный дизайнерский комплекс.

— Насколько серьёзно концепция завоевала рынок за 2 года, прошедшие с момента ее представления?

— К сожалению, я не смогу дать количественные оценки. Но по моим ощущениям влияние material design более чем заметно. Во-первых, сам Google переехал во всех своих приложениях под Android на material design, т.е. Google следует своему же тренду. Во-вторых, все крупные игроки рынка Android-приложений стараются переходить на material design. Примерно половина приложений, которыми я регулярно пользуюсь на своем смартфоне, уже в той или иной степени переехали на material design.

— Переход происходит на всех платформах или только на каких-то определённых?

— Переход заметен только в приложениях под Android. Тут нужно отделять material design, который существует в Android, и material design, как концепцию, существующую на других платформах (веб, iOS и других устройствах). Чисто технологически material design под Android внедряется очень просто, поскольку концепция поддерживается Google-ом и сообществом. Кроме того, существуют библиотеки, обеспечивающие поддержку material design на платформах ниже 5.0. Иными словами, на Android поддержка material design близка к идеальной (хотя у меня есть целый список огрехов, которые Google мог бы поправить). С другими платформами сложнее. Если для веба появляются ресурсы, например, Material Up, на которых собраны решения и сниппеты для реализации material design на сайте, то вот под iOS обеспечить поддержку уже почти невозможно. Честно скажу, мы пытались затащить material design на наше iOS-приложение, которое сейчас находится в разработке. Но у нас ничего не получилось. Подход к приложениям, который реализовала компания Apple, не сочетается с material design. В итоге из-за сложностей с реализацией нам пришлось отказаться от очень большого количества вещей, начиная с банальной Action button и заканчивая красивой анимацией переходов.

— Т.е. по-сути глобальной унификации внешнего вида приложений за счет material design не получается?

— Пока я её не вижу. Material design сейчас — очень сильная история на Android, но о глобализации речи нет.

— Все ли реализации material design получаются удачными?

— Увы, нет. Не все разработчики адекватно оценивают и принимают дух material design. За примерами далеко ходить не надо: в последнем обновлении Android-приложения Twitter из material design реализована только action button. Больше material design в приложении нет. Подобные примеры показывают, что люди пытаются следовать “модной фишке”, тащат из концепции 5%, не понимая смысла идеи, и думают, что они таким образом “галочку” напротив material design поставили. Но на самом деле это не так.

— Можете ли вы рассказать о самых типичных ошибках в реализации material design, допускаемых разработчиками?

— Наиболее типичная ошибка — считать, что material design заканчивается на action button. Ряд разработчиков (я думаю, их достаточно много) просто не понимают принципы концепции. Они считают, что можно ограничиться какими-то такими маленькими элементами, с внедрением которых их приложение будет в material design. Но это не правда. Material design — не про кнопочки с тенью. Эта концепция описывает весь интерфейс, пытается приблизить его к реальному миру, заставляя отдельные его элементы вести себя как в реальном мире. Кроме того, material design заточен на визуальную помощь пользователю в восприятии приложения. И анимация, и сам подход восприятия каждого слоя как некого материала — все это нацелено на улучшение и облегчение пользовательского взаимодействия с приложением.

— Много ли подобных “неудачных” примеров?

— Я знаю несколько компаний, которые считают, что такой реализацией material design можно ограничиться. Twitter — это точно не единственный пример, подобных приложений хватает.

— Вы упоминали, что даже в реализации поддержки material design под Android есть вещи, которые хотелось бы поправить. Можете назвать наиболее явные моменты?

— Речь идёт в основном о поддержке material design в Android до 5.0. В частности, одним из принципов material design является то, что любое движение в приложении должно доставлять некоторый смысл (motion provides meaning). Самый банальный пример — это анимация переходов. Допустим, в приложении-мессенджере вы хотите анимированно показать переход из списка контактов или чатов в конкретный чат (показать, что у вас раскрывается карточка и превращается в чат). И вы используете анимацию переезда аватарки пользователя из списка контактов на заголовочный элемент чата. Анимация там отличная, но вы можете ее реализовать только для Android 5 и выше, т.к. под Android 4 это не помогут сделать никакие библиотеки совместимости. Еще пример — эффект ripple, обеспечивающий анимированную реакцию кнопки на нажатие (расплывается волна; выглядит очень красиво и дает пользователю ощущение, что он действительно нажал на кнопку). В стандартной библиотеке совместимости этого эффекта нет, т.е. вам приходится идти на github и смотреть, что есть у инди-разработчиков, и существует ли вообще какая-то реализация под Android 4. Реализации обычно обнаруживаются, но они не идеальны и не используются самим Google, что, конечно, добавляет ложку дегтя в бочку меда material design.

— При таких сложностях есть ли смысл тянуть элементы material design в предыдущие версии системы? Может, вообще стоит отказаться от их поддержки?

— К сожалению, пока имеет, если для вас важно единообразие интерфейса. Конечно, нам больше всего хотелось бы отказаться от Android 4 (мы поддерживаем 4.03, и там хватает своих проблем, не все из которых легко решаются). Но, к сожалению, 65% наших пользователей еще используют Android 4. А т.к. мы стараемся использовать красивый интерфейс, мы пытаемся тащить в 4-ю версию все, что только можно.

— А сам Google занимается развитием инструментария поддержки material design?

— Да, и довольно активно. Постоянно выходят апдейты на библиотеки совместимости для material design. Так что нельзя сказать, что они этим не занимаются.

— Как вы считаете, есть ли смысл переводить на material design приложение, которое сейчас построено не в рамках этой концепции и успешно продаётся?

— Это вопрос не ко мне, а к бизнесу. На него должен отвечать владелец продукта (тот, кто платит за приложение), и вряд ли ему будет нужно мое мнение. Но лично я бы так делать не стал. В первую очередь потому что, если у вас приложение не в material design, переделать его в material design будет сложно. Фактически, вам нужно будет сделать интерфейс заново. Концепция диктует определенные вещи, и ваши существующие экраны могут не лечь в схему material design. Естественно, переделка приложения — это всегда определенный риск, и я бы на него не пошел. Но я знаю успешные примеры того, как люди перестраивали свои приложения в довольно короткий срок и выигрывали от этого.

— А как, по вашему опыту, конечные пользователи как реагируют на material design?

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

Таким образом, концепция, вызывающая при правильном применении положительные эмоции у конечного пользователя, пока не столь легка для имплементации. Возможно, делу поспособствуют усилия Google и сообщества по поддержке material design, или же удачным идеям придется уступать место более консервативному подходу до момента естественной смены версий Android у подавляющего большинства пользователей (когда проблемы совместимости с Android 4, описанные специалистом, уйдут на второй план). Но, несмотря на сложности, для новых приложений уже сейчас material design вполне может дать своего рода “отправную точку” при построении интерфейса.

–––––––––––––––––––––––––––––––––––

Полезные ссылки: 1. О Material Design от Google 2. Больше практических подробностей в докладе Владимира на конференции Mobius 2016 (4 июня) 3. Доклад о UX от Android GDE Wiebe Elsinga на Mobius 2016

habr.com