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

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

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

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

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
portfolio.pdf
Avatar for Fumitaka Ono onof003
0
190
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
170
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
140
ランドマークが光る！季節を彩るナビ体験 - Mobility Night #3 -
Avatar for tetsuya kitauji kitau
0
130
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
150
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
2k
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
560
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
220
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
240
What makes a great Director?
Avatar for _Limex_ _limex_
0
310
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
850
Hatena Engineer Seminar #33 チームと開発するためのモック
Avatar for takuwolog takuwolog
1
450

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
900
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
369
20k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
860
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k

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