Библиотека Интернет Индустрии I2R.ru

Нужен ли Web-дизайнер?

О разработке дизайна писать достаточно сложно, потому что это не только технология, - это еще и искусство. Еще сложнее будет вам построить свои отношения с представителем мира искусства - с Web-дизайнером.

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

У посетителя, заходящего на ваш сайт, в первые же секунды складывается впечатление о том, куда он попал, - на серьезный корпоративный сайт или на домашнюю страничку, случайно найденную по ключевому слову. Эти две категории Интернет-ресурсов отличаются именно дизайном. В первом случае он выполнен профессионально, во втором - нет. И пользователь, уже хорошо знакомый с Интернетом, уходит с непрофессионально оформленной странички.

Чем же отличается профессиональный дизайн сайта от непрофессионального? В том-то и дело, что я не возьмусь дать строгий ответ. Мы просматриваем профессионально оформленные страницы крупных корпораций и какие-то их особенности запоминаем. Случайно попали на домашнюю страничку школьницы, мечтающей стать фотомоделью, - и опять в памяти отложились черты дизайна, характерные для юного создания: И, не отдавая себе в этом отчета, мы все же как-то их различаем. Это тот случай, когда мы не понимаем - мы чувствуем. Значит, мы соприкоснулись с областью искусства. А тогда нам нужен человек, чувствующий лучше нас, умеющий "поймать" эту неуловимую грань профессионализма и любительства. Иными словами, нам не обойтись без Web-дизайнера.

Но все же очень важно, чтобы и вы, руководитель Интернет-проекта, составили впечатление о том, каким должен быть профессиональный дизайн. К сожалению, в рамках статьи этот вопрос достойно осветить невозможно. Настоятельно рекомендую вам прочесть книгу Якоба Нильсена (Jakob Nielsen) "Веб-дизайн" (СПб.: "Символ-Плюс", 2000). Это достаточно серьезное чтение советую чередовать с остроумным и в меру развязным "ru/ководством" Артемия Лебедева (http://www.design.ru/kovodstvo/).

Дизайнер или дизайн-студия?

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

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

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

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

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

Как выбрать Web-дизайнера?

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

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

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

Образование. Рискуя быть обвиненным в снобизме, все же рекомендую поинтересоваться, где мэтр учился дизайну? Каково его базовое образование, какие курсы он окончил? Я не настолько сноб, чтобы рекомендовать вам принимать решение на основе этого показателя. Но все же примите его в расчет.

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

Готовность к сотрудничеству. Больное место для многих людей искусства. Немало дизайнеров оскорбляются, когда им предлагают внести изменения в предлагаемый вариант дизайна. Постарайтесь заказать дизайн специалисту, который будет готов стараться выполнять пожелания заказчика (пусть за дополнительную плату).

На что я бы не советовал обращать особое внимание.

Не обязательно "работать руками". Многие профессиональные Web-мастера считают, что странички должны верстаться "руками", то есть в текстовом редакторе, что требует от исполнителя весьма глубокого знания HTML, CSS и JavaScript. Это все справедливо, когда речь идет о рабочем варианте сайта. Но мы сейчас говорим о проекте дизайна. Так или иначе, вы и программисты под вашим руководством мало что оставите от первоначального HTML-кода, представленного дизайнером. Так что не вынуждайте его к ложному героизму и не требуйте от него досконального знания HTML. Существуют достаточно приличные HTML-редакторы, возможностей которых вполне хватает для проекта дизайна.

Дизайнер - не программист. Не следует требовать от него знания не только серверных скриптов, но даже JavaScript. Простые скрипты для дизайна широко доступны в Интернете, генерируются HTML-редакторами. Да и вы ведь не экзамен у него принимаете - подскажете ему, если надо. Был бы дизайнер хороший:

Постановка задачи дизайнеру

Задание на разработку дизайна - документ, который не может претендовать на полноту. И тем более не может определить качество дизайна. В задании на разработку дизайна собора Василия Блаженного была лишь одна фраза: "Чтоб благолепно было". Задания на разработку дизайнов сайтов не в пример многословнее, но ведь многое зависит и от дизайнера:

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

Требования к дизайну

1. Для функционирования сайта пользователь не должен загружать никакие "плагины" (plug-in), проигрыватели и т.п., за исключением тех ситуаций, когда это действительно необходимо. Иными словами, необходимость дополнить чем-то браузер посетителя сайта - вынужденная и крайне нежелательная мера. Это важно потому, что на предложение "Загрузить необходимые компоненты" многие скорее всего ответят отказом (лично я - не исключение). Помните очень важный момент - люди пришли в Интернет не наслаждаться дизайном, а получить нужную информацию. И они быстро пробегают глазами страницу - есть здесь необходимая информация? А им предлагают что-то выкачать, чтоб увидеть страничку:
2. Мельком взглянув на первую страницу корпоративного сайта, посетитель должен понять, чей это сайт и какую информацию он содержит. Это очень важная задача для дизайнера. Логотип, картинки и меню первой страницы должны максимально отразить принадлежность, тематику и содержание сайта.
3. Меню сайта должно быть на первой странице! Очень не советую вам делать стартовую страницу, не содержащую меню сайта, со ссылкой "Войти" (или, проверяя смекалку посетителя, помещать на ней картинку, служащую ссылкой для входа на ваш сайт).
4. Не используйте фонового звука у сайта. В этом вопросе хотел бы присоединиться к очень понравившейся мне статье Артемия Лебедева (http://www.design.ru/kovodstvo/paragraphs/51.html).
5. Навигация по сайту должна быть простой и понятной.
6. Если интересные пользователю графические материалы достаточно объемны (условно - свыше 50 Кбайт), стоит предусмотреть их предварительный просмотр (Preview) в виде маленьких изображений.
7. Дизайн не должен быть привязан к определенному разрешению экрана. Поэтому нелишне попросить дизайнера по возможности указывать размеры не в пикселах, а в процентах от размера экрана.
8. Место для баннеров - на этом хотелось бы остановиться подробнее. Баннер - это небольшая картинка (примерно 450х50 пикселов), представляющая собой ссылку на другой сайт. Обмен баннерами, как принято считать, повышает посещаемость вашего сайта.

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

а) Знаете ли вы, что такое баннеросжигающая машина"? Это страница, целиком состоящая из баннеров, обманом завлекающая к себе посетителей. Она обеспечит "показ" вашего баннера при скачивании посетителем страницы. Многие баннерообменные сети именно так обеспечивают показы баннеров.

б) Насколько ценен вашему Интернет-проекту случайный посетитель? Вы же не зазываете в свой офис всех прохожих.

