CSS — это дизайн!
После моей статьи, посвящённой тому, что веб-дизайнер должен уметь верстать, я столкнулась с некоторым количеством хейта от испытавших легкий баттхёрт неверстающих дизайнеров. И немного от фронтенд-разработчиков, которые не хотели бы, чтобы “дизайнеры лезли в код”. Хотя, казалось бы: ну что страшного в CSS? И в дизайнерах, умеющих в CSS?
В этой статье я постараюсь разобраться, почему CSS — не только не страшно, но и прекрасно, а, главное, почему CSS должен писать дизайнер, а не девелопер.
Лирическое отступление.
Несколько лет назад моя подруга, которая училась на скульптора, попросила меня пару недель поработать у них в группе натурщицей для экзаменационного проекта, что дало мне шанс понаблюдать за работой студентов-скульпторов изнутри. Первые пару дней они рисовали кучу набросков, а потом уже взяли глину и начали ваять непосредственно скульптуру.
И недавно я задумалась: а ведь работа веб-дизайнера очень похожа на работу скульптора: мы тоже сначала делаем наброски — рисуем макеты. Но ведь наш конечный продукт — это непосредственно сайт, скульптура. Наша глина — это код. Готовый проект должен быть трёхмерным, осязаемым, живым! Наброски необходимы на начальном этапе, но отдать их потом в руки другого человека, который видит, чувствует, дышит по-другому? Ну уж нет.
CSS is not rocket science!
Как бы ни пытались переубедить общественность некоторые заносчивые веб-разработчики, CSS — это ни разу не rocket science. Ведь это не программирование даже, а всего лишь свод правил, каждое из которых, к тому же, подробнейшим образом описано в интернете. Не надо даже ничего помнить наизусть! Ответ на любой вопрос мгновенно гуглится, ошибки моментально дебажатся в браузере, глобально ошибиться практически невозможно: ты всегда видишь сразу, если что-то не работает. А если не видишь — тестировщики увидят и не дадут выпустить это в жизнь.
Конечно, я не пытаюсь сказать, “херня ваш цсс, любой дурак разберется за 5 минут”. Нет! Конечно, есть куча нюансов и подводных камней, придется много учиться. Но мой посыл состоит в том, что, грубо говоря, не надо заканчивать условный мехмат, чтобы научиться верстке. Я сама, считающая себя самым гуманитарным гуманитарием на свете, овладела азами верстки примерно за год.
А анимацию кто делать будет?
Меня давно интересует (я, правда, никогда не видела такого вживую): как и кто продумывает анимацию на сайте в компаниях, где дизайнер сделал макет в фотошопе и передал его верстальщику? Рассказывает на словах? Или, не дай бог, честно делает ненужный трупик в каком-нибудь After Effects, а верстальщик потом реализует это кодом? Все это мне кажется более, чем странным. Гораздо проще дизайнеру, который не только знает CSS, но и обладает вкусом и наметанным глазом, сразу взять и сделать все анимации для сайта самому. Более того, дизайнеру это еще и проще сделать.
Живой пример: я как дизайнер умею рисовать в иллюстраторе и сама делаю векторные иконки и картинки. Уже на стадии создания, я делаю их таким образом, чтобы потом мне же было легко анимировать их: грамотно разбиваю по слоям, максимально упрощаю то, что не понадобится, чищу готовый svg-код.
Еще более живой пример: прошлым летом я заработала за несколько часов работы целую кучу денег, взяв халтуру на стороне: мне дали готовые svg-иконки, с описанием того, что примерно должна делать та, или иная иконка, а я должна была сделать им анимацию на наведение мышью. Благодаря моим познаниям в иллюстраторе, мне было супер-легко это сделать: кое-какие иконки я поправила, кое-что перерисовала, чтобы легче и красивее было санимировать, в итоге получилось быстро и просто.
Некоторые анимации придумываются и реализуются вообще на лету, особенно когда делаешь что-то для себя, из любви к искусству и т.д. Например, так спонтанно и без всяких макетов родился этот дурацкий постер, который, кстати почему-то попал на главную страницу codepen :)
Mind the details!
Это уже притча во языцех: дизайнер нарисовал макет, думая о каждой малюсенькой детали, о каждом пикселе, о междубуквенных интервалах, и вот здесь должно быть ровно 7 пикселей, а здесь 23! А потом верстальщик совершенно честно в упор не видит эти мелочи и делает там 10, а тут 25. Не попадает в градиент. Некрасиво анимирует всплывающее меню. Недопиливает тень. А потом, например, все на это забивают, потому что “ну и так хорошо же выглядит и работает”, а дизайнер потом смотрит на живой сайт и плачет горючими слезами: да это же даже никому не покажешь, уродствооооо, всё, всё не так! 😭😭😭
А тут ты сам нарисовал, сам сверстал и крути марджины-паддинги до победного конца. В итоге выйдет даже лучше, чем на макете (который к тому же не надо перерисовывать по сто раз)! Хотя и ответственности, конечно, тоже больше.
Но ведь невозможно все уметь делать одинаково хорошо!
Возможно. Самые крутые чуваки в индустрии, на которых я хочу равняться, как раз делают и то, и то. Чего далеко ходить, сам Chris Coyier, буквально боженька веб-разработки, автор сайта CSS Tricks и сопродюсер кодпена, называет себя “веб-дизайнер и разработчик”, постоянно придумывает и реализует крутые и красивые творческие вещи, не говоря уже о миллионе статей, лекций и книг по веб-разработке. Низкий поклон тебе, отец, за кодпен!
Моя большая любовь — Aga Naplocha, польская веб-разработчица и дизайнер. Придумывает и делает при помощи CSS и SVG невероятно крутые и очень розовые штуки и преподает веб-разработку как онлайн, так и офлайн.
Сооснователь дриббла (ну куда уж дизайновее) Dan Cederholm — дизайнер и разработчик, этот человек является как автором супер-узнаваемых дизайнов, так и книг типа “Sass For Web Designers”.
Второй боженька от веб-разработки + талантливый график — Ethan Marcotte, является, собственно, автором такого понятия как “responsive design”.
Волшебный дизайнер и девелопер Wes Bos делает прекрасный дизайн и не менее прекрасные статьи и туториалы по фронтенду.
Да тысячи их, разной степени талантливости. Мой собственный коллега Ян, глава команды из трех дизайнеров, которая делает с нуля небольшие сайты для каких-то особых журналистских историй— самый мой любимый и близкий пример. Делают они что-то типа такого, или такого, или такого. Еще маньяк Ян в свободное от работы время написал джаваскриптовый тул, который помогает нашим многочисленным журналистам самостоятельно делать симпатичные фото- и видео-истории, когда формат обычной статьи в нашей cms им маловат.
Макеты мертвые
Недавно прочитала в блоге одного известного подкастера пост о том, как они, дескать, несколько месяцев разрабатывали макет нового сайта — и прилагается пнгшка главной страницы. У меня аж глаз задергался. Несколько месяцев потрачено просто на макет, где непонятно, ни как это все будет выглядеть в разных размерах окна, ни как что будет анимировано, ни какой будет, черт возьми, цвет у посещенной ссылки, а какой у активной. Ну, вы понимаете?..
Да, я знаю, что есть дизайнеры, которые реально прорисовывают каждое состояние каждой кнопки, ссылки, и т.д., и это даже считается хорошим тоном. Но зачем эти сложности, когда все это можно написать сразу кодом? А уж придумать палитру для сайта, используя, например, переменные для цветов — это вообще песня. Захотел сделать в общем всю цветовую гамму потеплее/похолоднее/поярче — пару кликов и все. Никаких перерисовываний миллиона макетов. Потом скриншот — и оп, отправляем лиду. Согласовал? Да все уже готово так-то, в продакшн!
Лично у меня, первый макет, который я набрасываю, отличается от готового продукта радикально. Новые идеи постоянно рождаются на лету: и цвета, и анимация, и даже сетку вдруг хочешь радикально поменять, потому что видишь, что вживую-то выглядит не очень. Все это я, и мои коллеги делаем прямо в браузере. А скетч — это просто первый черновой набросок.
Опять же, неверстающим дизайнерам часто невдомек, что один и тот же код рендерится в разных браузерах ну вообще по-разному. Когда ты сам дизайнишь, верстаешь и тестишь, можно на ходу решать проблемы на всех уровнях.
Как работаем мы
В настоящее время я третий год работаю веб-дизайнером в большом американском СМИ. Мы разрабатываем и поддерживаем собственную CMS, на которой работают сайты нескольких СМИ (нашего + сторонние клиенты ) на 60 языках в 200 странах мира. Расскажу примерно как выглядит моя работа.
Клиент просит сделать какое-то изменение на сайте, например, новый виджет. После брейнсторма с проект-менеджером, бэкенд- и фронтенд-разработчиками, я делаю набросок виджета и начинаю вписывать его в прототип (мы работаем в никому неизвестном паттернлабе). Если нужен какой-то сложный javascript, со мной в паре работает фронтенд-девелопер, но весь HTML и CSS пишу я. Потом отдаем свою ветку бэкендерам. Потом тесты, отлов багов, если что-то есть на моей стороне, я это чиню и в продакшн. Быстро и просто 👍
Мне страшно представить, как усложнилась бы наша работа, если бы мы сами не верстали, а только делали картинки. Я вообще перестала хоть как-то толерантно относиться к макетам в виде картинок. Я всей душой желаю, чтобы веб-дизайнеры верстали по умолчанию. Чтобы к нам перестали относиться как к детям с кисточками, которые “рисуют картиночки” — увы, в IT пренебрежительное отношение к дизайнерам до сих пор имеет место быть. Сейчас CSS упрощается с невероятной скоростью, делать классные красивые вещи все проще и проще.
Но главное. CSS — это каскадные таблицы стилей, это язык описания внешнего вида документа. CSS — это и есть дизайн.
P.S. Еще мнения на тему: подкасты Веб-Стандарты и Суровый Веб.
