Презентация для пары в Волгатехе

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

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

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

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

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

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

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

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

12. Äóýò àðò-äèðåêòîðà è êîïèðàéòåðà (Art Director/Copywriter)
УИЛЬЯМ БЕРНБАХ ~1960 • РЕВОЛЮЦИЯ В ИНДУСТРИИ • ОТ 1 ДО 40 МЛН ДОЛЛАРОВ

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

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

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

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

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

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

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

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

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

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

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

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

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

33. СКРОЛЛИНГ

34. ДВИЖЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

54. Вот так.

55. Или так.

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

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

58. ССЫЛКИ

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

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

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

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

63. Ñåòêè

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

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

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

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

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

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

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

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

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

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

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

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

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

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

79. WEB ПОДВИЖЕН

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

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

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

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

87. Усложнять - просто. Упрощать - сложно.
Чтобы усложнить, достаточно что-то добавить.
Это может каждый. Лишь немногие умеют упрощать.
Бруно Мунари

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