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

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

7d62e1e549612fc19d8387877dc8654c?s=47 Ринат Шайхутдинов
March 28, 2016
Design
0
1.2k

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

7d62e1e549612fc19d8387877dc8654c?s=128

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

March 28, 2016
Tweet

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

See All by Ринат Шайхутдинов
Краткий обзор работ
7d62e1e549612fc19d8387877dc8654c?s=48 rinat_sh
0
180

Other Decks in Design

See All in Design
A Designer’s Guide to Documenting Accessibility & User Interactions
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
0
8.1k
Réparons la ville !
C9b13030657cff75ef421db51c6f021c?s=48 sylvaingrisot
1
6.2k
ユーザーに向き合うために 普段から意識していること
2852b6f0c4ec2c7a3a4a3603d4d5a662?s=48 koichikato
0
140
We meet again
9b32c41cb126732f3d05f1323078e037?s=48 seleliao
0
420
Free Charlie_Old
F2a18f1ef63198439d0722c7e88129e2?s=48 kignato1
1
270
STORES のデザインシステムのこれまでと現状
8875e86a57aad1f0f716374bcb6507c7?s=48 daitasu
0
760
クラスメソッドアプリデザインドリルver1
F55ce746a44eb5530a9a5385f30207f2?s=48 cmdesignteam
1
1.4k
Designing Mobile Apps For Bharat
Ad94879495e21b7362d0d2c845f44bc0?s=48 soham
3
150
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
2
2.4k
開発現場でのサービスデザインとモデリング
332a3cac4844d33179de6389b9d5f186?s=48 tyshgc
PRO
6
1.5k
Going in Circles
5968fa9a81cf1cf77a919996b8ed1bc9?s=48 pandemonay
1
110
デザインスプリントの組織導入と活用について
F126c62320c208faf9abbeda8a6343dc?s=48 transit_kix
3
1.4k

Featured

See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
125
8.5k
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
130
21k
Done Done
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
112
9.8k
The Power of CSS Pseudo Elements
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
46
3.9k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
212
11k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
11
1.3k
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
48k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
The Web Native Designer (August 2011)
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.9k

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