18 правил ідеального psd-макету — корисний чек-лист для дизайнерів

Загальний принцип — Не роби шлюб.
Не бери шлюб. Не передавай шлюб.
Тойота.

Ми рідко беремо в розробку проекти з уже реалізованих дизайном, але таке трапляється. Коли макети створюються всередині студії, на будь-якому проблемному етапі верстки розробник може уточнити у менеджера проекту або самого дизайнера, що малося на увазі і як це має виглядати. Але в ситуації, коли замовник вже комусь віддав гроші за макети і після прийшов до тебе за розробкою, так не вийде: вести комунікацію між дизайнером і розробником стає неможливим, а виправляти огріхи в макетах нікому. З цієї статті ви дізнаєтеся, де лажають горе-дизайнери і що варто перевірити перед тим, як віддавати макети на верстку.

«Майже» по сітці

Сітка покликана спрощувати верстку і визначати місце розташування ключових елементів. У деяких випадках дизайнери навмисно відходять від 12-колоночного гріду для створення неординарного дизайну.

Але якщо при створенні макета ви все-таки дотримувалися сітки — будьте ласкаві переконатися, що це справді так. Верстальники то і справа скаржаться, що в проекті від сторінки до сторінки дизайн може сильно відрізнятися: ідентичні блоки з’являються то ліворуч, то праворуч, іконки різного розміру, а кнопки не схожі один на одного.

Коли елементи вибиваються з сітки, процес верстки затягується — витрачається додатковий час на з’ясування положення блоків або правки, якщо зверстана сторінка не збігається з макетом візуально. Також виникають проблеми з адаптивністю сторінок, оскільки неясно, як вийшли за рамки сітки об’єкти повинні себе вести на пристроях меншої діагоналі.
Сергій, розробник в студії Сибирикс:
«Напевно, найголовніша проблема в тому, що далеко не всі дизайнери знають хоча б основи html і css, тому і макети робляться без оглядки на верстку. Наприклад, частенько зустрічається, коли на адаптиві блоки перекомпануются таким чином, що без дублювання контенту для мобільного і десктопної версії не обійтися — це уповільнює роботу над версткою».

Володимир, керівник студії:
«Є мільйон випадків, коли програміст каже «це неможливо», а потім бере і робить, як потрібно. Отже-таки можливо. І більшість обмежень, незручних для програміста, але цікавих з точки зору дизайну — штучні. Чітку межу провести неможливо. Працює тільки ітераційне обговорення і спроби реалізувати задумане. Пробувати, дивитися, говорити, робити, експериментувати. Інакше все скотиться до похмурим шаблонами. Для частини проектів це ОК. А для частини — ні. Чи робите ви в дусі конвеєра або робите фестивальні роботи? Ми писали про це докладніше ».

Копіпаст полотна

В Фотошопі зручно розмножувати полотна: скопіював разом зі стилем і всіма налаштуваннями і перетягнув в потрібне місце. В творчому пориві деякі дизайнери не обтяжують себе дати верствам адекватні назви та упорядкувати їх між собою, а після вже не можуть зрозуміти, до якого блоку яке полотно належить і де його взагалі шукати на макеті.

При передачі на верстку переконайтеся, що ваші полотна названі однозначно і розподілені по папках, виходячи з логіки макета.

Незрозумілі відступи

В ідеальному макеті всі відступи і розміри блоків повинні бути уніфіковані. Там на один піксель більше, тут — на один менше, а верстальщику потім сидіти і вибирати, як правильно. Можливо, це не надто вплине на зовнішній вигляд сторінки, хоча клієнти бувають різні: комусь кожен зайвий піксель кидається в очі. А можливо, тестувальник накладе готову верстку на макет-оригінал через плагін Pixel Perfect і напише список з мільйона багів, визнавши такі невідповідності помилкою. Прослідкуйте, щоб відступи тематичній області від шапки і підвалу були однаковими на всіх ваших сторінках.

Читайте також  Burger King і таємна запис екрану вашого телефону

Об’єкти теж містять приховані небезпеки — іноді при створенні форм в Фотошопі, навіть якщо дизайнер використав сітку, трапляються ось такі похибки:

Верстальник навряд чи стане враховувати ці тонкощі і, швидше за все, обріже розміри об’єкта, щоб той точно вписався в сітку. Тому правило — ВСІ об’єкти повинні мати цілочисельні розміри, інакше результат може дуже відрізнятися від початкового макета.

Кольори «на око»

