Mike Saburenkov

Верстальщики: от программистов к дизайнерам

Изначально HTML создавался как markdown или разметка wiki. Как сейчас нет markdown-верстальщика, word-писателя, так и изначально не было HTML—верстальщика. Это было еще один формат разметки текста.

Почти сразу HTML стали использовать не для создания документов с гиперссылками, а чего-угодно с гиперссылками. Так появились веб-сайты: интерактивные документы, с одной стороны пытающие предоставить интерфейс по аналогии с GUI всего остального компьютера, с другой стороны предоставить вёрстку в полиграфическом смысле. Технология этого не позволяла. С интерактивностью еще куда ни шло, появились веб-формы, а вот с вёрсткой (раскладка, сетки, блоки) — с этим были большие проблемы. Но никто ничего знать не хотел и поэтому в ход шли таблицы, распорки в виде прозрачных изображений и т.д. Собственно, из-за этого вся эта сложность, инструментария нет, есть несколько программ (браузеров), которые воспринимают инструкции по—разному, а плохие дизайнеры показывают нарисованные макеты в растровом графическом формате и настаивают на своём.

Поэтому выделились люди, которые могли как-то заставить браузер отрисовывать то, что нарисовал дизайнер. Cо временем, технологии и инструменты прогрессировали и эволюционировали, и стало возможным верстать предназначенными для этого средствами, а не костылями. Так ушла вёрстка таблицами, но до сих пор нет инструмента, который бы позволил полностью правильно сделать то, что вы рисуете. Но, конечно, ситуация гораздо лучше, чем несколько лет назад. Сейчас, если брать современный браузер, то, в целом, в HTML есть все нужные средства, и он опять превращается в более-менее простой инструмент вёрстки. В рамках прототипов/макетов на нем можно писать человеку не сильно вовлеченному во все эти технологии.

Также сейчас с появлением AJAX-подгрузки частей страницы, возможностей анимации, адаптивного подстраивания под разные размеры окна, всё это сложнее и сложнее умещать в плоский PSD-макет. Теперь вместе с макетом идёт документация или раскадровка разных состояний. Но когда перед разработчиком плоский макет, то не видно всей логики, которую закладывал проектировщик/дизайнер: это просто два разных цвета, или этот цвет — функция от того цвета (затемнение на 20%), это 10px или это расстояние зависит от состояния вот того блока, или это какой-нибудь «стандартный отступ при таких-то условиях» и тому подобное.

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

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

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

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

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