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

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

• Малого и среднего бизнеса;
• Организаций;
• Учреждений;
• Веб-дизайнеров, для фирм по разработке и проектированию.

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

Важные вопросы и ответы. Изображение от opensourceway.

Почему нужен план?

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

Пример с полом.

Рассмотрим пример создания пола. Если вы хотите сделать новый пол для своего дома, вы, вероятно, обзвоните нескольких плотников и спросите: “Во сколько мне обойдется пол?” Каждый специалист почти наверняка ответит: “Все зависит от комплектации”. Для того, чтобы предоставить вам оценку, плотник должен узнать некоторые подробности о проекте:

• Какой тип древесины будет использоваться? Может быть кедр? Обработанная? Синтетическая?
• Где именно будет настилаться пол? Существуют ли какие-нибудь препятствия, которые нужно обходить?
• Какой высоты он будет, и сколько уровней будет включать?
• Хотите ли вы скамейки, перила, встроенные клумбы?
• Есть ли у Вас разрешение на ввоз специального оборудования на территорию двора?

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

Убедитесь, что Ваш план приведет к успеху. Изображение от opensourceway.

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

Конечно, все это имеет смысл, но давайте рассмотрим другой сценарий, в котором нет четкого плана:

“Привет, меня зовут Дженнифер Карпентер. А это Хуан, он домовладелец. Мне нужно построить для него веранду из кедра размером 20 × 30 футов, на территории его двора. Постройка должна быть выполнена в течение двух недель ”

“Хорошо, Хуан. Я подберу нужные материалы и с завтрашнего дня приступлю к работе. Если у вас возникнут вопросы, просто найдите меня в вашем дворе в то время как я работаю “.

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

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

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

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

Домовладелец: “Что это?”

Госпожа Карпентер: “Я добавила перила с одной стороны, потому что у вас есть дети. Это хорошая мера предосторожности “.

Домовладелец: ” У меня нет маленьких детей”.

Госпожа Карпентер: “Но я же видела, как они играли у вас во дворе”.

Домовладелец: “О, это вероятно соседские дети. Мои дети учатся в средней школе “.

Госпожа Карпентер: “Ну, перила все еще будут вам полезны”.

Домовладелец: “Хорошо, но мне бы хотелось сделать их пониже и поставить рядом с ним скамейку “.

Госпожа Карпентер: “У меня нет достаточного количества материалов для скамейки, к тому же перила уже порезаны и подогнаны по размерам. Мне придется демонтировать их и провести новый монтаж. К тому же мы не обговаривали вариант со скамейкой “.

Домовладелец: “Ну мне бы очень хотелось видеть здесь скамейку”.

Госпожа Карпентер: “Это займет больше времени. Я не смогу вложиться в отведенный двухнедельный срок, если мы добавим разработку скамьи. Кроме того, я должна буду получить плату за дополнительный материал “.

То, что начиналось как вполне простой проект превратилось в головную боль, а все из-за неспособности планирования.

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

Предостережение и метод “водопада” в проектировании.

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

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

Находите все самое важное и действуйте. Изображение от opensourceway.

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

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

Мы делаем это с помощью средней величины. Следуя процессу, который я изложил ниже, мы можем создать набор содержания и требований к конструкции, что значительно снижает вероятность возникновения ошибок на итоговой стадии проектирования. Создается надежная структура для дальнейшего роста сайта. В самом деле, мы можем планировать расширение области сайта, например, добавлять разделы новостей обрабатывая 10 или 200 событий. Когда эти требования будут должным образом реализованы в системе управления контентом (CMS), редакторы веб-сайта, благодаря его гибкости, имеют возможность для замены ключевых фотографий, изменения названий и заголовков, порядка отображения содержания, и так далее — все в рамках, установленных первоначальным планированием.

Значение планирования и необходимость в оценке.

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

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

Общие результаты отсутствия планирования.

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

Необходимость в оценке.

Важно помнить:

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

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

В согласовании сайта поможет маркетинг.

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

Роли: кто, что делает?

Каждый проект уникальный, но это типичные элементы, характерные для большинства проектов в интернете:

• Заинтересованная сторона (так называемые “клиенты”), которая представляет все основные аспекты бизнеса;
• Менеджер проекта;
• Копирайтер или редактор;
• Веб-дизайнер (графический дизайн, иллюстрации, веб-дизайн);
• Разработчик HTML кода (HTML, CSS, JavaScript, Flash);
• Web или CMS разработчик.

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

Определитесь с содержимым веб-сайта.

Кто несет ответственность?

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

Сделать анализ и распределить четкие обязанности. Изображение от opensourceway.

Контент — это не только текст.

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

• Изображения;
• Документы (обычно в формате PDF);
• Аудио;
• Видео (например, взятых на YouTube или Vimeo, или резидентных);
• Adobe Flash файлы;
• Информация из других источников (из других веб-сайтов, например);
• Фото (возможно с Flickr );
• Сообщения из Twitter;
• Список “друзей” на Facebook;
• RSS новости.

Ценность хорошей фотографии.

Как и другие элементы веб-сайта, фотографии — эта неотъемлемая часть организации. Если вы только что переехали в новое красивое здание или открыли магазин, возможно, кто-то из сотрудников сделал несколько фотографий на $ 150 цифровую камеру. В большинстве случаев, это будут не качественные фотографии, даже если у вас есть отличные навыки фотографирования. Выделите средства на профессиональную фотосъемку. Вам не обязательно нужно много фотографий, просто выберите лучшие из них. Двенадцать профессиональных фотографий лучше, чем пятьдесят любительских кадров.

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

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

Важность манеры написания текста.

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

Советы по написанию статей.

Рассматривайте интересы вашей аудитории и пишите статьи на соответствующую тематику. Постарайтесь взглянуть на все глазами клиента. О чем он переживает?

Избегайте сложной терминологии, запутанных сокращений и сухих деталей. Ваши клиенты не работают у вас в магазине, офисе или на фабрике; они всего лишь покупают ваши продукты или пользуются вашими услугами. Помните об этом и говорите с ними соответствующим образом. При необходимости, пишите в общих чертах, но сохраняйте главные детали для многостраничных PDF-файлов (как загрузка). Этот подход особенно полезен для получения информации, официальных документов и копий, которые приближаются или превышают объем в 1000 слов.

Вот полезный подход в написании статей для интернета:

1. Создайте первые наброски,
2. Разделите их пополам,
3. Разделите их пополам снова,
4. Добавьте по возможности маркированные и нумерованные списки,
5. Отправить результаты редактору.

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

Не пытайтесь придать стиль содержимому. Большинство авторов предпочитают работать в Microsoft Word или аналогичных программах. Это прекрасно, но Word не сможет сформировать корректный код. Не беспокойтесь по поводу цвета, шрифтов и выравнивания. Просто создавайте хорошие статьи. Стиль будет применен позже на уровне каждой отдельно взятой веб-страницы.

Определите структуру вашего сайта.

Ключевым элементом в планировании сайта является именно выбор структуры.

Карта сайта.

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

Определение содержимого.

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

Структура контента. Изображение от opensourceway.

Может быть, вы хотите разместить на вашем сайте фото галереи? Хорошая идея, но из чего именно будет состоять галерея? Может быть это будут 20 изображений в виде сетки из миниатюр с хорошим всплывающим описанием, при наведении на одну из них? Или многостраничные галереи с 1000 фотографий, отсортированные по индивидуальным категориям и отслеживаемые с помощью мета-данных? Смогут ли пользователи оценить изображения? Комментировать их? Скачать версию с высоким разрешением? Отправлять их друзьям?

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

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

Контрольная таблица содержимого.

Вот список (но не совсем полный) общих типов контента. Помните, что это только типы, а не определения:

• Статьи;
• Блоги;
• Баннерная реклама;
• Обсуждение на форумах;
• Документы;
• Электронная торговля;
• Формы для контакта, цитаты и прочее;
• Физические продукты (сколько?);
• Цифровой контент (какой и сколько?);
• Рассылки электронной почты;
• Календарь событий;
• Регистрация событий;
• Галерея изображений;
• Управляющие ссылки (десятки или сотни ссылок, упорядоченных по категориям);
• Поступления из RSS-каналов (информация из других веб-сайтов);
• Исходящие RSS-каналы (содержание организованно с помощью нескольких других сайтов);
• Поиск;
• Социальный обмен ссылками СМИ (Twitter, Facebook и т.д.);
• Справочник личного персонала.

Связь между контентом.

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

Отделите дизайн от контента.

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров