1.
The past
of modern design

2.
Когда я был маленьким…

3.
Android | Windows | IOS
Стиль. Ряд ограничений, которые, упрощают работу
дизайнерам приложений, делают её более
последовательной. Давая пользователю устойчивые
наборы паттернов в взаимодействии с устройством.
Две задачи. Передача печатной информации
и взаимодействий через навигацию и анимацию.

4.
1/ Передача
печатной информации

5.
Android
“А если сдвинуть карточку, то что находится за ней?”
Квантовая бумага.

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

7.
Metro
• Сетка — краеугольный камень стиля, она скрепляет весь
внешний облик интерфейса.
• Иерархия и ритм — создаются за счет правильного
использования типографики и помогают пользователю
сориентироваться в приложении.
• Контент важнее оформления — нет графическому мусору;
четкая структурая задается при помощи шрифтов и цвета.
• Плавность и движение — интерфейс живой и отзывчивый.
• Пиктограммы — быстрое ориентирование в приложении за
счет понятных символов.

8.
IOS
"Настоящая простота является производным от
гораздо большего, чем отсутствие беспорядока и
украшательств. Речь идет о наведении порядка
в сложном. “ Джон Айв.

9.
Скеоморфизм

10.
• Сетка – основа построения интерфейса, база
технологичности и кросплатформенности.
• Типографика – иерархия, ритм, форма. Взаимодействие
контента и фона.
•
Шрифт – использование sans-serif гарнитур, работа
контрастом размера и веса шрифта в одно гарнитуре
• Цвет – яркие, чистые цвета, контраст значимых объектов с
фоном.
Что получается?

11.
Swiss style
Швейцарский стиль (называемый иногда Международным
Типографским стилем) является основным источником
вдохновения для плоского дизайна

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

13.
Grid Systems in Graphic Design Josef Muller Brockmann, 1972

14.
ТипографикаЗадача типографики ясна и недвусмысленна: служить передаче письменности
информации. Эмиль Рудер Типографика 1977

15.
Grid Systems in Graphic Design Josef Muller Brockmann, 1972

16.
New York Subway Map and Navigation Massimo Vignelli 1972

17.
Massimo Vignelli

18.
New York Subway Navigation Massimo Vignelli 1972

19.
New York Subway Navigation Massimo Vignelli 1972

20.
Шрифт
Один из главных секретов хорошего шрифтового
построения – использовать минимальное количество
размеров и видов шрифтов в одной работе.
Ян Чихольд 1946
Poster Jan Tschichold 1930

21.
HelveticaЭтот шрифт стал основной Swiss Style которая также появилась в Швейцарии в 1957 году
и активно используется по сей день.
Helvetica Typeface,
Max Miedinger, Eduard Hoffmann,
1957. For Haas Type Foundry,
Münchenstein, Switzerland.
Inspired by the font Akzidenz
Grotesk, 1896.

22.
BASF, 1977

23.
Helvetica
vs San Francisco vs Roboto

24.
Цвет
Цвет в material design
смелых оттенков сочетается
с приглушенными тонами,
глубоких теней и ярких
моментов. Цвет берет
вдохновение от
современной архитектуры,
дорожных знаков, разметки
дорожных ленты и
спортивных судов. Цвет
должен быть неожиданным
и ярким.
Einspuren - Spur Halten Hans Hartmann 1963

25.
Massimo Vignelli 1967 Hans Hartmann 1963

26.
10 принципов хорошего дизайна
Дитер Рамс Braun SK 4 1956

27.
10 правил
• Дизайн должен быть инновационным
• Дизайн должен быть вне времени
• Дизайн должен быть экологически чистым и не должен конфликтовать со средой
• Дизайн должен делать любой продукт удобным
• Дизайн должен делать продукт понятным
• Дизайн должен быть продуманным
• Дизайн должен быть эстетичным
• Дизайн должен быть честным
• Дизайн не должен быть навязчивым
• Чем меньше дизайна, тем лучше

28.
Универсальная система полок Дитера Рамса 1977

29.
Телевизор Braun FS80 1973

30.
Акустическая система L450 1962

31.
Braun Nizo 801 1965

32.
Карманное радио Braun T3 1958

33.
iPod 2001

34.
2/ Передача взаимодействий.
Анимация.

35.
АнимацияИнтерфейс без анимации как фильмы, где между сценами наблюдаются
резкие скачки. Google.

36.
Анимация
12 принципах анимации студии Disney 1930 год

37.
Анимация
• Сжатие и растяжение.
• Сценичность (постоянный учёт того, как видит образ зритель)
• Сквозное движение (или доводка) и захлест действия.
Инерция.
• Добавление вторичных действий к основному действию
придает сцене больше жизни
• Каждому движению предшествует подготовка.
• Движение по дуге. Cила тяжести.

38.
3/ Вместо эпилога

39.
www.hustwit.com
Gary Hustwit / Гари Хаствит