Модели проектирования сайта


Содержание

СОЗДАНИЕ САЙТА

Анализ существующих моделей создания сайта

Наиболее распространены три модели проектирования

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

Каскадная модель — самая простая. Она непригодна для работы над крупными сайтами

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

Рисунок 3.1.1 — Каскадная модель

«Спираль» — самая популярная модель проектирования. Ее главное достоинство — гибкость

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

Главное достоинство модели «Спираль» — возможность создания сложных проектов с постепенным их изменением и улучшением. Но есть у нее и недостаток. Дело в том, что новые идеи появляются постоянно. Если реализовывать их все, то появляется риск «зацикливания», то есть постоянной разработки сайта. Правда, решить эту проблему очень легко. Просто нужно остановиться в конце одного из циклов, запустить сайт в эксплуатацию, а потом можно будет продолжать работу, периодически радуя посетителей проекта новыми релизами. Есть у модели «Спираль» и еще один минус. Речь идет о риске превращения процесса работы в хаос. Постоянные доработки и переработки могут привести к размытости границ между этапами и, как следствие этого, к нарушению порядка работы со всеми вытекающими отсюда последствиями.

Рисунок 3.1.2 — Спиральная модель

Microsoft Solutions Framework

Microsoft Solutions Framework — модель для разработки сложных проектов

Эту модель компания Microsoft использует для разработки собственных продуктов. Тем не менее она прекрасно подходит и для проектирования работы над веб-сайтами. Суть Microsoft Solutions Framework заключается в следующем. Работа над проектом состоит из четырех этапов — анализа, планирования, разработки и стабилизации. Причем каждый из них должен достигать определенного заранее результата. Кроме того, в конце этапа обычно составляется специальный документ, в котором подробно описывается состояние проекта на данный момент времени. После прохождения полного цикла разработка возвращается на первый шаг. И так повторяется несколько раз. Правда, в отличие от модели «Спираль», здесь невозможно бесконечное «вращение» проекта, поскольку цели, необходимые для окончания каждого этапа, четко указаны.

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

Рисунок 3.1.3 — Microsoft Solutions Framework

7 шагов разработки веб-сайта: руководство к использованию

Несмотря на общепринятое мнение, центральное место в процессе дизайна и разработки веб-сайтов не всегда занимает фаза написания кода. В первую очередь приходящие на ум технологии, такие как HTML, CSS и JavaScript, и в самом деле создают образ Сети, к которому мы привыкли и определяют способы нашего взаимодействия с информацией. Что обычно остается вне поля зрения, но в то же время является едва ли не самой важной частью процесса разработки, так это стадии предварительного сбора информации, тщательного планирования, а также поддержки уже после запуска сайта. В этой статье мы поговорим о том, как может выглядеть типичный процесс разработки веб-сайта. Можно выделить разное количество этапов, из которых состоит процесс разработки. Обычно это число от пяти до восьми, но в каждом случае общая картина остается примерно одинаковой. Давайте остановимся на среднем значении. Итак, семь основных этапов разработки: 1) Сбор информации, 2) Планирование, 3) Дизайн, 4) Создание контента, 5) Разработка, 6) Тестирование, обзор и запуск 7) Поддержка.

График разработки

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

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

Жизненный цикл разработки веб-сайта

Этап 1. Сбор информации: назначение, основные цели и целевая аудитория

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

Приблизительное время: от 1 до 2 недель

Этап 2. Планирование: создание карты сайта и макета

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

