IT-специалистам, занимающимся разработкой, наверняка знакомы споры, возникающие между верстальщиками и дизайнерами. Первые получают в работу «сырые» макеты, требующие значительной корректировки. На это уходит драгоценное время, часто по такой причине срываются сроки, что чревато конфликтами не только внутри коллектива, но и с заказчиками. Чтобы избежать неприятностей, необходимо следовать нескольким простым советам.
Оптимизируйте графический контент
Нередко проблема заключается в размере изображения. Большое фото снижает скорость загрузки сайтов, поэтому можно сохранить качество при обработке или сделать несколько вариантов, предназначенных для разного разрешения. Отличный выход – передать вместе с макетом папку со всеми изображениями.
- Превосходное решение для простых картинок и иконок – векторная графика. Здесь вы получаете сразу два преимущества: малый вес и привлекательный внешний вид.
- Не забывайте о размерах холста. Максимально допустимые значения по ширине и высоте должны совпадать с ними.
- При необходимости скорректировать изображение (обрезать, округлить углы и пр.) используйте маски и не удаляйте исходный файл.
Осторожнее со шрифтами
Креативные начертания вызывали удивление десять лет назад, сейчас к ним все привыкли. Их можно встретить более чем на 60 % сайтов, их поддерживает 93 % современных браузеров. Проблема заключается в том, что нестандартные шрифты могут «криво» отображаться на экране. В некоторых случаях даже Photoshop демонстрирует предупреждающие окна. Решений проблемы здесь два:
- С Google Fonts вставьте (если поддерживается кириллица);
- Допишите @font-face, тем самым подключив шрифт.
Не забывайте, что верстальщику необходимы все использованные шрифты. Соберите их в папку сразу в 3-5 форматах: eot, svg, woff, woff2, ttf.
Полезный совет: не нужно «играть со шрифтами». Выберите максимум два, которые хорошо сочетаются друг с другом. С их помощью можно выделять заголовки, важные места и оформлять основной текст.
Структурируйте слои
Как слои, так и группы имеют наименования. Подписывайте их латиницей, при этом следуя логическому расположению элементов (например, shapka – header).
Вложенность групп не приветствуется, но бывают ситуации, когда без нее не обойтись. В таком случае не забывайте о пределах и логической структуре.
При наличии скрытых слоев во время выделения некорректно отображаются поля группы. Как результат, достаточно сложно измерить отступы, приходится заглядывать в папки и искать, почему появляются поля. Если скрытых слоев нет, то поля группы и границы вложенных объектов совпадают.
Не забывайте о UI-kit
Это комплект элементов пользовательского интерфейса, который обязательно должен отправиться верстальщику вместе с макетом. В набор необходимо включить:
- Компоненты взаимодействия с пользователем, например, hover-эффекты;
- Цветовую палитру в полном объеме;
- Отсутствующие в макете детали. В качестве примера приведем кнопку класса .send: в файле она должна быть обязательно, хотя в макете может отсутствовать;
- Список использованных стилей текста. В нем укажите гарнитуру, кегль, начертание, межстрочный интервал. Это необходимо для предотвращения появления слишком большого количества стилей. Проблема особенно актуальна для крупных проектов.
Обеспечьте адаптивность
При наличии единого макета верстальщику придется просчитывать, какие блоки и как будут смещаться при отображении на разных устройствах. Сохраните нервные клетки коллеги, сделайте макеты хотя бы для минимального и максимального разрешений. Если позволяет время, не поленитесь проработать варианты для всех их типов.
Чтобы упростить процесс, воспользуйтесь модульной сеткой. Ширина стандартно равняется 1400, 1200, 960, 768, 480 и 320 px. С каждым шагом меняется ширина колонки, но расстояние остается таким же.
Пользуйтесь гридами
Другое название – колонки. Это своеобразная модульная сетка, для удобства делящая макет вертикально. В результате получаются идентичные по ширине части с одинаковыми интервалами между ними. В основном гриды помогают:
- Сформировать отступы одного размера;
- Поделить информацию на определенные блоки для упрощения восприятия (сплошное «полотно» выглядит гораздо хуже, люди часто уходят с сайтов именно по причине нечитабельности);
- Сделать оптимальную ширину макета. С каждой из сторон должно оставаться еще 15 px до условного края устройства. То есть для определения общей ширины макета следует от горизонтального разрешения отнять 30 px. Это необходимо для корректного отображения скроллбара и границ окна.
Не надейтесь только на «рыбу»
Этим словом в разработке называют типичный текст, используемый во время создания дизайна. Он нужен для понимания, сколько места на странице займет контент. Однако часто «рыба» не соответствует реальным объемам текста, который размещается потом. Как результат, одни блоки пустуют, а вторые – оказываются переполненными. Поэтому старайтесь сразу просчитывать, как будет выглядеть страница после публикации «нормального» текста.
Немного рекомендаций дизайнерам
- Общайтесь с верстальщиками. Вы – коллеги, которые могут друг друга научить чему-то полезному, а не враги, вынужденные трудиться над одним проектом.
- Напишите список того, что требует проверки перед сдачей макета. Сверяясь с ним каждый раз, вы сможете избежать многих конфликтов из-за мелочей.
- Рационально распределяйте время, чтобы была возможность окончательно собрать макет и оценить результат.
- Постигните азы работы с фреймворками, HTML, CSS. Это полезно для понимания функций верстальщика. Поставив себя на его место, вы сможете предотвратить многие споры.
- Постоянно развивайтесь в профессиональном плане, следите за нововведениями и практикуйтесь.
Последний, но не менее важный совет: если что-то вызывает вопросы или непонимание, лично обратитесь к верстальщику, а не ждите, когда он придет к вам с претензиями.
