Сергей Гуров — Композиция и сетки. Опыт работы. Часть I

• Лектор предупреждает, что лекция может занять больше двух часов.  

• Он объясняет, что будет много примеров и импровизаций.  

• Лектор считает, что самые интересные моменты происходят между субботой и воскресеньем.  

• Лектор утверждает, что понятие сетки сильно преувеличивается и мистифицируется.  

• Он подчеркивает, что важно не как строится сетка, а как в ней работать.  

• Лектор фокусируется на простых инструментах, которые дизайнеры используют в сетке.  

• Лектор объясняет, что у него нет академического образования в дизайне.  

• Он передает свой опыт, как работающий дизайнер.  

• Лектор представляется как Сергей, свободный дизайнер, и делится ссылкой на свой профиль в Instagram.  

• Лектор говорит о теоретических принципах дизайна, которые работают на всех уровнях.  

• Он объясняет, что дизайнер должен перейти от инструментального подхода к работе на уровне принципов.  

• Лектор выделяет три основных принципа: форма, контраст и ритм.  

• Лектор обсуждает понятие формы, ссылаясь на философию Гегеля.  

• Он объясняет, что форма состоит из внешней и внутренней структуры.  

• Лектор приводит пример песочных часов, чтобы показать взаимодействие внешней и внутренней формы.  

• Лектор обсуждает взаимодействие функциональности и эстетики.  

• Он делит дизайнеров на функционалистов и антифункционалистов.  

• Лектор считает, что функциональность можно развивать до эстетичного уровня.  

• Лектор объясняет понятие контраста как степени отличия объектов.  

• Он подчеркивает важность контраста для создания иерархии и масштаба.  

• Лектор завершает, что контраст и ритм играют ключевую роль в дизайне.  

• Повторение и последовательность важны для объединения, направления и выделения.  

• Ритм связан с восприятием человека, которое в основном бессознательно.  

• Усиление или ослабление ритма влияет на восприятие пользователя.  

• Композиция нужна для управления вниманием и восприятием пользователя.  

• Внимание пользователя можно удерживать осознанно или подсознательно.  

• Пример с летящим баннером показывает, как восприятие происходит бессознательно.  

• Силовая линия привлекает внимание пользователя.  

• Линии важны для дизайна, так как они врожденно воспринимаются мозгом.  

• Линии помогают организовать восприятие и создать динамику в макете.  

• Линии могут быть горизонтальными, вертикальными или диагональными.  

• Главные линии используются для размещения основного контента, второстепенные — для дополнительного.  

• Линии создают динамику и помогают пользователю ориентироваться на сайте.  

• Минималистичные решения используют минимальное количество инструментов.  

• Горизонтальные линии создают динамику сверху вниз.  

• Вертикальные линии могут использоваться для создания визуального якоря и организации пространства.  

• Вектор указывает направление и помогает организовать пространство.  

• Важно использовать статичные элементы для создания устойчивых композиций при скроле.  

• Силовая линия привлекает внимание, которое нужно направлять.  

• Векторы помогают создавать цепочки внимания, направляя взгляд в нужную сторону.  

• Примеры использования векторов: текст, фотографии, логотипы.  

• Векторы могут объединять элементы в прямоугольник.  

• Дизайнеры часто критикуют, но используют векторы.  

• Примеры с фотографиями и логотипами, создающими направление внимания.  

• Диагональные вектора часто используются для привлечения внимания.  

• Примеры с перевернутым текстом и диагональными линиями.  

• Важно, чтобы вектора были организованы и понятны.  

• Баланс связан с напряжением и массой элементов.  

• Напряжение усиливает восприятие, а масса определяет вес элемента.  

• Примеры хорошего и плохого распределения напряжения и массы.  

• Грамотное распределение напряжения и массы улучшает композицию.  

• Примеры с толстыми шрифтами и свободным пространством.  

• Напряжение можно использовать для привлечения внимания.  

• Цвет влияет на восприятие напряжения.  

• Примеры с черным на красном и синим на сером.  

• Напряжение можно использовать для перенаправления внимания.  

• Неправильное использование напряжения может отвлекать внимание.  

• Примеры с меню и текстом, развернутым на 90 градусов.  

• Важно правильно использовать напряжение для привлечения внимания.  

• Цепочки внимания должны быть короткими для эффективного восприятия.  

• Примеры с текстом, свернутым в края, и силовыми линиями.  

• Напряжение должно быть грамотно использовано для привлечения внимания.  

• Горизонтальный формат считается менее динамичным по сравнению с вертикальным.  

• Печатные издания, такие как книги и блокноты, содержат множество приемов, которые можно использовать в веб-дизайне.  

• Разбиение веб-страницы на две части позволяет создать независимую композицию, как в развороте книги.  

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

• Визуальный центр и равновесие между элементами создают гармоничную композицию.  

• Важно чувствовать баланс и равновесие для создания визуально привлекательного дизайна.  

• Рифма помогает сделать дизайн предсказуемым и единообразным.  

• Повторение решений в разных контекстах усиливает систему.  

• Пример магазина, где элементы рифмуются для создания гармоничного дизайна.  

• Дизайнер Антон Пихарович использует рифму для создания геометричного и предсказуемого дизайна.  

• Все элементы его работ рифмуются по вертикали, горизонтали или другим линиям.  

• Переходы между элементами создают плавные и предсказуемые визуальные эффекты.  

• Световые пятна и точки создают ритм и помогают структурировать контент.  

• Пример сайта Space10.io, где световые пятна используются для выделения блоков контента.  

• Важно правильно использовать световые пятна для создания визуального ритма.  

• Якоря по углам помогают выстроить композицию.  

• Пример сайта с неправильным использованием якорей и акцентов.  

• Важно правильно распределять элементы для создания гармоничной композиции.  

• Свободное пространство также называется негативным пространством.  

• Это пространство между блоками, как расстояние между буквами в шрифте.  

• В дизайне сайта свободное пространство важно для восприятия и акцентирования внимания.  

• Свободное пространство можно использовать в фэшн-тематике и арт-дизайне.  

• Пример работы с квадратом и прямоугольником для привлечения внимания.  

• Свободное пространство помогает создать акцент и композиционный контраст.  

• Пример работы 2009 года, который вдохновил автора на изучение сеток.  

• Использование свободного пространства для выделения важного контента.  

• Создание композиционного контраста и акцентов.  

• Пример визитки с использованием свободного пространства для создания устойчивой и необычной композиции.  

• Векторы и их влияние на восприятие текста.  

• Создание интересной цепочки внимания.  

• Пример, где свободное пространство отсутствует, создавая напряжение.  

• Подходит для напряженного чтива, как у Джона Кузеля.  

• Усиление ощущения блока и взаимодействие текста с окружением.  

• Сетка не является алгоритмом или правилами, которым нужно следовать.  

• Пример с футбольным тренером: сетка помогает избежать плохих решений.  

• Сетка – это разметка, которую дизайнер создает сам, чтобы сократить спектр возможных решений.