Карта сайта описывает взаимосвязь между различными частями вашего сайта. Это помогает понять, насколько удобным в использовании он будет. По карте сайта можно определить «расстояние» от главной страницы до других страниц, что помогает судить о том, насколько просто пользователю будет добраться до интересующей его информации. Основная цель создания карты сайта — создать легкий с точки зрения навигации и дружественный к пользователю продукт. Это позволяет понять внутреннюю структуру будущего сайта, но не описывает то, как сайт будет выглядеть. Иногда, прежде чем приступить к написанию кода или к разработке дизайна, может быть важным получить одобрение заказчика. В этом случае создается макет (wireframe или mock-up) . Макет представляет из себя визуальное представление будущего интерфейса сайта. Но, в отличие например, от шаблона, о котором мы поговорим далее, он не содержит элементов дизайна, таких как цвет, логотипы, и т.п. Он только описывает, какие элементы будут помещены на страницу и как они будут расположены. Макет представляет собой своего рода набросок будущего сайта. Вы можете использовать один из доступных онлайн-сервисов для создания макетов. Обычно мы используем Moqups .

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

Приблизительное время: от 2 до 6 недель

Этап 3. Дизайн: шаблон страницы, обзор и утверждение

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

Приблизительное время: от 4 до 12 недель

Этап 4. Создание контента

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

Приблизительное время: от 5 до 15 недель

Этап 5. Верстка и разработка

Теперь вы наконец-то можете перейти непосредственно к верстке сайта. Все графические элементы, разработанные ранее, используются на данной стадии. Обычно в первую очередь создается домашняя страница, а затем к ней добавляются остальные страницы в соответствии с иерархией, разработанной на этапе создания карты сайта. Также на этом этапе происходит установка CMS. Все статичные элементы веб-сайта, дизайн которых был разработан ранее при создании шаблона, превращаются в реальные динамические интерактивные элементы веб-страницы. Немаловажная задача — проведение SEO-оптимизации (Search Engine Optimization), которая представляет собой оптимизацию элементов веб-страницы (заголовков, описания, ключевых слов) с целью поднятия позиций сайта в результатах выдачи поисковых систем. Валидность кода является крайне важной в этом случае.

Приблизительное время: от 6 до 15 недель

Этап 6. Тестирование и запуск

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

Приблизительное время: от 2 до 4 недель

Этап 7. Поддержка: отзывы пользователей и регулярные обновления

Важно понимать, что веб-сайт представляет из себя скорее сервис, чем продукт. Недостаточно просто «доставить» его потребителю. Также важно быть уверенным в том, что все работает, как и было запланировано, а пользователи удовлетворены конечным продуктом. Нужно также быть готовым быстро вносить изменения, если это будет необходимо. Система отзывов позволит вам выявлять возникшие проблемы, с которыми сталкиваются посетители сайта. Самой критичной задачей в подобных случаях будет решение возникших проблем настолько быстро, насколько это возможно. В противном случае, ваши пользователи скорее предпочтут другой ресурс, чем будут мириться с неудобствами. Также не следует забывать о регулярном обновлении CMS. Регулярные обновления избавят вас от ошибок и проблем с безопасностью.

Непрерывный процесс

Бонус. Чек-лист основных этапов разработки

Чтобы быть уверенным в том, что вы ничего не пропустили и завершать всю запланированную работу вовремя, забирайте себе этот чек-лист:

Заключение

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

Моделирование и проектирование сайта

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


Проектирование сайта базируется на трех слонах:

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

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

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

Моделирование можно разделить на:

  • Функциональное моделирование
  • Информационное моделирование

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

Проектирование структуры web-сайта

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

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

Как разрабатывать структуру web-сайта

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

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

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