В фотошопі є зручний інструмент «піпетка», і дизайнери люблять ним користуватися — тицьнув, і не треба запам’ятовувати номер кольору. Але якщо тицьнути в край елемента, колір може спотворитися відтінком фону. Інша небезпека — якщо радіус піпетки більше 1 пікселя, Фотошоп покаже середнє значення між сусідніми кольорами.

Андрій, розробник
“Особливо дратує, коли кольори дизайнер визначав “на око”, а потім ти сидиш з набором різнокаліберних сірих і не знаєш, який саме використовувати. Це відбувається з-за того, що немає банальної карти кольорів проекту, на яку міг би спиратися і сам дизайнер при роботі над внутрішніми сторінками, і верстальник». Негласне правило не рекомендує використовувати чорний під номером #000000 — він занадто контрастний на тлі білого. Дивіться на різницю:

Ще один лайфхак дизайнерів, який дратує верстальників, щоб зробити колір світліше (в тому числі у тексту), дизайнер просто збільшує прозорість шару. Верстальщику доведеться користуватися піпеткою, і знову ж, велика ймовірність похибки (особливо у випадках з градієнтними заливками у елементів).

Растрові елементи

 

Текст

Якщо дизайнер до вебу якийсь час робив макети для друку в друкарні, він може грішити звичкою растеризувати тексти, але для верстальника це стає серйозною проблемою: такий текст неможливо скопіювати — можна тільки заново набрати вручну. І це менша з проблем: звідки верстальщику брати накреслення, розмір і колір растрированного тексту — ось це питання.

Тіні і градієнти

При верстці розробнику зручніше і швидше подивитися параметри тіні або градієнта, ніж тикати піпеткою в різних областях цієї зони, коли шар підлягатиме растеризації. Це прискорює верстку і впливає на результат: шансів помилитися з колірним переходом менше.

Якщо поверх зображення накладається темний фон (наприклад, ховер), його не можна склеювати з самим зображенням — це повинен бути окремий напівпрозорий або градієнтний шар, щоб можна було заглянути в його параметри.

Ефекти накладення

При накладенні беруться в розрахунок зміст нижніх шарів, і передати такі ефекти при верстці непросто, тому верстальники їх сильно недолюблюють. І не даремно: далеко не кожна версія браузера готова відображати їх так, як задумував дизайнер.

Читайте також  Забудьте про Бургер Кінг! Є витік документів куди небезпечніше


Ефекти накладання в різних браузерах

Проблеми зі шрифтом

 

Дробові розміри

Зазвичай це відбувається випадково, якщо до всього блоку застосували, наприклад, інструмент трансформації — шрифт збільшився/зменшився пропорційно картинці. Проблема в тому, що браузери не враховують дробові значення і просто округляють до найближчого.

Безліч шрифтів

На весь проект бажано використовувати не більше 3-х зображень — це можуть бути шрифти однієї гарнітури (Light, Regular і Bold) або різних. Це не жорстке обмеження — все залежить від завдань проекту, але певний сенс у ньому є: чим менше варіацій шрифту, тим вище зосередженість на тексті, у читача. Вважається правилом разом з макетом передавати гарнітури, які там використовувалися, або хоча б давати посилання на Google Fonts.
Андрій, розробник:
«Зараз більшість браузерів відійшли від шрифтів у форматі TTF, OTF — і якщо розробник буде використовувати їх по-старому, не скрізь вони будуть відображатися коректно. Ми в студії давно перейшли на формат WOFF або WOFF2, щоб не було проблем».

Використання нестандартних шрифтів

Нестандартні шрифти та їх накреслення повинні бути перевірені на наявність веб-версії. Справа в тому, що такі шрифти впливають на швидкість завантаження сторінки — для їх відображення браузеру потрібно спочатку їх завантажити, і на це піде певний час. По-хорошому вага нестандартного шрифту не повинна перевищувати 1 мегабайт. І краще, щоб такий шрифт на сторінці був тільки один. Ну і не забувайте, що шрифти коштують грошей. Іноді — великих. У нас були випадки, де шрифт спеціально доопрацьовувався під конкретний проект — та ще задачка.

Кострубата типографіка

Часто буває, що міжрядкові інтервали і відступи між абзацами не збігаються всередині блоків на макеті і відрізняються від сторінки до сторінки — простежте за однаковістю. Не відокремлюйте заголовки від абзацу в окремі текстові блоки, щоб вручну збільшити відступ між ними — користуйтеся налаштуваннями інтерліньяжу і абзацами.

