Чек-лист
Чек-лист по верстке
Соответствие макету
  • Проверка переноса из макета в Тильду: кнопки, графические элементы, верстка всех смысловых блоков, их расположение на своих местах?
  • Проверка наличия верстки всех страниц из макета

Работа над макетом
  • Если преднамеренно не используем иное — проверка выключения привязки объектов к сайту в пропорциях.
  • Проверка работы перекрестных ссылок на страницах, при наличии.
  • Отключение Lazy Load там, где он не нужен, и включение там, где он нужен.
  • Наличие и выгрузка fav-icon для сайта.
  • Есть ли страница 404?
  • Проверка публикации всех страниц, если меняется шапка или подвал сайта, или при работе с адаптацией.
  • Отдельное выполнение шапки и подвала, включение соответствующих параметров в меню.
  • Использование логотипа компании с прозрачным фоном, желательно в формате *.svg, *.png, пикселизируется ли он.
  • При нажатии на логотип в шапке или подвале сайта — возвращение на главную.
  • Если есть якорные ссылки — корректность записи номеров блоков.
  • Соблюдение отступлений, учет особенностей макета

Формы
  • Реализация всех пунктов из карты сайта и подключение к ним форм.
  • Проверка пропущенных форм, отсутствия кнопок, которые ведут «в никуда».
  • В случае успешного заполнения формы — наличие страницы успеха.
  • В случае ошибки —отображение сообщения об ошибке.
  • Подключение форм к правильному е-мейлу, корректность расположения выгрузки данных, создания и прав на открытие документа с данными формы.
  • При запросе номера телефона, проверка правильности указания кода страны

При сдаче проекта
  • Проверка публикации всех страниц.
  • Отсутствие лишних изображений и рабочего мусора вне рабочей области Тильды, удаление файла — подложки для перерисовывания дизайна и др.
  • Оплата аккаунта, на который передается сайт.
  • В случае работы с доменом — корректность отображения адреса страницы с новым доменом, отсутствие в формах или ссылках привязок к блокам старых адресов с сервером Тильды, а не с новым доменным именем.
  • При наличии якорных ссылок на блоки на других страницах — корректность записи номеров блоков с новым доменом

Типографика
  • Корректность подключения шрифтов, загрузка шрифтов в веб-формате.
  • Правильность названия для возможности поиска в меню.
  • Заголовки должны быть в одном кегле, подзаголовки в одном кегле, основной текст в одном кегле; проверить, не изменилось ли форматирование при копировании из макета.
  • Использование типографа для исключения в макете лишних пробелов и неправильных кавычек

Цвет
  • Использование цвета в HEX из макетов.
  • Проверка цветового единства для всех заданных элементов, отсутствие новых цветов, одинаковый цвет для шрифта, обводки, другой стилизации, карточек, разделителей, особенно если эти элементы на разных страницах, но имеют одинаковое значение и должны быть в одном стиле

Стилистика
  • Единообразие ховера, единый вид для кнопок с противоположным действием («Подтвердить» и «Позже», например).
  • Размер элементов: пропорции кнопок не должны меняться. Иконки в формате *.svg. Если есть скругления или тени — они на всех элементах должны быть одинаковыми.
  • Если на объекте есть прозрачности — проверить, чтобы они были одинаковыми. Единство обработки при адаптации — не обрезаны ли на фотографиях важные части (например глаза, лоб, кисти рук, важные части товаров).
  • Если в проекте есть изображения — проверка отображения, приемлемость размера, оптимизация для меньшего «веса», проверка необходимости сохранения в меньшем разрешении

Адаптация, мобильная версия
  • Подготовка адаптации.
  • Адаптация для мобильных устройств.
  • Корректность отображения блоков, читабельность шрифта и удобство кнопок для попадания пальцем на маленьких экранах?
  • Адекватный размер шрифта на кнопках.
  • Соблюдение иерархии информации в мобильной версии.
  • Проверка наличия важных частей страницы в поле зрения в адаптированном макете?
  • Если шапка сайта слишком большая — наличие альтернативного варианта (например бургерное меню).
  • Подвал сайта в мобильной версии: можно ли попасть на пункты меню пальцем и не промазать?
  • Если есть потребность скрытия каких-либо блоков в мобильной — отключение показа в мобильной версии в настройках каждого такого блока

Настройки сайта
  • Заполнение поля «Бейджик», подбор и корректное кадрирование фотографии.
  • Заполнение поля описания сайта, правильное указание его названия.
  • Заполнение мета-данных и их содержание.
  • Контроль отображения ссылки в Facebook и при индексации в Google

Необязательно, но желательно
  • Подготовка инструкции для заказчика или для его сотрудников, как обращаться с Тильдой (видео, отдельная страница в его проекте и др.).
  • Наличие своего логотипа, чтобы к нам обращались новые заказчики; обсуждение вопроса о его снятии
Чек-лист по дизайну
Соответствие прототипу
  • Проверка наличия всех важных моментов из прототипа в дизайне.
  • Если были переговоры с заказчиком по стилистике — соответствует ли в итоге она тому, что нужно?
  • Наличие всех форм, смысловых блоков.
  • Присутствие всех пунктов из карты сайта.
  • Сверка прототипа и конечного результата: все ли ожидания от макета учтены?
  • Если какие-то пожелания не учтены, выяснить причину; если это преднамеренно для блага продукта, то причину записываем и потом апеллируем к требованиям заказчика.

