Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн


Дизайн Форум


Про дизайн и web дизайн




Главная     Галереи Дизайна (29)




  Статьи о дизайне





  Галереи дизайна

Промышленный дизайн, графический дизайн, гламурные картинки, иконки, аватары.

  Помощь Дизайнеру!

Советы по дизайну. Философия, психология и трудовые будни дизайнера.



  Material Design





Обоснование

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



Цели

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

Принципы

Источник всего этого безобразия здесь: http://www.google.com/design/spec/material-design/introduction.html


Личное впечатление от Material Design

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

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

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

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

Принято считать, что эта система не очень ограничивает творчество дизайнера, а на деле это - 100% диктовка условий оформления. Здесь все подчинено технологии и на смену дизайну приходит чистое конструирование. Здесь все максимально упрощено - убрали все, что оживляет графику. Да здравствуют плоскости и до одури простые формы. И рисовать уметь не нужно, только конструировать из готовых шаблончиков. Красота!

Принципы Material Design

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

Пространство в MaterialDesign
Использование первого, второго и третьего плана в организации пространства интерфейса, когда активный элемент выходит на передний план и выделяется, например, отбрасывая тень на "нижележащие" элементы композиции. На факультете дизайна нам это преподавали еще 20 лет назад и все эти 20 лет мы применяем это в дизайне.

Несколько рекомендаций:
  1. Не использовать текстуры, градиенты и сложные цветовые заливки
  2. Ограничивайтесь тенями для оживления композиции
  3. Доминанта композиции "всегда на переднем плане"
Полиграфия в Material Design
Использование в организации фона страницы приемов, взятых из дизайна полиграфии. Здесь разработчики противоречат сами себе, указывая дизайнерам, что они могут все-таки применять нормальные графические решения и использовать свое ассоциативное мышление и всю цветовую палитру. Но уже на деле рекомендуется делать все те же плоскостные фоны с блинной и малоцветной графикой или брать готовые фотографии большого разрешения.

Здесь нас учат, как применять модульную сетку, извините, этот прием известен уже сотню лет. А веб дизайнеры этим пользуются лет 30.

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

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

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

Положительное исключение - композиции из блинного (плоского) дизайна, где проскальзывает творчество.

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

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

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

Несколько рекомендаций:
  1. Использвание направляющих
  2. Использование модульной композиции (как при создании классического логотипа)
  3. Использование блочной верстки
  4. Использование выезжающего меню навигации и убирающегося за ненадобностью

Михаил Клюев


Стиль на веб сайте
Создание логотипов
Физиологические основы восприятия
Психология восприятия пространства
Цвет и тон в среде
Как работать с цветом
Беседы о тоне и цвете
Тон и цвет в рекламе
Модульная сетка
Основные средства и принципы композиции
Акценты в композиции
Модульные сетки в веб-дизайне
Web дизайн таблиц
Композиционные схемы
Backgrounds (фоны)









  Rambler's Top100  


Web дизайн и создание сайтов       Пользовательское соглашение

Карта сайта      Наверх