Веб-сайт.
Планирование и реализация
Фаза 1: Стратегическое
планирование. Определение Объёма работы.
Концепция:
- Опрос клиента: вопросники, профили посетителей
- Стратегический план: задачи маркетинга, обзор
конкурентов,
- требования к рекламе, потребности пользователей
ресурса.
- Функциональный план: технические задачи, задачи
функциональности.
Административные задачи:
- Выбор команды: продюсер, арт-директор/дизайнер,
автор/эдитор, программист.
- Расписание и бюджет проекта.
Многие приступают к работе
над новым сайтом с выбора цветов, шрифтов,
технологий и т.п. Тогда как логичнее начать с анализа проекта, планирования
предстоящей работы и поиска ответов на ряд важных вопросов, касающихся
будущего сайта. Время, потраченное на сбор и обработку нужной информации,
окупится с лихвой, помогая избежать потери денег и энергии в дальнейшем...
1. Вы
получили деловое предложение. В первую очередь постарайтесь узнать как можно больше
о вашем заказчике, о его фирме; сферу бизнеса, в котором он работает, и занимаемую
в ней нишу.
2.
Получите у него ответы на следующие вопросы:
- Зачем ему нужен сайт? Почему он его создает
и какие цели и задачи преследует?
- Желает ли он моментальной
отдачи или подготавливает почву для более агрессивного бизнеса в Сети в
дальнейшем?
- Что входит в его цели:
продать продукцию или сервис, увеличить покупательский рынок, обеспечить
поддержку уже проданному товару?
- Возможно, он надеется
подняться на уровень конкурентов, которые давно имеют свои ресурсы в Интернет?
- Если бы у него была
возможность донести только одну идею до своих пользователей, какой бы она
была?
- Какие дальнейшие действия
ожидает он от посетителей его Веб-страниц?
Обращение за более полной информацией? Визит в магазин или офис, покупка
напрямую с сервера?
- Как заказчик измерит
успех или неудачу сайта? Как узнать, что сайт получился удачным - понравилось
начальнику? Выиграл Сетевые награды? Популярен в
среде пользователей?
- Кого он хочет видеть
своим посетителем? (Дизайн и содержание сайта должны оправдывать ожидания и
удовлетворять потребности пользователя)
- Почему к нему будут
приходить? За какой информацией?
- А какую информацию он
может предоставить? Одна из распространенных ошибок профессионалов - это
убежденность в том, что пользователи достаточно просвещены в вопросах,
касающихся деятельности фирмы. Вероятнее всего, это не так. Маркетинг заказчика
только выиграет от результатов обучения возможных клиентов. Ваша с ним задача
- выбрать из моря информации ту, в которой нуждается посетитель.
- Интересуется ли он
привлечением одноразовых посетителей (для счетчика) или надеется превратить
случайных прохожих в регулярных пользователей? Лояльность требует частого
обновления материалов.
3.
Узнайте, кто является конкурентом заказчика. Как выглядят их Интернет
ресурсы. Очень важно, чтобы сайт клиента не подражал другим, а представлял
уникальный и последовательный в себе имидж. Составьте документ с подробным
описанием того, что вы знаете о данной индустрии в Интернете. Сделайте выводы
- что работает и что не работает для схожей группы
пользователей на других сайтах. Что бы вы могли использовать на сайте
заказчика, и что пользовать не стоит.
4. Когда вы утвердите профиль будущего посетителя (см. вопросы
выше), составьте список возможных требований (например, основной группой
пользователей будет молодежь, которая дозванивается в Интернет через слабый
модем и терпеть не может ждать загрузки страницы дольше, чем 30 сек.) и пожеланий
(они хотели бы иметь возможность обмениваться мнениями на доске или болтать в
чате) различных посетительских групп.
5.
Следующие, решите вопросы по функциональности ресурса.
- Что заказчик находит
необходимым для его сайта?
К примеру, динамические страницы, генерируемые базой данных, веб-коммерция, каталоги, программы? Сделать-то можно все,
что он пожелает, дело в стоимости и сроках исполнения.
- Спросите, кто будет мониторить и обновлять подобные
функции?
- Имеет ли заказчик
неординарные требования к безопасности?
- Как и где будет хоститься сайт?
- Существуют ли какие-либо
исключения?
- Кто будет обновлять и поддерживать ресурс?
- Какие у заказчика планы
на будущее, касательно Веб-сайта?
6.
Технические спецификации будут служить основой всех скриптов,
css, графики, html, java и других технических элементов сайта. Определите,
какое программное обеспечение потребуется пользователям для просмотра
ресурса, а также общий технический подход к разработке и поддержке сайта.
Хотелось бы знать резолюцию монитора посетителя, скорость их модема, сколько
памяти в его системе, количество воспроизводимых цветов, какие плагинсы (программные модули) имеют и т.д. Подобную
информацию можно найти в уже существующей у заказчика базе данных
пользователей, из интервью, опросов клиентов заказчика, или обычных
логических предположений.
7. Вы
должны договориться с заказчиком о бюджете проекта, сроках исполнения (если важно)
и расписании. Одновременно стоит подумать над тем, какие специалисты вам понадобятся.
Возможно, вас не затруднит создать небольшой сайт своими силами, но для
серьезного проекта лучше воспользоваться знаниями и опытом профессионалов. Успех
Веб-ресурса покоится на равновесии между достижением
желаемых результатов и затраченных в процессе средств. Не стоит пытаться
прыгнуть выше головы; потеря времени и денег - результат супер ожиданий и
нереальных запросов. При планировании, в первую очередь, стоит принимать во
внимание нужды будущих посетителей, а не последние достижения технологии и
эгоцентричный энтузиазм разработчиков. Мы не создаем сайты для себя, мы
создаем их для наших посетителей.
Фаза 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.
Подберите оптимальную палитру для графики в одном отдельно взятом классе и используйте
ее на всех файлах данного класса. Работая над большим сайтом удобно использовать
DeBabelizer (http://www.equilibrium.com), сценарии которого позволяют очень быстро и точно процессить большое кол-во файлов. Так
же, он, в отличие от Photoshop
(http://www.adobe.com), не сдвигает цвета "безопасной веб-палитры" в сторону при оптимизации.
4.
Используйте <!-- комментарии --> в своем коде,
оставляя пояснения для программистов и создателей текстов.
5.
Используйте абсолютно схожий код на различных страницах, для облегчения глобального
поиска и изменений.
6. Если на
странице очень много текста и других материалов, удалите все "возвраты каретки"
и коменты из кода, что существенно снизит размер
файла.
7.
Потратьте время на изучение тех программ, с которыми работаете, ваша продуктивность
резко повысится. Следите за выходом новых версий и обновляйте свои инструменты
регулярно.
8. Делайте
копии (Back up?) того,
что сделали каждый день по окончанию работы.
9.
Проверяйте свою работу на разных браузерах и основных ОС. Поменяйте
настройки в браузерах выставив большие или маленькие размеры шрифтов,
изменив цветовые настройки, откройте все манюшки и
бары которые имеются.
10.
Проверяйте:
- Грамматику
- Правильное название
файлов
- Работу линков
- Название страниц в поле
Титул
- Фоновые цвета
- Целостность и тегов
- Визуальное выравнивание
- Что получится при
изменении размеров окна браузера, шрифтов, цветов?
- Различия резолюций. А как
оно будет смотреться в монохроме?
11.
Тестируйте, тестируйте и еще раз тестируйте. Подключайте как можно больше
людей к этому процессу. Для заказчика это отличная возможность
"поучаствовать" в проекте. Если есть возможность проверить на будущих
посетителях, не упускайте ее. Внимательно следите
как люди со свежим взглядом на сайт реагируют на вашу навигацию и систему
наименований. Не пытайтесь помочь им "найти" что-либо, но попросите
комментировать каждый шаг. Например куда они ожидают
попасть при клике на ту или иную кнопку? Часто бывает очень удобно
распечатать весь сайт на бумаге и проверять стилистические и грамматические
ошибки таким образом.
Фаза 5: Публикация и Маркетинг.
Публикация:
- Выбор хост-провайдера, покупка имени домена
- FTP веб-сайта на
сервер: создание дерикторий, установка permissions
- Последние проверки и валидации
Маркетинг:
- Регистрация сервера в основных поисковиках
- Раскрутка
- Поддержка: страница новостей, автоматические
обновления
- Презентация сервера и Празднование столь
знаменательного события
Последние работы над сайтом могут включать
следующее:
- Создание
банеров/заголовков прозапас
- Добавление последнего
контекста
- Запуск CGI сценариев
-
обновление линков (старайтесь всегда давать
условные пассы к документам, а не полный URL. К примеру: ../images/dot.gif вместо http://www.yoursite.ru/images/dot.gif Таким образом вам не придется менять данные во всех
ссылках при переносе сайта на сервер нового провайдера, если в будущем
возникнет подобная необходимость.)
- написание мета-тегов
- добавление авторских прав
и предупреждений
- убедитесь что графика
везде меет атрибуты width
и height, соответствует основной цветовой палитре,
имеет "Alt" пояснения.
При выборе имени домена, старайтесь
выбирать простые и легко запоминающиеся слова. Следуйте следующим правилам:
- Краткость и Простота.
Короткие адреса легче запоминаются, в них сложнее сделать ошибку: Gazeta.ru, Pupkin.com
- Описание. Хорошо, когда
по адресу можно догадаться о содержании сайта. Имя компании
не всегда является достаточным пояснением: beerclub.com тумана не напустит :-)
- Запоминаемость. Лучшие
адреса добавляют к простоте элемент интереса - частенько игру слов, как в
www.anekdotov.net - который поможет посетителям помнить это название через
часы, дни и месяцы. Идеально, когда адрес можно запомнить, услышав в разговоре
или по радио.
Скопируйте структуру сайта со своей машины
на сервер заказчика и еще раз протестируйте каждую страничку в браузере.
Конфигурация чужого сервера может потребовать изменений в сценариях или
расширениях файлов (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 программой. Постарайтесь автоматизировать его
действия специальными сценариями. Оставьте о себе хорошую
память и заказчик будет рекламировать вас своим друзьям и знакомым,
что может привести к новым заказам.
В природе существуют заказчики, которые
обставляют выход в свет нового сайта с подобающей
событию помпой. Если это не про вашего, все равно отметьте
завершение проекта со своей командой или друзьями.
Оглавление
|