Виды верстки в Zero Block: autoscale, grid- и window-контейнеры

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

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

• Четыре пункта: разбор верстки в grid контейнере, window контейнере, комбинированная верстка и примеры сайтов.  

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

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

• Макет проекта, завершенный в grid и window контейнерах.  

• Вопросы к зрителям о типах верстки, используемых в проектах.  

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

• Результаты опроса: большинство использует grid контейнеры, меньше всего - автоскейл.  

• Объяснение, что такое верстка и её виды.  

• Верстка сайта на платформе Tilda.  

• Переход к примерам верстки в Tilda.  

• Размещение элементов в 12 колонках Tilda.  

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

• Пример верстки в grid контейнере.  

• Резиновая верстка и её особенности.  

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

• Пример верстки в автоскейле.  

• Особенности window контейнера.  

• Примагничивание элементов к краям экрана.  

• Пример расстановки элементов в window контейнере.  

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

• Центрирование изображения по центру.  

• Проверка и корректировка элементов на экране.  

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

• Уменьшение размеров шрифтов для удобства клиентов.  

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

• Верстка в автоскилле для 1920 пикселей.  

• Уменьшение макета до 1200 пикселей для удобства.  

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

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

• Пример с сайтом для художника.  

• Проверка верстки на больших экранах.  

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

• Важность учета мониторов целевой аудитории.  

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

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

• Пример с двумя текстами: один в grid, другой в window контейнере.  

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

• Типографика становится интереснее с использованием window контейнеров.  

• Пример создания заголовка на всю ширину страницы и добавления элементов в window контейнер.  

• Комбинированная верстка позволяет размещать контент в window контейнере и заголовок на всю ширину.  

• Настройка отступов для контента в window контейнере.  

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

• Использование of the skill для увеличения заголовка и его центрирования.  

• Примеры сайтов, сверстанных в разных типах верстки.  

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

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

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

• Рекомендации по масштабированию для проверки плавных переходов.  

• Использование of the skill для достижения единообразия на всех устройствах.  

• Пример комбинированной верстки, где меню растягивается на всю ширину.  

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

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

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

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

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

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

• Рекомендации по увеличению заголовков для предотвращения их съедания.  

• Сложности и стоимость работы с window контейнерами.  

• Уменьшение заголовков и текста при сохранении композиции.  

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

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

• Пример минималистичного сайта с сохранением направляющих.  

• Пример сайта на window контейнере с большим количеством белого пространства.  

• Комбинированная верстка: первый экран в window контейнере, последующие в grid.  

• Пример сайта с комбинированным подходом: первый экран в window контейнере, последующие в grid.  

• Пример сайта с использованием window контейнера и grid.  

• Важность проверки направляющих при масштабировании.  

• Проблемы с бесшовной версткой текстур.  

• Советы по работе с текстурами в window контейнере и grid.  

• Лайфхаки для улучшения качества изображений.  

• Создание художественных проектов для портфолио.  

• Некоммерческий подход к созданию проектов.  

• Примеры проектов, отправленных на награды.  

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

• Пример: сайт в швейцарском стиле для продвижения в соцсетях.  

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

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

• Использованы фотографии дизайнеров из сообщества.  

• Варианты верстки: grid, auto scale, window container.  

• Верстка в grid контейнере: проблемы с масштабированием.  

• Auto scale: крупный масштаб, но с проблемами масштабирования.  

• Window container: текст остается по центру, но масштабируется.  

• Голосование за верстку: grid, auto scale, window container.  

• Grid контейнер побеждает с 64% голосов.  

• Авторский стиль верстки выбран для дальнейшего развития сайта.  

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

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

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

• Мерцание сайта только на своей тедди.  

• Создание тильда для клиента после финальной оплаты.  

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

• Ширина фрейма 1366 пикселей для 12 колонок.  

• Распределение элементов по макету.  

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

• Уменьшение размеров шрифтов и изображений для 10 колонок.  

• Создание боковых колонок для декоративных элементов.  

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

• Награды как способ признания и мотивации.  

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

• Участие в международных наградах для расширения рынка.  

• Отправка любого сайта на награды.  

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

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

• Отправка ссылки на макет без комментариев.  

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

• Запись экрана для объяснения дизайн-концепции.  

• Запись экрана с объяснением концепции.  

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

• Варианты от лучшего к худшему: личная встреча, созвон, запись экрана, отправка ссылки с комментариями.  

• Можно создавать коллаборации с дизайнерами, которые не любят верстку, но хорошо общаются с клиентами.  

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

• Можно создать микро-студию из двух человек, что увеличит объем проектов и дизайнов.  

• В одном проекте Tilda можно использовать разные шрифты для разных проектов.  

• Для портфолио можно использовать разные шрифты на разных страницах.  

• Можно группировать похожие шрифты в одно начертание для удобства.  

• Используйте профиль Tilda Expert для демонстрации своих проектов и цен.  

• Это помогает клиентам лучше понять ваши услуги и портфолио.  

• Видеозвонки с клиентами становятся более эффективными с хорошим оборудованием.  

• Начинайте работу в Figma, а затем переносите дизайн в Tilda.  

• Figma позволяет быстрее освоить базовые навыки дизайна и гибко экспериментировать.  

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

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

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

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