Чому веб-дизайнер повинен вміти верстати - popel agency
Я є активним прихильником ідеї поділу праці. Я вважаю, що найефективнішою є робота не тієї команди, де працюють так звані «універсальні співробітники», а тієї, де ролі чітко розподілені і кожен на своєму місці. Але якщо мова йде про веб-дизайнера, тут, на мій погляд, навіть питання не стоїть, чи повинен цей співробітник за сумісництвом бути верстальником. Чим більше працюю в сфері веб-дизайну, тим міцніше моя впевненість - справжній веб-дизайнер повинен вміти верстати свої макети. Це не рекомендація. Це не гіпотетична необхідність. Це жорстка і сувора позиція.
І зараз я поясню чому!
адаптивна композиція
Однією з головних відмінних рис веб-дизайну є те, що я називаю адаптивна композиція.
Суть цього терміна дуже проста. В цілому, композиція - це певне розташування об'єктів в рамках вашого твору, з дотриманням планів і пропорцій, і з деяким елементом, який є центром композиції. Будь-художник і будь-який дизайнер прекрасно розуміє, що це, і просто зобов'язаний вміти в своєму творі цю саму горезвісну композицію красиво і грамотно вибудувати.
Художники і дизайнери будують композицію відповідно до того форматом, з яким працюють. Наприклад, якщо ви працюєте над композицією журнального розвороту, то вам потрібно розмістити найкращим чином певний контент в рамках цього самого розвороту. Якщо ви працюєте над якоюсь картиною в звичайному альбомі А4 - рамками для побудови композиції буде служити формат А4. Загалом, на якому б матеріалі ви не працювали, ви завжди маєте справу з чітко окресленими кордонами. Це дуже зручно. І, на щастя чи на жаль, в веб-дизайні це не працює.
Веб-сайти переглядають на дуже різних моніторах, в різних браузерах, на різних пристроях. Ваш сайт завжди виглядає трохи по-різному. На iPad він виглядає одним чином, на ноутбуці - іншим, на домашньому ПК - третім, а на мобільному пристрої - четвертим. Через те, що задана робоча область сайту на різних пристроях різна, ми маємо справу з особливим видом композиції, яка повинна, адаптуючись до різних робочих умов, зберігати свою елегантність і центр композиції. Таку композицію я і називаю адаптивної композицією.
Що таке верстка
Верстка в контексті веб-дизайну - це переклад зображеного в графічному форматі веб-сайту в форму HTML-сторінок з підключенням CSS. Віддалено це можна порівняти з аплікацією. Документ з, як правило, формату PSD розкладається на складові частини, а потім знову збирається разом вже за допомогою мови HTML і каскадних таблиць стилів.
Багато, хто вивчав мову HTML і знайомий з CSS, підтвердять, що в теорії вивчити ці мови нескладно.
В теорії все досить просто. Нарізати макет, склеїти макет. На практиці - є сотня нюансів!
По-перше, різні браузери трохи по-різному відображають сторінку.
По-друге, люди заходять на веб-сайт під різними пристроями, і у цих пристроїв теж є своя специфіка.
По-третє, верстальник зобов'язаний піклуватися про те, щоб розмір зверстаний файлів в результаті був не надто великим. Хорошим тоном в верстці вважається довести сторінку до самого мінімально можливого розміру.
І звичайно, верстальник зобов'язаний стежити за тим, щоб результат його роботи був максимально наближений до того, що зобразив дизайнер. Інакше вийде, що запущений сайт не відповідає затвердженому проекту, і команді розробників доведеться пояснюватися з замовником.
У теорії, версткою може і повинен займатися окремий співробітник. Область специфічна, яка вимагає від фахівця знань і вміння поводитися з мовою HTML і CSS. І в принципі, якщо макет підготовлений належним чином, то ніякої проблеми в тому, щоб передати макет в роботу верстальщику, і не повинно бути. Правила підготовки макета до верстці прості і зрозумілі. Але на ділі, як це часто буває, все не так просто.
Дизайнери-поліграфісти в веб-дизайні
Мені на подив часто доводиться мати справу з людьми, яким хтось вбив в голову, що веб-дизайн - це просто, легко і зрозуміло. Що намалювати веб-сайт може будь-який дизайнер. І якщо у якогось Максима N добре виходить красиво оформляти журнальні розвороти, невже він не впорається з банальним оформленням веб-сайту?
Багатьом замовникам надсилаються такими дизайнерами макети дуже подобаються. На етапі затвердження - проблем не виникає. Але коли справа доходить до верстки - тіні починають згущуватися.
Будь-яке питання про те, що відбувається з дизайном в разі, відмінному від вихідної картинки, призводить таких дизайнерів в ступор!
Говорячи простіше, ситуація така, що статична картинка виглядає в цілому непогано. Але в динаміці вона просто не працює. Дизайн просто розсипається, як картковий будиночок. Все тому, що дизайнери-поліграфісти часто просто не вміють мислити динамічно. Вони вміють добре зобразити статичну картинку. Але не можуть уявити, що з їх затишним зображенням формату 1280х1024 можуть відбуватися якісь зміни. Їх не бентежить, що розмір шапки на їхньому сайті може досягати 400-500 пікселів у висоту. На статичному макеті з цим проблеми немає, адже контент під шапкою видно відразу. А то, що в браузері у дуже багатьох користувачів крім шапки видно нічого не буде, і доведеться скролить вниз - їх це не засмучує. Головне, що в портфоліо виглядає красиво.
І що найсумніше, я не раз стикався з ситуацією, коли такі дизайнери, коли їм вказуєш на якісь недоробки, знизавши плечима, кажуть щось на кшталт «по-моєму, ці питання вже повинен вирішувати верстальник».
Тобто, виходить, що вони створюють спірні рішення, замовник їх стверджує, але безпосередньо на сайті вони або взагалі не будуть працювати, або будуть, але погано. Вони запросто фігачат в макет ознаки одночасно гумової верстки і верстки фіксованої ширини, а потім перекладають на плечі верстальника всі турботи про те, щоб макет виглядав красиво.
А якщо верстальник не зможе добитися хорошого результату на початку некоректно підготовленому макеті, не покаже, як змінюються елементи з наведення (бо дизайнер цього просто не показав), завжди можна буде перекласти на нього відповідальність. У дизайнера-то на макетах статичних все відмінно! Це в браузері виникають проблеми. У дизайнера на макетах геть і шрифти красиво згладжені, нестандартні. А в браузері вони он які кострубаті, і зовсім не такі красиві, як дизайнер підібрав, а якісь інші, віддалено схожі, або взагалі звичайні Arial або Times New Roman.
А чому так вийшло? Та тому що для верстальника спочатку підготували «неправдивий» макет. Тому що на практиці, виявляється, що в веб-дизайні все-таки є певна кількість всяких нюансів, правил, обмежень, які і пов'язані значною мірою з версткою макетів. А дизайнер про них просто не знав. Тому що ніколи в житті з ними не стикався і навіть не має до ладу уявлення про те, що таке гумовий дизайн, а що таке фіксований. Він не розуміє, що видима область браузера при відвідуванні сайту у багатьох користувачів не набагато більше 500 пікселів по висоті. Він не знає, що згладжування шрифтів в більшості браузерів не працює. І гадки не має, як підключаються нестандартні шрифти. Він зображує неоднорідний фон з шириною до 1280 пікселів, який красиво і органічно виглядає на його макеті, але поставте йому запитання: а при прокручуванні фон прокручується? Або буде зафіксований? І такий дизайнер на вас здивовано втупився і потім навмання відповість, не розуміючи суті питання.
Крім того, є банальні і прості правила використання певних символів в веб-дизайні. Наприклад, я нерідко зустрічаю дизайни, в яких переривчасте підкреслення використано в естетичних, так би мовити, цілях. У той час як насправді використання пунктирного підкреслення має на увазі виконання дії або перехід на іншу сторінку без перезавантаження сторінки. Суцільне підкреслення - це перехід на іншу сторінку з перезавантаженням. І таких дрібних нюансів досить багато.
Але обмеження, які накладають на дизайнера специфічні особливості веб-дизайну - це тільки одна сторона медалі.
Інша ж сторона медалі - це ті можливості, які дає нам динаміка в веб-дизайні. Це можливість розширювати дизайн за допомогою спливаючих елементів, переходів, анімацій. Це можливість якісь елементи жорстко закріпити, а якісь робити динамічно змінюються при певних умовах (наприклад, можна зробити якийсь елемент напівпрозорим при прокручуванні сторінки, або, навпаки, виникала якась додаткова панель, в якій не було потреби раніше ). Для того щоб такі штуки на сайті реалізувати, потрібно одне - знати, що вони існують. А для цього - потрібно цікавитися, бути в темі.
Навик верстки у дизайнера дозволяє, з одного боку, уникнути тупих рішень, які суперечать логіці веб-дизайну і які неможливо втілити в життя, а з іншого - використовувати на повну котушку можливості сучасних технологій верстки, зробити сайт більш елегантним, цікавим, динамічним.
Ну а ще, навик верстки розвиває динамічне мислення, без якого в веб-дизайні робити абсолютно нічого.