Web Мастеру.
Концепция:
- Опрос клиента:
вопросники, профили посетителей
- Стратегический
план: задачи маркетинга, обзор конкурентов,
- требования
к рекламе, потребности пользователей ресурса.
- Функциональный
план: технические задачи, задачи функциональности.
Административные
задачи:
- Выбор команды:
продюсер, арт-директор/дизайнер, автор/эдитор, программист.
- Расписание
и бюджет проекта.
Многие приступают
к работе над новым сайтом с выбора цветов, шрифтов, технологий и
т.п. Тогда как логичнее начать с анализа проекта, планирования предстоящей
работы и поиска ответов на ряд важных вопросов, касающихся будущего
сайта. Время, потраченное на сбор и обработку нужной информации,
окупится с лихвой, помогая избежать потери денег и энергии в дальнейшем...
1. Вы получили
деловое предложение. В первую очередь постарайтесь узнать как можно
больше о вашем заказчике, о его фирме; сферу бизнеса, в котором
он работает, и занимаемую в ней нишу.
2. Получите
у него ответы на следующие вопросы:
- Зачем ему нужен сайт? Почему он его создает и какие цели и задачи
преследует?
- Желает ли он моментальной отдачи или подготавливает почву для
более агрессивного бизнеса в Сети в дальнейшем?
- Что входит в его цели: продать продукцию или сервис, увеличить
покупательский рынок, обеспечить поддержку уже проданному товару?
- Возможно, он надеется подняться на уровень конкурентов, которые
давно имеют свои ресурсы в Интернет?
- Если бы у него была возможность донести только одну идею до своих
пользователей, какой бы она была?
- Какие дальнийшие действия ожидает он от посетителей его Веб-страниц?
Обращение за более полной информацией? Визит в магазин или оффис,
покупка напрямую с сервера?
- Как заказчик измерит успех или неудачу сайта? Как узнать, что
сайт получился удачным - понравилось начальнику? Выиграл Сетевые
награды? Популярен в среде пользователей?
- Кого он хочет видеть своим посетителем? (Дизайн и содержание сайта
должны оправдывать ожидания и удовлетворять потребности пользователя)
- Почему к нему будут приходить? За какой информацией?
- А какую информацию он может предоставить? Одна из распространенных
ошибок профессионалов - это убежденность в том, что пользователи
достаточно просвещены в вопросах, касающихся деятельности фирмы.
Вероятнее всего, это не так. Маркетинг заказчика только выиграет
от результатов обучения возможных клиентов. Ваша с ним задача -
выбрать из моря информации ту, в которой нуждается посетитель.
- Интересуется ли он привлечением одноразовых посетителей (для счетчика)
или надеится превратить случайных прохожих в регулярных пользователей?
Лояльность требует частого обновления материалов.
3. Узнайте,
кто является конкурентом заказчика. Как выглядят их Интернет ресурсы.
Очень важно, чтобы сайт клиента не подражал другим, а представлял
уникальный и последовательный в себе имидж. Составьте документ с
подробным описанием того, что вы знаете о данной индустрии в Интернете.
Сделайте выводы - что работает и что не работает для схожей группы
пользователей на других сайтах. Что бы вы могли использовать на
сайте заказчика, и что пользовать не стоит.
4. Когда вы
утвердите профиль будущего посетителя (см. вопросы выше), составьте
список возможных требований (например, основной группой пользователей
будет молодежь, которая дозванивается в Интернет через слабый модем
и терпеть не может ждать загрузки страницы дольше, чем 30 сек.)
и пожеланий (они хотели бы иметь возможность обмениваться мнениями
на доске или болтать в чате) различных посетительских групп.
5. Следующие,
решите вопросы по функциональности ресурса.
- Что заказчик находит необходимым для его сайта? К примеру, динамические
страницы, генерируемые базой данных, веб-коммерция, каталоги, программы?
Сделать-то можно все, что он пожелает, дело в стоимости и сроках
исполнения.
- Спросите, кто будет мониторить и обновлять подобные функции?
- Имеет ли заказчик неординарные требования к безопасности?
- Как и где будет хоститься сайт?
- Существуют ли какие-либо исключения?
- Кто будет обновлять и поддерживать ресурс?
- Какие у заказчика планы на будущее, касательно Веб-сайта?
6. Технические
спецификации будут служить основой всех скриптов, css, графики,
html, java и других технических элементов сайта. Определите, какое
програмное обеспечение потребуется пользователям для просмотра ресурса,
а также общий технический подход к разработке и поддержке сайта.
Хотелось бы знать резолюцию монитора посетителя, скорость их модема,
сколько памяти в его системе, количество воспроизводимых цветов,
какие плагинсы (програмные модули) имеют и т.д. Подобную информацию
можно найти в уже существующей у заказчика базе данных пользователей,
из интервью, опросов клиентов заказчика, или обычных логических
предположений.
7. Вы должны
договориться с заказчиком о бюджете проекта, сроках исполнения (если
важно) и расписании. Одновременно стоит подумать над тем, какие
специалисты вам понадобятся. Возможно, вас не затруднит создать
небольшой сайт своими силами, но для серьезного проекта лучше воспользоваться
знаниями и опытом професcионалов.
Успех Веб-ресурса
покоится на равновесии между достижением желаемых результатов и
затраченных в процессе средств. Не стоит пытаться прыгнуть выше
головы; потеря времени и денег - результат суперожиданий и нереальных
запросов. При планировании, в первую очередь, стоит принимать во
внимание нужды будущих посетителей, а не последние достижения технологии
и эгоцентричный энтузиазм разработчиков. Мы не создаем сайты для
себя, мы создаем их для наших посетителей.
Фаза 2: Тактическое
планирование. Разработка структуры.
- Карта сервера
- Подготовка
контекста, создание и эдитирование
- Обозрение
материалов
- Технические
спецификации (тактическая сторона)
- Навигация
и разметка страниц
Имея на руках
результаты опросов заказчика и профили будующих посетителей, пришло
время шевелить мозгами в поисках идей, которые помогут веб-сайту
достичь поставленных перед ним задач.
Первый ваш шаг
- набросок "карты сайта". Это графическая диаграмма, показывающая
путь продвижения посетителя по сайту. Ваша карта должна включать
в себя каждую его страницу и то, в какой зависимости они находится
относительно других страниц и материалов. Очень важно получить "добро"
заказчика на "карту", и отметить любые изменения в стуктуре, такие
как удаление или добавление страниц, что может повлиять на бюджет
проекта.
Планирование
контекста происходит в тесном сотрудничестве с заказчиком. Возможно
у него уже есть готовые материалы, другие должны быть модифицированы,
переписаны или созданы с нуля. Необходимо четко разграничить обязанности
между вами. Кто будет ответственен за что? Если заказчик поставляет
весь материал, составте ему расписание. Передача текстов вечно занимает
больше врмени, чем мы расчитываем и часто именно заказчик виновен
в растягивании сроков проекта.
Определитесь с текстом для каждой страницы до начала работы над
дизайном. Навигация сайта будет напрямую зависеть от количества
и глубины содержания, а его стиль и тон окажут влияние на визуальный
язык композиции.
Тактическую
сторону технических спецификаций можно отразить в коротком документе,
определяющим подход и используемые технологии при кодировании страниц
и визуальной разметке.
- Будут ли страницы генерироваться "на лету" из датобазы?
- Будут ли использованы Cascading Style Sheets (CSS)?
- Потребуется ли наличие модуля (plug-in) или специального контроля
на машине пользователя?
- Под какой минимум необходимо оптимизировать цветовую палитру?
- Вы будете писать код сами или использовать WYSIWYG "Что вижу,
то и получаю" эдитор (Dreamweaver, к примеру)?
- Будут ли использованы DHTML, Channels, Push технологии?
Затем вы должны
определиться с навигацией. Как будет посетитель продвигаться по
сайту? Какая связь существует между страницами, куда можно попасть
от куда и т.д. Для большинства проектов нет нужды придумывать новые
невигационные схемы. Учитесь на сайтах, которые вам нравятся больше
всего: проще - лучше. Подгоните существующую удачную модель под
нужды своего проекта и используйте ее. Людям необходима возможность
легко передвигаться по сайту, только и всего.
Фаза 3: Дизайн
Интерфейса.
- Творческие
поиски и разработка стиля
- Создание
прототипов
- Утверждение
заказчиком
- Графическое
производство: дизайн датабаз и форм, анимации, графика в GIF/Jpeg,
обработка в html.
Вы изучили своего
заказчика, представляете содержание каждой будующей страницы и вовсю
идет работа над текстами. Самое время заняться интерфейсом.
Начните с самой важной страницы, работайте над ней до тех пор, пока
у вас не будет как минимум 15 набросков различных вариантов, из которых
5 можно развить дальше. Когда страничка начнет дымиться, поработайте
над другими. Продолжайте искать идеи, рисовать и думать. Попробуйте
поэксперементировать с различными эффектами: real audio/vidio, динамическое
html, необычное использование тегов и т.д.
Пусть ваш альбом
наполнится зарисовками для входного экрана, навигационных элементов,
ключевой графики и второстепенных, украшающих элементов. Используйте
коллаж. Проанимируйте частицу большого изображения. Поиграйте со
шрифтами, слоями, текстурами, эмоциями. Как только вы найдете удачную
тему, проработайте ее как можно глубже, потом отложите в сторону
и примитесь за новую.
Вообразите себя
пользователем и попробуйте смотреть на окружающий мир, Интернет
его глазами. Походите по сайтам, где он может бывать, полистайте
его журналы, пообщайтесь с его возможным окружением...
Используйте
графический редактор. Очень удобно скопировать окно броузера (F13
или Print Scrn, далее Ctrl+double click в окне графического редактора,
затем Ctrl+V в новый файл) в Фотошоп или Иллюстратор и накладывать
слои композиции прямо на него.
Выбирите 3 законченных
варианта: ваш любимый, несколько эстравагантный и консервативный,
который вы уверены понравится заказчику. Создайте для них прототипы,
которые он сможет посмотреть и одобрить. Прототип - черновой вариант
слинкованных между собой основных страниц сайта. Не обязательно
писать код для этих страниц, вы прекрасно можете обойтись image-maps.
Порежте страницы на части и пролинкуйте графику между собой. Не
тратьте время на ее оптимизацию, и обьясните заказчику, что она
немного потеряет в качестве при дальнейшей обработке. Задача прототипов
- хорошо смотреться в окне браузера и понравится заказчику.
Фаза 4: Програмирование.
- Создание:
CGI, Javascript, Java, формы, датабазы
- HTML: кодирование
- Валидация:
содержания, грамматических ошибок, работы линков
- Тестирование
в различных броузерах.
После того как
вы разработали дизайн и сверстали модели основных страниц, можно
приниматься за техническую работу - HTML кодирование, CGI формы,
датабазы и прочее програмирование.
Несколько советов:
1. Когда над
сайтом работают несколько человек, обязательно стоит договорится
об общей логической системе наименований. Если каждый будет скидывать
свои творения куда захочется, это будет существенно затруднять поик
коллегам, и в конце все равно приведет к переименованию.
2. Рассортируйте
ваши графические файлы по классам в зависимости от их размера. Старайтесь
держать колличество таких классов минимальным. Например: заголовки,
подзаголовки, "ноготки", полная графика и т.д. Графические размеры
от 1 до 5.
3. Подберите
оптимальную палитру для графики в одном отдельно взятом классе и
используйте ее на всех файлах данного класса. Работая над большим
сайтом удобно использoвать DeBabelizer (http://www.equilibrium.com),
сценарии которого позволяют очень быстро и точно процессить большое
кол-во файлов. Так же, он, в отличие от Photoshop (http://www.adobe.com),
не сдвигает цвета "безопасной веб-палитры" в сторону при оптимизации.
4. Используйте
<!-- коментарии --> в своем коде, оставляя пояснения для программистов
и создателей текстов.
5. Используйте
абсолютно схожий код на различных страницах, для облегчения глобального
поиска и изменений.
6. Если на странице
очень много текста и других материалов, удалите все "возвраты коретки"
и коменты из кода, что существенно снизит размер файла.
7. Потратьте
время на изучение тех программ, с которыми работаете, ваша продуктивность
резко повысится. Следите за выходом новых версий и обновляйте свои
инструменты регулярно.
8. Делайте копии
(Back up?) того, что сделали каждый день по окончанию работы.
9. Проверяйте
свою работу на разных броузерах и основных ОС. Поменяйте настройки
в броузерах выставив большие или маленькие размеры шрифтов, изменив
цветовые настройки, откройте все манюшки и бары которые имеются.
10. Проверяйте:
- Грамматику
- Правильное название файлов
- Работу линков
- Название страниц в поле Титул
- Фоновые цвета
- Целостность и тегов
- Визуальное выравнивание
- Что получится при изменении размеров окна броузера, шрифтов, цветов?
- Различия резолюций. А как оно будет смотреться в монохроме?
11. Тестируйте,
тестируйте и еще раз тестируйте. Подключайте как можно больше людей
к этому процессу. Для заказчика это отличная возможность "поучаствовать"
в проекте. Если есть возможность проверить на будующих посетителях,
не упускайте ее. Внимательно следите как люди со свежим взглядом
на сайт реагируют на вашу навигацию и систему наименований. Не пытайтесь
помочь им "найти" что-либо, но попросите комментировать каждый шаг.
Например куда они ожидают попасть при клике на ту или иную кнопку?
Часто бывает очень удобно распечатать весь сайт на бумаге и проверять
стилистические и грамматические ошибки таким образом.
Фаза 5: Публикация
и Маркетинг.
Публикация:
- Выбор хост-провайдера,
покупка имени домейна
- FTP веб-сайта
на сервер: создание дерикторий, установка permissions
- Последние
проверки и валидации
Маркетинг:
- Регистрация
сервера в основных поисковиках
- Раскрутка
- Поддержка:
страница новостей, автоматические обновления
- Презентация
сервера и Празднование столь знаменательного события
Последние работы
над сайтом могут включать следующее:
- Создание банеров/заголовков прозапас
- Добaвление последнего контекста
- Запуск CGI сценариев
- обновление линков (старайтесь всегда давать условные пассы к документам,
а не полный URL. К примеру: ../images/dot.gif вместо http://www.yoursite.ru/images/dot.gif
Таким образом вам не придется менять данные во всех ссылках при
переносе сайта на сервер нового провайдера, если в будующем возникнет
подобная необходимость.)
- написание мета-тегов
- добавление авторских прав и предупреждений
- убедитесь что графика везде меет атрибуты width и height, соответствует
основной цветовой палитре, имеет "Alt" пояснения.
При выборе имени
домейна, старайтесь выбирать простые и легко запоминающиеся слова.
Следуйте следующим правилам:
- Краткость и Простота. Короткие адреса легче запоминаются,
в них сложнее сделать ошибку: Gazeta.ru, Pupkin.com
- Описание. Хорошо, когда по адресу можно догадаться о содержании
сайта. Имя компании не всегда является достаточным пояснением: beerclub.com
тумана не напустит :-)
- Запоминаемость. Лучшие адреса добавляют к простоте элемент
интереса - частенько игру слов, как в www.anekdotov.net - который
поможет посетителям помнить это название через часы, дни и месяцы.
Идеально, когда адрес можно запомнить, услышав в разговоре или по
радио.
Скопируйте структуру
сайта со своей машины на сервер заказчика и еще раз протестируйте
каждую страничку в брaузере. Конфигурация чужого сервера может потребовать
изменений в сценариях или расширениях файлов (htm вместо html).
Убедитесь все работает так, как вы предполагали.
Проведите хорошую
рекламную компанию своему сайту. Я не буду сейчас говорить о том,
как это делается. Тема слишком объемна для данной статьи. Почитайте
материал на следующих сайтах:
http://www.promotion.aha.ru
http://www.list.techno.ru/banners/
http://www.bannermaker.ru
http://www.glasnet.ru/glasweb/rus/sitepromo1.htm
Если вы надеятесь
на регулярных посетителей, стоит зараннее составить план обновления
материалов. Если заказчик желает делать это сам, потратьте время
и научите его управляться с сайтом. Дайте ему минимальные знания
по работе с текстовым редактором и ftp программой. Постарайтесь
автоматизировать его действия специальными сценариями. Оставте о
себе хорошую память и заказчик будет рекламировать вас своим друзьям
и знакомым, что может привести к новым заказам.
В природе существуют
заказчики, которые обставляют выход в свет нового сайта с подобающей
событию помпой. Если это не про вашего, все равно отметьте завершение
проекта со своей командой или друзьями.