Некоторые особенности проектирования структуры web-сайта

  1. Необходимо соблюдать однообразие элементов. При разработке структуры следует определить иерархию объектов. К примеру, каждый раздел включает в себя определенные подразделы и т.д.
  2. Следует избегать создания схожих страниц. Если однотипная информация может быть помещена на одной странице, не следует разрабатывать для нее отдельную. Например, контактную информацию можно разместить в разделе про компанию, а также в футере (нижнем блоке) каждой страницы. Нет особой необходимости выделять ее в отдельный раздел.
  3. Не создавайте разделов, дублирующих друг друга. Если функционал какого-либо блока частично повторяется во втором, избавьтесь от него. Не нужно лишний раз путать посетителей сайта.
  4. Предусмотрите простой и быстрый доступ ко всем наиболее важным разделам со всех страниц сайта.
  5. Проектирование структуры сайта должно включать составление карты основных страниц. Обязательно продумайте какие разделы наиболее необходимы для пользователя и исключите те, которые будут совершенно бесполезными. К примеру, если Ваша компания собирается выкладывать новости не чаще нескольких раз в год, не следует добавлять данный пункт в меню и создавать подобную страницу.
  6. Придумайте свой идеальный вариант структуры, полностью соответствующий тематики Вашего ресурса. Произведите анализ Ваши конкурентов и определите, какие из страниц на их сайтах являются наименее необходимыми.
Илон Маск рекомендует:  Язык с

Для того, чтобы разработка структуры веб-сайта была максимально комфортной, ее можно отобразить с помощью компьютерных программ, таких как MS Visio, Power Point или обычный Paint. Таким образом Вы сможете в графическом виде составить набор необходимых страниц, а также продумать их связи друг с другом. Также можно воспользоваться обычной ручкой и бумагой, чтобы нарисовать структуру ресурса. Стоит отметить, что для подобных целей существует специализированное ПО, но его использование не целесообразно при создании небольших сайтов.

Какие виды структуры web-сайта существуют?

Структура сайта разделяется на внутреннюю и внешнюю. При этом внутренняя структура зачастую значительно влияет на внешнюю.

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

Типовые структуры сайтов

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

Линейная структура сайта

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

Решетчатая структура сайта

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

Иерархическая структура сайта

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

Паутинообразная структура сайта

Она предполагает связь страниц “все со всеми” то есть пользователь может попасть с любой страницы ресурса на любую другую страницу, минуя все разделы. Разработка структуры веб-сайта подобного типа достаточно сложна, особенно если на ресурсе расположено много страниц. На практике пользователь просто “потеряется” в огромном количестве ссылок. Стоит отметить, что данная структура web-сайта повторяет в малом масштабе структуру всемирной сети Интернет.

Создание гибридной структуры сайта для повышения удобства его использования

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

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

Проектирование структуры сайта под определенные цели

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

Разработка структуры для сложных многостраничных сайтов

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

  1. Для начала запишите все существенные блоки, которые будет содержать Ваш сайт и решите, какие из них обязательно должны попасть на главную страницу.
  2. Теперь определитесь к каким блокам или материалам пользователь должен иметь доступ с любой страницы ресурса (к примеру, на каждой странице должна быть ссылка, идущая в корень ресурса).
  3. Составьте четкую иерархию для разделов и подразделов сайта. К примеру, перейдя в раздел “Бытовая техника” пользователь должен увидеть список страниц ее производителей или типов техники (электрочайники, холодильники и т.д.), которые представлены на сайте.
  4. Если у Вас будут размещаться статьи, решите, как пользователю будет удобней переходить от одного материала к другому. В блоге Вы можете воспользоваться примером линейной структуры сайта.

После того, как структура web-сайта описана, можете нарисовать связи между страницами. Это поможет Вам упростить восприятие строения ресурса.


Структура бизнес-сайтов и сайтов-визиток

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

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

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

Структура сайта от А до Я: виды, создание, анализ

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

Виды структуры сайта

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

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

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

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

  • site.ru/divani/
  • site.ru/divani/tkani.html
  • site.ru/divani/kozha.html
  • site.ru/pyfiki/
  • site.ru/stylya/
  • site.ru/stylya/derevo.html
  • site.ru/stylya/plastic.html
  • site.ru/stylya/rotang.html
  • site.ru/stylya/metall.html

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

Как создать структуру своего сайта. Виды сайтов и их структура

