Работа с композицией в веб-дизайне. Основные принципы применения сетки.

• Начало мастер-класса по композиции и сеткам.  

• Настройка звука и видео.  

• Призыв к активности в чате и возможность задавать вопросы.  

• Подписка на мероприятие на YouTube.  

• Информация о компании и её достижениях.  

• Приглашение на экскурсию в офис.  

• Спикер Сергей Гуров объясняет формат презентации.  

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

• Спикер делится своими мыслями и опытом.  

• Важность терминологии для начинающих дизайнеров.  

• Профессиональный жаргон ускоряет обмен информацией.  

• Процесс получения терминологии может быть длительным, но полезным.  

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

• Призыв к пониманию и принятию терминологии.  

• Обсуждение многослойности темы дизайна.  

• Важность базовых терминов: форма, контраст, ритм.  

• Применение этих терминов не только в дизайне, но и в жизни.  

• Форма состоит из внешнего облика и внутренней структуры.  

• Пример с наручными часами: внешняя и внутренняя формы.  

• Внутренняя форма обуславливает внешнюю и наоборот.  

• Контраст создает масштаб и иерархию.  

• Пример с веб-дизайном: визуализация главного и второстепенного.  

• Ритм объединяет, направляет и разделяет элементы.  

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

• Пример с текстом: контраст, форма, ритм.  

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

• Важность коротких цепочек внимания.  

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

• Линии как силовая линия в дизайне.  

• Разделение в дизайнерском сообществе: сеточники и те, кто отказывается от сеток.  

• Важность восприятия горизонтальных и вертикальных линий.  

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

• Мозг автоматически достраивает линии между точками, создавая иллюзии.  

• Предел восприятия линий зависит от количества точек.  

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

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

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

• Линии могут быть выровнены по центру или краю.  

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

• Важно, чтобы линии не казались ошибкой, а были частью замысла дизайнера.  

• Не стоит плодить силовые линии, достаточно двух-четырех на весь макет.  

• Геометричность и простота помогают избежать хаоса в дизайне.  

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

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

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

• Пример с листочками Гришковца для управления вниманием пользователя.  

• Переход от важного к менее важному помогает читателю успокоиться и воспринимать информацию более эффективно.  

• Использование разных размеров картинок для привлечения внимания.  

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

• Изменение направления текста меняет динамику восприятия.  

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

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

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

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

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

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

• Отсутствие логики в размещении элементов и отсутствие связи между ними.  

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

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

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

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

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

• Использование большого кегля для акцентов и маленького шрифта для дискрипторов.  

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

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

• Пример с блоком по центру воспринимается тяжелее.  

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

• Композиция на трех точках создает открытую динамику.  

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

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

• Рифма создает напряжение и динамику.  

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

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

• Функциональность и эстетика идут рука об руку.  

• Пример с текстом, который хочется "достать", показывает, как рифма побуждает к действию.  

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

• Рифма необходима для единообразия и усиления решений.  

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

• Важно рифмовать решения на всех страницах сайта.  

• Простота и выразительность идут рука об руку.  

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

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

• Много синего цвета и шрифтов, что создает ощущение хаоса.  

• Пример сайта 2017 года, который автор считает лучшим.  

• Использование стандартного лонгрида с фиксацией нижней линии.  

• Антон Пихарович как пример для подражания.  

• Все блоки в его работах зарифмованы и логически связаны.  

• Смещение блоков для освежения дизайна.  

• Сетки часто мистифицируются, но они важны для дизайнеров.  

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

• Простые, двойные и диагональные сетки.  

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

• Важность межколонников и белого пространства.  

• Пример работы Алексея Масалова с использованием белого пространства.  

• Автор показывает процесс создания концепта для сайта.  

• Начало работы с блокнотом и скетчингом.  

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

• Автор начинает с набросков в блокноте, затем переходит в Sketch.  

• Пример с идеей, которая постепенно обрастает контентом.  

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

• Трудности с нижней частью блока и динамикой.  

• Решение: уменьшение межколонников и создание центральной линии.  

• Усиление горизонтального движения и разрядка контента.  

• Уменьшение межколонников и создание центральной линии.  

• Разрядка контента и увеличение расстояния между датами и анонсами.  

• Фиксация правил и перерисовка главного экрана.  

• Работа над сайтом за две недели и добавление мяса для Behance.  

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

• Вдохновение от мгновенных фотографий и Instagram.  

• Эксперименты с формами и углами.  

• Использование полароидных элементов для создания узнаваемости.  

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

• Поиск идеальной формы и отказ от мелких и сложных решений.  

• Работа без межколонников для удобства.  

• Важность выбора четного или нечетного количества колонок.  

• Создание хаотичного сайта для студии.  

• Использование нескольких сеток для текстового и визуального контента.  

• Объединение сеток для создания непредсказуемой верстки.  

• Сетки в дизайне не ограничиваются колонками и межколонниками.  

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

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

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

• Красная маска помогает разместить картинки и текст.  

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

• Начинать работу над сайтом можно с главной страницы или с внутренних страниц.  

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

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

• Продавать дизайн нужно с учетом аудитории и контекста.  

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

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

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

• Дизайн занимает лишь 30% времени, остальное уходит на наполнение и поддержку.  

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

• Обсуждение важности поддержки и развития проекта.  

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

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

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

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

• Идея получения опыта работы с топовыми заказчиками и прокачки навыков в различных направлениях дизайна.  

• Описание годовой образовательной программы от Skillbox.  

• Программа включает более 150 часов теории, три ментора и 20 преподавателей.  

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

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

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

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

• Преподаватели программы: Сергей Попков, Вадим Поясу, Игорь Коробов и другие.  

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

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

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

• Статистика успеха студентов: улучшение обоснований решений, понимание бизнеса заказчика, приглашение на новую работу и обновление портфолио.  

• Важность встреч и рокапов в рамках программы.