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

Статья может представлять определённый интерес для заказчиков веб-услуг (владельцев сайтов / бизнесменов, желающих открыть собственный стартап). Материал также может послужить полем для обсуждения всеми сторонами вопроса — веб-дизайнерами, проектными менеджерами, верстальщиками, владельцами сайтов. В статье рассказывается о процессе проектирования и разработки веб-дизайна (с логическими схемами) стартапа, о наблюдении за реализацией и последующей «жизнью» проекта и об итоговом его закрытии. Не наделённая достаточной информацией по объективным причинам закрытия данного стартапа, я постараюсь избежать домыслов, пересудов и необоснованных выводов. Цель моего рассказа — отразить взгляд со стороны веб-дизайнера на реализацию его дизайна на сайте. Статья содержит практические советы по контролю качества вёрстки.

Предыстория

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

На самом деле, речь пойдёт об одном сайте знакомств, для которого я разрабатывала веб-дизайн. Стартапом я его называю по той причине, что он нёс в своей основе уникальную идею, меняющую представления о возможностях знакомств. Идея эта была проста и оригинальна — выкупать размещение фото-ленты (т.н. «мордо-ленты») на множестве других сторонних сайтов и тем самым достигать массовой доступности (популярности) в интернете. Оговорюсь, что изначально я испытывала некое отторжение от самого названия сайта (МордаЛента.ру). Однако заказчик считал его вполне актуальным в свете того, что «в народе» для подобных лент используют именно это название. Безусловно, перечить мнению заказчика я не могла, и стала работать «с тем, что есть».

Второй момент, по которому стоит вставить замечание, — это сам факт заказа на отдельный веб-дизайн. Я привыкла создавать сайты с нуля, отвечая за каждый штрих в проекте. Разделение труда в этой сфере чревато противоречиями, избежать которых можно при следующих условиях:

• наличие грамотного проектного менеджера, понимающего концепцию сайта и контролирующего качество на каждой стадии реализации;
• плотное сотрудничество участников разработки (по крайней мере, веб-дизайнера, верстальщика, программиста; здесь молчу о менеджерах, интернет-маркетологах, агентуре специалистах по лояльности и пр.).

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

Проектирование логической структуры главной страницы

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

По моему вИдению, главная страница сайта знакомств должна непосредственно вовлекать посетителей к желанию знакомиться и вступать в контакты с уже зарегистрированными пользователями сайта. Этой цели и служили Карточки пользователей с интересными предложениями для знакомств (слайдшоу в правом верхнем блоке, под «меню»). Кроме того, они являлись своеобразными примерами для публикации собственных предложений. Дополнительным мотивированием должны были служить описание уникальности и преимуществ сервиса. Ниже следовала сама «МордаЛента» — собственно, демонстрация конкретной услуги: лента, в которую должны были подавать своё объявление участники сайта. Далее — поле регистрации, где тут же можно было зарегистрироваться, пополнить счёт и подать объявление (всего в три шага). Блок с отзывами служил всё той же задаче дополнительного мотивирования к пользованию услугой. Статистика давала общее представление об участниках (по сути, такая статистика — классика для сайтов знакомств). Информационная область («Что такое МордаЛента») могла быть востребована сео-оптимизаторами в будущем. Нужно сказать, текстов мне никто не предоставлял, и они писались мной «от и до». Веб-райтинг, по моему мнению, зачастую неотделим от концепции веб-дизайна, но это уже тема отдельной статьи. Вкупе с зоной информации, также обсуждалась возможность использования инфографики, которая войдёт в состав веб-дизайна в дальнейшем.

Позже, логическая схема была несколько переопределена. По желанию заказчика, «Статистика» попала в правый верхний блок, выместив «Карточки пользователей». На место Статистики встали «7 причин, почему выбирают МордаЛента».

Дизайн-макет

Итоговый дизайн-макет:

Логическая структура сохранялась общей для каждой тематики. В дизайн-макетах, подготовленных для каждого раздела, менялись только цветовые схемы. Так, для макета «Развлекательной ленты» это был зёленый (+фиолетовый), для «Эро-ленты» — красный (+фиолетовый), для «Лесби-ленты» — розовый (+фиолетовый), для «Гей-ленты» — голубой (+фиолетовый), для БДСМ-ленты — коричневый (+фиолетовый).

Реализация дизайн-макета на сайте. «Что выросло, то выросло»

Через некоторые время после сдачи дизайна, он появился на сайте, и мне стало не по себе. Будучи практикующим верстальщиком и веб-программистом, я знала, что дизайн в некоторых местах сложен для исполнения на веб-странице, однако вполне реализуем. Что же я увидела? Ряд градиентов (переливы цветов), а также тонкая обработка декоративных элементов были грубо нарушены. На странице появились новые кнопки, совершенно не вписывающиеся в заданную цветовую палитру веб-дизайна (розовый отлично гармонировал с одной из тематик, но не к каждой из них). В блоке Статистики не было никаких ссылок, а только текст (они не предусматривались системой?). А уж инфографика, вместо того, чтобы отражать реальные данные для каждой тематической ленты, была ничем иным, как статической картинкой, теряющей весь смысл и роль. Не было и намёка на кликабельность целей знакомств, что могло бы стать особенной «фишкой» этого сайта.

Как могла, я рассказала свои соображения заказчику по поводу дизайна. Также особенно проговорила принцип и роль инфографики, которая должна быть динамичной, кликабельной и для каждой ленты — своя. А не статичной, дублируемой на каждой из тематик, картинкой. Он вроде бы понял, и даже эмоционально откликнулся в стиле «эврика!». Не знаю, что произошло в дальнейшем, и какие преграды не позволили произвести ожидаемых изменений, но за долгое время наблюдений, они так и не последовали. На главной странице менялись только отзывы. Трудно сказать, по какой причине модераторами пропускались неграмотные и примитивные (или они писались самими разработчиками намеренно «народно»?), но смотрелись они весьма неприглядно.

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

От примера к практическим советам

Следующие ниже небольшие советы помогут контролировать качество вёрстки:

• Идеально, если веб-дизайнер и верстальщик — одно лицо (ещё лучше, когда он же — ещё и программист, но это, скорее, редкость, чем правило)
• Сверяйте дизайн-макет со свёрстанным веб-дизайном. Он должен быть идентичен, за исключением типографики (всё-таки в макете используется растр)
• Не удовлетворяйтесь ответом верстальщика, мол, что-то сделать «нельзя». Не спрашивайте «почему?» (причины найдутся всегда). Лучше спросите: «Что нужно, чтобы это стало возможным?». Помните: сверстать можно практически любой макет. Так, если в дизайн-макете используется сложное фоновое изображение, для того, чтобы оно удлинялось соответственно длине экрана, в большинстве случаев, достаточно сделать повторяющиеся «вставки» (фрагменты фона). Если в фоновом изображении невозможно выделить полоски-области, которые могли бы повторяться, однако у вас есть это изображение в хорошем разрешении, то «подгонять» его по размеру экранов можно js-скриптами. Если дизайнером запланирован фон под каждый знак в каком-то числе, а верстальщик просто кладёт под это число приближённый цвет фона, это неправильно. В этом случае, верстальщик должен сказать: «чтобы достичь точного соответствия с макетом, нужно разбить общее число на отдельные знаки, вложенные в теги». Эту задачу без труда выполнит программист. Если в веб-дизайне присутствует инфографика, и по замыслу она должна отображать процентное соотношение, попросите программиста подготовить модуль для фиксации этих значений, а верстальщик их сверстает надлежащим образом. Организуйте коллективную работу верстальщика и программиста. Дайте верстальщику возможность обращаться к программисту при необходимости.
• Пусть вы уже рассчитались с веб-дизайнером за дизайн-макет, не стесняйтесь поинтересоваться, как он видит вёрстку тех или иных элементов веб-дизайна. Даже если веб-дизайнер не занимается вёрсткой, он должен иметь представление о возможных решениях реализации своего макета. В т.ч., это касается того момента, когда заказывался дизайн для сайта с «растяжкой» («резиновый» дизайн).
• Если вы планируете введение новых кнопок или целых областей на страницах сайта, озаботьтесь, чтобы их оформление подходило к общему стилю и цветовой гамме веб-дизайна.

Автор: codda

Источник