Я являюсь активным сторонником идеи разделения труда. Я считаю, что самой эффективной является работа не той команды, где работают так называемые «универсальные сотрудники», а той, где роли чётко распределены и каждый на своём месте. Но если речь идёт о веб-дизайнере, тут, на мой взгляд, даже вопрос не стоит, должен ли этот сотрудник по совместительству быть верстальщиком. Чем больше работаю в сфере веб-дизайна, тем крепче моя уверенность — настоящий веб-дизайнер обязан уметь верстать свои макеты. Это не рекомендация. Это не гипотетическая необходимость. Это жесткая и суровая позиция.

И сейчас я объясню почему!

Адаптивная композиция

Одной из главных отличительных особенностей веб-дизайна является то, что я называю адаптивная композиция.

Суть этого термина очень проста. В целом, композиция — это определенное расположение объектов в рамках вашего произведения, с соблюдением планов и пропорций, и с неким элементом, который является центром композиции. Любой художник и любой дизайнер прекрасно понимает, что это, и просто обязан уметь в своём произведении эту самую пресловутую композицию красиво и грамотно выстроить.

Художники и дизайнеры строят композицию в соответствии с тем форматом, с которым работают. Например, если вы работаете над композицией журнального разворота, то вам нужно расположить наилучшим образом определенный контент в рамках этого самого разворота. Если вы работаете над какой-то картиной в обыкновенном альбоме А4 — рамками для построения композиции будет служить формат А4. В общем, на каком бы материале вы ни работали, вы всегда имеете дело с четко очерченными границами. Это очень удобно. И, к счастью или к сожалению, в веб-дизайне это не работает.

Такие простые и понятные форматы бумаги. Чёткие размеры для каждого из них. Тёплые, уютные, знакомые.

Веб-сайты просматривают на очень разных мониторах, в разных браузерах, на разных устройствах. Ваш сайт всегда выглядит чуть-чуть по-разному. На iPad он выглядит одним образом, на ноутбуке — другим, на домашнем ПК — третьим, а на мобильном устройстве — четвертым. Из-за того, что заданная рабочая область сайта на разных устройствах разная, мы имеем дело с особым видом композиции, которая должна, адаптируясь к разным рабочим условиям, сохранять свою элегантность и центр композиции. Такую композицию я и называю адаптивной композицией.

Исходный макет в разрешении 1280х1024, все выглядит аккуратно и на своих местах, но...
...тот же макет на устройстве с разрешением 1024х768. Правый и левый фланги понесли потери!
Он же на устройстве с разрешением 1600х900. По горизонтали места уже достаточно, даже слишком! Что будет происходить с макетом в этом случае? Также в двух последних случаях не поместились в один экран заголовки трех блоков под слайдером — нехорошо!

Что такое вёрстка

Вёрстка в контексте веб-дизайна — это перевод изображённого в графическом формате веб-сайта в форму HTML-страниц с подключением CSS. Отдалённо это можно сравнить с аппликацией. Документ из, как правило, формата PSD раскладывается на составные части, а затем снова собирается вместе уже с помощью языка HTML и каскадных таблиц стилей.

Многие, кто изучал язык HTML и знаком с CSS, подтвердят, что в теории выучить эти языки несложно.

В теории всё довольно просто. Нарезать макет, склеить макет. На практике — есть сотня нюансов!

Во-первых, разные браузеры немного по-разному отображают страницу.

Во-вторых, люди заходят на веб-сайт под разными устройствами, и у этих устройств тоже есть своя специфика.

В-третьих, верстальщик обязан заботиться о том, чтобы размер свёрстанных файлов в результате был не слишком большим. Хорошим тоном в вёрстке считается довести страницу до самого минимально возможного размера.

И конечно, верстальщик обязан следить за тем, чтоб результат его работы был максимально приближен к тому, что изобразил дизайнер. Иначе выйдет, что запущенный сайт не соответствует утвержденному проекту, и команде разработчиков придется объясняться с заказчиком.

В теории, вёрсткой может и должен заниматься отдельный сотрудник. Область специфическая, требующая от специалиста знаний и умения обращаться с языком HTML и CSS. И в принципе, если макет подготовлен подобающим образом, то никакой проблемы в том, чтобы передать макет в работу верстальщику, и не должно быть. Правила подготовки макета к вёрстке просты и понятны. Но на деле, как это часто бывает, всё не так просто.

Дизайнеры-полиграфисты в веб-дизайне

Мне на удивление часто приходится иметь дело с людьми, которым кто-то вбил в голову, что веб-дизайн — это просто, легко и понятно. Что нарисовать веб-сайт может любой дизайнер. И если у какого-нибудь Максима N хорошо получается красиво оформлять журнальные развороты, неужто он не справится с банальным оформлением веб-сайта?

Существует целая каста веб-дизайнеров, которые пришли в веб-дизайн из полиграфии. Ранее они занимались постерами, иллюстрациями, рекламными буклетами и вёрсткой журналов, а теперь — пробуют себя в новой области. Их макеты несложно отличить от других. Первый взгляд на них вполне может производить благоприятное впечатление.

Многим заказчикам присылаемые такими дизайнерами макеты очень нравятся. На этапе утверждения — проблем не возникает. Но когда дело доходит до вёрстки — тени начинают сгущаться.