в) Неужели ваши дела настолько плохи, что вы не можете на коммерческой основе разместить свои баннеры на популярных сайтах?

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

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

Требования к материалам

Окончательный вариант дизайна принимайте только в электронном виде. Это очевидное на первый взгляд положение далеко не всегда выполняется. А оно важно потому, что именно оно сыграет роль ТЗ для программистов. Не на словах же им объяснять, куда ведет каждая ссылка.

Имена файлов должны быть информативными. Хотя имена файлов типа "aaa.htm" встречаются сравнительно редко, но графические файлы почти всегда называются img1.gif, img2.gif, :, img100.gif. Облегчите задачу себе и программистам - потребуйте информативных названий файлов от дизайнера. Важный частный случай - название стартового файла. Потребуйте от дизайнера назвать стартовый файл index.htm или default.htm, чтобы программисты не гадали, откуда берет начало сайт.

Графические файлы должны располагаться в отдельном каталоге.

Потребуйте, чтобы вместе с изображениями в форматах GIF и JPEG дизайнер предоставил и соответствующие исходные файлы (*.psd и т.п.). Поверьте, программисты не раз поблагодарят вас за это требование.

Организация взаимодействия с дизайнером

Если гонорар дизайнера определяется исходя из объема работы (то есть он работает на заказ), он будет весьма чувствителен к требованиям переделать что-либо, особенно если эти требования повторяются достаточно часто. Со своей стороны, вы не можете принимать все "в первом чтении". Как видите, почва для конфликта весьма подходящая.

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

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

Определите поэтапную схему выполнения и сдачи заказа, а также выплат гонорара дизайнеру - во избежание драм, когда бракуется весь проект дизайнера, вами или: распорядителем кредита вашей компании. Представьте себе ситуацию (я ее, к сожалению, слишком хорошо изучил): вы и дизайнер готовите проект дизайна, подготовили, а "Большой Босс" рубит его. Ну не понравился: Вы же хотите избегнуть такой ситуации? Вот почему разработку дизайна целесообразно разбить на этапы, по завершении которых составляется акт приемки-передачи с участием и руководства вашей компании. Я предложил бы следующие этапы разработки дизайна сайта.

Разработка навигации по сайту. Представленный к сдаче на данном этапе проект должен содержать меню (его вид и местоположение на сайте), а также способ организации поиска по сайту (если это предусматривается идеологией сайта). Работать на этом этапе ни для меню, ни для поиска необязательно - пусть ссылаются на страницы-заглушки. Посетитель корпоративного сайта будет искать в меню следующие пункты (естественно, конкретные названия могут варьироваться): "О компании", "Услуги и цены", "Новости компании", "Новости сайта", "Как связаться".

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

