Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Гештальт-принципы дизайна для разработчиков

Avatar for Ринат Шайхутдинов Ринат Шайхутдинов
March 28, 2016
Design
4k
0

Гештальт-принципы дизайна для разработчиков

Avatar for Ринат Шайхутдинов

Ринат Шайхутдинов

March 28, 2016

More Decks by Ринат Шайхутдинов

See All by Ринат Шайхутдинов
Краткий обзор работ
Avatar for Ринат Шайхутдинов rinat_sh
0
310

Other Decks in Design

See All in Design
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.7k
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
490
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
3.4k
Saving_the_King_-_Storyboard.pdf
Avatar for Terence Basart terencebasart
0
180
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
310
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
1.4k
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
180
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.3k
広い関与の可能性に どう向き合うのか？ 私たちは。｜Timee MarketingDesign 2026-06-18
Avatar for bebe bebe
0
270
2026-04-06 CMU School of Design "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
100
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
200
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
240

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
450
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
67
56k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
320
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
270
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.6k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
240
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
340

Transcript

  1. ГЕШТАЛЬТ-ПРИНЦИПЫ ДИЗАЙНА ДЛЯ РАЗРАБОТЧИКОВ

  2. None
  3. None
  4. None

  5. ПОРА НАЧАТЬ РАЗБИРАТЬСЯ В ДИЗАЙНЕ

  6. ПОНИМАТЬ ЧУВСТВА ОСОЗНАВАТЬ КАНАЛЫ КОММУНИКАЦИЙ ОПРЕДЕЛЯТЬ ПАЛИТРЫ РАЗБИРАТЬСЯ В ДИЗАЙНЕ

    ЗНАТЬ СЕТКИ ПОНИМАТЬ ШРИФТЫ ПРИМЕНЯТЬ ГЕШТАЛЬТ-ПРИНЦИПЫ ЧУВСТВОВАТЬ НАСТРОЕНИЕ ВЫБИРАТЬ ПОДХОДЯЩУЮ СЕТКУ ПОНИМАТЬ ТЕОРИЮ ЦВЕТА ЗНАТЬ ГЕШТАЛЬТ СОЗДАВАТЬ СЕТКИ ПОНИМАТЬ ВОСПРИЯТИЕ

  7. КТО ТАКИЕ ДИЗАЙНЕРЫ ЧЕМ ОНИ ЗАНИМАЮТСЯ

  8. ПОРА РАЗОБРАТЬСЯ КАК ПРИМЕНЯТЬ ДИЗАЙН

  9. ПРИМЕНЯТЬ ДИЗАЙН БЫТЬ ПОСЛЕДОВАТЕЛЬНЫМ ПОЛЬЗОВАТЬСЯ СЕТКОЙ

  10. ПРИМЕНЯТЬ ДИЗАЙН МОЖЕТ ЛЮБОЙ

  11. ХВАТИТ ИДЕАЛИЗИРОВАТЬ ЕДИНОРОГОВ

  12. Äóýò àðò-äèðåêòîðà è êîïèðàéòåðà (Art Director / Copywriter) УИЛЬЯМ БЕРНБАХ

    ~1960 • РЕВОЛЮЦИЯ В ИНДУСТРИИ • ОТ 1 ДО 40 МЛН ДОЛЛАРОВ

  13. Äóýò äèçàéíåðà è ðàçðàáîò÷èêà (Designer / Developer) СОВМЕСТНАЯ РАБОТА •

    МЕНЬШЕ ПЕРЕДЕЛОК • ВЫШЕ КАЧЕСТВО

  14. Ïðèíöèïû ãåøòàëüòà

  15. None

  16. ПРОЯВЛЕНИЕ Нечто целое всегда больше, чем сумма его частей.

  17. None

  18. МАТЕРИАЛИЗАЦИЯ Мы воспринимаем больше, чем изображено на рисунке.

  19. None

  20. НЕИЗМЕННОСТЬ Мы узнаем простые объекты, независимо от их размера, положения

    в пространстве, искажения и стиля.
  21. None

  22. МУЛЬТИСТАБИЛЬНОСТЬ В случае двусмысленного визуального образа, наше восприятие перескакивает с

    одного образа на другой.

  23. ПРОЯВЛЕНИЕ МАТЕРИАЛИЗАЦИЯ НЕИЗМЕННОСТЬ МУЛЬТИСТАБИЛЬНОСТЬ

  24. Çàêîíû ãåøòàëüòà

  25. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ

  26. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ПРОДОЛЖЕНИЕ

  27. ЗАКОН ПРОДОЛЖЕНИЯ Пересекающиеся объекты обычно воспринимаются как один цельный объект.

  28. None
  29. None

  30. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ПРОДОЛЖЕНИЕ ОБЩАЯ СУДЬБА

  31. ЗАКОН ОБЩЕЙ СУДЬБЫ Элементы, движущиеся в одном направлении, воспринимаются в

    совокупности.
  32. None

  33. СКРОЛЛИНГ

  34. ДВИЖЕНИЕ

  35. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ

  36. ЗАКОН ЗАМКНУТОСТИ Наш мозг стремится «дорисовать» недостающие визуальные элементы, чтобы

    обеспечить непрерывность формы.

  37. – В этом комиксе вы не видите моих ног, но

    предполагаете, что они у меня есть. – Даже несмотря на то, что их нет!

  38. РАМОЧКИ… БЕЗ ЛИНИЙ

  39. None

  40. ЗАМКНУТОСТЬ ПРЕДУСМАТРИВАЕТ ВЫРАВНИВАНИЕ

  41. ЗАМКНУТОСТЬ ПРЕДУСМАТРИВАЕТ ВЫРАВНИВАНИЕ

  42. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ

  43. ЗАКОН БЛИЗОСТИ Элементы, находящиеся близко друг к другу, воспринимаются как

    единое целое.
  44. None

  45. РАСПОЛАГАЙТЕ ВЗАИМОСВЯЗАННЫЕ ЭЛЕМЕНТЫ РЯДОМ

  46. ПАНЕЛИ УПРАВЛЕНИЯ

  47. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ

  48. ЗАКОН СХОЖЕСТИ Схожие элементы воспринимаются как единое целое.

  49. None

  50. СКОЛЬКО ИНФОРМАЦИИ В ПРОСТЫХ ФОРМАХ !

  51. ИКОНКИ НЕСУТ В СЕБЕ СМЫСЛ ВНЕ ЗАВИСИМОСТИ ОТ УСТРОЙСТВА И

    РАЗМЕРА ЕГО ЭКРАНА

  52. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ ТОЧКА

    ФОКУСИРОВКИ

  53. ЗАКОН ТОЧКИ ФОКУСИРОВКИ Уникальный или отличный от других элемент получит

    больше внимания.

  54. Вот так.

  55. Или так.

  56. Уже не то... ПОВТОРЕНИЕ ОСЛАБЛЯЕТ ЭФФЕКТ ФОКУСИРОВКИ.

  57. ПРИЗЫВ К ДЕЙСТВИЮ

  58. ССЫЛКИ

  59. ПОДСКАЗКИ ОБ ЭТАПАХ ПРОЦЕССА

  60. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ ТОЧКА

    ФОКУСИРОВКИ

  61. ЗАМКНУТОСТЬ ТОЧКА ФОКУСИРОВКИ ТОЧКА ФОКУСИРОВКИ ТОЧКА ФОКУСИРОВКИ БЛИЗОСТЬ

  62. ЗАМКНУТОСТЬ ЗАМКНУТОСТЬ ТОЧКА ФОКУСИРОВКИ БЛИЗОСТЬ СХОЖЕСТЬ

  63. Ñåòêè

  64. Сетки – это один из множества инструментов, которые помогают дизайнерам

    достичь синтаксической согласованности в графическом дизайне. Массимо Виньелли
  65. None

  66. СЕТКА АВТОМАТИЧЕСКИ ПОДКЛЮЧАЕТ СРАЗУ НЕСКОЛЬКО ГЕШТАЛЬТ-ЗАКОНОВ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ

  67. ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ ЭКОНОМИТ ВРЕМЯ

  68. ПОДДЕРЖИВАЕТ СОГЛАСОВАННОСТЬ ДИЗАЙНА

  69. СОГЛАСОВАННОСТЬ ВСЕЙ СИСТЕМЫ ВАЖНЕЕ ЛОКАЛЬНОЙ ОПТИМИЗАЦИИ

  70. Придерживайтесь сетки...

  71. ...или создайте свою собственную.

  72. СЛИШКОМ МЕЛКО

  73. СЛИШКОМ КРУПНО

  74. ТО, ЧТО НУЖНО

  75. Существует множество сеток всех видов, но для любой проблемы есть

    лишь одна – наиболее подходящая. Массимо Виньелли

  76. Можно ли нарушить сетку?

  77. Мадонна в скалах Леонардо да Винчи

  78. А что насчет адаптивного web-дизайна?

  79. WEB ПОДВИЖЕН

  80. None

  81. Вам не нужно оттачивать пиксели. Вам нужно оттачивать гештальт.

  82. МАТЕРИАЛИЗАЦИЯ ПРОЯВЛЕНИЕ НЕИЗМЕННОСТЬ ОБЩАЯ СУДЬБА ПРОДОЛЖЕНИЕ ЗАМКНУТОСТЬ БЛИЗОСТЬ СХОЖЕСТЬ ТОЧКА

    ФОКУСИРОВКИ

  83. Приятные вещи лучше работают, проще усваиваются и дают более гармоничный

    результат. Дональд Норман

  84. Что дальше?

  85. None
  86. None

  87. Усложнять - просто. Упрощать - сложно. Чтобы усложнить, достаточно что-то

    добавить. Это может каждый. Лишь немногие умеют упрощать. Бруно Мунари

  88. Спасибо за внимание.