Сетка
  • При наличии классической сетки (а не рваной) — выравнивание по силовым линиям, горизонтальный и вертикальный ритм.

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

Типографика
  • Соответствие заголовков в макете ранее выбранным Н1, Н2, Н3.
  • Заголовки должны быть в одном кегле, подзаголовки в одном кегле, основной текст в одном кегле.
  • Удобство интерлиньяжа для чтения.
  • Соблюдение иерархии шрифтов, особенно если есть списки, перечни, много информации в карточках.
  • Отсутствие орфографических ошибок и разрывов абзаца в ненужных местах, правильный перенос слов, чтобы текст можно было прочитать легко и быстро.

Цвет
  • Проверка цветового единства для всех заданных элементов, отсутствие новых цветов, одинаковый цвет для шрифта, обводки.
  • Гармоничность цветов цвета между собой в конечном итоге, соответствие целевому настроению.

Стилистика
  • Если есть скругления или тени — на всех элементах они должны быть одинаковыми.
  • Стилистика кнопок — наличие ховера, его вид и единообразие (если не говорим о кнопках рядом стоящих с противоположным действием, где они будут разного цвета).
  • Размер элементов: пропорции кнопок не должны меняться.
  • Смотрим «пятнами» —проверка на возможный перегруз в определенных частях экрана, присутствие лишних элементов.
  • Иконки должны быть визуально выровнены, иметь оптически одинаковый размер, быть в одном стиле (все контурные, или все «залитые», не разнобой) и в формате *.svg. Если где-то на объекте есть прозрачности — проверить, чтобы были одинаковыми.
  • Если работаем в Figma — проверка размещения всех объектов в границах документа, отсутствие лишних элементов, мусора, которые могут остаться после копирования или были «рабочими» и не являются частью макета в итоге.
  • Единство стиля обработки фотоконтента — не обрезаны ли на нем важные части фотографий (например, глаза, лоб, кисти рук).
Чек-лист по SEO
На странице
  • Гэг заголовков Н1, Н2 и т.д. На странице может быть только один Н1 тэг, он должен быть уникальным для каждой страницы, длина до 60 символов, содержит самый ключевой запрос по которому ищут в поиске, отражает суть тестовой части. Не повторяется в Заголовке и Описании страницы.
  • Альтернативный текст изображений, длина 70-250 символов, передавать смысл картинки, не злоупотреблять ключевыми словами

Отличие Заголовка от Н1:
Заголовок мотивирует перейти на страницу и совершить действие, а Н1 описывает ёмко контентную часть страницы.

В настройках страницы
  • Заголовок страницы, цель - передать поисковикам информацию, чему посвящена данная страница, должен быть уникальным для каждой страницы, 60-70 символов.
  • Описание страницы, не должен совпадать с Заголовком, уникальный для каждой страницы, 60-320 символов с пробелами, оптимально 200.
  • ЧПУ Url, не более 5 слов, глубнина не более 4-х уровней вложенности Url, разделять лучше через дефис -
  • OpenGraph для соц.сетей, размер изображения 1200х630 
  • Проверка запрета на индексацию

В настройка сайта
  • Редирект на единую версию https без www
  • Страница 404
  • Фавикон
  • Добавление сайта в панели веб-мастера
Чек-лист по анимации
Соответствие макету
  • На этапе анимации мы все еще могли пропустить что-либо по дизайну, найти ошибки, понять, что в форме не хватает знаков — поэтому будьте бдительны всегда, на любом этапе вашей работы.

Анимация в стандартных блоках и в зеро-блоке
  • Если используется стандартная анимация — то везде она должна быть хотя бы приблизительно одинаковой. Не должно быть вещей по типу «главный заголовок выскочил снизу, потом подзаголовки выскочили слева и справа, а логотип выехал сверху». Соблюдайте рифму анимации на странице в логических блоках

Пошаговая анимация
  • Проверка точки триггера — не слишком ли низко или высоко стоит точка триггера, и анимация тогда не успевает воспроизвестись.
  • Правильное указание процентного изменения объекта, или его закрепление.
  • Правильная запись триггера и выбранная позиция от края, центра экрана.
  • Плавность появления всех элементов анимации, отсутствие дерганий и непонятных подрагиваний.
  • Проверка параметров для точки триггера, задержки, изинга.
  • Проверка выбора изинга для анимации для плавности движений.
  • Создание новых шагов для анимации, а не выполнение всех действий в одном шаге.
  • Когда в ивенте выбрано «он скролл» — указание дистанции в пикселях?
  • Если планируется анимация функциональных элементов: пунктов меню, кнопок, плитки или активных ссылок, проверить, все ли анимированы.
  • Зацикленность анимации

*Хай левел: логика анимации может быть дополнена с помощью
12 правил анимации от Уолта Диснея.
*Не забываем об учебнике по анимации от Тильды

Финальный пересмотр работы
  • Проверка публикации всех страниц, сохранения изменений в Зеро-блоках и обычных блоках.
  • Отсутствие лишних движений, анализ необходимости анимации, оценка на ее избыточность и чрезмерную сложность.
  • Оценка общей информативности анимации — делает ли она понятнее блок, в котором находится; отсутствие наложения и перекрытия важных частей, например кнопок или форм так, что их становится нельзя заполнить.
  • Оценка общего вида анимации — выглядит ли она уместной и живой