При создании сайтов совместно со своей командой я чаще всего выступаю в роли специалиста по тильде, поэтому данный чек-лист я подготовил для дизайнеров именно с точки зрения верстальщика.
Возможно это очевидно, но всё же стоит отметить — дизайнер может повлиять на комфорт верстальщика и ускорить его работу в разы, а вот наоборот, кстати, не бывает. Верстальщик не должен дорабатывать макет и тратить на это время, которое не закладывалось в бюджет и сроки проекта.
Поэтому сохраняйте данный чек-лист себе и применяйте его при совместной работе над проектами.
1. Базовые знания Tilda
Пожалуй, самый главный из пунктов. Дизайнер должен обязан (!) знать возможности и ограничения платформы, чтобы при разработке дизайн-макета у него было понимание того, что сделать можно, а что нельзя (не получится реализовать из-за ограничений платформы). В моей практике были случаи, когда дизайнер сделал «красивую картинку», а потом приходилось сидеть и думать как это все реализовать в тильде и какую кучу кода для этого придётся написать;
2. Разрешения
В дизайн-макете их должно быть минимум 5: 320px, 480px, 640px, 980px, 1200px по ширине. Это именно тот набор разрешений, которые по умолчанию предусмотрены в Тильде. Если дизайнер их не предоставил, верстальщику в любом случае придётся их сделать. А это, мягко говоря, не очень удобно, поскольку на ту работу, которую дизайнер сделает в фигме за 5−10 минут, у верстальщика уйдёт куда больше времени;
3. Шрифты
Плюсик в карму дизайнерам, которые в файле фигмы делятся ссылкой на скачивание использованных шрифтов (идеально — в формате woff или woff2);
4. Страница 404
Обязательная для seo страница, которую почему-то мало кто делает. Она по своей сути стандартная, но должна быть оформлена в общем стиле сайта, поэтому сделать её обязательно;
5. Обложки для страниц
Об этом, кажется, забывают практически все дизайнеры. Но для того, чтобы в социальных сетях ссылка на сайт выглядела красиво, необходимо сделать обложку для каждой из страниц этого сайта (размер обложек: 1280px на 720px);
6. Фавикон
Мелочь, а приятно!
Если дизайнер подготовит фавикон сразу во всех необходимых форматах (32px на 32px в формате PNG, JPG или ICO; 32px на 32px в формате SVG; 180px на 180px в формате PNG) внутри макета, верстальщик обязательно это оценит;
7. Скругление углов
Исходя из моих личных наблюдений, это больная тема для дизайнеров. Но в Тильде нельзя скруглить только 1, 2 или 3 угла — либо все, либо никакие (не будем сейчас говорить о коде или извращениях в виде картинки внутри шейпа, стандартными способами это нельзя сделать никак). Кстати, это же касается и острых углов, стандартный функционал тильды не позволит этого сделать;
8. Фреймы
Каждый смысловой блок должен быть сделан отдельным фреймом. При этом, «фрейм во фрейме во фрейме» стоит избегать;
9. Слои и группы
Все, что кнопка (текст и прямоугольник) должны быть сгруппированы и названы «button». Все, что картинка — должны быть названы «image», все возможные векторы и фигуры должны быть названы «shape»
10. Pop-up
Всплывающие блоки должны быть отдельно отрисованы и адаптированы под все разрешения в дизайн-макете;
11. Анимации
Если дизайнер задумал какие-то анимации на сайте, он должен показать их в своём макете. Не объяснять словами, что «это выезжает слева и закрепляется», а показать (!) анимацию каждого необходимого элемента;
12. Состояния элементов
Например, обычная кнопка — без фона, с синей обводкой и черным текстом, а при нажатии — синий фон, белый текст. Всё это необходимо отрисовать в дизайн-макете и подписать каждое состояние элемента, чтобы верстальщик сделал всё точь-в-точь как задумал дизайнер;
13. Дробные числа
Возьмите за правило, — никогда не использовать их! Будь то расположение по осям x, y, ширина или высота элемента, прозрачность элемента и так далее. ТОЛЬКО. ЦЕЛЫЕ. ЧИСЛА.
14. Прозрачность
Она может быть только одна на весь элемент. Например, прямоугольник белого цвета с черной обводкой может иметь прозрачность 60% (это означает, что такая прозрачность и у фона прямоугольника и у его обводки). Нельзя сделать прозрачность фона прямоугольника 60%, а его обводки 100%;
15. Ссылки
Ссылки для кнопок и встраиваемых видео должны быть указаны в дизайн-макете;
16. Блюр
И у layer blur и у background blur максимальное значение не должно превышать 50px.
Пожалуй, самый главный из пунктов. Дизайнер должен обязан (!) знать возможности и ограничения платформы, чтобы при разработке дизайн-макета у него было понимание того, что сделать можно, а что нельзя (не получится реализовать из-за ограничений платформы). В моей практике были случаи, когда дизайнер сделал «красивую картинку», а потом приходилось сидеть и думать как это все реализовать в тильде и какую кучу кода для этого придётся написать;
2. Разрешения
В дизайн-макете их должно быть минимум 5: 320px, 480px, 640px, 980px, 1200px по ширине. Это именно тот набор разрешений, которые по умолчанию предусмотрены в Тильде. Если дизайнер их не предоставил, верстальщику в любом случае придётся их сделать. А это, мягко говоря, не очень удобно, поскольку на ту работу, которую дизайнер сделает в фигме за 5−10 минут, у верстальщика уйдёт куда больше времени;
3. Шрифты
Плюсик в карму дизайнерам, которые в файле фигмы делятся ссылкой на скачивание использованных шрифтов (идеально — в формате woff или woff2);
4. Страница 404
Обязательная для seo страница, которую почему-то мало кто делает. Она по своей сути стандартная, но должна быть оформлена в общем стиле сайта, поэтому сделать её обязательно;
5. Обложки для страниц
Об этом, кажется, забывают практически все дизайнеры. Но для того, чтобы в социальных сетях ссылка на сайт выглядела красиво, необходимо сделать обложку для каждой из страниц этого сайта (размер обложек: 1280px на 720px);
6. Фавикон
Мелочь, а приятно!
Если дизайнер подготовит фавикон сразу во всех необходимых форматах (32px на 32px в формате PNG, JPG или ICO; 32px на 32px в формате SVG; 180px на 180px в формате PNG) внутри макета, верстальщик обязательно это оценит;
7. Скругление углов
Исходя из моих личных наблюдений, это больная тема для дизайнеров. Но в Тильде нельзя скруглить только 1, 2 или 3 угла — либо все, либо никакие (не будем сейчас говорить о коде или извращениях в виде картинки внутри шейпа, стандартными способами это нельзя сделать никак). Кстати, это же касается и острых углов, стандартный функционал тильды не позволит этого сделать;
8. Фреймы
Каждый смысловой блок должен быть сделан отдельным фреймом. При этом, «фрейм во фрейме во фрейме» стоит избегать;
9. Слои и группы
Все, что кнопка (текст и прямоугольник) должны быть сгруппированы и названы «button». Все, что картинка — должны быть названы «image», все возможные векторы и фигуры должны быть названы «shape»
10. Pop-up
Всплывающие блоки должны быть отдельно отрисованы и адаптированы под все разрешения в дизайн-макете;
11. Анимации
Если дизайнер задумал какие-то анимации на сайте, он должен показать их в своём макете. Не объяснять словами, что «это выезжает слева и закрепляется», а показать (!) анимацию каждого необходимого элемента;
12. Состояния элементов
Например, обычная кнопка — без фона, с синей обводкой и черным текстом, а при нажатии — синий фон, белый текст. Всё это необходимо отрисовать в дизайн-макете и подписать каждое состояние элемента, чтобы верстальщик сделал всё точь-в-точь как задумал дизайнер;
13. Дробные числа
Возьмите за правило, — никогда не использовать их! Будь то расположение по осям x, y, ширина или высота элемента, прозрачность элемента и так далее. ТОЛЬКО. ЦЕЛЫЕ. ЧИСЛА.
14. Прозрачность
Она может быть только одна на весь элемент. Например, прямоугольник белого цвета с черной обводкой может иметь прозрачность 60% (это означает, что такая прозрачность и у фона прямоугольника и у его обводки). Нельзя сделать прозрачность фона прямоугольника 60%, а его обводки 100%;
15. Ссылки
Ссылки для кнопок и встраиваемых видео должны быть указаны в дизайн-макете;
16. Блюр
И у layer blur и у background blur максимальное значение не должно превышать 50px.
Больше полезного можно найти в моём telegram-канале, подписывайся!
