Как сделать мобильную версию сайта? | Уроки Figma

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

• Существуют два подхода: responsive design и адаптивный дизайн.  

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

• Создаем фрейм для iPhone и настраиваем его размеры.  

• Переносим изображение и логотип, уменьшаем их размер.  

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

• Переносим текст и фотографии, уменьшаем их размер.  

• Настраиваем отступы и размер шрифта.  

• Добавляем кнопки и настраиваем их расположение.  

• Переносим изображение и текст, уменьшаем их размер.  

• Настраиваем отступы и размер шрифта.  

• Добавляем кнопки и настраиваем их расположение.  

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

• Настраиваем отступы и размер шрифта.  

• Добавляем кнопки и настраиваем их расположение.  

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

• Настраиваем отступы и размер шрифта.  

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

• Добавляем кнопки и настраиваем их расположение.  

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

• Завершаем адаптацию сайта для мобильных устройств.  

• Копирование блока и изменение заголовка.  

• Уменьшение размера кегля до 32 пикселей.  

• Вставка кнопки и корзиночки.  

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

• Изменение размера текста до 16 пикселей.  

• Вставка фото и кнопки освещения.  

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

• Копирование и уменьшение первой картинки до 240 пикселей.  

• Добавление названий и затемнения.  

• Уменьшение картинки до 220 пикселей по высоте и 200 пикселей по ширине.  

• Перенос и уменьшение стрелочек.  

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

• Копирование и размещение блока новостей.  

• Уменьшение размера заголовка до 26 пикселей.  

• Вставка первой новости и уменьшение картинки до 160 пикселей.  

• Уменьшение картинки до 160 пикселей.  

• Вставка второй новости и уменьшение текста до 12 пикселей.  

• Настройка отступов и выравнивание текста.  

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

• Уменьшение размера карты до 480 пикселей.  

• Копирование и размещение карты внизу.  

• Копирование и размещение футера.  

• Выравнивание элементов по центру.  

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

• Уменьшение размера фрейма.  

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

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

• Подведение итогов и рекомендации.  

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

• Прощание от Сергея Чиркова.