За годы работы со сборкой и вёрсткой сайтов по дизайн-макетам, мы выработали правила, которые позволяют быстро получить максимально качественный результат, тем самым сэкономив деньги клиента.
Эти правила мы оформили в виде требований к дизайн-макетам и высылаем дизайнерам, с которыми работаем, и заказчикам, которые приходят с готовым оформлением. Начинающим веб-дизайнерам на заметку.
Список требований к дизайн-макетам
- Дизайн-макеты готовятся для различных вариантов ширины экрана для всех устройств, на которых будет тестироваться и приниматься работа заказчиком.
Рекомендуются размеры Bootstrap:
- Смартфон вертикально (экран < 576px)
- Смартфон горизонтально (экран >= 576px, максимальная ширина контента 540px)
- Планшет вертикально (экран >= 768px, максимальная ширина контента 720px)
- Планшет горизонтально (экран >= 992px, максимальная ширина контента 960px)
- Большой экран (экран >= 1200px, максимальная ширина контента 1140px)
Под каждый требуемый размер передается растровая картинка в формате PNG необходимой ширины + исходный макет в формате Figma или PSD.
При отсутствии растрового макета для одного из рекомендованных разрешений верстка делается на усмотрение верстальщика и допускается неточное соответствие задумке дизайнера.
2. Все дизайн макеты выполняются с выравниванием всех блоков по сетке, подробнее здесь.
Рекомендуется использовать сетку Bootstrap: 12 колонок, ширина отступа 30px (15px с каждой стороны столбца), подробнее здесь.
Допустимо использование нестандартной сетки или выравнивание не по сетке, но это существенно увеличивает время верстки.
3. Все иконки, логотипы, иллюстрации и схемы передаются в формате SVG.
4. Все используемые шрифты передаются в формате woff, woff2 или ttf.
Шрифты должны быть бесплатными для использования на сайте либо заказчик приобрел необходимые лицензии.
5. Однотипные компоненты, такие как кнопки, абзацы, заголовки, выполняются в едином стиле на всех макетах.
Рекомендуется использовать готовые библиотеки компонентов (UI Kit) для уменьшение трудозатрат на верстку.
Пример можно посмотреть здесь.
6. На макетах не должно быть комментариев или указаний в ТЗ, которые влияют на внешний вид страницы, но не нарисованы дизайнером.
При наличии таких элементов они могут быть выполнены на усмотрение верстальщика без гарантий соответствия задумке дизайнера.
Что делать, если не удаётся выполнить все предписания
Конечно, мы берем в работу и дизайн, который не соответствует этим требованиям. Но, чаще всего, так выходит дольше, дороже и результат не всегда предсказуем. Поэтому мы крайне рекомендуем пройтись по нашему чек-листу и учесть все пункты. Они проверены годами работы и тысячами часов практики.
Добавить комментарий