Создание каркаса сайта

Введение

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

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

Лекция имеет следующее содержание:

• Что необходимо знать
• Первые шаги
  • Пример воображаемого сайта
  • Логотип
  • Компоновка
  • О рекламе на сайте
  • Проверка компоновки с помощью валидаторов и с клиентом
• Заключение
• Дополнительное чтение
• Контрольные упражнения

Что необходимо знать

Обычно перед принятием решения о создании Web-сайта, индивидуум или компания должны иметь план того, что должен реализовать Web-сайт. Хотя цвет и графика играют важную роль, должны иметься планы для бюджета, предполагаемого рынка и намеченных целей, а также ресурсы для выполнения этих задач. Будет ли сайт просто предоставлять пользователям информацию, или он предназначен также для продажи им продуктов или услуг? Будет ли этот Web-сайт расширяться, или он предназначен для кратковременного усилия для достижения нишевого рынка (такой как сайт политической кампании или сайт, который предназначен для того, чтобы встроиться в текущую тенденцию). Будет ли сайт включать блог, юридические и информационные страницы, фото-галерею, форму для коммуникации через e-mail? Что еще ему нужно? Можно ли этот сайт сравнить с конкурентами?

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

Хотя большая часть этой информации может быть получена до того, как планируемый сайт дойдет до дизайнера, ответы на эти вопросы могут помочь решить, какой тип сайта будет создаваться, используемые цвета, и тип включаемой графики. Но один вопрос можно определить в большинстве случаев заранее — сайт должен быть доступным и легко используемым. Поэтому, внимание к коду и средствам навигации является приоритетным во всех случаях. О доступности можно будет прочитать больше далее в этом курсе (основные лекции по доступности еще должны быть опубликованы), а некоторые дополнительные моменты о вопросах юзабилити у Джекоба Нильсена (http://www.useit.com/).

Главный момент состоит в том, чтобы сохранить сайт простым, используя HTML и CSS для кода и дизайна, соответственно. Старайтесь избегать использования технологии Flash, если только она не соответствует некоторым элементам сайта (в последнее время много было сделано, чтобы технология Flash стала более доступна, и она хорошо подходит для некоторых задач, таких как видео), и подумайте о том, где может понадобиться JavaScript и другие технические средства. Это облегчит дизайнеру и программисту создание сайта (особенно, если дизайнер является программистом), и сделает сайт более совместимым с различными браузерами.

Первые шаги

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

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

1. Имя Web-сайта: Соответствует ли имя сайта компании ее сетевой активности? В данном случае имя Web-сайта совпадает с названием компании "Wiki Whatevers" Компания может захотеть разработать также некоторый девиз (http://www.powerhomebiz.com/vol112/tagline.htm), если она еще его не имеет. Девиз будет затем размещаться вместе с названием компании и логотипом на странице Web.
2. Логотип и брендинг: Я хотела бы собрать любые печатные материалы, которые были разработаны до сих пор, включая логотип, брошюры, буклеты, и т.д., чтобы можно было создать файл, содержащий такую информацию, как номера телефонов и адреса. Эта информация поможет также понять "тон", брендинг и стиль этого бизнеса лучше, исходя из ее прошлой активности. Если ничего из этого не было разработано раньше, то я захотела бы нанять специалистов по разработке логотипа (я не являюсь дизайнером логотипов, поэтому я передам эту работу субподрядчику — и вы также можете это сделать, добавляя соответствующую статью расходов в общий счет).
3. Имя домена Web-сайта: Вместе с именем сайта Web, я хотела бы знать, имеется ли имя домена. Имя домена является адресом, который использует Web-сайт для идентификации, и который пользователи будут вводить в адресной строке браузера, чтобы попасть на этот Web-сайт. Имя домена используется также как ссылка на сайт Web из внешних ресурсов. Имя домена может содержать любое количество зарегистрированных доменов более высокого уровня (http://www.ipowerweb.com/hostingdictionary/), таких как ".com," ".org," и т.д. Хотя дизайнер обычно не отвечает за регистрацию имени домена, полезно знать, что имя домена было выбрано и зарегистрировано. В некоторых случаях я должна была изменить имя сайта домена и другой контент, так как имя домена отсутствовало. Эта проблема ведет к более высокой стоимости для клиента, что было бы не нужно, если бы сначала было выбрано имя домена.
4. Исследование конкурентов: Это помогает узнать, что содержат Web-сайты конкурентов в терминах графики и контента, чтобы создаваемый сайт вышел на рынок на равных или лучших условиях при сравнении с основными конкурентами компании.
5. Информационная архитектура: Требуется ли на сайте корзина для покупок или блог? Какие планы расширения предполагает владелец сайта? Какова структура взаимных связей страниц? Эти вопросы имеют важное значение, так как необходимо будет встроить их в дизайн сайта и его средства навигации. Нужно знать, как сайт будет расширяться в будущем - это также будет определять, как создается сайт.
6. Контент сайта: Был ли разработан контент сайта? Если разработан, то вы должны немедленно получить доступ к контенту, чтобы определить средства навигации, тип дизайна, и компоновку. Классификация контента является лучшим способом разработки навигации. Контент может помочь также определить внешний вид и функции сайта; поэтому, если контент не был разработан, то может иметь смысл отложить разработку дизайна. Проверьте, что контент соответствует поставленной задаче, и планируйте обновление, так как именно контент сайта заставляет посетителей возвращаться на сайт.
7. Изучите возможности Web-хостинга: Хотя клиент может предполагать определенного провайдера Web-хостинга, вам может понадобиться что-то совершенно другое, так как не все хосты предоставляют одинаковую технологическую поддержку. Web-хост является компанией, которая обеспечивает Web-сайтам присутствие в Интернет, и некоторые Web-хосты предоставляют доступ к базам данных, которые могут понадобиться для блога или для каталогизации информации или продуктов с помощью корзины покупок. Некоторые хосты ограничивают число посетителей на сайте, и это может создавать проблемы, если сайт станет популярным. Большой список провайдеров услуг Web-хостинга и их возможностей можно найти на сайте Web Host Database (WHDB — http://whdb.com/). Проверьте, что клиент купил пространство на Web-хосте, прежде чем начинать дизайн, чтобы знать заранее параметры дизайна.
8. Контролируемый уход: Планирование контролируемого ухода означает, что вы/ваш клиент получаете контроль над тем, как пользователи будут покидать сайт. Посетители будут покидать Web-сайт неизбежно, поэтому почему бы не спланировать их уход через оплачиваемое размещение рекламы или через обмен ссылками? Планирование такого направления теперь может добавить сайту ценность в денежном выражении и/или предлагая услуги для пользователей сайта.
9. Сроки окончания: Определяют, когда сайт начнет "жить". Обычно восьми недель бывает достаточно для завершения любого небольшого проекта, подобного этому, когда клиент имеет готовый контент, согласен с предложенным в качестве образцов дизайном цвета и компоновки, и не требуется никакое сложное программирование.

Когда эти вопросы будут разрешены, можно будет сесть, прочитать контент, спланировать средства перемещения и решить, как лучше всего оптимизировать сайт для поисковых систем. Хотя вы можете не отвечать за SEO (Search Engine Optimization — Оптимизация для поисковых систем), вы можете работать в тесном сотрудничестве со специалистом по SEO, чтобы определить, как лучше всего использовать контент сайта и код (http://www.sitepoint.com/article/ultimate-seo-checklist) для генерации дополнительного трафика за счет ключевых слов в контенте, и в заголовках и подзаголовках. Также как вы не выберете ковры или диван для нового дома, прежде чем архитектор создаст чертежи, вы не будете создавать визуальный дизайн для сайта, пока не спланируете архитектуру сайта. Средства навигации и планы для SEO (http://www.seochat.com/) на этом начальном этапе сберегут время и избавят от проблем в дальнейшем. К тому времени, когда вы будете готовы создать план, вы уже должны быть хорошо знакомы с направлением сайта и его контентом, и это существенно облегчает работу с цветом и графикой.