День 6. Интенсив «UX/UI: Start» | Онлайн-школа Айтилогия | itlogia.ru

• Ольга Чернова из онлайн школы Айтология приветствует зрителей.  

• Тема урока: адаптивный дизайн, его важность и создание.  

• Домашнее задание и анонс следующего урока по анимации Figma.  

• 67% пользователей проводят время в интернете с мобильных устройств.  

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

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

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

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

• Заказчики иногда пренебрегают адаптивной версией сайта.  

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

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

• Адаптация дизайна для четырех разрешений экрана.  

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

• Пример проекта ученицы Ирины: адаптация под планшет и мобильный экран.  

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

• Оформление кейсов для проектов.  

• Преобразование прототипов для улучшения внешнего вида.  

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

• Создание адаптивной версии для ширины 375 пикселей.  

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

• Настройка сетки и колонок для удобства верстальщиков.  

• Копируем хедер и вставляем его внутрь фрейма.  

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

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

• Копируем блок и вставляем его с отступом 30 пикселей.  

• Устанавливаем фон блока по границе фрейма.  

• Редактируем шрифты, уменьшая кегль до 35 для мобильного экрана.  

• Перемещаем текст и изображение по сетке.  

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

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

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

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

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

• Копируем блок товаров и адаптируем его по сетке.  

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

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

• Проверяем выравнивание всех элементов.  

• Удаляем ненужные элементы из первой карточки.  

• Завершаем адаптацию карточки товара.  

• Увеличиваем изображение до границ контейнера.  

• Дублируем карточку и растягиваем её за пределы фрейма.  

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

• Проверяем высоту и расстояние между элементами.  

• Корректируем тексты и расстояние до следующей карточки.  

• Адаптируем карточки и удаляем ненужные элементы.  

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

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

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

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

• Корректируем расстояние между элементами и текстами.  

• Уменьшаем количество колонок и корректируем кнопку.  

• Группируем блоки и подгоняем их по размеру.  

• Корректируем фон и изображения, чтобы они не перекрывали друг друга.  

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

• Группируем футер и подгоняем его по размеру.  

• Удаляем фон футера для интересного эффекта.  

• Перетаскиваем телефон в нужное место и возвращаем его в группу.  

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

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

• Устанавливаем расстояние между элементами в 40 пикселей.  

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

• Устанавливаем футер на 100 пикселей ниже.  

• Обрезаем нижнюю часть экрана до 40 пикселей.  

• Создаем адаптивную страницу для мобильного устройства с разрешением 375 пикселей.  

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

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

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

• Завтра создадим анимацию макета и узнаем, как стать дизайнером.  

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