Разработка дизайна стартовой страницы - страницы, которую первой увидит пользователь. Эта та самая одежка, по которой встретят планируемый сайт. Поэтому главное к ней требование: при беглом просмотре посетитель должен составить представление о принадлежности и содержании сайта.

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

"Прогонки" и "шлифовки" проекта в целом

Просматривайте и обсуждайте с дизайнером страницы корпораций, близкие к вашему проекту по тематике, особенно сайты ваших конкурентов.

Общайтесь с дизайнером по ICQ: "аська" удобна, быстра, а также обеспечит "протокол совещания".

Договоритесь о том, каков у вас лимит изменений (без оплаты) ваших же указаний (речь идет только о несданных/непринятых этапах). С одной стороны, вы и ваше начальство сможете правильно сформулировать ваши пожелания только после того, как увидите первый вариант. С другой стороны, и дизайнера можно понять - не может же он постоянно переделывать уже сделанное. Я бы предложил установить лимит в два бесплатных изменения ваших пожеланий. А далее дизайнер, с моей точки зрения, имеет право на дополнительную оплату исполнения ваших капризов.

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

Просматривайте дизайн в обоих наиболее популярных на сегодняшний день браузерах - Microsoft Internet Explorer и Netscape Navigator. Последний все же рано хоронить (особенно в мировом масштабе). И знать, как он отобразит ваш сайт, очень важно.

Типичные ошибки

Мы не станем обсуждать здесь детские ошибки новичков, коих не перечесть, а остановимся лишь на тех технических ошибках, которые совершают и опытные дизайнеры и которые вызваны тем, что дизайнеры все-таки не программисты. Мы не будем придираться к деталям, которые не сказываются на дизайне как таковом, - к неоптимальному HTML-коду и т.п. Отметим лишь значимые для дизайна аспекты.

"Тяжелые" странички

Это в основном беда дизайнеров, пришедших из полиграфии. "Взвешивайте" странички, которые предлагает вам дизайнер. Трудно провести четкую черту, но предлагаю такой условный лимит: страничка, если это не фотогалерея и не большая статья (книга), не должна "весить" больше 30 килобайт. Еще раз подчеркну, что больший размер оправдан только тогда, когда увеличение происходит за счет полезной посетителю информации. Кстати, в этом случае правилом хорошего тона будет предупредить его, на что он идет: например, что такая-то фотография имеет размер 300 Кбайт. Если он все-таки жмет "Показать" - страничка размером в 301 Кбайт оправданна.

Но если страничка тяжела, причем это не оправдано интересами посетителя, - сокращайте ее беспощадно. Трудно убедить некоторых дизайнеров, что для картинки на сайте 16 миллионов цветов вовсе не обязательно, что логотип компании "весом" в 110 "кило" - это, мягко скажем, неаккуратно, и т.п. Если не удается убедить - давите властью руководителя проекта.

Мне довелось принимать проект сайта, в котором стартовая страничка весила чуть больше мегабайта. Я попытался объяснить дизайнеру, сколько будет грузиться этот монстр (особенно по dial-up), а в ответ получил: "А на моем компьютере он нормально грузится!"

Интерфейс в формах

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

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

1. Не помечены обязательные к заполнению поля.

2. Неоптимально выбирается элемент управления в форме. Главные критерии при выборе элементов управления: минимизация нажатий мыши/клавиатуры; понятность; минимизация возможности для пользователя сделать ошибку. Самое больное место при этом - поле для ввода даты. Представляете, сколько существует вариантов написания даты с учетом национальных стандартов? Это поле лучше представить тремя полями с раскрывающимся списком - для года, месяца и даты - и Java-скриптом обновлять следующий список (годы могут быть високосными и нет, а в месяце может быть от 28 до 31 дня).

Случай из практики. Дизайнер разработал форму выбора товара. Товар имел три класса (первый, второй и третий), и в каждом классе были свои наименования. И вот мне представляется интерфейсное решение: три поля с раскрывающимся списком (комбобокса) с подписью "1-й класс", "2-й класс" и "3-й класс", а в них - номера товаров. Я выбрал в каждом классе по товару и спросил: "Какой товар прикажешь отобразить?" На что получил ответ: "Если пользователь дурак - то я ничем не могу ему помочь!"

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

3. Кнопка Submit, отсылающая данные формы скрипту-обработчику, должна располагаться под всеми элементами формы. К сожалению, не всем дизайнерам это очевидно.

4. Clear - кнопка, очищающая данные формы. Лично я ее просто не использую. Но если она вам для чего-то нужна - не следует ставить ее там, где посетитель ожидает увидеть кнопку Submit (как правило, внизу формы с левой стороны).

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

Цена вопроса

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

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

Если руководство компании решит сэкономить на услугах дизайнера, это увидят и поймут все посетители корпоративного сайта. Об этом нельзя забывать.

* * *

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