UX-UI дизайн. Дизайн сайта. Продукт: Сделать финальную работу для Яндекс практикум в tilda. Объём работ: Итак, тебе предстоит: • перенести свой дизайн из Figma в Tilda; • сделать адаптивную версию лендинга для пользователей мобильных устройств. Важно, чтобы сайт получился максимально близким к твоему изначальному дизайну, ведь не зря в макет уже вложено столько усилий. Чтобы и тебе, и ревьюеру было проще ориентироваться, в Figma-файл с этой работой добавь ссылку на Figma с дизайном из 10-го спринта. При автоматическом переносе что-то в твоём дизайне может «слететь»: нужно всё тщательно проверить и поправить. Также, чтобы с сайтом было приятнее работать, надо не забыть про эффекты и настройки анимации. В конце у тебя получится полноценный работающий сайт по твоему макету, с мобильной и десктопной версией. Материалы для работы Тебе понадобится только проверенный ревьюером макет в Figma — сайт Издательства «ARTE» к выпуску книги «Демоны и грешники. Мир Иеронима Босха». Что конкретно нужно сделать При выполнении задания следуй нашей инструкции, она поможет не упустить ничего важного. 1. Определи, из каких блоков будет состоять сайт.?Если блок совсем простой, может быть разумно в несколько кликов собрать его на основе базового и не усложнять задачу импортом. Посмотри внимательно на свой макет и на меню базовых блоков Tilda, определи, для каких целей сможешь их использовать. Подсказка: в базовых блоках точно легко сделать хедер и футер.?Если планируешь комбинировать в работе стандартные и zero блоки, подумай заранее о том, чтобы сетка везде совпадала или, как минимум, смотрелась органично. Учитывай, что отредактировать стандартные блоки не получится. 2. Начни создавать сайт с базовых блоков.?Базовые блоки — самая простая и понятная часть работы. Мы рекомендуем начать с них, а потом уже решать более сложные задачи. Ты знаешь, что делать! Загрузи в Tilda нужный шрифт, выбери подходящий базовый блок и отредактируй его так, чтобы вышло максимально похоже на твой макет. 3. Импортируй фреймы из Figma.?Перенеси из Figma все части макета, которые не подходят для реализации в базовых блоках, расставь получившиеся zero-блоки в нужной последовательности.?Проверь, что все элементы стоят на своих местах и корректно отображаются. Если что-то при импорте поломалось, поправь вручную, работая в zero-блоке. По завершении этого этапа у тебя получится буквально твой макет из Figma, только на Tilda. 4. Настрой анимации в базовых блоках и кликабельные элементы?В хедере и футере может быть много кликабельных элементов. Позаботься о том, чтобы все пункты меню действительно вели к нужным блокам. А также — чтобы работали ссылки на соцсети и документы в футере, если такие есть.?В рамках учебного проекта ты можешь вставить ссылки на любые страницы в указанных соцсетях, а для документов вида Copyright и Privacy Policy создай отдельные страницы на Tilda и скопируй туда любую «рыбу». Если среди базовых блоков есть ещё какие-то с кликабельными элементами, не забудь настроить и их. 5. Проверь всё на предпросмотре и опубликуй сайт.?На этом этапе десктопная версия твоего сайта будет готова! 6. Настрой мобильную версию.?Посмотри, как выглядит твой сайт на экранах смартфонов. Если заметишь мелкие проблемы в zero-блоках, можешь решить их в редакторе, настраивая отступы и размеры элементов. Но не всегда этого будет достаточно: в некоторых случаях придётся буквально удалить один элемент и добавить другой — в соответствии с твоим макетом в Figma.?В базовых блоках у тебя вряд ли возникнут серьёзные проблемы. Но если так случилось, ты знаешь, что делать: убирай видимость блока на мобильных устройствах и добавляй новый блок, подходящий для другого формата экрана. 7. Проверь мобильную версию на предпросмотре и опубликуй сайт снова. Готово! Что важно учесть • Дизайн, цвета, шрифты и элементы макета в Figma менять не нужно. • Точность вплоть до пикселя необязательна: если в базовом блоке отступ выходит незначительно больше или меньше, чем на макете, это не проблема. • Скрывать видимость всех экранов с десктопа для мобильной версии и полностью импортировать мобильную версию из Figma — неоптимальный путь. Мы ожидаем, что ты настроишь мобильную версию путём небольших изменений десктопной версии там, где это возможно. И только несколько блоков придётся заменить полностью. Подсказки • Делай блоки небольшими: если вся основная часть твоего сайта будет одним длинным zero-блоком, с этим будет не очень удобно работать. Техническое задание есть.