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

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

Место: IT Club Mykolayiv

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

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

будущее UI?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

дизайн

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

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

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

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

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

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

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

1 Microsoft

Metro  UI

WTF is this?

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

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

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

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

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

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

2 Apple

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

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

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

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

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

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

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

NOT BAD

3 Google

Web services

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

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

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

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

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

Превед!

Дитер Рамс

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

Вопросы?