Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Гештальт-принципы дизайна для разработчиков
Search
Ринат Шайхутдинов
March 28, 2016
Design
0
3.7k
Гештальт-принципы дизайна для разработчиков
Ринат Шайхутдинов
March 28, 2016
Tweet
Share
More Decks by Ринат Шайхутдинов
See All by Ринат Шайхутдинов
Краткий обзор работ
rinat_sh
0
280
Other Decks in Design
See All in Design
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
720
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
decksh object reference
ajstarks
2
1.3k
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
330
What makes a great Director?
_limex_
0
210
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
580
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
330
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Being A Developer After 40
akosma
90
590k
Into the Great Unknown - MozCon
thekraken
40
2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
BBQ
matthewcrist
89
9.8k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
The Invisible Side of Design
smashingmag
301
51k
Practical Orchestrator
shlominoach
190
11k
Transcript
ГЕШТАЛЬТ-ПРИНЦИПЫ ДИЗАЙНА ДЛЯ РАЗРАБОТЧИКОВ
None
None
None
ПОРА НАЧАТЬ РАЗБИРАТЬСЯ В ДИЗАЙНЕ
ПОНИМАТЬ ЧУВСТВА ОСОЗНАВАТЬ КАНАЛЫ КОММУНИКАЦИЙ ОПРЕДЕЛЯТЬ ПАЛИТРЫ РАЗБИРАТЬСЯ В ДИЗАЙНЕ
ЗНАТЬ СЕТКИ ПОНИМАТЬ ШРИФТЫ ПРИМЕНЯТЬ ГЕШТАЛЬТ-ПРИНЦИПЫ ЧУВСТВОВАТЬ НАСТРОЕНИЕ ВЫБИРАТЬ ПОДХОДЯЩУЮ СЕТКУ ПОНИМАТЬ ТЕОРИЮ ЦВЕТА ЗНАТЬ ГЕШТАЛЬТ СОЗДАВАТЬ СЕТКИ ПОНИМАТЬ ВОСПРИЯТИЕ
КТО ТАКИЕ ДИЗАЙНЕРЫ ЧЕМ ОНИ ЗАНИМАЮТСЯ
ПОРА РАЗОБРАТЬСЯ КАК ПРИМЕНЯТЬ ДИЗАЙН
ПРИМЕНЯТЬ ДИЗАЙН БЫТЬ ПОСЛЕДОВАТЕЛЬНЫМ ПОЛЬЗОВАТЬСЯ СЕТКОЙ
ПРИМЕНЯТЬ ДИЗАЙН МОЖЕТ ЛЮБОЙ
ХВАТИТ ИДЕАЛИЗИРОВАТЬ ЕДИНОРОГОВ
Äóýò àðò-äèðåêòîðà è êîïèðàéòåðà (Art Director / Copywriter) УИЛЬЯМ БЕРНБАХ
~1960 • РЕВОЛЮЦИЯ В ИНДУСТРИИ • ОТ 1 ДО 40 МЛН ДОЛЛАРОВ
Äóýò äèçàéíåðà è ðàçðàáîò÷èêà (Designer / Developer) СОВМЕСТНАЯ РАБОТА •
МЕНЬШЕ ПЕРЕДЕЛОК • ВЫШЕ КАЧЕСТВО
Ïðèíöèïû ãåøòàëüòà
None
ПРОЯВЛЕНИЕ Нечто целое всегда больше, чем сумма его частей.
None
МАТЕРИАЛИЗАЦИЯ Мы воспринимаем больше, чем изображено на рисунке.
None
НЕИЗМЕННОСТЬ Мы узнаем простые объекты, независимо от их размера, положения
в пространстве, искажения и стиля.
None
МУЛЬТИСТАБИЛЬНОСТЬ В случае двусмысленного визуального образа, наше восприятие перескакивает с
одного образа на другой.
ПРОЯВЛЕНИЕ МАТЕРИАЛИЗАЦИЯ НЕИЗМЕННОСТЬ МУЛЬТИСТАБИЛЬНОСТЬ
Çàêîíû ãåøòàëüòà
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ПРОДОЛЖЕНИЕ
ЗАКОН ПРОДОЛЖЕНИЯ Пересекающиеся объекты обычно воспринимаются как один цельный объект.
None
None
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ПРОДОЛЖЕНИЕ ОБЩАЯ СУДЬБА
ЗАКОН ОБЩЕЙ СУДЬБЫ Элементы, движущиеся в одном направлении, воспринимаются в
совокупности.
None
СКРОЛЛИНГ
ДВИЖЕНИЕ
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ
ЗАКОН ЗАМКНУТОСТИ Наш мозг стремится «дорисовать» недостающие визуальные элементы, чтобы
обеспечить непрерывность формы.
– В этом комиксе вы не видите моих ног, но
предполагаете, что они у меня есть. – Даже несмотря на то, что их нет!
РАМОЧКИ… БЕЗ ЛИНИЙ
None
ЗАМКНУТОСТЬ ПРЕДУСМАТРИВАЕТ ВЫРАВНИВАНИЕ
ЗАМКНУТОСТЬ ПРЕДУСМАТРИВАЕТ ВЫРАВНИВАНИЕ
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ
ЗАКОН БЛИЗОСТИ Элементы, находящиеся близко друг к другу, воспринимаются как
единое целое.
None
РАСПОЛАГАЙТЕ ВЗАИМОСВЯЗАННЫЕ ЭЛЕМЕНТЫ РЯДОМ
ПАНЕЛИ УПРАВЛЕНИЯ
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ
ЗАКОН СХОЖЕСТИ Схожие элементы воспринимаются как единое целое.
None
СКОЛЬКО ИНФОРМАЦИИ В ПРОСТЫХ ФОРМАХ !
ИКОНКИ НЕСУТ В СЕБЕ СМЫСЛ ВНЕ ЗАВИСИМОСТИ ОТ УСТРОЙСТВА И
РАЗМЕРА ЕГО ЭКРАНА
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ ТОЧКА
ФОКУСИРОВКИ
ЗАКОН ТОЧКИ ФОКУСИРОВКИ Уникальный или отличный от других элемент получит
больше внимания.
Вот так.
Или так.
Уже не то... ПОВТОРЕНИЕ ОСЛАБЛЯЕТ ЭФФЕКТ ФОКУСИРОВКИ.
ПРИЗЫВ К ДЕЙСТВИЮ
ССЫЛКИ
ПОДСКАЗКИ ОБ ЭТАПАХ ПРОЦЕССА
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ ТОЧКА
ФОКУСИРОВКИ
ЗАМКНУТОСТЬ ТОЧКА ФОКУСИРОВКИ ТОЧКА ФОКУСИРОВКИ ТОЧКА ФОКУСИРОВКИ БЛИЗОСТЬ
ЗАМКНУТОСТЬ ЗАМКНУТОСТЬ ТОЧКА ФОКУСИРОВКИ БЛИЗОСТЬ СХОЖЕСТЬ
Ñåòêè
Сетки – это один из множества инструментов, которые помогают дизайнерам
достичь синтаксической согласованности в графическом дизайне. Массимо Виньелли
None
СЕТКА АВТОМАТИЧЕСКИ ПОДКЛЮЧАЕТ СРАЗУ НЕСКОЛЬКО ГЕШТАЛЬТ-ЗАКОНОВ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ
ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ ЭКОНОМИТ ВРЕМЯ
ПОДДЕРЖИВАЕТ СОГЛАСОВАННОСТЬ ДИЗАЙНА
СОГЛАСОВАННОСТЬ ВСЕЙ СИСТЕМЫ ВАЖНЕЕ ЛОКАЛЬНОЙ ОПТИМИЗАЦИИ
Придерживайтесь сетки...
...или создайте свою собственную.
СЛИШКОМ МЕЛКО
СЛИШКОМ КРУПНО
ТО, ЧТО НУЖНО
Существует множество сеток всех видов, но для любой проблемы есть
лишь одна – наиболее подходящая. Массимо Виньелли
Можно ли нарушить сетку?
Мадонна в скалах Леонардо да Винчи
А что насчет адаптивного web-дизайна?
WEB ПОДВИЖЕН
None
Вам не нужно оттачивать пиксели. Вам нужно оттачивать гештальт.
МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ ТОЧКА
ФОКУСИРОВКИ
Приятные вещи лучше работают, проще усваиваются и дают более гармоничный
результат. Дональд Норман
Что дальше?
None
None
Усложнять - просто. Упрощать - сложно. Чтобы усложнить, достаточно что-то
добавить. Это может каждый. Лишь немногие умеют упрощать. Бруно Мунари
Спасибо за внимание.