“Веб-дизайнеры, начните верстать!”

или “Веб-дизайнеры, не начинайте верстать”

Шта?

К написанию этой статьи побудило недоумение, которое я частенько испытываю, наталкиваясь на рассуждения — на русскоязычных фронтенд ресурсах — о том, что веб-дизайнерам, дескать, пора учиться верстать. А, может, наоборот, не надо им учиться верстать: креативность убьют. Пора-не пора… Мы вообще-то умеем! Или не умеем?

И здесь я начинаю понимать, что, вероятно, между русским пониманием профессии веб-дизайнер и, скажем так, западным, существует фундаментальное различие:

Мой любимый номер классного журнала Web Designer просто кричит: “JAVASCRIPT”!!!

Готовых файлов проекта в Photoshop? А что дальше?

Я работаю веб-дизайнером в Праге уже несколько лет. В описание вакансий всегда к дополнению к Adobe Creative Suite есть “html/css/javascript” — практически всегда. В России я не работала, поэтому совершенно не в курсе как это там делается. И, слушая бесконечные возмущения русскоязычных фронтендяков, складывается впечатление, что дизайнеры в России сдают макеты в фотошопе (люстре, скетче) и умывают руки.

И ловлю себя на том, что представляясь в русскоязычном обществе, называюсь “веб-дизайнер”, и тут же добавляю — “и разработчик”.

Сейчас я работаю веб-дизайнером в крупном СМИ. В мои — и еще 8 моих коллег — обязанности входит:

• мелкие и более крупные визуальные правки на всех наших (30+) сайтах, то есть непосредственно работа с кодом (в нашем случае адская смесь visual studio и pattern lab);
• разработка дизайна и верстка html баннеров и т.п. мелочей;
• разработка дизайна и верстка почтовых рассылок;
• создание микросайтов для “специальных проектов” с нуля (дизайн, верстка, необходимый несложный js);
• встречи с редакторами на предмет правильной работы с брендингом;
• ну и конечно, usual stuff — вся графика, айдентика и т.д. и т.п., но этим занимается т.н. Designer on Duty — дежурства, сменяемся каждый день.

Лично я сейчас настроилась на сениора и, с ужасом просматривая вакансии, вижу, что не сильно любимый мной js надо прокачивать. С моим сегодняшним уровнем о позиции senior web designer можно только мечтать.

Получается, в России дела обстоят по-другому? Я подписана на миллион пабликов вконтакте, посвященных веб-дизайну и не вижу никакой “версточной” информации, одни красивые картинки. Глянула вакансии на русских сайтах — в основном если html и упоминается, то требуется “понимание” верстки для общения с фронтендерами.

Все это, конечно, со стороны кажется странным. Интересно, с чем связано такое четкое разграничение обязанностей “дизайн — верстка” в России?

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

• Начать можно с курсов на htmlacademy.ru, месяца за 300 рублей вполне хватит, чтобы пройти все курсы и изучить основы основ.
• У тех же htmlacademy есть чудесный интенсив “Основы HTML и CSS”. Это их самый старый интенсив, он интересный, проработанный, доведенный до ума в полной мере — лучшее вложение ~15. 000 рублей в моей жизни. Интенсив идет примерно месяц, за который вас научат основам верстки, которых вам для начала хватит с головой. Вообще, HTML Academy я сильно и бескорыстно люблю. Благодаря им я, например, познакомилась с БЭМом и уже на днях буду сама читать лекцию про БЭМ у себя на работе.
• Обожаемый мной codeschool.com. Дороговато: месяц подписки стоит 19 долларов при оплате за год. И English-only. Но с какой любовью ребята подходят к делу — одни анимационные заставки к курсам чего стоят! Некоторые вещи они объясняют гораздо доступнее, чем те же чуваки из htmlacademy: буквально разжевывают. И сам разброс курсов куда больше, чем на подобных русскоязычных ресурсах.

• Средства разработчика в любом браузере :) Вообще, покопаться в готовом коде, поменять там что-то, покрутить, посмотреть “а что будет если…” — это, на мой взгляд, лучший учитель. Прямо сейчас кликните правой кнопкой мыши на странице, выберете “Inspect” и погрузитесь в дивный новый мир.

• К вопросу о покопаться в чужом коде — вот офигенный проект codepen.io, где люди делятся своими микро-проектиками. Можно прямо открыть чью-нибудь красоту и подробно изучить как она сделана. Или просто очень удобно быстро набросать что-то и сразу увидеть как это будет выглядеть.

• Слушайте подкасты, смотрите видяши на youtube. На мой взгляд, лучший из русскоязычных подкастов — еженедельный “веб-стандарты”. Если даже будет ничего непонятно, слух все равно будет цепляться за знакомые слова и запоминать что-то. А потом, когда заматереете, это отличный способ держаться на пике современной веб-разработки.
• Веб-анимация! Это супер-интересная отрасль веб разработки для фанатов векторной графики, например. Нарисовал картинку в люстре, сохранил как svg, вставил на сайт и делай красоту. Курс по веб-анимации от htmlacademy.
• Макеты в фотошопе — это, конечно, все очень хорошо и никто их не отменял, однако это все же скетчи. Надо как можно скорее переводить это в живой код и смотреть как это выглядит по-настоящему. Нарисуйте очень простую, но очень красивую минималистичную страничку, сверстайте её, выложите куда-нибудь, посмотрите на нее с десктопа, с айфона, выложите в свое портфолио и подпишите “дизайн и разработка : Такой-то” — это ни с чем не сравнимое ощущение.

Вообще, для дизайнеров, которые, безусловно, приспособлены мыслить скорее графически, чем тегами и классами, наступают прекрасные времена, когда код становится писать все легче и легче — я говорю, например, о флексбокс, который вытесняет флоаты семимильными шагами. То есть, можно чуть больше думать о красоте, и чуть меньше о кошмарах вроде clear:both (лучше не знать).

В заключении я бы хотела попросить людей из России, в трудовых контрактах которых написано “веб-дизайнер” поделиться своими практиками. Правда ли, что от вас не требуют верстку? Каковы ваши повседневные рабочие обязанности? Верстающие же дизайнеры приглашаются написать о том, как они начинали, расскажите о классных русскоязычных ресурсах, подкастах и т.д.

И главное: почему же все-таки возникла такая разница к подходу к веб дизайну?..

UPD Интересное продолжение темы на Веб-стандартах.