Введение и обратная связь 0:06 Приветствие и проверка камеры. Перестановка в студии и просьба о обратной связи. Обсуждение домашних заданий учеников и их успехов.
Технические моменты и планы 1:04 Проблемы с трансляцией и новый свет. Обещание использовать новый свет и камеру для записанных уроков.
Тема занятия и домашнее задание 2:03 Тема занятия: композиция и модульные сетки. Домашнее задание по теме. Возможность участия в презентации и задержка ответов.
Композиция и её значение 5:00 Определение композиции как визуальной целостности. Важность расстановки элементов на странице. Управление вниманием пользователей через композицию.
Силовые линии 6:58 Понятие силовых линий и их роль в композиции. Примеры силовых линий и их восприятие мозгом. Применение силовых линий в реальных проектах.
Примеры силовых линий 8:55 Примеры простых и сложных силовых линий. Выравнивание элементов и создание силовых линий. Примеры с карточками и списками.
Интерактив и вопросы 11:51 Демонстрация силовых линий на примерах. Призыв к участникам задавать вопросы в чате. Подготовка к интерактивным примерам и вопросам.
Определение силовых линий 12:49 В первом примере одна силовая линия, расположенная по центру. Во втором примере левосторонняя силовая линия и центральная силовая линия. Объекты могут рифмоваться с другими объектами и их элементами.
Рифмовка объектов 14:48 Объекты, состоящие из нескольких элементов, могут рифмоваться. Человеческий мозг находит взаимосвязи в грамотно построенном дизайне. Карточки рифмуются по левому краю и центральной силовой линии.
Текстовые контейнеры 16:47 Текстовые контейнеры могут рифмоваться по левой и правой сторонам. В примере с текстовыми контейнерами можно выделить три силовые линии. Недостаток данных не позволяет точно определить третью линию.
Пример с веб-страницей 18:46 Заголовок и бирка образуют первую силовую линию. Подзаголовок и первая колонка текста образуют вторую силовую линию. Текстовый блок и его строки формируют третью силовую линию.
Динамичные объекты 20:45 Слайдер может формировать силовую линию с текстовым блоком. Текстовые контейнеры ограничивают ширину и высоту текста. Дополнительные линии могут появиться при наличии информации о ширине контейнеров.
Рифмовка по горизонтали 23:43 Объекты могут рифмоваться не только по вертикали, но и по горизонтали. Черточка связывает заголовок с подзаголовком, создавая вектор движения. Текстовые контейнеры адаптируются под высоту букв.
Нюансы рифмовки 24:42 Некоторые элементы могут казаться рифмующимися, но это не всегда так. Важно учитывать контекст и структуру элементов для точного определения рифмовки.
Адаптивность элементов на экране 25:41 Элементы, приклеенные к правому краю экрана, адаптируются в зависимости от ширины экрана. Левая сторона экрана обычно фиксирована, и элементы на ней не играют большой роли в композиции. Элементы, приклеенные к правому краю, могут рифмоваться друг с другом, но это зависит от дизайна.
Силовые линии в композиции 27:40 Силовые линии могут быть центрированы, как в примере с текстом и девушкой. Симметрия элементов, таких как кулон в виде сердца, также создает силовую линию. Направление взгляда девушки акцентирует внимание на тексте, придавая ему значимость.
Обратная рифма и композиция 30:38 Форма текста и девушки имеет схожие векторы, создавая сложную композицию. Простые элементы могут формировать многосложную композицию, привлекая внимание.
Адаптивность сайтов на разных языках 32:35 В системах с арабским или ивритским языком сайты могут растягиваться зеркально. Автор не имеет опыта работы с такими системами, но предполагает, что браузеры работают по аналогичной схеме.
Силовые линии на сайте 34:34 Силовые линии могут формироваться не только по фотографиям, но и по другим элементам, таким как иконки и меню. Важно учитывать погрешности в верстке и не ожидать идеальной симметрии.
Композиция и поведение сайта 36:31 Композиция может намекать на поведение сайта при скроллинге. Силовые линии помогают понять структуру и динамику сайта.
Подсчет силовых линий 38:29 На сайте можно выделить несколько силовых линий, включая центрированные и рифмующиеся элементы. Пример с кнопкой "Buy tickets" и цифрой "29" показывает, как элементы могут создавать силовые линии.
Силовые линии и их применение 39:29 Обсуждение силовых линий и их влияния на восприятие элементов на странице. Пример с кнопкой фильтра и верхней границей фотографии. Центрирование элементов и их выравнивание по нижней границе.
Горизонтальные и вертикальные силовые линии 40:29 Горизонтальные силовые линии и их сравнение с вертикальными. Пример с иконкой бургер-меню и кнопкой buy tickets. Динамичные элементы и их влияние на рифмовку.
Практика и применение знаний 42:24 Важность практики в дизайне. Применение знаний о силовых линиях в реальных проектах. Структурирование элементов на холсте.
Вектор движения в композиции 43:22 Влияние формы элементов на восприятие вектора движения. Пример с текстовыми блоками и их формой. Замедленная реакция человеческого восприятия.
Логика композиции и якорные объекты 45:21 Логичное продолжение композиции при наличии элементов. Пример с длинными строками и узкими столбцами текста. Якорные объекты и их роль в привлечении внимания.
Взаимодействие с аудиторией 48:15 Интерактивность с аудиторией через трансляцию. Обсуждение векторов движения и их направления. Пример с фотографией и её влиянием на восприятие.
Тепловые карты и внимание пользователей 50:13 Использование тепловых карт для анализа внимания пользователей. Пример с заголовком и рукой, формирующими косую силовую линию. Важность привязки элементов к центру или краям фрейма.
Уникальное торговое предложение 52:10 Пример с уникальным торговым предложением. Связь заголовка, подзаголовка и кнопки. Усложнение структуры через дополнительные элементы.
Акцентные кнопки и вектор движения 53:07 Большинство сайтов создаются для того, чтобы пользователь нажал на кнопку и совершил действие. Акцентные кнопки привлекают внимание и направляют пользователя. Вектор движения на сайте помогает пользователю воспринимать информацию.
Композиция и восприятие информации 54:05 Дизайнеры создают композицию, чтобы упростить восприятие информации пользователем. Пользователи обычно изучают информацию по часовой стрелке. Это помогает быстрее понять содержание страницы.
Привлечение внимания и силовые линии 55:04 Крупные и яркие объекты привлекают внимание пользователя. Силовые линии помогают организовать композицию. Контурные элементы могут дополнять и направлять внимание.
Анимация и её роль в дизайне 56:03 Анимация может усиливать восприятие ключевых элементов. Контурные элементы, такие как слова, могут двигаться и заменять друг друга. Это помогает сфокусировать внимание пользователя на ключевых элементах.
Трактовка дизайна 58:02 Дизайн можно трактовать по-разному, и это нормально. Важно понимать и обосновывать чужой дизайн. Это помогает улучшить собственный дизайн.
Векторы движения и слайдеры 59:00 Изображения и надписи могут создавать горизонтальные силовые линии. Слайдеры могут использоваться для горизонтального скроллинга. Важно понимать, зачем нужен горизонтальный скроллинг и как его правильно использовать.
Напряжение в композиции 1:01:57 Напряжение в композиции создается за счет массы и веса элементов. Пример с текстовым блоком показывает, как плотность текста может создавать напряжение. Управление массой и весом элементов помогает управлять настроением и восприятием.
Открытая и закрытая композиции 1:05:54 Открытая композиция достигается с помощью якорных объектов, направляющих внимание пользователя. Закрытая композиция создается за счет использования элементов, которые ограничивают восприятие. Важно абстрагироваться от отвлекающих элементов и фокусироваться на ключевых объектах.
Открытая композиция 1:06:52 Открытая композиция состоит из двух элементов: заголовка и подзаголовка. Эти элементы связаны силовыми линиями и пространством между ними. Треугольник, образованный элементами, создает дополнительную рифму и взаимосвязь.
Влияние открытой композиции 1:07:51 Открытая композиция делает содержимое холста динамичным. Она привлекает внимание пользователя и подготавливает его к дальнейшему взаимодействию. Открытая композиция не подходит для футера, так как создает ощущение незавершенности.
Закрытая композиция 1:08:51 Закрытая композиция управляют вниманием пользователя. Добавление четвертого якорного объекта делает композицию сбалансированной и завершенной. Закрытая композиция идеально подходит для футера.
Практика и примеры 1:09:50 Пример открытой композиции: треугольник из трех элементов. Пример закрытой композиции: четыре якорных объекта. Важно учитывать вектор движения и количество якорных объектов.
Анализ примеров 1:12:45 Пример открытой композиции с нисходящим вектором движения. Пример закрытой композиции с намеком на завершение страницы. Дизайнерские решения могут быть вдохновлены предыдущими примерами.
Закрытая композиция с аркой 1:17:40 Пример закрытой композиции с более чем четырьмя элементами. Элементы формируют арку, намекая на тупик в боковых направлениях. Скроллинг вниз показывает продолжение контента внутри арки.
Рифма и композиция 1:19:36 Рифма создает взаимосвязь между элементами композиции. Открытая и закрытая композиции могут сосуществовать в одном дизайне. Важно учитывать, как элементы композиции взаимодействуют с пользователем.
Рифма в композиции 1:20:35 Рифма помогает разрядить монотонность контента, сохраняя его целостность. Рифма может быть визуальной или структурной. Пример: треугольник внутри круга, черные кнопки.
Виды рифмы 1:21:35 Рифма включает повторение решений в разных контекстах или зеркальное отражение объектов. Все решения в системе должны быть рифмованы. Важно объяснять, почему объекты выделяются и почему они находятся в определенных местах.
Рифма и хаос 1:23:32 Отсутствие рифмы приводит к хаосу. С опытом рифма становится интуитивно понятной. Важно не усложнять дизайн без необходимости.
Контраст 1:25:27 Контраст создает внимание пользователя. Пример: черный заголовок на белом фоне. Контраст помогает управлять вниманием пользователя.
Примеры контраста 1:26:26 Контрастный заголовок бросается в глаза. Контраст между заголовком и текстом помогает понять иерархию. Важно соблюдать баланс контраста.
Важность отступов 1:30:22 Отступы между объектами играют важную роль. Небольшие изменения в отступах могут значительно улучшить дизайн. Опыт помогает лучше понимать, какие отступы оптимальны.
Неудачные примеры 1:32:20 Отсутствие контраста между заголовками и текстом. Большой текст без контраста не привлекает внимание. Разделение текста на абзацы улучшает восприятие.
Разделение текста 1:33:19 Разделение текста на абзацы делает его более читаемым. Короткие порции информации лучше воспринимаются. Отсутствие контрастных приемов делает текст скучным.
Проблемы с монотонным текстом 1:34:17 Монотонный текст вызывает желание его пропустить. Обилие контрастов в тексте может быть неудачным. Не стоит использовать слишком много приемов контраста в одном текстовом блоке.
Ошибки в использовании капсов и красного света 1:35:15 Использование капсов внутри текста выглядит странно. Красный свет также не рекомендуется. Завтра этим темам будет уделено больше внимания.
Ошибки со списками 1:36:12 Важно сохранять расстояние между элементами списка. Интерлиньяж строк не должен быть больше отступа между элементами списка. Пункты списка должны быть четко отделены друг от друга.
Правильное оформление списков 1:37:11 Каждый пункт списка должен быть отдельным элементом. Списки могут быть как горизонтальными, так и вертикальными. Важно правильно выравнивать элементы списка.
Использование функции of the layout 1:40:10 Функция of the layout помогает адаптировать списки. Можно добавлять различные элементы и центрировать их относительно пунктов списка. Важно правильно настраивать отступы и расстояния между элементами.
Модульная сетка 1:44:07 Модульная сетка помогает создать понятную композиционную систему. Сетка не ограничивает, а служит вспомогательным инструментом. Сетка помогает выстроить сбалансированную композицию и понять поведение макета на разных устройствах.
Преимущества 12-колонной сетки 1:46:05 12-колонная сетка популярна для больших проектов. Она помогает структурировать множество карточек в каждом ряду. Сетка упрощает создание сбалансированной композиции и адаптивность макета.
Введение в модульные сетки 1:48:02 Модульные сетки помогают избежать ошибок при создании дизайна. Они пришли из полиграфии и помогают определить поведение модулей на разных устройствах. Сетки помогают понять, как модули будут выглядеть на разных размерах экранов.
Пример использования модульных сеток 1:50:00 Пример сайта с 1280 шириной и четырьмя колонками. Настройка отступов и колонок в Лайалл Грэке. Возможность верстки по своим правилам, без строгих ограничений.
Адаптивность и брейкпоинты 1:53:54 При сужении экрана одна колонка может исчезать, а контент смещаться. Важно создавать несколько версий дизайна для разных размеров экранов. Брейкпоинты определяют, когда происходит переход на другую версию колонок.
Настройка для разных разрешений 1:55:52 Настройка сетки для разных разрешений экранов, например, 1920 пикселей. Использование типа "stretch" для равномерного растяжения контента. Важно правильно настроить отступы и гаттеры для корректного отображения.
Ограничения и рекомендации 1:58:50 Сетки ограничены количеством колонок и шириной. Не стоит делать дизайн под каждую возможную ширину экрана. Рекомендуется ориентироваться на популярные размеры экранов и делать дизайн под них.
Модули и их использование 2:00:47 Модули включают карточки, заголовки и другие блоки, занимающие определенное количество колонок. Важно учитывать количество и расположение модулей при создании дизайна. Модули помогают структурировать контент и оптимизировать его отображение на разных устройствах.
Количество колонок и модульность 2:01:45 Стремитесь к тому, чтобы каждый объект занимал ровно количество колонок. Система помогает упростить работу и делает дизайн более понятным для пользователей. Не обязательно использовать 12 колонок, но это удобно для вариативности.
Модульность и блоки 2:02:45 Блоки могут быть текстовыми абзацы, заголовки или графическими карточки, изображения. Все объекты можно распределить по равному количеству колонок. 12 колонок удобны, так как делятся на максимальное количество частей.
Преимущества 12 колонок 2:03:44 12 колонок делятся на 12, 6, 4, 3, 2 и 1.6, что обеспечивает высокую вариативность. Элементы могут занимать разное количество колонок, создавая интересные композиции.
Стандартные структуры лендингов 2:04:42 Лендинги часто имеют стандартную структуру: заголовок, подзаголовок, кнопки, карточки с преимуществами. Структура помогает быстро создавать сайты, но может быть однообразной.
Векторный дизайн 2:06:40 Стремитесь к векторному дизайну, если это возможно. Векторные элементы выглядят современнее и удобнее для работы.
Эксперименты с сеткой 2:08:40 Если проект требует подчеркивания середины, используйте сетки с четным количеством колонок. Сетки с четным количеством колонок создают четкие силовые линии для центрирования элементов.
Силовые линии и направляющие 2:10:36 Силовые линии помогают расставлять элементы по одной линии и центрировать их. Направляющие линии упрощают ориентацию в проекте и помогают создавать систему.
Модульная сетка и верстка 2:12:35 Модульная сетка помогает объяснить верстальщику, как элементы должны вести себя на разных экранах. Важно минимизировать сложные объекты, чтобы упростить передачу макета на верстку. Понимание системы модульной сетки помогает верстальщику эффективно работать.
Проблемы с сеткой проекта 2:14:32 Сетка проекта может быть непонятна разработчикам и верстальщикам. Сложности с добавлением нового контента и работой с проектом в будущем. Рекомендация создать новый сайт вместо усложнения существующего.
Обратная связь и примеры 2:15:30 Важность получения обратной связи от студентов. Примеры из западных вузов и их влияние на восприятие. Понятие "сущности" в дизайне.
Bootstrap и его популярность 2:16:28 Bootstrap был популярен из-за понятности и простоты. Достаточно было 3-4 версий для разных устройств. Адаптация дизайна под разные разрешения экранов.
Адаптация дизайна под разные экраны 2:17:27 Переворот экрана может уменьшить количество колонок. Минимальные различия между версиями для планшета и мобильного устройства. Три версии обычно достаточно для большинства устройств.
Ширина экрана и разрешение 2:18:27 Устаревшие разрешения, такие как 1024, и их актуальность. Важность адаптации дизайна под разные ширины экранов. Рекомендации по выбору ширины экрана для дизайна.
Пропорции экрана и восприятие 2:22:24 Человеческий глаз лучше воспринимает широкие экраны. Пропорции 16:9 считаются оптимальными. Ограничения узких экранов и их влияние на восприятие.
Плотность пикселей и разрешение 2:24:23 Влияние плотности пикселей на восприятие разрешения. Примеры разрешений для разных размеров экранов. Важность понимания плотности пикселей.
Bootstrap и его устаревание 2:25:20 Bootstrap как фреймворк и его модульные системы. Устаревшие технологии и их замена. Возможность создания собственных колонок и отступов.
Домашнее задание 2:27:16 Выбор качественного многостраничного сайта для анализа. Оценка работы сайта и его системы. Важность понимания четкой системы и ошибок верстальщиков.
Введение в гайд по модульной сетке 2:28:15 Гайд поможет установить модульную сетку сайта. Рекомендуется не заглядывать в гайд заранее, чтобы не выбрать уже разобранный сайт. Гайд содержит пошаговое объяснение подбора сетки и декомпозиции сайта.
Создание скриншота сайта 2:29:12 Для декомпозиции сайта нужно сделать скриншот его главной страницы. Рекомендуется использовать Firefox для скриншота, так как он встроен. Важно проверить работу сайта на разных браузерах, включая Chrome, Firefox, Safari и Internet Explorer.
Работа со скриншотом 2:30:11 Скриншот должен быть одной картинкой, чтобы избежать склеивания. Используйте дополнения к браузерам для создания скриншотов. Добавьте скриншот в фрейм, чтобы избежать скролла.
Настройка сетки 2:31:10 Используйте инструмент "Alt + G" для автоматического добавления скриншота в фрейм. Начните выстраивать сетку, используя силовые линии. Установите значения для ширины колонн и отступов между ними.
Проблемы с анимацией на сайте 2:33:09 Если сайт имеет анимацию, которая повторяется при скроле, это может мешать декомпозиции. Плохой сайт с повторяющейся анимацией лучше избегать. Ищите другой сайт для декомпозиции, если анимация мешает.
Заключение и анонс следующего занятия 2:34:08 Благодарность за внимание и высокий онлайн. Анонс следующего занятия по типографике и верстке. Ожидание высокой активности и выполнения домашних заданий.
