Як демонструвати макети дизайну клієнтам
Демонстрація макета дизайну сайту клієнту дуже важлива у процесі розробки сайтів чи додатків. Експерти радять запрошувати клієнтів до себе та демонструвати наживо, але з багатьма нашими клієнтами ми працюємо віддалено, і у нас немає такої можливості. Я розповім про технічну частину цього процесу і не зачіпатиму теми спілкування з клієнтом.
Чому погано пересилати клієнту просто картинки?
Я мав кілька курйозних випадків, коли клієнт отримував макет дизайну у вигляді графічного файлу і не міг правильно його оцінити. Це траплялося через програмне забезпечення, в якому він переглядав макет. Наприклад, стандартні переглядачі Windows і OS X показують картинку на екрані, зменшуючи її пропорційно. Велику різницю у масштабі легко помітити. Але іноді масштаб картинки зменшується до 90-80%, і не кожна людина може це відразу помітити, а в стандартному переглядачі Windows 7 взагалі не можна встановити точний масштаб 100%. В результаті, коли клієнт бачив вже зверстані HTML сторінки, він дивувався, чому все таке велике і відрізняється від того, що було в макетах.
Тому краще не вгадувати, яким програмним забезпеченням клієнт буде переглядати дизайн макет сайту, і знайти рішення, за допомогою якого клієнт відкривав би його у себе на комп'ютері в 100% масштабі.
Демонстрація з передбачуваним результатом
На той час ще не було штук на зразок InVision або RedPen, підійшов би хоч якийсь сервіс демонстрації макетів дизайну клієнту, і я вирішив створити власний інструмент.
Суть його полягала в тому, що макет дизайну повинен був поміщатися на сторінку HTML просто і швидко. Потім сторінку я розміщував би на студійному FTP (з HTTP назовні). Клієнту я передавав би відразу посилання на цю сторінку і був би впевнений, що клієнт побачить макет у правильному масштабі.
Я почав із прямого підходу і створив шаблон сторінки, в яку, за задумом, потрібно було дописувати лише src макету.
<html><head>
<title></title>
<style>
* {margin:0; padding:0;}
body {background-color:#fff; text-align:center;}
</style>
</head><body>
<img src="mockup.webp" alt=""/>
</body></html>
Перша складність, з якою я зіткнувся, полягала в наступному. Макети сайтів зазвичай малюють більше мінімально необхідної ширини. Якщо розмістити картинку просто за допомогою тега <img>, то при вікні, меншому за ширину картинки, з'явиться неприємний горизонтальний скролл, і основна частина макета сховається за межею вікна. Тоді я вирішив, що картинку потрібно розміщувати як тло. Додати в
<body> фон не склало труднощів.
body {background: url('mockup.webp') top center no-repeat;}
Виникла ще одна проблема — сторінка тільки з фоновою картинкою не скролилася по вертикалі і була видима лише її частина до «лінії перегину». Потрібна була якась «розпірка», щоб сторінка прокручувалась до низу макета. Тоді я використав саму картинку як «розпірку». Для цього я додав <img> з тією ж картинкою і встановив їй CSS властивість visibility: hidden.
Цей варіант був уже цілком робочим і мене влаштовував.
<html><head>
<title></title>
<style>
* {margin:0;padding:0;}
body {background-color: #fff, url('mockup.webp') top center no-repeat;}
</style>
</head><body>
<img src="mockup.webp" style="visibility: hidden"/>
</body></html>
Згодом мені захотілося якось оптимізувати цей шаблон. Він трохи розростався із використанням додаткових фонів. Таким чином, макети виглядали ще правдоподібнішими, оскільки при будь-якій ширині екрану фон його повністю заповнював. Що потрібно було оптимізувати? Найбільше не подобалося вводити шлях до картинки двічі. Хотілося звести цю дію до мінімуму. Я попросив одного зі знайомих верстальників допомогти мені, і, використовуючи JavaScript, а якщо точніше, jQuery, він зробив вказівку шляху лише на початку файлу один раз. Тоді я ще нічого цього не розумів.
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var path="mockup.webp";
$('#conteiner').css('background-image', 'url('+path+')').css('background-position', 'top center').css('background-repeat', 'no-repeat');
$('#conteiner img').attr('src', path);
});
</script>
<title></title>
<style>
* {margin:0; padding:0;}
body {background-color:#fff; text-align:center;}
#conteiner {position: relative;}
</style>
</head><body>
<div id="conteiner" style="width: 100%; overflow: hidden;">
<img src="1.webp" style="visibility: hidden;"/>
</div>
</body></html>
Я почав більше цікавитись JavaScriptі вирішив переписати цей шматочок на чистому JavaScript, щоб не смикати бібліотеку jQuery для такої маленької задачі. І в мене вийшло таке:
window.onload = function() {
var imgPath = "mockup.webp"; // Mockup path
document.getElementById('container').style.backgroundImage = 'url(' + imgPath + ')';
document.getElementById('image').src = imgPath;
};
З таким шаблоном я був у принципі впевнений, що замовник побачить макет коректно і в потрібному середовищі — в браузері.
Додаткові фішки
Залежно від потреб я намагався додавати деякі фішки. Наприклад, фіксоване меню. Багато експериментував із фоновими зображеннями, оскільки вони були різні у різних сайтів. Подекуди зустрічалося по 3-4 шари фону. Також була ідея додавати посилання на список сторінок проекту. Клієнт міг відкрити за посиланням одну сторінку, подивитися і відразу відкрити список інших сторінок проекту.
Адаптивний дизайн
Через деякий час я отримав завдання на розробку адаптивного дизайну сайту, і мені потрібно було придумати, як демонструвати макети клієнту, та ще й показати цю адаптивність максимально наближено до реальності. Тоді я розібрався, як працюють media queries у CSS, і вирішив застосувати це у своєму шаблончику.
В результаті я показував першу картинку старим способом, а решту додавав за допомогою media queries. Знову виникла проблема із вертикальним скролом. Спочатку висота всієї сторінки дорівнювала одному макету, при зміні макета висоту також необхідно було змінювати. Знайти витончене рішення часу у мене не було, і я просто змінював властивості height при зміні картинки.
/* Screensize -320 */
@media (max-width : 479px) {
#container {
background-image: url('img/320/mockup_320.webp') !important;
}
#container img {
height: 2760px;
}
}
Це працювало. Можна було відкрити сторінку навіть на мобільному або планшеті і перевірити, як вона виглядатиме наживо.
Згодом у мене з'явився час оптимізувати шаблон для демонстрації адаптивного дизайну. Основною вимогою було звести редагування файлу до мінімуму один раз вказувати шляхи до макетів, підраховувати висоту автоматично, зручно вказувати діапазони в media queries.
Не без допомоги нашого frontend-розробника Ігоря Богдосарова мені вдалося оптимізувати шаблон.
В результаті, у html я вставляю тільки шляхи до зображень та діапазони для media queries у масив, а окремий скрипт робить інше.
var imagesData = [ //media query in CSS format, image path ['(min-width: 980px)', 'image.webp'] ];
Також за порадою Ігоря я вирішив викласти шаблон на github. Думаю, багато хто зможе підказати, що ще можна в ньому покращити.
InVision як альтернатива
Моє рішення, звичайно, має свої переваги, але є і недоліки, такі як відсутність інтерактиву або можливості коментування прямо поверх макетів. Поки що цього було достатньо для демонстрації макетів дизайну.
Про сервіс InVision я чув багато позитивних відгуків від колег і є бажання спробувати його в роботі. Він приваблює своїми перевагами:
- зручність ведення проекту: зручно додавати, оновлювати макети до автогенерації різних станів прямо з PSD;
- інтерактив: переходи між сторінками, фіксовані шапки;
- мобільний вигляд: добре підходить для дизайну мобільних програм;
- коментування макетів: можна залишати коментарі прямо на сторінках, обговорювати з клієнтом чи колегою;
- і багато іншого.
Крім того, сервіс активно розвивається.