Мы определились с видом структуры, который будем использовать. Теперь нужно понять, какой она должна быть именно у вашего сайта: как будут организованы страницы, разделы, подразделы и прочее. Здесь все зависит от вида и назначения сайта. Сразу скажу, что здесь представлены именно логические структуры сайтов. Расположение блоков на видимой части сайта – той, что вы видите на экране монитора (кнопочки, меню и т.д.), – может быть любым, главное, чтобы оно казалось вам правильным.

Визитка

Стандартная структура сайта-визитки обычно проста и состоит всего из двух уровней:

Коммерческий сайт

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

Информационный сайт и блог

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

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

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

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

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

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

Если вы понимаете, что не можете собственноручно создать страницы со всевозможными вариантами сочетаний параметров товаров – вам нужны фильтры. Если у ваших товаров всего один-два параметра (например, если вы продаете конкретный вид продукции — бамбуковые одеяла, и единственный параметр, который изменяется, это размер), можно обойтись без фильтров. Фильтры могут быть одинаковыми для каждого уровня и раздела каталога, могут разрабатываться отдельно – все зависит от специфики. Упрощенная структура сайта интернет-магазина:

Проектирование структуры сайта. Мастер-класс для коммерческого СЯ

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

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

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

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

Итак, у нас получилось несколько групп:

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

В итоге получится подобная логическая схема сайта:

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

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

Даже если для страницы «с кем» у вас нет группы ключевых слов. Это и будет грамотная структура сайта.

Где и как нарисовать структуру сайта?

Если вы решились попробовать сделать структуру сайта своими руками, вам нужен удобный инструмент для рисования. Советую доступную программу для создания структуры сайта (и не только) draw.io, в котором и делались схемы для этой статьи. Куча возможностей и мало проблем. Главное, чтобы у вас был активный аккаунт на .gmail.

Как посмотреть структуру сайта конкурента?

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

Чтобы понять, какая же структура у чужого сайта, вы можете проверить ее вручную.

Зайдите на сайт и оцените сначала визуально, какие страницы и разделы могут присутствовать у конкурента. Чтобы понять, действительно ли визуальные элементы имеют какую-то иерархию в структуре сайта, обратите внимание на урлы страниц. То есть, если вы видите, что у страницы «Проемы» в меню есть подстраница «Расширение проемов», это еще не значит, что вторая страница подчиняется первой в структуре сайта (как я и говорила, визуально элементы сайта могут располагаться как угодно, это не показатель как таковой, просто чаще все же структура отображена и в визуальной составляющей сайта). Чтобы узнать, так ли это на самом деле, посмотрите на урл страницы «Расширение проемов», если в адресе страницы вы увидите папку «Проемы», значит она действительно по структуре подчиняется этой странице: site.ru/proemy/rasshirenie-proemov. Если вы видите урл вида site.ru/rasshirenie-proemov – то в структуре эта страница сама по себе, что неправильно.

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

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

Технология проектирования веб-сайтов

21.3. Фиксация внешних условий, в которых будет функционировать веб-представительство

Этот этап включает в себя два вида работ :


  • определение того, где будет размещаться веб-сайт;
  • определение целевой группы посетителей.

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

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

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

Решение этих вопросов дает следующее:

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

При втором варианте возникают другие проблемы: у каждого провайдера есть свои ограничения. Например, около 80% провайдеров работает под операционной системой Unix . Если разработка сайта будет вестись средствами Windows (например, с помощью FrontPage), провайдер может выполненную вами работу и не принять, обосновав свой отказ тем, что у него нет необходимых программных средств (например, расширений FrontPage).

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

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

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

Какая это аудитория, и что для нее характерно?

Целевых посетителей характеризуют такие признаки, как:

  • пол;
  • возраст;
  • сфера интересов;
  • интеллектуальное развитие;
  • мотивация деятельности;
  • профориентация;
  • место жительства (географический признак);
  • активное время суток;
  • благоприятные дни недели;
  • тип используемой операционной системы;
  • тип браузера и др.
Илон Маск рекомендует:  background-blend-mode в CSS

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

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

21.4. Концептуальное проектирование веб-сайта

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

Веб- сайт может являться окном предприятия во внешний мир, интерфейсом предприятия с внешним миром, элементом корпоративной информационной системы.

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

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

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

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

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

Блок обработки внешней информации – достаточно сложный, включает в себя различные алгоритмы, в том числе алгоритмы работы со знаниями.

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

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

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

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

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

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

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

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

В описании информационной модели объясняется, на основе каких входных документов и какой нормативно-справочной информации происходит формирование конкретных выходных документов (веб-страниц).

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

Таблица 21.1. Характеристика информации веб-сайта
Наименование поля Идентификатор поля Тип поля Размер поля
Имя компании ACCOUNT Текст 64
Код компании ACCOUNTID Текст 12
ФИО контакта FLNAME Текст 64
Телефон контакта WORKPHONE Текст 32
Эл.почта контакта EMAIL Текст 128
Область AREA Текст 64
Категория CATEGORY Текст 64
Предмет ISSUE Текст 64
Описание проблемы NOTES Текст Текст

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

Этапы создания сайта

или как мы делаем сайты

АНДРЕЙ БАТУРИН

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

Данный подход обеспечивает:

  • высокую скорость разработки
  • исключительное качество конечного продукта
  • разумную стоимость проекта

Процесс разработки сайта мы делим на три этапа:

  1. предварительная оценка
  2. проектирование
  3. разработка

ЭТАП — ПРЕДВАРИТЕЛЬНАЯ ОЦЕНКА

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

Зачем нужен этап?

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

Какие работы выполняются?

  • Начальный сбор требований и их краткий анализ
  • Построение объектной модели сайта
  • Формирование сметы на разработку и проектирование сайта
  • Подготовка договора на проектирование сайта

Сколько стоит?

Как это происходит на практике?

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

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

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

ЭТАП — ПРОЕКТИРОВАНИЕ САЙТА

Работы выполняются после подписания договора на проектирование сайта.

Зачем нужен этап проектирования сайта?

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

Какие работы выполняются?

  • Согласование и подписание договора на проектирование сайта
  • Сбор требований к сайту — подробный опрос заказчика
  • Формирование брифа на разработку сайта — документ содержит входные требования, полученные в ходе опроса заказчика
  • Изучение и анализ сайтов конкурентов
  • Сбор и последующий анализ семантического ядра
  • Анализ данных метрики сайта
  • Создание персонажей и проработка сценариев их взаимодействия с сайтом
  • Формирование уникального торгового предложения
  • Полная проработка объектной модели
  • Разработка прототипов всех страниц сайта

  • Написание технического задания на разработку сайта

Сколько стоит проектирование сайта?

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

Сколько потребует времени?

От 3 до 25 дней.

Что будет на выходе?

Прототипы всех страниц сайта и подробное техническое задание на разработку сайта.

Как это происходит на практике?

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

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

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

  • Что такое прототип и прототипирование сайта
  • Зачем надо делать прототип сайта
  • Виды прототипов сайтов
  • Можно ли сделать сайт без прототипа
  • Почему мы используем в прототипах чистовой текст

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

ЭТАП — РАЗРАБОТКИ САЙТА

Приступаем к этапу после согласования и подписания договора на разработку сайта. В договоре прописываются этапы выполнения работ и сроки предоставления отчетных материалов по ним.

Какие работы выполняются?

  • Согласование и подписание договора на разработку сайта
  • Разработка дизайна главной станицы сайта
  • Разработка дизайна остальных страниц сайта
  • Верстка всех страниц сайта и добавление анимационных эффектов
  • Интеграция статичных html страниц с системой управления сайтом
  • Добавление на сайт счетчиков
  • Выкладывание сайта на тестовый домен
  • Тестовое заполнение сайта
  • Тестирование сайта
  • Обучение работе с системой управления сайтом
  • Заполнение сайта
  • Выкладывание сайта на “рабочий” домен
  • Базовые настройки хостинга и работы почты
  • Оптимизация контента под поисковые запросы

Сколько стоит разработка сайта?

Стоимость напрямую зависит от объема выполняемых работ — от количества создаваемых страниц и их сложности. Поэтому, для точного расчета стоимости разработки, необходимо наличие прототипа и технического задания на разработку сайта. Минимальная стоимость работ по разработке дизайна, верстке и интеграции может составить 40 000 рублей.

Сколько потребует времени?

От 7 рабочих дней.

Что будет на выходе?

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

Как это происходит на практике?

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

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

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

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

Предоставляем клиентам набор данных по сайту, доступ в статистику, доступ в систему управления, данные от почты.

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

Если вас устраивает предложенный порядок работ, звоните или пишите нам и мы начнем сотрудничать!

Модели проектирования сайта

Оригинальное название: Elements of User Experience.
Переводчик: Александр Качанов


Введение

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

Пять уровней

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

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

Поверхность

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

Схема

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

Структура

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

Рамки

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

Стратегия

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

От фундамента к крыше

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

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

Решения, принимаемые на каждом уровне, влияют на набор решений, которые можно принять на следующих уровнях

Этот «волновой эффект» означает, что выбор какого-то решения на нижнем уровне потребует повторного переосмысления решений на верхних уровнях.

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

Илон Маск рекомендует:  Что такое код hw_api >checkin

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

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

Двойственность

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

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

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

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

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

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

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

Модель сайта

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

Уровень стратегии

На данном уровне в обоих частях действуют одни и те же стратегические цели. Нужды пользователя — это цели сайта, определяемые извне, — в частности, будущими пользователями нашего сайта. Мы должны понять, что хочет аудитория нашего сайта и как эти её желания согласуются с другими ее целями. В противовес им выступают цели сайта, которые мы определяем сами для себя. Целями сайта могут быть например коммерческие показатели («Заработать на сайте за год 1 миллион долларов») либо что-то другое («Проинформировать посетителей о нашем кандидате на выборах»). В Главе 3 мы более подробно рассмотрим эти элементы.

Уровень рамок

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

Уровень структуры

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

Уровень схемы

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

Уровень поверхности

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

Использование элементов

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

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

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

Стоит упомянуть о двух дополнительных темах, которые мы не будем здесь подробно рассматривать. Первое — это контент. Старая поговорка (старая для Web-а) гласит «главное в Web-е — это контент». Это абсолютная правда — самое главное, что Web может предложить своим пользователям, это интересующий их контент.

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

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


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

Проектирование и прототипирование сайтов

Проектирование сайта – один из важнейших ключевых этапов создания и разработки. Мы имеем огромный опыт в проектировании и реализации интернет-проектов любого уровня: от небольших корпоративных сайтов до интернет-магазинов лидеров отраслей, таких как сеть салонов оптики Линзмастер
Компания «Линзмастер»
Сеть салонов оптики и производителя фильтров для воды Барьер
Интернет-магазин «БАРЬЕР»
Бытовые фильтры для очистки воды .

Что входит в услугу проектирования сайта?

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

Для кого это нужно?

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

Стоимость и сроки

Стоимость работ по разработке проекта сайта начинается от 50 000 рублей. Срок исполнения составляет от 6 до 12 рабочих дней (без учета времени на согласование).

Примеры прототипирования (проектирования) сайтов

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

Проектирование сайта агентства-недвижимости «Парадайс» (более 15 макетов)

Проектирование корпоративного сайта (более 20 макетов)

Проектирование мебельного интернет-магазина (более 25 макетов)

Проектирование интернет-магазина плазменных панелей (более 20 макетов)

Проектирование (прототипирование) корпоративного сайта (более 10 макетов)

Проектирование корпоративного сайта строительной компании (более 10 макетов)

Проектирование интернет-магазина (более 20 макетов)

SEO проектирование. Как сделать SEO перед созданием сайта

Главная » SEO проектирование. Как сделать SEO перед созданием сайта

Как бывает в жизни чаще всего?

Заказчик решил, что ему нужен сайт.

Он обратился к разработчикам, которые ему сделали сайт.

Но перед тем как начать заниматься SEO, выясняется, что сайт нужно переделывать!

Почему такое могло произойти?

Потому, что разработчик сайта сделал тот сайт, который было проще всего сделать именно ему — простенький по дизайну, такой сайт со структурой как у конкурента. А заказчик доверился специалистам, вот и получился проект без учёта потребностей рынка и интересов потребностей посетителей сайта.

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

Что нужно сделать, чтобы такая ситуация не повторялась?

Нужно не просто заплатить за создание сайта специалисту и ждать когда его сделают! Неудачное делегирование — делегирование неудач!

Важно выполнить проектирование сайта с учётом требований SEO. Это позволит буквально сразу после создания сайта вывести сайт в ТОП и начать получать SEO траффик.

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

Заказав разработку сайта с учетом SEO проектирования, вы сэкономите:

  • деньги на переделке уже готового сайта;
  • время, которое уйдёт на переделку;
  • нервы.

Как с умом использовать SEO при создании сайта?

Этап 1. Проектируем сайт с точки зрения бизнеса.

1. Прорабатываем бизнес-модель.

Определяем по каждому продукту и услуге:

  • что именно мы продаём;
  • кому именно продаём;
  • какая ценность от покупки;
  • какие аналоги есть на рынке;
  • какие преимущества имеем перед аналогами?

Фиксируем все данные в табличку.

2. Делаем экспресс анализ конкурентов.

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

Снова добавляем данные в табличку.

3. Расставляем приоритеты по товарам.

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

Этап 2. Используем правильную структуру сайта для оптимального SEO

Что такое правильная структура сайта для оптимального SEO?

Наличие чёткой карты релевантности, в которой каждый поисковый запрос и каждый семантический кластер имеют свою собственную страницу.

Условно например так:

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

Это и называется семантическое проектирование сайта.

Например?

  • Если покупателям важны конкретные модели товаров, то на сайте для хорошего охвата трафика нужны модели товаров.
  • Или если мы видим много запросов про характеристики товаров, то разумнее заложить деление запросов по параметрам характеристик.

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

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

Этап 3. Используем продуманную иерархию страниц.

Спроектируйте структуру сайта в формате mind-map

Сделав подобную схему, вы добавите ещё больше наглядности своему проекту.

Хотя, конечно это совсем не обязательный этап, достаточно обычной карты релевантности.

Этап 4. Создание контента при проектировании SEO.

Это совсем, не очевидно для заказчиков и маркетологов, но при создании контента всегда есть программа-минимум и программа-максимум.

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

Почему именно так?

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

Хотя, наверное, найдутся те, кто скажут, что дизайн важнее… я готов поспорить… ведь дизайн можно целиком поменять за 1 — 2 недели, ну за месяц… а вот весь необходимый контент создать за 1 месяц просто физически невозможно или потребуется очень много опытных и дорогих копирайтеров.

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

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

Этап 5. Нюансы создания контента при SEO проектировании сайта.

Основные рекомендации к создаваемому контенту при SEO проектировании сайта:

  • информации на страницах не должно быть ни мало ни много, необходимо ровно столько, сколько нужно для посетителя;
  • в зависимости от продаваемого товара или потребности ЦА нужно использовать различные типы контента: фото, видео, текст;
  • сайт за счёт контента должен отвечать на вопросы посетителей, а не создавать их;
  • любой контент, который вы добавляете на сайт должен быть уникальным и актуальным;
  • не стоит считать своего посетителя последним дебилом и разжёвывать ему прописные истины, в разделе статьи или ЧАВО возможно, но не на страницах основных товаров или услуг.

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

Этап 6. Учёт технических и SEO нюансов при разработке сайта.

Тут нужно учесть очень много нюансов, например такие.

