«Разработка web-сайта для дизайн-студии» - Дипломная работа

Содержание

Введение 3

1. Теоретическая часть 6

1.1 Классификации сайтов 6

1.2 Структура сайта 11

1.3 Анализ аналогичных сайтов 20

2. Практическая часть 27

2.1 Нормативная документация 27

2.2 Разработка структуры сайта 35

2.3 Создание шапки сайта 38

2.4 Верстка сайта 44

Заключение 52

Список литературы 54

Приложения 56

Введение

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

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

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

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

Максимально удобный интерфейс: логика, структура и система навигации сайта.

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

Веб дизайн не должен мешать восприятию и читабельности текста.

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

Без соблюдения этих пунктов невозможна разработка эффективного web дизайна.

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

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

Тестированием завершается создание непосредственно web дизайна, но разработка сайта продолжается и после завершения работ по созданию веб дизайна. Поскольку даже высококлассный дизайн не гарантирует, что люди начнут пользоваться сайтом. Формирование стратегии продвижения не менее важный этап, чем разработка текстов, создание структуры или веб дизайна.

Выдержка из текста работы

1 Теоретическая часть

1.1 Классификации сайтов

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

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

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

Классы сайтов

• персональные

• коммерческие

• информационные

• официальные

• образовательные

• развлекательные

Категории сайтов

• личная страница

• новостной

• информационный

• Интернет каталог

• бизнес-сайт

• визитка

• имиджевый

• рекламный

• Интернет магазин

• корпоративный

• системами управления предприятием

Принцип построения сайта

• статичный

• CMS (система управления сайтом)

• Flash

• форум

• блог

• wiki

Состояние сайтов

• заброшенный сайт

• кустарный сайт

• малобюджетный сайт

• недоработанный сайт

• популярный сайт

• сайт для забавы

• сайт - долгострой

• тестовый сайт

• убыточный сайт

• эффективный сайт

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

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

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

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

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

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

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

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

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

Интернет-магазин может включать в себя различные интерактивные формы (гостевая книга, форум, задай вопрос), но обязательно каталог товаров и корзину заказов. Часто на главную страницу выносятся новинки товаров, "хиты продаж", специальные предложения. Эксклюзивный дизайн нацелен на увеличение числа продаж, носит специфический характер.

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

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

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

1.2 Структура сайта

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

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

Шапка сайта (логотип и название)

Меню Основной текст Реклама

подвал сайта (Копирайт)

Рис.1.1.Структура сайта

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

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

Хорошая и прозрачная структура, легкая навигация – является признаком хорошего тона. Нужно придумать названия разделам и подразделам, кратко охарактеризовать их (указать какая информации будет в них размещена). Причем подобные мероприятия нужно провести для формирования сайта любого типа: визитки, интернет-магазина или крупного развлекательно-информационного портала. Глубина вложенности страниц не должна превышать правила - «3 клика от главной страницы», но и бросаться в другую крайность, перегружая главную страницу несколькими десятками ссылок, ведущими непонятно куда, тоже не стоит, иначе сайт будет выглядеть пестро и непрезентабельно.

Заголовки для разделов и подразделов используются короткие, простые, с применением ключевых слов, по которым будет продвигаться интернет-ресурс.

Навигация сайта – «компас» пользователя

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

Навигационное меню является отражением структуры сайта, которое видит пользователь, попадая на ресурс, поэтому оно полностью (в идеале) соответствует структуре сайта.

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

Структура навигации - обзор распространенных систем навигации.

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

Меню

Меню – наиболее распространенная навигационная система, она похожа на оглавление к книге. Меню состоит из коротких текстовых активных ссылок на определенные страницы сайта. Отметим, что меню должно быть видно с любой страницы ресурса тогда пользователь сможет воспользоваться им в любой момент. Составление полного меню, благодаря которому будет осуществляться быстрый переход на искомые страницы, для больших сайтов (свыше 50 страниц) практически невыполнимая задача. Тогда на помощь приходит раскрывающееся меню, т.е. когда человек кликает на какую либо ссылку, открывается несколько дополнительных ссылок, характеризующих подразделы. Можно размещать несколько меню: одно под шапкой два других по бокам – справа и слева. В том случае, если сайт небольшой, то лучше ограничиться формированием меню в правой колонке сайта, т.к. это очень удобно и привычно для пользователя. В общем, справа лучше располагать самые важные ссылки на разделы, поскольку данная зона наиболее активна на сайте (на этот угол посетитель чаще всего смотрит, наверное, приноравливаясь нажать на крестик «закрыть» в правом верхнем углу браузера ).

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

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

Поисковая форма на сайте

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

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

Карта сайта