Оказывается, что автор макета не может ответить на самые банальные вопросы. Резиновый дизайн или фиксированной ширины? Коммерческие шрифты использованы или бесплатные? Что происходит с фоном, если разрешение экрана шире (или уже), чем в случае, изображенном на макете?

Любой вопрос о том, что происходит с дизайном в случае, отличном от исходной картинки, приводит таких дизайнеров в ступор!

Глядя на такой макет, очень тяжело понять, как он будет себя вести в жизни. Прилепленный к правому краю мобильник намекает на резиновую вёрстку, а всё остальное — на то, что ширина блока контента строго фиксирована. О логической компоновке я просто молчу.

Говоря проще, ситуация такова, что статическая картинка выглядит в целом неплохо. Но в динамике она попросту не работает. Дизайн просто рассыпается, как карточный домик. Всё потому, что дизайнеры-полиграфисты часто просто не умеют мыслить динамически. Они умеют хорошо изобразить статическую картинку. Но не могут представить, что с их уютным изображением формата 1280х1024 могут происходить какие-то перемены. Их не смущает, что размер шапки на их сайте может достигать 400-500 пикселей в высоту. На статическом макете с этим проблемы нет, ведь контент под шапкой видно сразу. А то, что в браузере у очень многих пользователей кроме шапки видно ничего не будет, и придется скролить вниз — их это не печалит. Главное, что в портфолио выглядит красиво.

И что самое печальное, я не раз сталкивался с ситуацией, когда такие дизайнеры, когда им указываешь на какие-то недоработки, пожав плечами, говорят что-то в духе «по-моему, эти вопросы уже должен решать верстальщик».

То есть, получается, что они создают спорные решения, заказчик их утверждает, но непосредственно на сайте они либо вообще не будут работать, либо будут, но плохо. Они запросто фигачат в макет признаки одновременно резиновой вёрстки и вёрстки фиксированной ширины, а потом перекладывают на плечи верстальщика все заботы о том, чтоб макет смотрелся красиво.

А если верстальщик не сможет добиться хорошего результата на изначально некорректно подготовленном макете, не покажет, как изменяются элементы по наведению (потому что дизайнер этого просто не показал), всегда можно будет переложить на него ответственность. У дизайнера-то на макетах статических всё отлично! Это в браузере возникают проблемы. У дизайнера на макетах вон и шрифты красиво сглаженные, нестандартные. А в браузере они вон какие корявые, и совсем не такие красивые, как дизайнер подобрал, а какие-нибудь другие, отдаленно похожие, либо вообще обыкновенные Arial или Times New Roman.

А почему так получилось? Да потому что для верстальщика изначально подготовили «неправдивый» макет. Потому что на практике, оказывается, что в веб-дизайне всё-таки есть определенное количество всяких нюансов, правил, ограничений, которые и связаны во многом с вёрсткой макетов. А дизайнер о них попросту не знал. Потому что никогда в жизни с ними не сталкивался и даже не имеет толком представления о том, что такое резиновый дизайн, а что такое фиксированный. Он не понимает, что видимая область браузера при посещении сайта у многих пользователей немногим больше 500 пикселей по высоте. Он не знает, что сглаживание шрифтов в большинстве браузеров не работает. И понятия не имеет, как подключаются нестандартные шрифты. Он изображает неоднородный фон с шириной до 1280 пикселей, который красиво и органично выглядит на его макете, но задайте ему вопрос: а при прокручивании фон прокручивается? Или будет зафиксирован? И такой дизайнер на вас непонимающе уставится и затем наугад ответит, не понимая сути вопроса.

Кроме того, есть банальные и простые правила использования определенных символов в веб-дизайне. Например, я нередко встречаю дизайны, в которых прерывистое подчеркивание использовано в эстетических, так сказать, целях. В то время как на самом деле использование пунктирного подчеркивания подразумевает выполнение действия или переход на другую страницу без перезагрузки страницы. Сплошное подчёркивание — это переход на другую страницу с перезагрузкой. И таких мелких нюансов довольно много.

Не нужно быть веб-дизайнером, чтобы понять, что мы ожидаем от элемента «показать все работы» — при щелчке контент снизу должен раскрываться, показывая «все работы» без перезагрузки страницы. На деле происходит переход на другую страницу.

Но ограничения, которые накладывают на дизайнера специфические особенности веб-дизайна — это только одна сторона медали.

Другая же сторона медали — это те возможности, которые даёт нам динамика в веб-дизайне. Это возможность расширять дизайн с помощью всплывающих элементов, переходов, анимаций. Это возможность какие-то элементы жестко закрепить, а какие-то делать динамически изменяющимися при определенных условиях (например, можно сделать какой-то элемент полупрозрачным при прокручивании страницы, или, наоборот, возникала какая-нибудь дополнительная панель, в которой не было потребности ранее ). Для того чтобы такие штуки на сайте реализовать, нужно одно — знать, что они существуют. А для этого — нужно интересоваться, быть в теме.

Выводы

Навык вёрстки у дизайнера позволяет, с одной стороны, избежать тупых решений, которые противоречат логике веб-дизайна и которые невозможно воплотить в жизнь, а с другой — использовать на полную катушку возможности современных технологий вёрстки, сделать сайт более элегантным, интересным, динамичным.

Ну а ещё, навык вёрстки развивает динамическое мышление, без которого в веб-дизайне делать решительно нечего.