Как подготовить макет для верстки
Иными словами, как облегчить жизнь верстальщику (или себе), выстроить грамотную структуру сайта и застраховаться от того, что в сайте при верстке будут отклонения.
UI-кит - набор готовых решений пользовательского интерфейса. Это могут быть кнопки, поля ввода, «хлебные крошки», меню, переключатели, формы - все те элементы, что помогают пользователям взаимодействовать с сайтом или приложением.
- все цвета/градиенты/паттерны, которые используются в макете
- шрифты с размерами для заголовков, наборного текста и тд.
можно вынести эти решения в отдельные фреймы и подписать, примеры:
Советую создать текстовые, цветовые стили и подписать для чего конкретно используется это решение
2) Нейминг фреймов и в идеале слоёв
Подпишите название каждого фрейма, например: "главный экран десктоп", "главный экран мобильная версия", "хедер", "футер" и тд. В макете должен быть порядок, чтобы в нем было удобно адаптироваться.
также проследите, чтобы нужные элементы стояли внутри фрейма, это очень важно, дабы ничего не потерять при верстке
Адаптивные версии для разных устройств располагайте рядом с этой же страницей десктопной версии, чтобы было видно логику перестроения композиции
лучше всего делать 5 адаптивных версий от большего к меньшему, я делаю: 1280-1920, 1000, 768, 480 и 360
Этот пункт нужен в том случае, если вы передаете макет верстальщику. Важно дать ему максимально четкое понимание того, как должны анимироваться и перестраиваться элементы при взаимодействии пользователя.
в помощь комментарии в фирме или личное взаимодействие с ним
Тут все просто, чистим макет от ненужного) Убираем скрытые слои и прочий мусор.
6) Прописать статус готовности макетов
Чтобы вдруг вам не сверстали недоделанную версию определенной страницы.
А лучше быть на связи с разработчиком и уточнять как будет удобней ему по конкретным вопросам. Удачной вам верстки, фиалочки!