Цели веб-сайта, в большинстве случаев, должны ставиться заказчиком, а затем, вместе с исполнителем они уточняются и корректируются.
После определения целей сайта надо совершенно четко подробнее представить и описать целевую аудиторию сайта, т.к. это влияет на то, в каком виде будет представлена информация.
Определение и как можно более подробное описание целевой аудитории сайта дает возможность разработать правильный дизайн для проекта, а также выбрать правильное направление для написания текстов. Очень важно говорить с аудиторией на понятном ей языке. И это требование в разы важнее в Интернете, чем в реальной жизни, т.к. в онлайне вас и вашего конкурента разделяет только клик мыши.
На заключительной стадии этого этапа примерно определяют, по каким поисковым запросам сайт должен появляться в результатах поискового запроса и посмотреть интернет-проекты конкурентов будущего веб-проекта.
2. Создание технического задания на разработку web-сайта
В ТЗ необходимо как можно более подробно описать:
а) цели создания и его целевую аудиторию;
б) структуру веб-сайта и количество страниц в каждом разделе;
в) пожелания по дизайну (цвета, использование фирменного стиля и т.д.);
г) порядок представления, обработки или создания графической и текстовой информации;
д) технические требования к сайту.
ТЗ является основным документом, на основе которого осуществляются все последующие этапы разработки веб-сайта.
3. Создание дизайн-макета web-сайта
На этом этапе дизайнер в специальной графической программе создает дизайн страниц будущего веб-сайта с прорисовкой всех графических (баннеров, кнопок, фотографий) и текстовых элементов. Дизайнер создает дизайн веб-страниц с учетом пожеланий заказчика и задания, прописанного в ТЗ.
4. Верстка web-сайта
На данном этапе верстальщик получает макеты шаблонов в виде изображений, или разделенных на слои. Его работа заключается в том, чтобы создать из них гипертекстовые веб-страницы с вложенными в них отдельно нарезанными и подготовленными изображениями. Одной из сложных задач в деятельности верстальщика будет обеспечение совместимости с разными браузерами - прикладные программные обеспечения для просмотра веб-страниц.
5. Наполнение сайта информацией
На этом этапе информация, предоставленная заказчиком размещается на сайте, т.е. путем перевода в специальный формат текст и графика располагаются на сайте на определенных страницах, и эта информация становится доступной для просмотра.
6. Тестирование
На этом этапе выявляются все ошибки и недочеты в программировании и написании текстов[8].
2. РАЗРАБОТКА СТРУКТУРЫ САЙТА
Правильная структура сайта -- это система расположения страниц сайта по четко сформированной логической схеме, структуру можно обозначить, как иерархию всех страниц сайта, их принадлежность к тем или иным каталогам и папкам.
В тезисах структуру сайта можно охарактеризовать так:
а) где я нахожусь сейчас (страница входа);
б) куда я могу попасть (переход);
в) взаимосвязь между категориями.
Формируя структуру стоит разобраться в желаниях потенциальных посетителей, что они будут искать, и какая информация их интересует.
2.1 Типы внутренних структур сайта
1. Линейная структура сайта
Самая простая структура сайта. Web-страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу. В линейной структуре не существует разделения контента на уровни. Все страницы на таких сайтах равноправны, и их должен увидеть каждый посетитель. Несмотря на простоту реализации линейной структуры, недостатков у нее гораздо больше, нежели достоинств. Поэтому область ее применения четко ограничена. Она может использоваться на имиджевых сайтах, сайтах-презентациях и в онлайновых учебных пособиях.
Реализация линейной структуры не представляет собой абсолютно никакой сложности. Самый простой вариант сайта -- набор HTML-страниц, с каждой из которых есть ссылка на последующую предыдущую страницу. Но при этом на каждой страницы обязательно должно быть какое-то заглавие и ссылка на первую страницу. Иначе посетители, попавшие в середину сайта, например, с поисковой системы, ничего не поймут и почти наверняка покинут проект разочарованными. Кроме того, очень полезно бывает показывать общее число страниц и как-то выделять номер той из них, на которой человек находится в данный момент. Иначе просмотр проекта превратится для посетителей в путешествие в неизвестность. Схема приведена на рисунке 2.1.1.
Рис.2.1.1 - Линейная структура сайта
2. Линейная структура сайта с альтернативами и вариантами
Основой данной структуры является простое линейное размещение web-страниц. Однако на сайтах, построенных по этому принципу, посетители могут проявить некоторую инициативу, облегчив для себя поиск нужной информации. Под альтернативами в данном случае понимается выбор между двумя ветками. Чаще всего подобная структура используется для сбора информации о посетителе. Примером здесь может служить процесс регистрации клиента на сайте какой-то фирмы, оказывающей определенные услуги. В этом случае все люди начинают работу со стартовой страницы. Однако потом частным лицам предлагается ввести одну информацию, а представителям коммерческих структур -- другую. После этого и те, и другие попадают на одну и ту же страницу.
Линейная структура с альтернативами и вариантами удобна в том плане, что с одной стороны она позволяет web-мастерам контролировать деятельность посетителей, направив их в определенное русло. А с другой стороны проявить некоторую инициативу, которая позволит им, во-первых, почувствовать свободу, а во-вторых, облегчить доступ к нужной именно им информации. Схема приведена на рисунке 2.1.2.
Рис.2.1.2 - Линейная структура сайта с альтернативами и ветвлениями
3. Линейная структура сайта с ответвлениями
Это тоже контролируемая структура, которая напоминает дорогу с ответвляющимися от нее время от времени тупиковыми тропинками. То есть посетитель последовательно переходит с одной страницы на другую. Если информация, размещенная на какой-то из них его заинтересовала, и он хочет узнать подробности, то может перейти на ответвление, а потом вернуться обратно на основную «дорожку».
Главным преимуществом рассматриваемой структуры является то, что к ней легко перейти с обычного линейного размещения web-страниц. Такое часто бывает, когда созданный однажды сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам невозможна. В этом случае web-мастер может быстро и без всяких проблем расширить проект. Схема на рисунке 2.1.3.
Рис.2.1.3 - Линейная структура сайта с ответвлениями
4. Древовидная структура сайта
Древовидная структура -- самый универсальный способ размещения web-страниц. Она подходит для создания практически любых типов сайтов. Ее принцип заключается в том, что пользователь при заходе на заглавную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т.п. У древовидной структуры очень много достоинств, но так же есть и недостаток.
Речь идет о том, что в древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Если «дерево» сайта будет расти только вглубь, то пользователям, чтобы дойти до какой-то информации, придется загрузить и просмотреть слишком много страниц, что будет раздражать пользователей. А если создать очень широкую древовидную структуру, то посетители будут вынуждены каждый раз тратить очень много времени для выбора нужной им ветки. А это тоже плохо. Таким образом, при использовании древовидной структуры сайта необходимо постоянно следить за ее разрастанием и придерживаться золотой середины. Схема предоставлена на рисунке 2.1.4.
Рис.2.1.4 - Древовидная структура сайта
5. Решетчатая структура сайта
Эта структура уже на порядок сложнее всех рассмотренных ранее. В ней все страницы также размещаются в различных ветках. Но у пользователя есть возможность перемещаться по ним не только вертикально (вверх-вниз), но и горизонтально (то есть между ветками на разных уровнях). Используется решетка в основном только в каталогах. При этом перемещение между ветками на глубинных уровнях осуществляется с помощью отсылок на рубрики в других разделах.
Использование решетчатой структуры в других проектах нецелесообразно. Во-первых, она относительно сложна в реализации. Во-вторых, обращаться с «решеткой» нужно с очень большой осторожностью, так как структура сайта может получиться очень запутанной, и посетители будут вынуждены долго блуждать в поисках нужной им информации[5].
В данной работе было решено использовать древовидную структуру сайта. С главной страницы будут «разветвления» на разные категории. В зависимости от того, какую вкладку нажимает клиент, перед будет появляться выбор для перехода на более конкретную страницу. К примеру, на главной странице будет 4 пункта меню, переходя на которые пользователь перемещается на данные страницы, а вкладка товары будет содержать в себе еще подкатегории: смартфоны, ноутбуки, компьютеры и комплектующие.
2.2 Внешняя структура сайта
Базовое размещение элементов на сайте:
1. Голова, шапка, хедер все это названия верхней части сайта, блок в котором будет располагаться название организации и основные сведения о том, чем занимается, под названием находится меню сайта;
2. Центральный блок, самый главный, это информация, интересная для посетителя. На главной странице будут располагаться последние поступления;
3. Футер, подвал сайта. В данную область будет добавлена информация о магазине и некоторые контактные данные.
2.3 Разработка структуры сайта для ИП «Мегабайт»
Для сайта был выбран наиболее оптимальный вариант. Внутренняя структура сайта будет иметь древовидный тип. Данная модель наиболее выгодна и проста для создания. На стартовой странице будут выделены несколько веток с разной глубиной.
На главной странице будет несколько вкладок с категориями:
1. Главная (Будет создана для того, чтобы пользователь в любой момент мог вернуться на стартовую страницу, если он находится на какой-то другой);
2. Товары (Данная вкладка будет включать в себя все товары магазина. В данной категории будут также выделены подкатегории с конкретными товарами: смартфоны, ноутбуки, компьютеры, комплектующие);
3. Услуги (Здесь будут указаны услуги, оказываемые организацией, а также цены на них);
4. Контакты (В данном разделе указываются контактные данные, местонахождение организации).
Рис. 2.3.1 - Структура сайта
По внешней структуре сильных изменений от большинства сайтов не будет. В шапке сайта будет название магазина. Под шапкой сразу же будет меню с категориями. В центральном блоке будет указаны последние поступления и новинки, скидки, акции - максимальная полезная и интересная информация для привлечения клиентов. В подвале имеются некоторые контактные данные.
3. РАЗРАБОТКА ДИЗАЙНА САЙТА
3.1 Разработка дизайна
Чтобы добиться максимального удобства и эффективности сайта, необходимо заранее определить целевую аудиторию проекта. Кто потенциальный посетитель сайта? Это могут быть люди разной возрастной категории, как молодые люди, которым легче освоиться на сайте, так и люди более взрослого возраста, которым тяжело будет разобраться.
У любого сайта существует среднестатистический типаж человека, который отличается возрастными показателями, родом занятий, увлечениями, географическим расположением и т. д. Определение целевой аудитории поможет разработать веб-дизайн, который будет привлекателен внешне и при этом на интуитивном уровне понятен людям.
Следующим этапом будет создание модулей для будущего сайта. На главной странице обычно располагаются следующие элементы:
а) название компании, интернет-магазина, информационного ресурса;
б) меню навигации (один или несколько блоков);
в) логотип компании, интернет-магазина, информационного ресурса;
г) контентный блок;
д) дополнительные блоки для рекламных баннеров и другой текстовой или графической информации.
Перед началом разработки сайта (веб-дизайна) желательно ознакомиться с интернет-порталами конкурентов и взять на заметку те решения, которые выбрали они. Базовое представление о том, как это делают другие, поможет сформировать примерную визуальную модель будущего проекта, доработанную под определенную направленность.
После анализа конкурентов переходим непосредственно к созданию модульной сетки. Она представляет собой визуальное разбитие страницы на определенные зоны. Подобное действие помогает структурировать содержимое сайта.
Зачастую основными элементами страницы являются: содержащий блок, логотип, навигация, контент, футер (нижний колонтитул), свободное пространство (по сути свободное пространство -- это не элемент дизайна, но понятие, помня о котором при составлении макета страницы, проект не будет выглядеть как нагромождение блоков).