Фаза 1: Стратегическое планирование. Определение Обьема работы.Концепция: - Опрос клиента: вопросники, профили посетителей
- Стратегический план: задачи маркетинга, обзор конкурентов,
- требования к рекламе, потребности пользователей ресурса.
- Функциональный план: технические задачи, задачи функциональности.
Административные задачи: - Выбор команды: продюсер, арт-директор/дизайнер, автор/эдитор, программист.
- Расписание и бюджет проекта.
Многие приступают к работе над новым сайтом с выбора цветов, шрифтов, технологий и т.п. Тогда как логичнее начать с анализа проекта, планирования предстоящей работы и поиска ответов на ряд важных вопросов, касающихся будущего сайта. Время, потраченное на сбор и обработку нужной информации, окупится с лихвой, помогая избежать потери денег и энергии в дальнейшем... 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). Убедитесь все работает так, как вы предполагали. Проведите хорошую рекламную компанию своему сайту. Я не буду сейчас говорить о том, как это делается. Тема слишком объемна для данной статьи. Если вы надеятесь на регулярных посетителей, стоит зараннее составить план обновления материалов. Если заказчик желает делать это сам, потратьте время и научите его управляться с сайтом. Дайте ему минимальные знания по работе с текстовым редактором и ftp программой. Постарайтесь автоматизировать его действия специальными сценариями. Оставте о себе хорошую память и заказчик будет рекламировать вас своим друзьям и знакомым, что может привести к новым заказам. В природе существуют заказчики, которые обставляют выход в свет нового сайта с подобающей событию помпой. Если это не про вашего, все равно отметьте завершение проекта со своей командой или друзьями.
|