Альтернативное сайтостроительство – плюсы и минусы

Недавно в англоязычном сообществе снова прокатилась волна обсуждений, посвященная довольно интересному вопросу и своего рода современному камню преткновения: «Должен ли дизайнер уметь сверстать собственный дизайн?». А все началось с твита некоего Элиота Джея Стокса.

…Честно говоря, я шокирован, что в 2010 году я все еще встречаю «веб дизайнеров», которые не могут закодить собственные дизайны. Нет оправдания.”

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

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

Ни для кого не секрет, что многие объявления о работе сегодня пестрят предложениями для дизайнеров, владеющими HTML, CSS, JavaScript, asp.net и т.п. Что это? Желание работодателя сэкономить или отображение современных тенденций рынка веб технологий?

Веб дизайн должен начинаться там, где он будет жить, а именно — в браузере.Около 90% дизайнеров разрабатывают макет домашней страницы в графическом редакторе (или если называть вещи своими именами — в Photoshop). Клиент предлагает свои правки и после окончательного утверждения страницы она переходит в руки кодера. Однако есть приверженцы принципиально иной схемы «сайтостроительства». Они считают, что веб дизайн должен начинаться там, где он будет жить, а именно — в браузере.

Каким же образом это реализуется и есть ли в этом смысл?

Шаг 1. Начинается все со структурирования контента. Иными словами – базовой разметки, определяющей что и в какой последовательности должно находиться на странице. На этой стадии это чистый HTML. Плюс очень часто клиент сам предлагает приемлемое для него расположение объектов на странице и этот шаг становится сущей формальностью. А к собственно дизайну и вовсе не имеет никакого отношения, а относится непосредственно к верстке. Например http://owltastic.com/clients/24ways/step1/index.html

Шаг 2. Теперь очерченному контенту придается более человеческий вид. Здесь в дело вступает CSS. Всего несколько стилей, и страница имеет уже совсем другой вид. Но все еще ничего о дизайне.

Шаг 3. Наконец переходим к дизайну — добавляем странице презентабельности и уникальности: выбираем цвета и шрифты в соответствии со спецификой проекта, хорошим вкусом и требованиями клиента. С новым CSS3 этот процесс, конечно, заметно упростился: во-первых, выбор шрифтов больше не ограничен семейством SansSerif и возможности типографики практически не ограничены. Во-вторых, цветовые возможности значительно расширены благодаря палитре RGBa. В-третьих, множественные бэкграунды, градиенты и тому подобные вещи. Но об этом всем позже.

Шаг 4. На этом этапе сайт уже начал принимать свои конечные очертания и теперь надо его немного приукрасить и добавить изюминку. Если вы хорошо знакомы с инструментарием и уже набили руку с CSS3 и его text-shadow, box-shadow и тому подобными свойствами, то, вероятно, не будете чувствовать себя ограниченным в средствах, как это было раньше. Вы с легкостью сможете добавить объем кнопкам, градиент, выделить необходимые элементы, вставить бэкграунд. Здесь лучше всего будет использовать файлы в формате .png с альфа каналом, чтобы в случае замены цвета фона не пришлось менять все изображения.

Итак, у вас получился хорошо структурированный макет домашней страницы с элементами дизайна, который вы можете отослать заказчику. Естественно, редкий клиент сразу согласится, что вы отлично поработали. Как правило, у него возникнет желание что-то исправить. У клиента всегда возникает желание что-либо исправить Если эти изменения будут касаться исключительно внешнего вида, то сделать необходимые изменения не составит для вас особого труда. Рассмотрим лишь некоторые из них. Например шрифт. Нет ничего проще, чем изменить font-face . То же с цветом фона. Если говорить о более сложных изменениях, например скругленных краях боксов, то раньше это могло принести некоторые неудобства. Но CSS3 border-radius поможет вам справится и с этим.

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

Во-вторых, извечное «но» Internet Explorer. Фокус не пройдет если ваш клиент до сих пор пользуется IE (а таких по статистике от 25 до 54,3 %!). Более того, если макет одобрят, большинство использованных в нашем примере функций придется разрабатывать для IE отдельно, а это значит все же рисовать проект в Photoshop, а это уже никак не похоже на экономию времени.

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

В-четвертых, представьте, что клиенту не понравилось предложенное вами расположение и он хочет поиграть, перемещая блоки по сайту, а то и вовсе меняя их суть. Конечно, вы можете это сделать. Но Photoshop устроен для этого намного лучше.

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

И в заключение.

Мы не стали подробно писать о том, должен дизайнер уметь кодить или не должен, ведь об этом уже переписано и переспорено немало и без нас. И вопрос до сих пор остается открытым. Вернее таким, на который нельзя дать однозначный ответ. Ведь, в конечном итоге, все зависит от массы сопутствующих обстоятельств. Конечно, знать что такое HTML и «с чем его едят» не помешает. Да и верстальщику будет намного проще реализовать ваш проект, если вы учли современные возможности верстки. Но насколько глубоко должно быть это знание и как его применять, зависит уже от вас.

Удачного вам выбора!