10 корисних порад щодо реалізації Pixel Perfect дизайну під Front-end розробці (на прикладі роботи з редактором Sketch)
Привіn, презентую вашій увазі адаптований переклад статті “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», уважно вивчивши відступи, кольору і відстані між елементами. Не розгляньте додавання ще одного шару дизайну, і активно поміркуйте про те, як анімація може поліпшити зручність використання вашого додатка.