Карта сайта, не смотря на то, что является вспомогательным звеном в навигации, необходима для каждого веб-ресурса. Что представляет сбой карта сайта? Как и следует из названия – это модель, схематическая иерархичная структура ресурса, размещенная на одной странице, которая наглядно показывает пользователю все его разделы и подразделы. Чаще всего карту сайта выполняют в виде дерева, «стволом» которого является главная страница, а «ветвями» – разделы. Иногда применяют укороченные варианты, отображающие лишь основные вехи в структуре сайта. Ошибкой некоторых сайтостроителей является маскировка карты сайта, обычно ссылку на нее не так-то просто найти на главной странице. Считается - сделал карту сайта для робота, он и так ее найдет, пользователь же, такой чепухой вряд ли заинтересуется. На самом деле это не так. Растерявшемуся юзеру проще всего зайти по ссылке с главной страницы, разглядеть карту сайта и пройти по нужной ссылке, чем рыться в поиске или действовать «методом тыка».

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

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

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

Выпадающее меню

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

Перебор страниц

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

Пиктограммы

Пиктограммы – довольно интересная навигационная система, которая, по идее, должна быть вспомогательной. Дело в том, что графические символы не всегда одинаково истолковываются пользователем, а то, что непонятно – пугает и отталкивает. Конечно, символ «конверт» - привычно заменяет надпись «контакты» или «обратная связь», значок «генеалогического древа» - говорит нам, что за этой кнопкой таится заветная карта сайта, а схематично изображенный «домик», отсылает нас на главную страницу. Против данных символов нечего сказать, но опять-таки они рассчитаны на пользователя мало-мальски знакомого с всемирной сетью Интернет. Тот же, кто только начинает свой путь исследования «всемирной паутины» может быть ошарашен подобными графическими примочками. Если уж Вам так хочется поразить всех своей неординарностью, то постарайтесь сделать так, чтобы при наведении курсора мыши на определенный символ, рядом появлялась надпись, характеризующая его.

Индексы

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

Первую страницу, которую видит пользователь при обращении на тот или иной ресурс, называют стартовой, домашней или индексной страницей (home, index). Система гиперссылок определяет структуру Web-сайта. Страницы на сайте могут иметь линейную древовидную структуру, но чаще на каждой странице имеется несколько ссылок, что и позволяет говорить о структуре "паутина" (рис. 1.2).

Рис.1.2. Навигационные структуры сайта

Резюме

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

1.3 Анализ аналогичных сайтов

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

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

Анализ дизайна сайта включает в себя:

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

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

Анализ факторов, влияющих на восприятие пользователем информации. Дизайн сайта включает в себя информационные блоки, оформленные особенным образом. Оформление этих блоков не должно препятствовать ознакомлению посетителей с информационным содержимым страниц ресурса. Цвет фона, сливающийся с цветом текста, слишком маленьких размер шрифтов, неудобно расположенная область, в которой находится контент – оказывают негативное влияние на восприятие и усвоение пользователем важной информации. Любой посетитель приходит на веб-сайт, прежде всего, чтобы ознакомиться с его информационным содержимым, поэтому дизайн сайта не должен быть помехой для достижения этой цели.

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

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

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

Ниже представлены основные критерии анализа веб-сайтов.

Внешний вид

1. Выдержаны ли цвета, шрифты, графика в едином стиле? У всех страниц должен быть один стиль, чтобы пользователь не думал, что попал уже на другой сайт, если просто перешёл по ссылке в другой раздел сайта.

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

3. Сбалансированы ли цвета дизайна страниц?

4. Удовлетворит ли сайт целевую аудиторию? Не введёт ли в заблуждение бизнесмена, который хочет заключить контракт с фирмой, которая владеет сайтом призыв сменить памперс виртуальному ребёнку? :))))))))))

5. Сбалансирован ли макет страницы и не перегружена ли она информацией (особенно касается главных станиц)?

6. Качественна ли графика и сочетается ли она с остальными составляющими страницы?

7. Не мешает ли графика пользователю воспринимать информацию?

8. Не "режут" ли цвета сайта глаза?

9. Легко ли читается текст? Не сливается ли он с фоном?

10. Удобен ли сайт для тех людей, у которых разрешение экрана 600х800 пиклелей? Помните, что постоянноая необходимость прокручивать станицу во все четыре сороны раздражает.

11. Доступна ли информация об авторских правах и обратная связь?

12. Ясно ли предназначение сайта?

Заключение

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

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

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

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

Человек, создающий Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить – вот что отличает настоящего Web-дизайнера. Для того чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.

В данном дипломном проекте рассмотрены актуальные вопросы разработки и создания современного Web-сайта.

При этом мною были решены следующие частные задачи:

– ознакомление с современными Интернет-технологиями и их использование в настоящей разработке;

