О скевоморфизме и FLAT дизайне. Их преимущества. Последние тренды. Примеры.

1. Мейнстрим
или
будущее UI?
Докладчик:
Вадим Орлов
Место:
IT Club Mykolayiv
vk.com/iamorlov
fb.com/iamorlov
Skype: heiker-ru

2. • Предыстория:
• Плоский дизайн или скевоморфизм?
• Принципы плоского дизайна
• И его основные тренды
• Microsoft Modern UI
• Apple iOS7
• Google web services

4. Традиционно под
термином скевоморфизм (skeuomorphism) понимают
имитацию чего либо с помощью других материалов.

5. Главные плюсы скевоморфизма:
На мой взгляд,
скевоморфизм это не
столько UI (user
interface), сколько UX
(user experience); это в
первую очередь
имитация поведения
какого-то предмета.

6. Главные плюсы скевоморфизма:
Скевоморфизм - это
реализм. Он нам
нужен для
взаимодействия с
устройствами
человеческим
образом.

7. Иногда flat просто неуместен:

8. Скевоморфизм vs FLAT дизайн
• Информативнее
• Реалистичнее
• Более «человечней»
• Встречается куда чаще
•
•
•
•
•
Дешевле
Быстрее
Намного адаптивней
«Легче»
Сейчас это модно

9. От реального до плоского
Скевоморфизм
Flat
Minimal flat

10. Принципы плоского дизайна
Отсутствие эффектов
Простые элементы
Акцент на типографике
Минималистский подход
Акцент на цвете
«Почти» плоский дизайн

11. 1
Отсутствие эффектов

12. 2
Простые элементы

13. 3
Акцент на типографике

14. 4
Минималистский подход

15. 5
Акцент на цвете

16. 6
«Почти» плоский дизайн

17. Три главных тренда flat дизайна:

18. 1
Microsoft

19. Metro UI

20. Основные черты Metro UI:
Основной шрифт:
Плиточная концепция
«Живые» плиточки

21. Пример логотипа в Modern
стиле

22. 2
Apple

23. iOS 7 design
Градиенты – это всё, что я знал в
Photoshop’e, поэтому я начал использовать
их абсолютно везде, где смог:)

24. Основные черты дизайна iOS 7:
Основной шрифт:
Многослойность и закруглённость
Наличие градиентов

25. Пример логотипа в iOS7 сти
NOT
BAD

26. 3
Google

27. Web services

28. Основные черты дизайна от
Google:
Основной шрифт:
Прямые точные тени
Точные цвета и цветовые оттенки

29. Пример логотипа в Google
стиле
Превед!

30. Дитер Рамс
”Хороший
дизайн — это
как можно
меньше
дизайна”

31. Вопросы?