Этапы разработки сайта

/ Просмотров: 5852
Метки:

Кратко о том, что же входит в магическое действо под названием «создание сайта», а также о последовательности и параллельности этапов:

1. Разработка Технического задания (ТЗ). ТЗ – это документ, перечисляющий требования заказчика к сайту, функционал сайта, часто – формат согласования работ, передачи результатов работ и т.п. В общем и целом, ТЗ – это список тех пунктов, по которым вы потом будете принимать работы у разработчика, а разработчик на любые ваши правки будет говорить «Этого не было в ТЗ». И будет прав. Все остальные этапы работ выполняются только после согласования ТЗ.

2. Дизайн сайта.

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

Будьте внимательны: если у вас простой cайт-визитка, и все страницы содержат одни и те же информационные блоки, то можно ограничиться разработкой макета главной и макета внутренней страниц. Если же у вас на сайте предполагаются новости, списки партнеров, сертификатов, лицензий, фотоальбомы и т.п., то нужно разрабатывать макет каждой страницы, которая по своей информационной структуре отличается от главной и типовой внутренней. Так же не забываем макеты типовой таблицы и типового маркированного списка. Все это нужно для того, чтобы потом при «прикрутке» дизайна к движку (cms) Ваш дизайн не пришлось дорисовывать программистам, пытающимся угадать глубокий замысел дизайнера.

Внимание:

уже на этапе разработки дизайна, нужно сообщить дизайнеру, будет у вас «резиновый» сайт (т.е. ширина страниц меняется в зависимости от ширины окна браузера у посетителя) или с фиксированной шириной.

Обязательно оговариваем передачу вам исходников макетов – файлы в формате .*psd и исходники всех векторных картинок. Иначе потом внести доработки в дизайн странички или баннера не сможет никто, кроме дизайнера, который этот дизайн разрабатывал.

2.1. Тестирование макетов сайта на юзабилити. Юзабилити – это понятность интерфейса для пользователя и удобства доступа ко всем нужным ему кнопкам.

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

Маршруты пользователя по сайту закладываются в ТЗ, в структуре сайта. А вот правильно реализовать отбражение сайта должен в основном дизайнер. Подробнее почитать про юзабилити рекомендую тут: http://habrahabr.ru/post/17336/#habracut

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

3. Верстка шаблонов. Разрабатывается после утверждения дизайна сайта.

Это переложение разработанных макетов дизайна страниц в формат, понятный веб-браузерам. Выполняется на языках разметки html или xhtml.

Основное требование к верстке сайта – она должна предполагать одинаковое отображение страниц сайта в наиболее популярных браузерах (Mozilla Firefox, IE, Opera, Safari, Mozilla под Linux, Macos, а также в IE и Опере под КПК и смартфоны). С КПК все сложно, разрабатывать красивые сайты под все модели, в том числе и старые, практически нереально, поэтому следим в основном за тем, чтобы даже без фона и картинок сайт выглядел удобоваримо и позволял найти все, что нужно.

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

4. Программинг. Может разрабатываться параллельно с дизайном и версткой.

Разработка движка сайта (его внутренностей и системы управления контентом, они же cms), всех программных модулей.

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

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

Оговариваем открытость кода и передачу всех используемых классов. Либо программисты предупреждают вас о наличии непередаваемых классов до начала работ

5. Флеш-контент. Может разрабатываться параллельно с версткой и программингом, и после завершения разработки визуальной концепции сайта и дизайна тех элементов, которые мы планируем анимировать. Основное требование к флешу – картинки должны оптимально сочетать в себе качество изображения и вес, иначе «редкая птица доживет до середины загрузки флешки».

Оговариваем передачу вам исходников флеш-элементов (файлы .*fla) и всех  используемых классов.

6. Контент сайта. Может разрабатываться после утверждения визуальной концепции сайта. В зависимости от целей сайта контент может быть либо заточенным под поисковики, либо, наоборот, продающим, либо оптимально сочетать в себе и те, и другие качества. Соответственно разрабатывается с использованием ключевых слов, которые укажут ваши seo-оптимизаторы.

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

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

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

8. Наполнение сайта. Выполняется после прикрутки и разработки контента.

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

9. Тестирование сайта. Обязательно выполняется уже после наполнения реальным контентом. Тестировщики говорят, что на тестирование и отладку сложного софта должно отводиться до 40% бюджета и сроков разработки, и я склонна с ними согласиться.

Тестироваться должны юзабилити, кроссбраузерность и валидность верстки, функционал. Как правило, на тестирование сайта требуется не меньше 2-3 кругов тестирования, отладки и верификации багов. С верстальщиками, программистами и флешерами нужно до начала работ оговаривать участие в отладке результатов их работ – иногда эта отладка может происходить через 3-8 месяцев после завершения ими их части работы.

(с) Елена Кучерявенко