– изучение программного инструментария, применяемого для разработки и создания Web-сайтов;

– выявление и учет методов и способов представления на Web-страницах различных видов информации, не препятствующих их доступности;

– ознакомление с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительное следование им на практике;

– определение структуры Web-страниц;

– выбор стратегии разработки и создания Web-сайта.

К числу его основных отличительных особенностей можно отнести следующее:

• маленький размер файлов с кодами Web-страниц (их листинг приведен в приложении), что обеспечивает их быструю загрузку из Сети на клиентской машине;

• сжатые форматы графических файлов, что так же положительно влияет на уменьшение размера Web-страниц и времени их скачивания по каналам Сети;

• отсутствие проблем совместимости с различными браузерами, например такими широко распространенными, как Internet Explorer, Mozilla Firefox, Opera и Google Chrome.

Таким образом, материалы дипломной работы показывают, что поставленные в ней задачи полностью решены.

Список литературы

1. h**t://alzar.r*/info/dev/chto-takoe-verstka-saita/

2. h**t://ru.wikipedia.org/wiki/Adobe_Flash

3. h**t://w*w.personal-trening.com/stoit_li_ispolzovat_flash

4. Аверченков В.И. Информационный поиск в Интернете : [Учеб.пособие] / В.И. Аверченков, С.М. Рощин, Ю.Т. Трифанков; М-во образования Рос. Федерации, Брян. гос. техн. ун-т. – Брянск: Изд-во Брян. гос. техн. ун-та, 2008. – 303 с. Шифр РНБ: 2003-3/14559

5. Бабушкин М., Коростелев В. Как правильно организовать свой Web-сервер. Мир Internet. – 2010. – N3.

6. Быстро и легко создаем, программируем, шлифуем и раскручиваем web-сайт : [учеб. пособие] / под ред. Ю.М. Алексеева. – М. : Лучшие книги, 2003. – 426 с. Шифр РНБ: 2003-7/1381

7. Джамеа Крис. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон – М.: ООО «ДиаСофтЮП», 2007.– 672 с.

8. Зельдман Д. Web-дизайн по стандартам / Джеффри Зельдман ; Пер. с англ. Г. П. Кова-лева. – М. : НТ Пресс, 2007. – 440 с. : ил. – (Школа Web-мастерства).

9. Лещев Д. В. Создание интерактивного web-сайта : учеб. курс / Д. Лещев. – СПб. и др. : Питер : Питер принт, 2009. – 543 с. Шифр РНБ: 2003-7/3624

10. Максимов, В. В. Технологии создания Web-сайтов / В.В. Максимов, А.В. Алексеев С.Д. Лыткин ; Якут. гос. ун-т им. М.К. Аммосова, Центр дистанц. образования ЯГУ "Ситим", Прожект Хармонии, Инк. – Якутск : Якут. фил. Изд-ва СО РАН, 2007. – 44 с. Шифр РНБ: 2003-4/18815

11. Мартинес А. Секреты создания недорогого Web-сайта : Как создать и поддерживать удачный Web-сайт, не потратив ни копейки : [пер. с англ.] / Анна Мартинес – М. : ДМК Пресс, 2007. – 414 с. Шифр РНБ: 2003-7/1111

12. Михайлов О. А. Создание Веб-сайтов и их обновление / О.А. Михайлов ; Федер. арх. служба России, Рос. о-во историков-архивистов, Рос. гос. архив науч.-техн. документации. – М. : МАКС Пресс, 2008. – 47 с.

13. Николаев Д. Горячая десятка ошибок Web-мастера. // Мир Internet. – 2010. – N6.

14. Орлов Л. В. Как создать и "раскрутить" web-сайт в Интернет / Леонид Орлов. – М. : Альянс-Пресс, 2008. – 511 с.

15. Фйо, А. Рентабельный WEB-дизайн : 7 этапов создания Web-сайтов, окупающих ваши инвестиции / Ани Фйо ; пер. с англ. [Л.Ю. Пантюхин]. – М. : Кудиц-образ, 2012. – 336 с. Шифр РНБ: 20012-3/970

16. Флэнаган Д. JavaScript. Подробное руководство. – Пер. с англ. – СПб: Символ_Плюс, 2008. – 992 с., ил.

17. Фролов, А. В. Практика применения PERL, PHP, APACHE и MySQL для активных Web-сайтов / Александр Вячеславович Фролов, Григорий Вячеславович Фролов. – М. : Рус. ред., 2011. – 526 с.

18. Шапошников, И. Web-сайт своими руками : [практ. рук.] / Игорь Шапошников. – СПб. : БХВ-Санкт- Петербург, 2010. – 224 с.

Примечания

Есть приложения. К работе прилагается Web-разработка.

К работе прилагается программа с исходным кодом.