Євген, розробник:
«По можливості не варто використовувати складні ефекти на типових текстових сторінках, якщо передбачається, що замовник сам зможе їх змінювати через адмін-панелі. Швидше за все, у нього вийде «обернути» такі елементи div. Іноді це вирішується сниппетами або іншими прийомами, але все одно викликає складність при наповненні контентом». Обов’язково варто показати на макеті оформлення параграфа, абзаців, заголовків 1-4 рівня (h1, h2, h3, h4), маркованих та нумерованих списків. А ще краще зібрати все це в окремий документ — гайдлайн або UI-kit. Сюди ж можна додати поведінка посилань (активна, при наведенні, відвідана).


UI-kit для проекту «Спаська вежа»

Незрозуміла анімація

У елементів на кшталт кнопок або випадаючих списків є кілька станів, але часто дизайнери малюють лише якийсь один з них. Завдяки цьому виходять, наприклад, неохайні всплывашки, які верстальник через брак зразка зробив сам.

Перевірте, що об’єкти, які беруть участь у анімаціях і інтерактивних взаємодіях, розбиті пошарово. Наприклад: вид при наведенні на об’єкт — один шар, вигляд при кліці по ньому — який інший вид у статиці — третій. Ті ж правила працюють і для банерів.

Читайте також  GUI Psychology. Наше сприйняття інформації і зображень

Бажано позначити шари з анімаціями і інтерактивами квітами і супроводити їх коментарями. Також дуже бажано в коментарях прописати, як саме це повинно працювати і навести приклади.
Євген, арт-директор:
«Фотошоп фотошопом, але зараз з’явилося стільки прогресивних інструментів, всередині яких до кожного елементу відразу створюються потрібні рядки коду — верстальщику не становить великої праці перетворити дизайн-макет зверстаноі сторінки. А взагалі, звичайно, все залежить від самого верстальника — якщо він норм, то і результат буде норм, в якому б редакторі це не було намальовано:)»

Іконки в PNG

У проекті, залежно від завдань, іконки бувають різні: іноді дизайнер створює унікальний набір власноруч, іноді йому простіше і швидше знайти потрібну мільйон варіантів де-небудь тут і доопрацювати її при необхідності.

Але буває, що дизайнери використовують іконки у форматі PNG — в ньому при масштабуванні на екранах з великою роздільною здатністю (а зараз навіть на мобілках щільність пікселів скажена) край зображення розпливаються. Звідси правило: всі іконки повинні бути у форматі SVG — так вони залишаються чіткими, яким би не був їх розмір.

Деякі верстальники воліють, щоб іконки були зібрані в одному місці — в окремій папці — і щоб їх назви були ідентичні верствам в макеті. Іншим зручніше, щоб SVG-зображення були вбудовані в основний файл, оскільки так набагато простіше і швидше вирізати svg з макета, ніж шукати потрібну іконку в іншій папці.

Чек-лист

В творчому пориві складно встежити за тим, щоб все було зроблено правильно. Там шар скопіювався і залишився без назви, там об’єкт трошки виліз за край колонки, тут шрифт випадково «зажирнився» вбудованими фотошопними налаштуваннями замість вибору потрібного стилю — з ким не буває? А з тим, у кого є наш чек-лист!

Чек-лист для підготовки Photoshop-макету до передачі на верстку

 

  1. Якщо дизайнер використав сітку, всі блоки на макеті розташовані строго по ній.
  2. У всіх об’єктів на макеті цілочисельні розміри.
  3. Повторювані елементи на сторінках завжди ОДНАКОВІ.
  4. Всі шари згруповані по папках і розподілені за логікою макета. Зайві видалені, схожі — об’єднані.
  5. Відступи від елементів уніфіковані.
  6. Кольори на макеті збігаються з основними кольорами проекту.
  7. Текст як текст (не підлягатиме растеризації).
  8. Ефекти накладання, тіні і градієнти не растеризації.
  9. Використання ефектів накладання доцільно.
  10. У шрифтів недробні розміри.
  11. Шрифти, які використовуються у проекті, зібрані в окремій папці.
  12. Нестандартні шрифти та їх накреслення перевірені на наявність веб-версії. Вага одного нестандартного шрифту не перевищує 1 Мб.
  13. Міжрядкові інтервали і відступи в тексті уніфіковані.
  14. Всі іконки у форматі SVG і зібрані в одному місці. Найменування іконок однакові і зрозумілі, збігаються з найменуванням ідентичних полотен на макеті.
  15. Для всіх активних елементів є шари з ховерами.
  16. Об’єкти, що беруть участь у анімаціях / інтерактивних взаємодіях, розбиті пошарово. Для банерів — аналогічно.
  17. До анимациям і інтерактивним взаємодій прописані коментарі і вказані приклади, як це має виглядати.
  18. Для макета створений гайдлайн з палітрою кольорів проекту і стилями тексту.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *