Що не забути, приймаючи макет сайту від дизайнера, або дрібниць не буває

Готовий дизайн-макет сайту, який здає вам дизайнер, а ви передаєте далі розробникам – це не просто красива картинка, це чітке і повне візуальне представлення майбутнього сайту (сторінки або програми).

Тому дизайнери-професіонали віддають замовнику не один PSD-файл з макетом, а цілий набір файлів – макети під різні розміри екранів, іконки, шрифти, стайл гайди та пояснювальні записки. Все це допомагає розробникам зверстати сайт саме у тому вигляді, в якому він був задуманий.

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

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

І починаються взаємні претензії – «я розробник, а не дизайнер», «а мені не сказали, що це треба промалювати», «цього немає в макеті», «це ж і так очевидно» і т. д. Страждають у результаті нерви менеджера і клієнта, так і розробляється проект.

Щоб уникнути таких проблем, ретельно перевірте макет від дизайнера – не відмахуйтеся від дрібних недоліків, кажучи «у нас і так вже немає часу». Якщо ви пропустите їх на етап верстки або взагалі в продакшн, то на розгрібання косяків вам потрібно буде ще більше часу.

Отже, беремо висланий дизайнером макет сайту, сторінки, додатки – потрібне підкреслити), включаємо режим «зануда» і поїхали:

Що перевіряємо макет сайту, приймаючи його від дизайнера

  1. Файли макетів

    Якщо говорити коротко, їх повинно бути декілька. Один-єдиний PSD-файл у папці з макетом – підозріло. Але допустимо, якщо ви замовляли дизайн однієї сторінки (або взагалі одного блоку) без адаптивності і особливих «вишукувань».

    В інших же випадках папка з готовим дизайном містить багато цікавого та потрібного:

    Тут ми бачимо не тільки PSD-шник, але і супутні файли – поки просто перелічимо їх, а потім пройдемося по кожному пункту:

    • Макети для усіх необхідних сторінокЯкщо ви замовили дизайн не однієї конкретної сторінки, а дизайн для сайту або програми, то макетів буде кілька. Власне, їх ви повинні були вказати в ТЗ дизайнеру – так що просто перегляньте ТЗ, що нічого не пропущено.
    • Макети для адаптивностіЯкщо ви замовили адаптивний дизайн, то макети будуть, як мінімум, в трьох варіантах – під десктопи, під планшети і під мобільні. Якщо потрібні якісь конкретні розміри екранів, обов’язково вказуйте їх в ТЗ дизайнеру.
    • Макети у форматі JPG (або PNG)Якщо у вас немає фотошопа, то подивитися PSD-макети на комп’ютері буде важко (на допомогу прийдуть онлайн-редактори, але це не завжди зручно). Тому попросіть дизайнера зберегти макети як звичайні картинки. До того ж, зображення, jpg/png важать набагато менше повноцінного PSD-файлу – ними легше обмінюватися в процесі узгодження дизайну.
    • ШрифтиЯкщо в макеті використовуються нестандартні шрифти (читай «яких немає в Google Fonts»), то тут повинна бути папка з файлами цих шрифтів у форматі ttf, eot, woff. Також тут може зберігатися шрифт з використовуваними на сайті іконками (наприклад, з IcoMoon).
    • Іконки в SVGSVG – це векторна графіка для вебу, такі іконки однаково добре виглядають як на десктопах, так і на мобільних (звичайні растрові іконки в форматах jpg/png будуть «розмиті» на мобільних).
    • Додаткові зображення і логотипиВсі фотографії і логотипи, які використовуються в макеті – у слайдера, фотогалереях, товари, портфоліо тощо – повинні бути збережені в окремій папці і в тих розмірах, в яких їх планується використовувати на сайті.
    • ФавиконЯкщо в ТЗ дизайнеру було обумовлено створення favicon – перевірте його наявність.
    • Пояснювальна запискаНа жаль, деякі дизайнери нехтують коментарями та поясненнями до макету, а потім щиро дивуються, чому в такому-то блоці не була зроблена така-то анімація.

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

    • Гід по стилів (style guide)Style Guide – це додатковий PSD-файл, в якому зібрані всі елементи розроблюваного сайту (інтерфейсу), наприклад, заголовки, кнопки, поля введення, що випадають меню, таблиці і т. д.

      Як правило, це рідкість. Якщо ви хочете отримати від дизайнера стайл гайд, потрібно обов’язково вказати це в ТЗ – і цілком можливо, що за його створення дизайнер візьме додаткову плату. Хоча при розробці масштабних сайтів або програм дизайнеру і самому не обійтися без стайл гайда.

    Тепер йдемо по цих пунктів докладно.

  2. У макеті для кожної сторінки:

    1. Промальовано поведінку елементів при дії з нимиЩо це за елементи:
      • ПосиланняПотрібен вигляд для звичайного стану та стану при наведенні. Також можна використовувати окремий колір для відвіданих посилань (опціонально).

      • КнопкиЗвичайний стан, наведення миші, натискання кнопки (і так для кожного виду кнопок):

      • МенюЗвичайний стан пунктів меню, при наведенні миші, активний пункт, випадаюче меню:

      • Таби (вкладки)Аналогічно меню – звичайний стан, наведення миші, відкритий таб:

      • Розгортаються списки або блокиЗвичайний стан і розгорнуте; якщо кнопка «Розгорнути» змінюється – обидва її стану:

      • Спливаючі підказкиЗнак, що позначає наявність підказки, і сама підказка:

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

      Можна промалювати один дизайн для всіх спливаючих вікон на сайті, головне врахувати при цьому специфіку окремих випадків. Наприклад, модальні вікна з невеликими формами краще робити до 400-500 пікселів в ширину, в той час як модальні вікна з текстом можуть бути досить широкими (до 900 пікселів в ширину, особливо якщо тексту забагато).

    3. Промальовують необхідні елементи форм
      • Основні елементи формЦе текстові поля, що випадають списки, чекбокси, радиобаттоны і кнопки. Навіть якщо в поточних формах на сайті поки не використовуються, наприклад, радиобаттоны і селекты, краще, якщо дизайнер отрисует їх – тоді буде простіше додати їх на сайт, коли вони знадобляться в майбутньому.

        Перевірте, щоб для елементів форм були окреслені основні стани:

        • Для текстових полів: стан за замовчуванням і при фокусі (курсор в полі).
        • Для чекбоксов і радіокнопок: стан за замовчуванням і з виставленої галочкою.
        • Для кнопок: за замовчуванням, наведення, натискання.

        А також, щоб було для оформлення пояснювальних підписів до написів і позначок обов’язкових полів.

      • Повідомлення про помилкиБудуть показуватися, якщо не заповнено обов’язкове поле або поле заповнене з помилкою – їх теж потрібно промалювати.

      • Повідомлення після відправки формПісля заповнення і відправки форми користувач повинен отримати помітне і зрозуміле повідомлення про те, що дані, відправлені, і коли буде відповідь. Тому не залишаємо цей елемент на волю верстальника, а віддаємо на малювання дизайнеру.

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

    4. Блоки сторінки не пов’язані строго на довжину вмістуНе забувайте про те, що ваш сайт (додаток, інтерфейс) з часом буде змінюватися і доповнюватися інформацією. Тому перевірте, чи можна буде в розробленому дизайні безболісно додати пункти в меню, картинки в слайдер, блоки в опис переваг, рекламні банери і т. д.

      Наприклад, тут дизайнер виніс категорії каталогу товарів в горизонтальне меню:

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

      Таку ситуацію варто продумати відразу – небудь прибрати категорії у вертикальне меню, або передбачити посилання «Ще».

      Звичайно, використовувати блоки фіксованих розмірів допустимо, але цей крок повинен бути усвідомленим.

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

      Не всі дизайнери знають, але – розробник взаємодіє з шарами в процесі своєї роботи, якісь шари виділяє, інші приховує або робить видимими. Тому верстви в макеті повинні бути структуровані й зрозуміло підписані:

      Якщо у вас немає фотошопа, то відкрити файл psd для перевірки можна в онлайн-редакторі, наприклад, в Photopea.

  3. Макети для усіх необхідних сторінок

    Ще перед постановкою ТЗ дизайнеру визначитеся, скільки макетів знадобиться. Одного макета вистачить тільки для лендинга (одностраничника).

    В інших випадках макетів буде як мінімум два – головна сторінка і внутрішня (стандартна) сторінка.

    У більшості випадків макетів, звичайно, виходить більше. Для чого можна малювати окремі макети (якщо не хочете, щоб їх оформлення «додумував» верстальник):

    • Каталог товарів – список категорій, список товарів, картка товару.
    • Інші сторінки інтернет-магазину: кошик, оформлення замовлення, особистий кабінет покупця.
    • Список послуг.
    • Список новин і окрема новина (аналогічно статті, акції).
    • Сторінка 404-й помилки.
    • Сторінка з результатами пошуку і т. д.

    Переконайтеся, що оговорені в ТЗ макети присутні.

  4. Макети для адаптивності

    Якщо частка відвідувань вашого сайту з мобільних пристроїв (планшетів і смартфонів) перевищує 20-30% – без адаптивності вам вже не обійтися. Якщо сайт лише розробляється, дивіться на цільову аудиторію – для людей до 35-40 років виходити в мережу з мобільних (а іноді і тільки з них, взагалі без десктопа) стає буденністю.

    У разі розробки адаптивного дизайну кожен макет буде в трьох варіантах:

    • для ширини екрану 320 пікселів (смартфони, телефони)
    • для ширини екрана 768 пікселів (планшети, ноутбуки)
    • для ширини ширина екрана від 1200 пікселів (ноутбуки, комп’ютери)

    Для окремих випадків можуть знадобитися додаткові макети, але частіше цих трьох буде достатньо.

    Обов’язково перевірте, що для мобільних макетів намальовано випадаюче меню і його кнопка-гамбургер.

  5. Шрифти

    Зручніше брати вільні шрифти, наприклад, Google Fonts. Які плюси – вони легко вбудовуються на сайт і вантажаться з серверів Гугла (з найближчого до користувача сервера, що іноді виходить швидше, ніж вантажити шрифти з самого сайту). За мінуси можна знову ж порахувати те, що вони вантажаться з серверів Гугла – а раптом з Гуглом що трапиться і шрифт не буде завантажуватися – але це все-таки малоймовірно. Як компроміс – з Google Fonts можна скачати файли шрифтів і розмістити їх на своєму сервері.

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

    У разі використання в макеті іконок з готового иконочного шрифту – його теж потрібно прикласти до макету.

  6. Іконки в SVG

    Якщо на сайті будуть використовуватися іконки в звичайному PNG форматі, то на багатьох мобільниках такі іконки виявляться «розмитими». Якість втрачається із-за того, що мобільний пристрій намагається збільшити картинку в кілька разів (це відбувається з-за підвищеної щільності пікселів екранів мобільних). Найбільш простий вихід – використовувати іконки в SVG форматі. Це векторний формат, тому він масштабується без проблем.

    Також svg-іконки можна зберегти в иконочный шрифт – в такому варіанті теж не буде проблем з розмитістю.

    Єдине зауваження – використовувати SVG стоїть тільки для простої графіки (іконки, логотипи), так як складне зображення буде надто багато «важити».

  7. Додаткові зображення і логотипи

    Якщо в макеті є слайдери, фотогалереї, товари та інші списки з зображеннями – картинки для них повинні лежати в окремій папці та єдиних розмірах.

    Наприклад, у папці «Слайдер в шапці» чотири картинки, кожна картинка розміром 1920 на 600 пікселів, з необхідною корекцією яскравості і пр. А в папці «Партнери» всі 30 логотипів партнерів для відповідного слайдера (на макеті їх буде показано 4 штуки, але верстальщику потрібні вони все).

  8. Фавикон

    Якщо замовляєте розробку або редизайн сайту, не забудьте прописати в ТЗ створення favicon – іконки для вкладки в браузері. Інакше отримаєте таку ситуацію:

    Добре, якщо іконка буде в двох форматах:

    • Стандартний favicon.ico (64 64 пікселя):
    • Іконка для мобільних – apple-touch-icon-precomposed.png (на 114 114 пікселів):
  9. Пояснювальна записка

    Доведеться змиритися, але верстальники – не телепати. Тому їм потрібно повідомити (і краще в письмовій формі) про всіх необхідних анімація і прихованих блоках в макеті. Для анімацій оптимально вказати «бачив цю анімацію на такому-то сайті».

    Також корисні коментарі види:

    • «Такі-то відкриваємо посилання в новому вікні, а такі-то – в модальному»
    • «Після відправки форми видаємо таке повідомлення»
    • «По кліку на цій кнопці прокручуємо сторінку до ось цього блоку»
    • «Підменю розгортаємо по наведенню миші на десктопах, а на мобільних – по кліку» і т. п.
  10. Гід по стилів (style guide)

    У стайл гайде збираються всі елементи для сайту/додатки – кнопки, посилання, форми, спливаючі повідомлення, меню, таблиці тощо

    При розробці макета для чергової сторінки беруться елементи з стайл гайда. Це гарантує, що всі сторінки макета будуть виконані в єдиному стилі.

    Крім того, Style Guide корисний і при подальшому розвитку сайту. Маючи керівництво по стилям, верстальник може зібрати нову сторінку для сайту з готових елементів, навіть не вдаючись до допомоги дизайнера.

Підсумок

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

Щоб доробок за макетом було менше, варто видати дизайнеру техзавдання, де всі необхідні моменти будуть прописані.

Читайте також  Голосові помічники не вчаться на тесті Тюрінга

Степан Лютий

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

You may also like...

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

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