Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Точка сборки
Material design
Александр Куликов,
продуктовый дизайнер в FunCorp
GDG Penza
1. Гайдлайны Material design
2. Android и его особенности
3. Инструментарий дизайнера
О чем сегодня поговорим 🤔
Material design
1.
Google I/O 2014
material.google.com
Сайт, сделанный в студии Huge
Основные принципы
Material design
1. Материал как метафора
2. Тени
3. Отказ от скевоморфизма
4. Лучшие практики из полиграфического дизайна
5. Реалистичные анимации
Девственно-
чистый Android
Android до и после появления Material design
Было Стало🙄
АйДаПрикол до и после редизайна по гайдлайнам
Было Стало #
Почему Material
design — это хорошо
1. Упрощается
вход в профессию
2. Хорошее поле для экспериментов
3. Бесплатный сет пиктограмм
Стандартные иконки
в АйДаПриколе
Приложение VK
для Android
4. Готовая цветовая палитра
5. Есть тайминги для анимаций
6. Семейство шрифтов Roboto
Шрифты доработаны в 2014 году
Beta
iOS гайдлайны
А нужен ли вообще
дизайнер? 😎
А нужен ли вообще
дизайнер? 😎
Почему Material
design — это плохо
Соблазн делать «всё по метрикам» 🤓
Приложения
до Material design
После
Страшная правда: гайдлайны тоже врут 😱
1. Открыл гайды
2. Сравнил с нативными приложениями
3. Увидел разницу
4. Начал создавать Франкенштейна
Жизненная схема раб...
Android
2.
Особенности
Андроида
1. «Свои» интерфейсы у разных производителей
Хотите кастомный шрифт? 🙈
Оболочка не влияет на интерфейс вашего приложения
2. Низкий процент
внедрения обновлений 🤖
Статистика iFunny
3. Высокая фрагментация устройств
opensignal.com
DP спешит на помощь
DP (density-independent pixels) —
независимые от плотности экрана
пиксели. Абстрактная единица
измерен...
Одна иконка для Android-приложения
Коэффициент Разрешение Расшифровка dpi
1x mdpi medium 160
1.5x hdpi high 240
2x xhdpi extra high 320
3x xxhdpi extra extra...
Папки с ресурсами
Одна иконка для iOS-приложения
Добрый совет: рисуйте в 1x'
Инструментарий
3.
Sketch Zeplin
sketchapp.com zeplin.io
Sketch
О, ужас! Sketch работает только на macOS
QuickTime
Quartz Extreme
Core Image
Core Animation
OpenGL
ColorSync
🙀
Сколько весит?
45 MB
45 MB
2GBСколько весит?
1. Поддержка iCloud
2. Time Machine
3. Автосохранения
4. Нативный рендер шрифтов
Что еще есть в Скетче? ,
Ещё о преимуществах
Скетча
1. Удобное разделение на артборды и страницы
2. «Символы» редактируются сразу во всём макете
3. Поддержка «стилей слоев» и «стилей текста»
4. Возможность создавать адаптивные макеты 😻
5. Огромное количество бесплатных плагинов
labs.invisionapp.com/craft
Adobe готовят «убийцу Скетча» 💀
Zeplin
Раньше делали метрики в Фотошопе вручную 😭
Ура! Zeplin работает на Винде 😸
Основные фишки
Зеплина
1. Интерактивные метрики
2. Комментарии к макетам
3. Возможность создавать гайдлайны проекта
4. Экспорт ресурсов в один клик
Сайт для вдохновения
materialup.com
Спасибо
kulikov@fun.co
Upcoming SlideShare
Loading in …5
×

Точка сборки Material design

Презентация с Google Developer Groups (GDG) в Пензе 17 августа 2016 года

Содержание:
1. Материальный дизайн
2. Андроид и его особенности
3. Инструментарий продуктового дизайнера

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Login to see the comments

  • Be the first to like this

Точка сборки Material design

  1. 1. Точка сборки Material design Александр Куликов, продуктовый дизайнер в FunCorp GDG Penza
  2. 2. 1. Гайдлайны Material design 2. Android и его особенности 3. Инструментарий дизайнера О чем сегодня поговорим 🤔
  3. 3. Material design 1.
  4. 4. Google I/O 2014
  5. 5. material.google.com Сайт, сделанный в студии Huge
  6. 6. Основные принципы Material design
  7. 7. 1. Материал как метафора
  8. 8. 2. Тени
  9. 9. 3. Отказ от скевоморфизма
  10. 10. 4. Лучшие практики из полиграфического дизайна
  11. 11. 5. Реалистичные анимации
  12. 12. Девственно- чистый Android
  13. 13. Android до и после появления Material design
  14. 14. Было Стало🙄
  15. 15. АйДаПрикол до и после редизайна по гайдлайнам
  16. 16. Было Стало #
  17. 17. Почему Material design — это хорошо
  18. 18. 1. Упрощается вход в профессию
  19. 19. 2. Хорошее поле для экспериментов
  20. 20. 3. Бесплатный сет пиктограмм
  21. 21. Стандартные иконки в АйДаПриколе
  22. 22. Приложение VK для Android
  23. 23. 4. Готовая цветовая палитра
  24. 24. 5. Есть тайминги для анимаций
  25. 25. 6. Семейство шрифтов Roboto
  26. 26. Шрифты доработаны в 2014 году
  27. 27. Beta iOS гайдлайны
  28. 28. А нужен ли вообще дизайнер? 😎
  29. 29. А нужен ли вообще дизайнер? 😎
  30. 30. Почему Material design — это плохо
  31. 31. Соблазн делать «всё по метрикам» 🤓
  32. 32. Приложения до Material design После
  33. 33. Страшная правда: гайдлайны тоже врут 😱
  34. 34. 1. Открыл гайды 2. Сравнил с нативными приложениями 3. Увидел разницу 4. Начал создавать Франкенштейна Жизненная схема работы с гайдлайнами'
  35. 35. Android 2.
  36. 36. Особенности Андроида
  37. 37. 1. «Свои» интерфейсы у разных производителей
  38. 38. Хотите кастомный шрифт? 🙈
  39. 39. Оболочка не влияет на интерфейс вашего приложения
  40. 40. 2. Низкий процент внедрения обновлений 🤖
  41. 41. Статистика iFunny
  42. 42. 3. Высокая фрагментация устройств
  43. 43. opensignal.com
  44. 44. DP спешит на помощь DP (density-independent pixels) — независимые от плотности экрана пиксели. Абстрактная единица измерения, основанная на физической плотности экрана 160 dpi, на котором 1 dp приблизительно равен 1 px. *
  45. 45. Одна иконка для Android-приложения
  46. 46. Коэффициент Разрешение Расшифровка dpi 1x mdpi medium 160 1.5x hdpi high 240 2x xhdpi extra high 320 3x xxhdpi extra extra high 480 4x xxxhdpi ну вы поняли 640 🤔
  47. 47. Папки с ресурсами
  48. 48. Одна иконка для iOS-приложения
  49. 49. Добрый совет: рисуйте в 1x'
  50. 50. Инструментарий 3.
  51. 51. Sketch Zeplin sketchapp.com zeplin.io
  52. 52. Sketch
  53. 53. О, ужас! Sketch работает только на macOS QuickTime Quartz Extreme Core Image Core Animation OpenGL ColorSync 🙀
  54. 54. Сколько весит? 45 MB
  55. 55. 45 MB 2GBСколько весит?
  56. 56. 1. Поддержка iCloud 2. Time Machine 3. Автосохранения 4. Нативный рендер шрифтов Что еще есть в Скетче? ,
  57. 57. Ещё о преимуществах Скетча
  58. 58. 1. Удобное разделение на артборды и страницы
  59. 59. 2. «Символы» редактируются сразу во всём макете
  60. 60. 3. Поддержка «стилей слоев» и «стилей текста»
  61. 61. 4. Возможность создавать адаптивные макеты 😻
  62. 62. 5. Огромное количество бесплатных плагинов
  63. 63. labs.invisionapp.com/craft
  64. 64. Adobe готовят «убийцу Скетча» 💀
  65. 65. Zeplin
  66. 66. Раньше делали метрики в Фотошопе вручную 😭
  67. 67. Ура! Zeplin работает на Винде 😸
  68. 68. Основные фишки Зеплина
  69. 69. 1. Интерактивные метрики
  70. 70. 2. Комментарии к макетам
  71. 71. 3. Возможность создавать гайдлайны проекта
  72. 72. 4. Экспорт ресурсов в один клик
  73. 73. Сайт для вдохновения materialup.com
  74. 74. Спасибо kulikov@fun.co

×