Презентация с Google Developer Groups (GDG) в Пензе 17 августа 2016 года Содержание: 1. Материальный дизайн 2. Андроид и его особенности 3. Инструментарий продуктового дизайнера

1. Точка сборки
Material design
Александр Куликов,
продуктовый дизайнер в FunCorp
GDG Penza

2. 1. Гайдлайны Material design
2. Android и его особенности
3. Инструментарий дизайнера
О чем сегодня поговорим 🤔

3. Material design
1.

4. Google I/O 2014

5. material.google.com
Сайт, сделанный в студии Huge

6. Основные принципы
Material design

7. 1. Материал как метафора

8. 2. Тени

9. 3. Отказ от скевоморфизма

10. 4. Лучшие практики из полиграфического дизайна

11. 5. Реалистичные анимации

12. Девственно-
чистый Android

13. Android до и после появления Material design

14. Было Стало🙄

15. АйДаПрикол до и после редизайна по гайдлайнам

16. Было Стало #

17. Почему Material
design — это хорошо

18. 1. Упрощается
вход в профессию

19. 2. Хорошее поле для экспериментов

20. 3. Бесплатный сет пиктограмм

21. Стандартные иконки
в АйДаПриколе

22. Приложение VK
для Android

23. 4. Готовая цветовая палитра

24. 5. Есть тайминги для анимаций

25. 6. Семейство шрифтов Roboto

26. Шрифты доработаны в 2014 году

27. Beta
iOS гайдлайны

28. А нужен ли вообще
дизайнер? 😎

29. А нужен ли вообще
дизайнер? 😎

30. Почему Material
design — это плохо

31. Соблазн делать «всё по метрикам» 🤓

32. Приложения
до Material design
После

33. Страшная правда: гайдлайны тоже врут 😱

34. 1. Открыл гайды
2. Сравнил с нативными приложениями
3. Увидел разницу
4. Начал создавать Франкенштейна
Жизненная схема работы с гайдлайнами'

35. Android
2.

36. Особенности
Андроида

37. 1. «Свои» интерфейсы у разных производителей

38. Хотите кастомный шрифт? 🙈

39. Оболочка не влияет на интерфейс вашего приложения

40. 2. Низкий процент
внедрения обновлений 🤖

41. Статистика iFunny

42. 3. Высокая фрагментация устройств

43. opensignal.com

44. DP спешит на помощь
DP (density-independent pixels) —
независимые от плотности экрана
пиксели. Абстрактная единица
измерения, основанная на физической
плотности экрана 160 dpi, на котором 1 dp
приблизительно равен 1 px.
*

45. Одна иконка для Android-приложения

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. Папки с ресурсами

48. Одна иконка для iOS-приложения

49. Добрый совет: рисуйте в 1x'

50. Инструментарий
3.

51. Sketch Zeplin
sketchapp.com zeplin.io

52. Sketch

53. О, ужас! Sketch работает только на macOS
QuickTime
Quartz Extreme
Core Image
Core Animation
OpenGL
ColorSync
🙀

54. Сколько весит?
45 MB

55. 45 MB
2GBСколько весит?

56. 1. Поддержка iCloud
2. Time Machine
3. Автосохранения
4. Нативный рендер шрифтов
Что еще есть в Скетче? ,

57. Ещё о преимуществах
Скетча

58. 1. Удобное разделение на артборды и страницы

59. 2. «Символы» редактируются сразу во всём макете

60. 3. Поддержка «стилей слоев» и «стилей текста»

61. 4. Возможность создавать адаптивные макеты 😻

62. 5. Огромное количество бесплатных плагинов

63. labs.invisionapp.com/craft

64. Adobe готовят «убийцу Скетча» 💀

65. Zeplin

66. Раньше делали метрики в Фотошопе вручную 😭

67. Ура! Zeplin работает на Винде 😸

68. Основные фишки
Зеплина

69. 1. Интерактивные метрики

70. 2. Комментарии к макетам

71. 3. Возможность создавать гайдлайны проекта

72. 4. Экспорт ресурсов в один клик

73. Сайт для вдохновения
materialup.com

74. Спасибо
kulikov@fun.co