Привет, Хабр! Представляю вашему вниманию адаптированный перевод статьи "10 Useful Tips to Recreate Pixel Perfect Designs in Front-end" автора Jeroen Dellaert.

Мне как любому начинающему разработчику приходится часто сталкиваться с проблемами, решение которых нужно искать в сетях. Столкнувшись с понятием Pixel Perfect, я задумалась над тем, как это реализовать в рамках новых стандартов (Flexbox, Grid). К счастью, с появлением таких редакторов, как Figma и Sketch, жизнь у веб-разработчиков стала немного проще. Прошуршав по интернету, я нашла данную статью. Кроме броского заголовка в нем было несколько очень полезных советов, которые я в работе применяла на каком подсознательном уровне. Очень надеюсь, что этот адаптированный перевод принесет пользу многим ищущим ответов.

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

И дело не только в том, чтобы код максимально точно отражал дизайн, но и в том, чтобы он был аккуратным. Когда я начал свою стажировку, я работал вместе с остальной частью команды разработчиков и изучал приемы, чтобы мыслить идеальным pixel perfect кодом. Ниже приведены десять ключевых выводов из моего учебного процесса по воссозданию дизайна с максимально возможной точностью до пикселя во фронтенд разработке.

1. Каждый килобайт имеет значение

Первый совет, который я могу дать, — это попытаться подсчитать, что можно легко имитировать с помощью кода, а что потребует слишком много времени для воспроизведения. Контейнер с (простым) градиентным фоном легко воссоздается с помощью CSS. Sketch даже позволяет копировать атрибуты. Что касается графики, старайтесь экспортировать файлы небольшого размера как SVG-файлы. Еще одно преимущество заключается в том, что SVG основан на векторах, и вам понадобится только один файл под разные разрешения экрана.

2. Думайте блоками

Не усложняйте вещи больше, чем нужно! Пробегитесь глазами по макету, прежде чем прыгать прямо в редактор кода и пытаться разбить элементы на блоки. Иногда полезно посмотреть, прищурившись, чтобы увидеть, что можно/нужно сгруппировать. Если вам повезло работать с педантичными дизайнерами, вы можете узнать, как они группировали слои в Sketch. В целом вы можете следовать следующему правилу: любая группа слоев в Sketch, вероятно, лучше всего может быть представлена контейнером в HTML.

3. Будьте внимательны при экспорте изображения

Если вы экспортируете иллюстрацию/изображение, которое состоит из нескольких элементов, самый простой способ — экспортировать как один SVG / PNG. Хоть в таком подходе нет ничего плохого, все же попробуйте мыслить нестандартно и представить возможности анимации разных частей иллюстрации. Чтобы сэкономить время, можно экспортировать эти слои по отдельности из Sketch для последующего размещения и анимации их в коде.

4. Экспорт иконок одинакового размера

Иногда в дизайне вы можете столкнуться с иконками разных размеров. Например, если у вас есть шесть абзацев, каждый из которых имеет свой значок рядом с заголовком. Поскольку некоторые значки имеют, так скажем, более тяжелый «вес», дизайнеры, возможно, намеренно уменьшили их размер. С другой стороны, они могли увеличить несколько значков, которые казались слишком маленькими. В любом случае, если вы захотите правильно разместить значки рядом с каждым заголовком, используя отступы (padding) в CSS, это потребует много работы. Вместо этого вы можете использовать преимущества Sketch, применяя инструмент обрезки (нажмите клавишу S, а затем перетащите значок обрезки вокруг иконки). Возьмите самую большую иконку и обрежьте до одинакового размера все последующие иконки, выравнивая значки по центру. Другими словами, создайте отступ в экспортированном изображении, а не в CSS. Таким образом, вы можете присвоить каждому значку одинаковую позицию в CSS.

5. Цвета в SVG

Многие дизайнеры используют свойство прозрачности (opacity) для слоев или групп слоев в качестве инструмента для управления контрастом этого слоя (или группы) на каком-либо фоне. Например, подумайте о маленьких кусочках конфетти на темном фоне. Иногда экспортированная графика или иллюстрация в формате SVG не выглядит идентично при реализации в коде из-за специфических возможностей браузера. Способ исправить это — не пытаться контролировать свойство прозрачности графики/иллюстрации SVG в коде, а экспортировать ее из Sketch с уже примененным к нему свойством. Это также приводит к уменьшению количества стилей в CSS.

6. Отступы в контейнерах вместо фиксированной высоты

Чтобы сделать дизайн как можно более адаптивным, избегайте установки фиксированных высот И отступов для контейнеров. Вместо этого используйте только отступы, чтобы создать адаптивный и масштабируемый элемент, потому что текст в контейнере всегда может увеличиться. Как правило, установка определенной высоты лучше подходит для изображений. Чтобы проверить расстояния между верхом и низом контейнера и элементом(ами) в контейнере, сверьтесь с файлом Sketch.

7. Из Sketch в CSS

Используйте функции из Sketch, чтобы быть более продуктивным и точным. Скопируйте CSS стили из Sketch, чтобы убедиться, что вы установили правильный размер шрифта, высоту строки, цвет и т. д. Ведь дизайнер установил эти свойства не просто так. Также вашими друзьями в Sketch должны стать клавиши cmd- и alt -. Чтобы получить отступы объекта, щелкните левой кнопкой мыши по этому элементу, удерживая нажатой клавишу CMD.
Впоследствии используйте мышь, чтобы навести курсор на другие объекты, удерживая нажатой клавишу Alt / Option, чтобы увидеть расстояние между этими двумя элементами. Поиграйте с alt + cmd, чтобы увидеть отступы между объектами в группах. Если вы не можете определить расстояние между элементами, используя вышеупомянутый метод, не стесняйтесь нарисовать прямоугольник, чтобы увидеть отступы между вашим объектом и прямоугольником.

8. Уважайте сетку

Дизайн в основном создается с сеткой базовых блоков по определенной причине (часто это делается из соображений согласованности и визуального баланса). Если отступ между элементами случайно не делится на эту базовую единицу сетки, это, вероятно, не является преднамеренным. Например, если дизайн согласуются с сеткой размером 8px, и вы видите отступ в 199px в Sketch, скорее всего, подразумевалось 200px. Не задумывайтесь, просто исправьте это.

9. Используйте Flexbox

С введением Flexbox выравнивание элементов с помощью CSS стало намного проще. И Flexbox — это гораздо больше, чем, скажем, расстояния в строке навигации. Большинство типов выравнивания могут быть созданы с помощью Flexbox. Горизонтальное и вертикальное выравнивание текста рядом с графикой / изображением — один из тех примеров, когда Flexbox очень удобен, так как выравнивание остается неизменным, даже если объем текста увеличивается. И не говоря уже о свойствах распределения расстояния (justify) и упорядочения (order) контента.

10. Плавный дизайн

Наконец, не бойтесь, кроме создания идеальной pixel perfect страницы использовать дополнительную анимации или переходы. Если это соответствует дизайну, это, вероятно, хорошее дополнение к общему результату. Кроме того, это делает веб-страницу и дизайн более живым для пользователя.

Дополнительный совет

Небольшой бонусный совет, который я хотел бы дать, касается контента внутри изображения (представьте: элемент пользовательского интерфейса веб-приложения, используемый на веб-сайте в маркетинговых целях для этого же веб-приложения). Мало того, что текст на изображении может вызвать головную боль, когда он масштабируется в браузере. Текст внутри изображения по умолчанию будет соответствовать выбранному вами типу резервного шрифта. Это также означает, что копия внутри изображения может отображаться в Times New Roman, в то время как экспортированное изображение в Sketch было задумано с определенным serif -шрифтом. Простой способ избежать подобных проблем — преобразовать текст в контур в Sketch. Таким образом, текст преобразуется в векторные фигуры, которые пропорционально масштабируются с остальными объектами.



Каждый пиксель имеет значение!

Этот способ мышления не заканчивается на Sketch. Мы считаем, что версия дизайна в коде также должна отражать это. Обязательно расставьте все точки над «i», внимательно изучив отступы, цвета и расстояния между элементами. Не рассмотрите добавление еще одного слоя дизайна, и активно поразмышляйте о том, как анимация может улучшить удобство использования вашего приложения.