Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

description

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

Transcript of Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Page 1: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Докладчик: Вадим Орлов

Место: IT Club Mykolayiv

vk.com/iamorlovfb.com/iamorlovSkype: heiker-ru

Мейнстримили

будущее UI?

Page 2: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

•Предыстория:• Плоский дизайн или скевоморфизм?

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

Page 3: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)
Page 4: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 5: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Главные плюсы скевоморфизма:

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

Page 6: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Главные плюсы скевоморфизма:

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

Page 7: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 8: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Скевоморфизм vs FLAT дизайн

• Информативнее• Реалистичнее• Более «человечней»• Встречается куда чаще

• Дешевле• Быстрее• Намного адаптивней• «Легче»• Сейчас это модно

Page 9: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

От реального до плоского

Скевоморфизм Flat Minimal flat

Page 10: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Принципы плоского дизайна

Отсутствие эффектов Простые элементы Акцент на типографике

Минималистский подход Акцент на цвете«Почти» плоский

дизайн

Page 11: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 12: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 13: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 14: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 15: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 16: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 17: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Page 18: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

1 Microsoft

Page 19: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Metro  UI

WTF is this?

Page 20: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Основные черты Metro UI:

Основной шрифт:

Плиточная концепция

«Живые» плиточки

Page 21: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

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

Ваще АГОНЬ !!!

Page 22: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

2 Apple

Page 23: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

iOS 7 designГрадиенты – это всё, что я знал в

Photoshop’e, поэтому я начал использовать их абсолютно везде, где смог:)

Page 24: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Основные черты дизайна iOS 7:

Основной шрифт:

Многослойность и закруглённость

Наличие градиентов

Page 25: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Пример логотипа в iOS7 стиле

NOT BAD

Page 26: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

3 Google

Page 27: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Web services

Page 28: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Основной шрифт:

Прямые точные тени

Точные цвета и цветовые оттенки

Основные черты дизайна от Google:

Page 29: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Пример логотипа в Google стиле

Превед!

Page 30: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Дитер Рамс

”Хороший дизайн — это как можно меньше дизайна”

Page 31: Flat Design - Мейнстрим или будущее UI (by Vadim Orlov at IT Club Mykolaiv)

Вопросы?