В процессе работы
  • Использовать лейауты
    Карточки разного вида в зеро-блоке, сложные текстовые описания и тд. Уходим от работы прямоугольник / текст.
  • Использовать alias-блоки
    Например, когда у нас многостраничник на разных языках, меню и подвал можно делать элиасами, они как компоненты в фигме работают. Инструкция к ним: https://help-ru.tilda.cc/alias-block
  • Шапка и подвал закреплены отдельно
  • Формы и общие блоки лежат в шапке, а не на каждой странице
  • У всех кнопок и ссылок есть ховер
  • Все изображения сжаты и оптимизированы. Везде где можно ставим svg
    Все картинки перед заливкой на сайт сжимаем тут: https://tinypng.com/ или тут: https://squoosh.app/

    Проверить наличие тяжелых картинок можно тут: https://developers.google.com/speed/pagespeed/insights/
Перед сдачей проверяем
  • Добавить фавикон
  • Добавить бейджик
  • Добавить 404 страницу
  • Добавить страницу "Спасибо"
  • Добавить плавный скролл до якорных ссылок
  • Подключить защищенное соединение / редирект на основной домен / использование схемы https
  • Проверить все кнопки (чтобы кликались и вели куда надо)
Юр.часть
  • Во всех формах стоят две галочки "согласие на политику" и "согласие на обработку данных"
    В галочках ссылки на документ кликабельны. Галочки не отмечены по умолчанию, но обязательны для заполнения
  • Добавить документы: политика / согласие / оферта
  • Добавить куки
Шаблоны политики и согласия
Смотреть тут
В процессе работы
  • Использовать лейауты
    Для всех объектов, которые встречаются в макете больше 3-х раз и в которых будет меняться контент: кнопки, карточки любого вида, сложные текстовые блоки (где несколько стилей текста), все поля / формы.
  • Использовать компоненты
    На лендингах. Для всех объектов, которые встречаются в макете больше 3-х раз: кнопки, карточки товаров.

    На многостраничных сайтах. Для всех объектов, которые встречаются на нескольких страницах: шапка, подвал, карточки товаров, кнопки и тд.
  • Использовать фреймы
    В макете не должно быть сложносоставных объектов, которые между собой никак не сгруппированы. Например: прямоугольник, сверху текст — такое должно сразу оборачиваться во фрейм. Отдельно может висеть только одиночный объект, который ни к чему не привязан.
  • Работаем со стилями
    Под цвета и шрифты можно смело заводить после согласования концепции и пополнять их по мере необходимости.
  • Используем svg
    Иконки и любые объекты, которые можно отрисовать — должны быть svg. В крайних случая допустимо использовать png (например, у клиента нет логотипа в другом формате).
Передача на верстку
  • Создать фрейм с доп.материалами
    Фавикон, бейджик. Если где-то есть слайдеры, то показать все объекты за пределами видимости макета
  • Создать фрейм с состояниями
    Исходное / при наведении / при клике / ошибка
  • Отрисовать технические страницы
    Страница 404, Страница "Спасибо", Страницы политики / оферты, Окошко куки
  • Отрисовать всплывающие окна
    Формы заявки, кейсы, слайдеры, галереи
  • Положить доп.материалы или ссылки на них
    Наполнения для карточек, фотки для галерей и тд.
Пример оформления макета под верстку
Смотреть тут