Настройка ссылок:

  • используйте единое оформление ссылок или с подчёркиванием или с дефисом и, конечно, всегда маленькими буквами и без спецсимволов;
  • лучше использовать или латиницу или транслитерацию русскоязычного текста;
  • не нужно делать большую и сложную вложенность, вполне достаточно 3 уровней вложенности адресов страниц.

Избегайте вероятности получения дублей контента на сайте:

  • используйте тэги prev и next для пагинации;
  • добавьте тег canonical в код всех страниц сайта.

Принудительно запретите к индексации:

  • страницы результатов поиска по сайту;
  • страницы сортировок и выбора количества товаров;
  • страницы фильтров;
  • корзины и страницы оформления заказа;
  • зеркала сайта (с www и без www, http и https);
  • страницы со слешем в конце/ и без слеша в конце;
  • любые дубли главной страниц и разделов сайта;
  • файлы движка и админ панели.

Избегайте битых ссылок на сайте.

Ведь битые ссылки вредят индексации и перемещению пользователей по страницам сайта.

Битые ссылки могут появиться по разным причинам, например:

  • случайная ошибка человека, который проставлял ссылку;
  • удаление материалов, на которые вела ссылка.

Следите за инструментами отвечающими за корректность индексации сайта.

За тем чтобы:

  • файл sitemap.xml был корректным;
  • в robots.txt был указан путь к sitemap.xml;
  • все страницы в sitemap.xml отдавали 200-ый ответ сервера;
  • у сайта была красивая и функциональная страница 404.

Проверьте чтобы у сайта были:

  • хлебные крошки — для упрощения навигации по сайту;
  • микроразметки schema.org, opengraph;
  • высокая скорость загрузки;
  • все JS и CSS были оптимизированы и вынесены в отдельные файлы;
  • мобильная версия.

Учтя эти нюансы вы получите — продуманный сайт, созданный по всем канонам SEO, который начнёт эффективно работать уже после запуска. Он быстрее и корректней проиндексируется поисковыми роботами, что даст ощутимый плюс вашему бизнесу!

Стоимость услуг по SEO проектированию сайтов:

  • Вариант 1. 90 000 рублей — отличное решение небольшого сайта на котором до 40 товарных групп, страниц товаров или услуг, срок создания проекта 3 недели.
  • Вариант 2. 150 000 рублей — подойдёт для сайта среднего размера на котором от 40 до 85 товарных групп, страниц товаров или услуг, срок создания проекта 4 недели.
  • Вариант 3. от 150 тысяч рублей — оптимальное решение для большого сайта, конечная цена зависит от размера вашего проекта.

Что именно вы получите когда добавите осознанное SEO в проектирование сайта?

  1. Проект карты релевантности сайта с полной раскладкой по каждому товару или услуге. Из неё будет понятно вашему дизайнеру какие должны быть пункты меню и как выглядит структура сайта.
  2. Общие рекомендации для копирайтеров и детальные задания по написанию каждого необходимого текста на сайте, по нашему проекту.
  3. Необходимые рекомендации для разработчиков, которые необходимо учесть в процессе создания сайта.
  4. SEO-аудит сайта перед тем как вы примете его у разработчика и консультации в процессе разработки сайта.

Какой основной плюс у SEO проектирования сайта?

  1. Закончив разработку по сайту, вам не придётся ни о чём жалеть и тратить дополнительные деньги на переделки и исправления.
  2. Начав заниматься SEO вы не получите наказания от поисковиков в виде БАНА или санкций за дубли контента или попадание копий страниц сайта в индекс.
  3. Ваш сайт сразу после выгрузки его на доменное имя проиндексируется поисковыми системами и начнёт получать заслуженные позиции в выдаче и конечно он будет готов к последующему развитию и поисковому продвижению.

Интересует SEO-проектирование но сомневаетесь? Прочитайте статью почему заказчику сайтов нужно заказывать SEO-проектирование!

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL