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

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

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

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

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

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

March 28, 2016
Tweet

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

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

Other Decks in Design

See All in Design
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
1k
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
Avatar for BPStudy bpstudy
0
480
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
370
セブンデックス カルチャーブック
Avatar for セブンデックス sevendex
2
16k
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.3k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
120
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
590
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
160
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
Avatar for keita keita_yoshikawa
0
120
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
Avatar for Hiroki Tani hilokifigma
1
1.1k
An Early Spring | Storyboard | Scenes 1-18
Avatar for Gio Fortunato giofortuna_story
0
250
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
3.9k

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.4k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
780
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
56
9.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k

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. Спасибо за внимание.