Введение
Каждый 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-дизайнер, я хотела бы иметь следующую информацию о бизнесе, прежде чем начинать проектировать сайт. Я хочу создать список того, что хочу знать о дизайне этого сайта, чтобы не потребовалось делать никаких радикальных изменений в будущем. Это не воображаемая ситуация, так как представленные ниже вопросы необходимо обсудить с владельцами бизнеса или принимающими решение лицами, чтобы убедиться, что ваше представление проекта совпадает с их представлением.
), если она еще его не имеет. Девиз будет затем размещаться вместе с названием компании и логотипом на странице Web.
Логотип и брендинг: Я хотела бы собрать любые печатные материалы, которые были разработаны до сих пор, включая логотип, брошюры, буклеты, и т.д., чтобы можно было создать файл, содержащий такую информацию, как номера телефонов и адреса. Эта информация поможет также понять "тон", брендинг и стиль этого бизнеса лучше, исходя из ее прошлой активности. Если ничего из этого не было разработано раньше, то я захотела бы нанять специалистов по разработке логотипа (я не являюсь дизайнером логотипов, поэтому я передам эту работу субподрядчику — и вы также можете это сделать, добавляя соответствующую статью расходов в общий счет).
), таких как ".com," ".org," и т.д. Хотя дизайнер обычно не отвечает за регистрацию имени домена, полезно знать, что имя домена было выбрано и зарегистрировано. В некоторых случаях я должна была изменить имя сайта домена и другой контент, так как имя домена отсутствовало. Эта проблема ведет к более высокой стоимости для клиента, что было бы не нужно, если бы сначала было выбрано имя домена.
Исследование конкурентов: Это помогает узнать, что содержат Web-сайты конкурентов в терминах графики и контента, чтобы создаваемый сайт вышел на рынок на равных или лучших условиях при сравнении с основными конкурентами компании.
Информационная архитектура: Требуется ли на сайте корзина для покупок или блог? Какие планы расширения предполагает владелец сайта? Какова структура взаимных связей страниц? Эти вопросы имеют важное значение, так как необходимо будет встроить их в дизайн сайта и его средства навигации. Нужно знать, как сайт будет расширяться в будущем - это также будет определять, как создается сайт.
Контент сайта: Был ли разработан контент сайта? Если разработан, то вы должны немедленно получить доступ к контенту, чтобы определить средства навигации, тип дизайна, и компоновку. Классификация контента является лучшим способом разработки навигации. Контент может помочь также определить внешний вид и функции сайта; поэтому, если контент не был разработан, то может иметь смысл отложить разработку дизайна. Проверьте, что контент соответствует поставленной задаче, и планируйте обновление, так как именно контент сайта заставляет посетителей возвращаться на сайт.
). Проверьте, что клиент купил пространство на Web-хосте, прежде чем начинать дизайн, чтобы знать заранее параметры дизайна.
Контролируемый уход: Планирование контролируемого ухода означает, что вы/ваш клиент получаете контроль над тем, как пользователи будут покидать сайт. Посетители будут покидать Web-сайт неизбежно, поэтому почему бы не спланировать их уход через оплачиваемое размещение рекламы или через обмен ссылками? Планирование такого направления теперь может добавить сайту ценность в денежном выражении и/или предлагая услуги для пользователей сайта.
Сроки окончания: Определяют, когда сайт начнет "жить". Обычно восьми недель бывает достаточно для завершения любого небольшого проекта, подобного этому, когда клиент имеет готовый контент, согласен с предложенным в качестве образцов дизайном цвета и компоновки, и не требуется никакое сложное программирование.
Когда эти вопросы будут разрешены, можно будет сесть, прочитать контент, спланировать средства перемещения и решить, как лучше всего оптимизировать сайт для поисковых систем. Хотя вы можете не отвечать за SEO (Search Engine Optimization — Оптимизация для поисковых систем), вы можете работать в тесном сотрудничестве со специалистом по SEO, чтобы определить, как лучше всего использовать контент сайта и код (http://www.sitepoint.com/article/ultimate-seo-checklist) для генерации дополнительного трафика за счет ключевых слов в контенте, и в заголовках и подзаголовках. Также как вы не выберете ковры или диван для нового дома, прежде чем архитектор создаст чертежи, вы не будете создавать визуальный дизайн для сайта, пока не спланируете архитектуру сайта. Средства навигации и планы для SEO (http://www.seochat.com/) на этом начальном этапе сберегут время и избавят от проблем в дальнейшем.
К тому времени, когда вы будете готовы создать план, вы уже должны быть хорошо знакомы с направлением сайта и его контентом, и это существенно облегчает работу с цветом и графикой.
Пример воображаемого сайта
Этот воображаемый сайт принадлежит компании, которая создает свободно распространяемый (Open Source) код для wiki, и в среднем в неделю они создают не менее трех новых вариантов кода. Так как код является бесплатным для использования и модификации, то владельцы сайта хотят монетизировать сайт (получать от него деньги) через пожертвования, размещение рекламы и дополнительные услуги, предлагаемые программистами. Название сайта "Wiki Whatevers" и имя домена были выбраны. Контент был разработан, и он содержит фрагменты кода, каталоги которые надо создать, статьи и биографии некоторых программистов, участвующих в этом проекте. Web-хост обеспечивает доступность базы данных MySQL (http://www.mysql.com/), и может обеспечить самые большие всплески трафика без простоя. Теперь пора собрать вместе все объекты, которые будут использоваться на сайте:
Для применения существующего логотипа компании необходимо подготовить его цифровую копию для использования на Web-сайте клиента. Для этого требуется сканер для сканирования изображения в графической программе, такой как Photoshop (http://www.adobe.com/products/photoshop/index.html) или Gimp (http://www.gimp.org/). Размер логотипа я определю позже, когда будет определена компоновка. Я сохраняю изображение с разрешением 72 dpi (dot per inch), что позволит получить более быстрое время загрузки. Возможно, что этот логотип будет использоваться также для пункта #4 ниже.
Фотографии программистов будут использоваться на странице персонала (или странице "About"), поэтому для этого проекта необходимо получить их цифровые изображения. Они могут либо предоставить фотографии для сканирования или прислать цифровые изображения. Если они присылают цифровые изображения, то желательно иметь размер больше планируемого, поэтому подходящим будет изображение 300 dpi, или полноразмерное изображение, которое можно будет уменьшить потом до требуемого размера.
Клиент решил использовать блог, так как они уже имеют достаточно контента для поддержания этого блога в активном состоянии в течение нескольких следующих месяцев. К счастью, клиент выбрал провайдера Web-хостинга, который знаком с блогами и имеет необходимые возможности для работы с базами данных и высоким трафиком — включая пиковые нагрузки трафика. Этот хост предоставляет также несколько решений для расширения, отличное предложение, если клиент захочет развиваться. Если рабочее время хоста гарантировано, то клиенту будет удобнее оставаться с тем же хостом в течение всей фазы роста. Эта возможность оставаться с поставщиком хост-услуг в течение ряда лет существенно облегчает жизнь.
С помощью FTP (на рынке существует несколько вариантов для выбора, свободно доступные продукты, такие как Filezilla (http://filezilla-project.org/), или fireftp (http://fireftp.mozdev.org/) для Firefox, или коммерческие клиенты, такие как CuteFTP (http://www.cuteftp.com/)), я загружаю статическую страницу, которая объявляет о скором появлении сайта.. "Under Construction" является ужасной фразой, которую иногда используют, так как посетители сайта могут не вернуться, если они не будут знать дату "открытия". Вместо этого используйте страницу, которая содержит название компании, что они собираются предложить, дату, когда сайт станет активным, и контактную информацию (адрес e-mail отлично подходит — если компания имеет стандартный офис, используйте также почтовый адрес и номер телефона). Еще лучше использовать форму e-mail, которую посетители могут использовать,
чтобы получить уведомление, когда сайт заработает. Последнее предложение создает для клиента потенциальных заказчиков, даже еще до того, как сайт будет готов к работе.
Используя информацию о контенте/структуре, полученную от клиента, и тот факт, что они хотят, чтобы рекламное пространство было встроено во все страницы, я создаю архитектуру для сайта и планирую средства перемещения и текстовые ссылки. Я использую также эту копию для планирования ключевых слов для SEO сайта.
Используя цвета логотипа, я выберу две или три цветовые схемы для представления клиенту для утверждения.
Затем я выберу другие фотографии или иллюстрации в базе данных фотоматериалов, такой как iStock (http://www.istockphoto.com/index.php) или Comstock (http://www.comstock.com/web/default.asp). Но обязательно поищите различные варианты, так как некоторые компании фотоматериалов предлагают распродажи и другие выгодные сделки, от которых бывает трудно отказаться. Использование баз данных фотоматериалов не так дорого, и избавляет от проблем, связанных с вопросами авторских прав (http://www.templetons.com/brad/copymyths.html). Мне понадобятся также любые изображения, созданные компанией — или которые они создадут — чтобы сопроводить какой-либо код, статьи "как сделать", и записи блога.
Примечание: Два последних шага будут рассмотрены в следующей лекции курса; помните, что клиент должен утвердить компоновку визуального макета, прежде чем начинать добавлять ко всему этому цвета и графику!
Логотип
Логотип является жизненно важной частью брендинга любой компании. Хотя большинство компаний не разбрасываются логотипом, так как это произведение искусства будет представлять их бизнес многие годы, другие клиенты будут менее озабочены образом, который представляет компанию. Из опыта можно сказать, что компания, которая не тратит время и деньги на профессиональный логотип, обычно никогда не потратит эти деньги — независимо от логики ваших аргументов убедить в обратном.
Владельцы компании Wiki Whatevers учились в Технологическом институте Джорджии (Georgia Tech), поэтому они использовали цвета своего института - золотой и черный - в дизайне логотипа. Но, хотя логотип и является упрощенным, по крайней мере, с ним можно легко работать с точки зрения цветов и компоновки. Рисунок 9.1 показывает логотип:
(рис 9.1) Логотип компании Wiki Whatevers Проблема здесь состоит в том, что я просто отсканировала печатный логотип, собираясь использовать тот же самый логотип в сети. Печатные цвета, которые являются CMYK (http://desktoppub.about.com/cs/basic/g/cmyk.htm) (Cyan, Magenta, Yellow и Key, или Black - черный), не будут совпадать с цветами Web, которые состоят из RGB (Red, Green, Blue). Поэтому мне нужно попробовать сделать небольшую подгонку цветов, чтобы цвета Web соответствовали логотипу как можно ближе. Существует три способа выполнить эту задачу:
Связаться с печатником и выяснить, какие цвета использовались при печати логотипа Wiki Whatevers на напечатанных ранее материалах. Обычно печатники используют цвета Pantone (http://www.pantone.com/pages/pantone/index.aspx), и компания Pantone предоставляет инструменты, которые помогают дизайнерам согласовать цвета печати с цветами Web. Эта система согласования цветов Pantone Colour Matching может находиться у печатника под рукой, поэтому печатник может помочь согласовать цвета печати с соответствующими подходящими цветами Web, позволяя избежать затрат на приобретение инструментов Pantone.
Так как владельцы Wiki Whatevers используют цвета Georgia Tech, можно посетить сайт Georgia Tech, чтобы проверить, нельзя ли подобрать цвета из Web. Можно использовать графическую программу для извлечения цвета с сайта Web, делая снимок с экрана (http://www.iopus.com/guides/screenshot.htm) и перенося это изображение в графическую программу для использования "пипетки" или другого инструмента для согласования цветов.
Внимательно сравните печатные материалы с цветами Web, чтобы попробовать подобрать как можно более близкие. В некоторых случаях цвета могут существенно отличаться. В других случаях цвета могут казаться слишком похожими, чтобы беспокоиться об изменении.
Отсканируйте печатное изображение программой сканирования, которая воспринимает CMYK и использует Pantone Colour Swatches программы Photoshop для как можно более точного согласования. Это последнее решение работает только в том случае, если сканер воспринимает CMYK и вы имеете программу Photoshop.
В данном случае можно было бы подобрать золотой цвет для точного соответствия по изображению талисмана на сайте Georgia Tech Athletic (http://ramblinwreck.cstv.com/). Золотой имеет код #eab200, а черный, он и есть черный ( #000000 ). Фон, который имеет темно-зелено-синий цвет ( #002123 ) использовался для отбрасывания тени на логотипе. Поэтому трудная проблема разрешилась легко с помощью простого талисмана с изображением шмеля, показанного на рисунке 9.2.
(рис 9.2) Часть талисмана Georgia Tech, использованная для подбора цветов логотипаПримечание: Очень редко можно встретить компанию, которая не использует цифрового изображения своего логотипа или бренда в сети для таких объектов как визитные карточки или фирменные бланки, если не только для реального присутствия в Web. Однако многие эти компании видимо используют цвета, которые представлены в Web, а не изменяют цвета в соответствии со своими печатными материалами. Поэтому не всегда полагайтесь на цвета Web для сайта компании, особенно если эти цвета не совпадают с печатными материалами компании, такими как брошюры или фирменные бланки писем. Вместо этого выясните в компании, какие цвета они предпочитают — они могут просто не обращать внимания, что цвета различаются.
Компоновка
Для компоновки и ради простоты этого учебного руководства будет представлена только одна компоновка. Я выбрала компоновку блога, которая предполагает наиболее частые изменения в копии тела вверху, легкий доступ к средствам навигации между верхним колонтитулом и этой последней копией тела, и доступ к предыдущим записям "ниже сгиба" на домашней странице. Термин "ниже сгиба" происходит из газетного производства. Когда газета находится на прилавке, то читатель может видеть только ту часть, которая находится "над сгибом" газеты (т.е. физического сгиба газеты). Эта часть — включая изображения — является очень важной, так как нужно соблазнить читателя купить газету.
Такая же теория "над сгибом" применима к дизайну Web-сайта. Все, что выводится на мониторе, когда посетитель входит на сайт находится "над сгибом". Любой материал, который зритель должен прокрутить вниз, чтобы увидеть, находится "ниже сгиба". Поэтому задача состоит в том, чтобы сохранить внимание посетителя Web-сайта с первых изображений и материала, который они видят на мониторе, независимо от разрешения (что является только одним из хороших поводов протестировать Web-сайт на ряде различных мониторов/разрешений экрана — тема, рассматриваемая далее в этой лекции). Грубый пример начальной компоновки для Wiki Whatevers показан на рисунке 9.3:
(рис 9.3) Грубая компоновка (каркас) домашней страницы Wiki WhateversЭта компоновка остается той же самой на всем сайте, но может изменяться для архивированных страниц для вывода статей и записей блога без изображений. Эта согласованность нужна для сохранения внимания пользователя. Когда пользователи "привыкли" к определенному виду сайта, как его использовать, они обычно не любят видеть изменения на различных страницах. Вот элементы, которые будут входить в конкретный дизайн:
Верхний колонтитул: Верхний колонтитул будет небольшим, так как я не хочу, чтобы логотип занимал слишком много места на странице. Хотя логотип является второстепенным свойством, цвета этого логотипа будут влиять на общую цветовую схему сайта. Верхний колонтитул находится вверху, традиционное размещение, а логотип будет соединен с домашней страницей блога. Соединение через логотип является удобным, так как многие пользователи привыкли использовать логотип в качестве средства возврата на домашнюю страницу любого данного сайта.
), которые используют считыватели экрана для "чтения" страницы Web. Будет ли текст навигации помещен вверху или внизу страницы не имеет большого значения, за исключением значения для дизайна,
так как слепые читатели могут сканировать страницу снизу вверх и наоборот также быстро, как и зрячий человек. Помня об этом, дизайнер и его клиент должны решить, повторять ли средства навигации на данной странице в другом месте. Если для навигации используются изображения и навигационные ссылки не повторяются в виде текста, то не забудьте включить описательные атрибуты alt для этих навигационных изображений. В этом случае пользователи, которые используют считыватель экрана или отключили вывод изображений будут знать, тем не менее, для чего предназначены эти изображения. Посмотрите соответствующий раздел лекции 17 о том, как правильно использовать атрибуты alt.
Последняя запись блога: Самая последняя запись блога заслуживает выделения, а возможность сделать эту запись главным центром страницы "над сгибом" будет выгодна клиенту и его читателям. Как только зритель перемещается на этот сайт, он увидит этот материал. Однако очевидное размещение означает, что клиенту нужно будет постоянно согласованно обновлять сайт или рисковать потерей возвращающихся посетителей — маловероятно, что люди будут возвращаться в блог, если в нем не будут публиковаться новые материалы.
Предыдущие записи блога: Здесь будут располагаться предыдущие записи блога - от трех до пяти записей должно быть достаточно, чтобы зрители могли сразу точно понять, что можно ожидать от этого сайта при постоянном посещении. Изображения должны быть хорошо сделаны, но не являются обязательными, так как в этой области обычно располагаются статьи, которые помещают на страницах после сгиба, а не вывешиваются на стойках (записи блога). Решение об использовании изображений может основываться на том, является ли время загрузки проблемой, или если предыдущая статья действительно нуждается в изображении, чтоб заставить зрителя щелкнуть на нем для перехода к полной статье/записи блога.
Правый столбец: Здесь зритель может получить доступ к записям блога, перечисленным по категориям, архивам, и другим типам контента сайта. Примерами других страниц будут страницы "О компании", индекс сайта и контактная информация. Важно решить, как вы хотите перечислить эти объекты в боковом столбце, так как блог будет создаваться согласно определенным категориям, созданным страницам и архивным материалам. С ростом сайта эти списки будут становиться длиннее, возможно до того момента — в данном случае — когда категории могут быть единственным списком, который зритель увидит "над сгибом". Клиенты могут решить, что "страницы" важнее, чем категории, и показанный выше список может измениться, помещая страницы над категориями. Как дополнительное замечание, этот список включает не все, что можно включить в боковую панель или боковой столбец. Некоторые клиенты могут решить, что два столбца будет лучше,
делая блог трех-столбцовым, а не двух-столбцовым, как показано выше.
Информация нижнего колонтитула: Информация нижнего колонтитула является жизненно важной, так как предоставляет зрителям с одного взгляда основную информацию о компании и ее Web-сайте, исключая необходимость рыться в ее поисках. Название компании, возможно повторение логотипа, адрес, электронный адрес e-mail, ссылки (на контактную форму, уведомления о конфиденциальности, отказ от ответственности, юридическая информация), и сводка новостей являются хорошими кандидатами для включения в нижний колонтитул страницы. Как упоминалось ранее, можно также повторить средства навигации в виде только текстовой версии.
Реклама: В этой компоновке реклама размещается вслед за последней записью блога и перед предыдущими записями блога в горизонтальном баннере. Это предоставляет клиенту гибкость выбора текстовой рекламы или живописного баннера для своих рекламных потребностей. Такой тип компоновки для рекламы помещает только одно рекламное объявление "над сгибом" и другое "под сгибом". Такого количества рекламы вполне достаточно для большинства сайтов. Кроме того, это переводит рекламу на вторичную позицию, ниже материала тела контента сайта.
Эта компоновка позволяет зрителю быстро переходить от материала тела к средствам навигации без прокрутки страницы, и позволяет также пользователям видеть другие темы, которые могут быть представлены на сайте как минимум с помощью дополнительных ссылок на категории сайта. Даже если зритель никогда не прокручивает страницу ниже линии "сгиба", компоновка предоставляет все основные элементы, которые могут понадобиться зрителю, размещенные "выше сгиба".
О рекламе на сайте
Достоинством для клиента и услугой для читателя будет контекстно-зависимая реклама на сайте. Другими словами, если контент сайта посвящен цветам, то реклама для этого сайта может включать услуги ландшафтного дизайна, выездное обслуживание (в дополнение к цветочным аранжировкам), и т.д. Поэтому для сайта, который предоставляет программные материалы с открытым кодом, можно поискать рекламу, которая соответствует программному обеспечению с открытым кодом. Google Adsense (https://www.google.com/adsense/), как один из источников, может помочь в этом отношении, так как реклама является связанной с контентом. Использование такого типа рекламы является хорошей идеей, пока трафик
не вырастет в достаточной степени, чтобы привлечь на сайт других рекламодателей. Однако всегда думайте о последствиях для SEO, прежде чем принимать рекламные объявления, так как некоторая реклама может отрицательно влиять на позицию клиента на страницах поиска. Некоторыми хорошими ресурсами по SEO являются следующие:
Интеллектуальная структура сайта для лучшего SEO! (http://dev.opera.com/articles/view/intelligent-site-structure-for-better-se/), Джуст де Валк.
Семантический HTML и оптимизация поисковых систем (http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/), Джуст де Валк.
Как присоединенные программы могут влиять на ранжирование поиска (http://www.clickz.com/showPage.html?page=3497826), Фредрик Маркини.
Новый отчет исследует, как ранг PPC влияет на трафик (http://www.searchengineguide.com/jennifer-laycock/new-report-explores-how-ppc-rank-affects-traffic.php), Дженифер Лейкок.
Примечание: Вы можете не нести ответственность за рекламу на сайте как дизайнер, если только вы не проектируете сайт для себя, но если вы планируете работать с рекламным или дизайнерским агентством в будущем, вы можете захотеть получить некоторое знакомство с рекламой в этих дизайнерских фирмах. Чем больше вы знаете о том, что делает сайт успешным, тем больше успеха вы встретите в своей карьере дизайнера. При возможности узнайте как можно больше о маркетинге (для себя и своих клиентов) и тактиках оптимизации поисковых машин.
Проверка компоновки с помощью валидаторов и с клиентом
Прежде чем реализовать эту компоновку с помощью кода, я хотела бы получить одобрение компоновки (или каркаса ) от клиента. Одной из тактик, которую я использую, чтобы убедить клиента, что одна компоновка лучше другой, состоит в напоминании, что кодирование дополнительных компоновок стоит денег. Это поможет клиенту выбрать одну компоновку, с тем, что код можно поправить позже, чтобы сделать некоторые структурные изменения.
Следующий шаг состоит в кодировании компоновки и последующей валидации кода. Для подтверждения того, что использованный для компоновки код HTML и CSS не содержит ошибок, я применяю службы W3C Markup Validation Service (http://validator.w3.org/) и W3C CSS Validation Service (http://jigsaw.w3.org/css-validator/). В эти службы валидации можно загрузить файлы прямо со своего компьютера, поэтому нет необходимости загружать их на сайт клиента для тестирования. Этот тест позволяет дизайнеру и/или программисту найти все ошибки во внешнем интерфейсе, которые можно разрешить, прежде чем сайт станет наполняться кодом от изображений, рекламы, и других объектов, добавляемых на страницу.
Доступность является еще одной большой проблемой — проверка, что сайт могут использовать люди с физическими недостатками, такими как слепота или моторная недостаточность. Это не такой простой процесс проверки, как в случае валидации CSS и HTML. Существуют средства проверки, такие как TAWDIS (http://www.tawdis.net/taw3/cms/en), но в идеале это нужно тестировать с реальными пользователями, и выполнить качественный анализ своих сайтов на доступность — механизированное средство проверки не может окончательно сказать, будет ли сайт доступен или нет, хотя оно может дать некоторые указания, что правильно, а что неправильно. Иногда могут также возникать ошибочные решения. В дальнейшем в курсе будет представлена более полная информация о доступности.
Необходимо также протестировать компоновку на различных доступных браузерах, чтобы знать, что Web-сайт сможет просматривать максимально возможное число пользователей Web. Это можно сделать, имея доступными системы Mac, Windows, Linux и Mobile, все с различными установленными браузерами, или использовать эмуляторы, такие как VMWare Fusion (http://en.wikipedia.org/wiki/VMware_Fusion) для моделирования различных систем на одном компьютере, но это достаточно кропотливо и длительно. Другая возможность состоит в использовании специальных служб, таких как BrowserCam (http://www.browsercam.com/Default2.aspx), которые позволяют увидеть, как будет выглядеть страница на различных браузерах и системах (включая большинство старых браузеров). Они предлагают 24-часовой бесплатный пробный период, чтобы можно было убедиться, что эта служба вам подходит. Плата за использование после
пробного периода себя оправдывает, особенно, если вы проектируете большое число сайтов и тестируете на большом числе различных браузеров.
Наконец, будет хорошей идеей согласовать все с клиентом, чтобы сообщить ему, что код для компоновки сгенерирован, и что он прошел валидацию; можно также проинформировать клиента, сколько потребуется сделать в каркасе изменений, чтобы заставить его работать на различных браузерах. Только после того, как код будет сгенерирован, валидация завершена, и одобрение от клиента получено, можно начинать добавлять цвета, изображения, и любой другой код, как, например, код рекламы. Хотя эта работа может показаться скучной, но лучше подтвердить всю валидацию и получить одобрение клиента, прежде чем добавлять какие-то детали. Иначе придется выполнить много лишней работы, так как, в конечном счете, обнаружатся проблемы с кодом и несовместимость с браузерами. Кроме того, любые живописные элементы или основной материал могут отвлекать внимание клиента,
когда он попытается оценить реальную архитектуру сайта.
После завершения этого процесса можно начинать работать над текстом сайта, изображениями, и цветами. Как это начать? Об этом в следующей лекции!
Заключение
Web-дизайнер часто выполняет различные функции, так как дизайн Web-сайта опирается на множество факторов. Будет ли этот сайт увеличиваться со временем, или он будет оставаться статическим? Сможет ли провайдер Web-хостинга обеспечить требуемое качество обслуживания и пространство для развития, или клиенту придется переходить с одного Web-хоста на другой Web-хост при развитии сайта? И если дизайнер не может успешно выполнить все задачи дизайна, имеются ли люди, которые могут в этом помочь?
Поэтому, кроме цвета и графики, требуется иметь некоторое основание, на котором строится этот Web-сайт. Задача создания сайта влияет на дизайн, и все вопросы, которые могут стать проблемами в дальнейшем, можно разрешить на этапе планирования. Такая способность разрешать проблемы до их появления, отличает профессионального дизайнера.
Когда основание создано, и архитектура и каркас сайта разработаны, дизайнер может затем начинать работать с цветовыми схемами для разработки всего Web-сайта для утверждения клиентом.
Дополнительное чтение
Вот несколько других сайтов, которые предлагают памятки для дизайнера Web-сайта:
Памятка начинающего дизайнера (http://www.diveindesigns.com/home/dd1/page_17)
Памятка по юзабилити Web от Net Mechanic (http://www.netmechanic.com/news/vol7/design_no4.htm)
Памятка дизайнера Max Design (http://maxdesign.com.au/presentation/checklist.htm)
Памятка по юзабилити Usability First (http://www.usabilityfirst.com/websites/index.txl)
Памятка David Skyrme and Associates (http://www.skyrme.com/tools/webplan.htm)
Памятка SCORE по дизайну Web-сайта (http://www.score.org/eb_42.html)
Контрольные вопросы
Что необходимо иметь под рукой, прежде чем начинать разрабатывать дизайн Web-страницы?
Почему необходимо создать список всех объектов, которые планируется использовать на странице Web?
Почему важно тщательно выбирать провайдера Web-хостинга?
Дизайнер может выполнять многие функции, но что нужно сделать, если клиент просит создать логотип, а вы не имеете никакого представления о том, что надо делать?
Назовите две важные причины для исследования Web-сайтов конкурентов компании.
Что такое CMYK, и что означают эти буквы?
Назовите, по крайней мере, два способа преобразования CMYK в соответствующие цвета RGB.
Назовите одну из причин, почему дизайнер должен использовать текст для навигации, по крайней мере, в одной области компоновки Web-страницы?
Почему дизайнер должен придерживаться согласованной компоновки сайта Web на всех страницах сайта?
Назовите одну из причин, почему код сайта должен пройти валидацию на ранних этапах дизайна.
Об авторе
Линда Гоин получила степень бакалавра (BFA) в области визуальной коммуникации со специализацией в бизнесе и маркетинге, и степень MA по Американской истории со специализацией по Реформации. Хотя последняя степень кажется не соответствующей первому полученному образованию, Линда использует свой 25-летний опыт дизайна на сайтах, посвященных археологическим раскопкам и изучению материальной культуры.
Похвальные отзывы о ее работе включают пятнадцать первых премий Colorado Press Association, многочисленные премии по изящным искусствам и графическому дизайну, и интервью о разработке контента в The Wall St. Journal, Chicago Tribune, Psychology Today, и L.A. Times. Линда является автором нескольких е-книг по Web- дизайну, доступности и — как побочная линия — пишет также персональные финансовые статьи и пишет для некоторых SEO pros.
Материалы этого курса имеют лицензию
Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Введение
Каждый 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-дизайнер, я хотела бы иметь следующую информацию о бизнесе, прежде чем начинать проектировать сайт. Я хочу создать список того, что хочу знать о дизайне этого сайта, чтобы не потребовалось делать никаких радикальных изменений в будущем. Это не воображаемая ситуация, так как представленные ниже вопросы необходимо обсудить с владельцами бизнеса или принимающими решение лицами, чтобы убедиться, что ваше представление проекта совпадает с их представлением.
), если она еще его не имеет. Девиз будет затем размещаться вместе с названием компании и логотипом на странице Web.
Логотип и брендинг: Я хотела бы собрать любые печатные материалы, которые были разработаны до сих пор, включая логотип, брошюры, буклеты, и т.д., чтобы можно было создать файл, содержащий такую информацию, как номера телефонов и адреса. Эта информация поможет также понять "тон", брендинг и стиль этого бизнеса лучше, исходя из ее прошлой активности. Если ничего из этого не было разработано раньше, то я захотела бы нанять специалистов по разработке логотипа (я не являюсь дизайнером логотипов, поэтому я передам эту работу субподрядчику — и вы также можете это сделать, добавляя соответствующую статью расходов в общий счет).
), таких как ".com," ".org," и т.д. Хотя дизайнер обычно не отвечает за регистрацию имени домена, полезно знать, что имя домена было выбрано и зарегистрировано. В некоторых случаях я должна была изменить имя сайта домена и другой контент, так как имя домена отсутствовало. Эта проблема ведет к более высокой стоимости для клиента, что было бы не нужно, если бы сначала было выбрано имя домена.
Исследование конкурентов: Это помогает узнать, что содержат Web-сайты конкурентов в терминах графики и контента, чтобы создаваемый сайт вышел на рынок на равных или лучших условиях при сравнении с основными конкурентами компании.
Информационная архитектура: Требуется ли на сайте корзина для покупок или блог? Какие планы расширения предполагает владелец сайта? Какова структура взаимных связей страниц? Эти вопросы имеют важное значение, так как необходимо будет встроить их в дизайн сайта и его средства навигации. Нужно знать, как сайт будет расширяться в будущем - это также будет определять, как создается сайт.
Контент сайта: Был ли разработан контент сайта? Если разработан, то вы должны немедленно получить доступ к контенту, чтобы определить средства навигации, тип дизайна, и компоновку. Классификация контента является лучшим способом разработки навигации. Контент может помочь также определить внешний вид и функции сайта; поэтому, если контент не был разработан, то может иметь смысл отложить разработку дизайна. Проверьте, что контент соответствует поставленной задаче, и планируйте обновление, так как именно контент сайта заставляет посетителей возвращаться на сайт.
). Проверьте, что клиент купил пространство на Web-хосте, прежде чем начинать дизайн, чтобы знать заранее параметры дизайна.
Контролируемый уход: Планирование контролируемого ухода означает, что вы/ваш клиент получаете контроль над тем, как пользователи будут покидать сайт. Посетители будут покидать Web-сайт неизбежно, поэтому почему бы не спланировать их уход через оплачиваемое размещение рекламы или через обмен ссылками? Планирование такого направления теперь может добавить сайту ценность в денежном выражении и/или предлагая услуги для пользователей сайта.
Сроки окончания: Определяют, когда сайт начнет "жить". Обычно восьми недель бывает достаточно для завершения любого небольшого проекта, подобного этому, когда клиент имеет готовый контент, согласен с предложенным в качестве образцов дизайном цвета и компоновки, и не требуется никакое сложное программирование.
Когда эти вопросы будут разрешены, можно будет сесть, прочитать контент, спланировать средства перемещения и решить, как лучше всего оптимизировать сайт для поисковых систем. Хотя вы можете не отвечать за SEO (Search Engine Optimization — Оптимизация для поисковых систем), вы можете работать в тесном сотрудничестве со специалистом по SEO, чтобы определить, как лучше всего использовать контент сайта и код (http://www.sitepoint.com/article/ultimate-seo-checklist) для генерации дополнительного трафика за счет ключевых слов в контенте, и в заголовках и подзаголовках. Также как вы не выберете ковры или диван для нового дома, прежде чем архитектор создаст чертежи, вы не будете создавать визуальный дизайн для сайта, пока не спланируете архитектуру сайта. Средства навигации и планы для SEO (http://www.seochat.com/) на этом начальном этапе сберегут время и избавят от проблем в дальнейшем.
К тому времени, когда вы будете готовы создать план, вы уже должны быть хорошо знакомы с направлением сайта и его контентом, и это существенно облегчает работу с цветом и графикой.
Пример воображаемого сайта
Этот воображаемый сайт принадлежит компании, которая создает свободно распространяемый (Open Source) код для wiki, и в среднем в неделю они создают не менее трех новых вариантов кода. Так как код является бесплатным для использования и модификации, то владельцы сайта хотят монетизировать сайт (получать от него деньги) через пожертвования, размещение рекламы и дополнительные услуги, предлагаемые программистами. Название сайта "Wiki Whatevers" и имя домена были выбраны. Контент был разработан, и он содержит фрагменты кода, каталоги которые надо создать, статьи и биографии некоторых программистов, участвующих в этом проекте. Web-хост обеспечивает доступность базы данных MySQL (http://www.mysql.com/), и может обеспечить самые большие всплески трафика без простоя. Теперь пора собрать вместе все объекты, которые будут использоваться на сайте:
Для применения существующего логотипа компании необходимо подготовить его цифровую копию для использования на Web-сайте клиента. Для этого требуется сканер для сканирования изображения в графической программе, такой как Photoshop (http://www.adobe.com/products/photoshop/index.html) или Gimp (http://www.gimp.org/). Размер логотипа я определю позже, когда будет определена компоновка. Я сохраняю изображение с разрешением 72 dpi (dot per inch), что позволит получить более быстрое время загрузки. Возможно, что этот логотип будет использоваться также для пункта #4 ниже.
Фотографии программистов будут использоваться на странице персонала (или странице "About"), поэтому для этого проекта необходимо получить их цифровые изображения. Они могут либо предоставить фотографии для сканирования или прислать цифровые изображения. Если они присылают цифровые изображения, то желательно иметь размер больше планируемого, поэтому подходящим будет изображение 300 dpi, или полноразмерное изображение, которое можно будет уменьшить потом до требуемого размера.
Клиент решил использовать блог, так как они уже имеют достаточно контента для поддержания этого блога в активном состоянии в течение нескольких следующих месяцев. К счастью, клиент выбрал провайдера Web-хостинга, который знаком с блогами и имеет необходимые возможности для работы с базами данных и высоким трафиком — включая пиковые нагрузки трафика. Этот хост предоставляет также несколько решений для расширения, отличное предложение, если клиент захочет развиваться. Если рабочее время хоста гарантировано, то клиенту будет удобнее оставаться с тем же хостом в течение всей фазы роста. Эта возможность оставаться с поставщиком хост-услуг в течение ряда лет существенно облегчает жизнь.
С помощью FTP (на рынке существует несколько вариантов для выбора, свободно доступные продукты, такие как Filezilla (http://filezilla-project.org/), или fireftp (http://fireftp.mozdev.org/) для Firefox, или коммерческие клиенты, такие как CuteFTP (http://www.cuteftp.com/)), я загружаю статическую страницу, которая объявляет о скором появлении сайта.. "Under Construction" является ужасной фразой, которую иногда используют, так как посетители сайта могут не вернуться, если они не будут знать дату "открытия". Вместо этого используйте страницу, которая содержит название компании, что они собираются предложить, дату, когда сайт станет активным, и контактную информацию (адрес e-mail отлично подходит — если компания имеет стандартный офис, используйте также почтовый адрес и номер телефона). Еще лучше использовать форму e-mail, которую посетители могут использовать,
чтобы получить уведомление, когда сайт заработает. Последнее предложение создает для клиента потенциальных заказчиков, даже еще до того, как сайт будет готов к работе.
Используя информацию о контенте/структуре, полученную от клиента, и тот факт, что они хотят, чтобы рекламное пространство было встроено во все страницы, я создаю архитектуру для сайта и планирую средства перемещения и текстовые ссылки. Я использую также эту копию для планирования ключевых слов для SEO сайта.
Используя цвета логотипа, я выберу две или три цветовые схемы для представления клиенту для утверждения.
Затем я выберу другие фотографии или иллюстрации в базе данных фотоматериалов, такой как iStock (http://www.istockphoto.com/index.php) или Comstock (http://www.comstock.com/web/default.asp). Но обязательно поищите различные варианты, так как некоторые компании фотоматериалов предлагают распродажи и другие выгодные сделки, от которых бывает трудно отказаться. Использование баз данных фотоматериалов не так дорого, и избавляет от проблем, связанных с вопросами авторских прав (http://www.templetons.com/brad/copymyths.html). Мне понадобятся также любые изображения, созданные компанией — или которые они создадут — чтобы сопроводить какой-либо код, статьи "как сделать", и записи блога.
Примечание: Два последних шага будут рассмотрены в следующей лекции курса; помните, что клиент должен утвердить компоновку визуального макета, прежде чем начинать добавлять ко всему этому цвета и графику!
Логотип
Логотип является жизненно важной частью брендинга любой компании. Хотя большинство компаний не разбрасываются логотипом, так как это произведение искусства будет представлять их бизнес многие годы, другие клиенты будут менее озабочены образом, который представляет компанию. Из опыта можно сказать, что компания, которая не тратит время и деньги на профессиональный логотип, обычно никогда не потратит эти деньги — независимо от логики ваших аргументов убедить в обратном.
Владельцы компании Wiki Whatevers учились в Технологическом институте Джорджии (Georgia Tech), поэтому они использовали цвета своего института - золотой и черный - в дизайне логотипа. Но, хотя логотип и является упрощенным, по крайней мере, с ним можно легко работать с точки зрения цветов и компоновки. Рисунок 9.1 показывает логотип:
(рис 9.1) Логотип компании Wiki Whatevers Проблема здесь состоит в том, что я просто отсканировала печатный логотип, собираясь использовать тот же самый логотип в сети. Печатные цвета, которые являются CMYK (http://desktoppub.about.com/cs/basic/g/cmyk.htm) (Cyan, Magenta, Yellow и Key, или Black - черный), не будут совпадать с цветами Web, которые состоят из RGB (Red, Green, Blue). Поэтому мне нужно попробовать сделать небольшую подгонку цветов, чтобы цвета Web соответствовали логотипу как можно ближе. Существует три способа выполнить эту задачу:
Связаться с печатником и выяснить, какие цвета использовались при печати логотипа Wiki Whatevers на напечатанных ранее материалах. Обычно печатники используют цвета Pantone (http://www.pantone.com/pages/pantone/index.aspx), и компания Pantone предоставляет инструменты, которые помогают дизайнерам согласовать цвета печати с цветами Web. Эта система согласования цветов Pantone Colour Matching может находиться у печатника под рукой, поэтому печатник может помочь согласовать цвета печати с соответствующими подходящими цветами Web, позволяя избежать затрат на приобретение инструментов Pantone.
Так как владельцы Wiki Whatevers используют цвета Georgia Tech, можно посетить сайт Georgia Tech, чтобы проверить, нельзя ли подобрать цвета из Web. Можно использовать графическую программу для извлечения цвета с сайта Web, делая снимок с экрана (http://www.iopus.com/guides/screenshot.htm) и перенося это изображение в графическую программу для использования "пипетки" или другого инструмента для согласования цветов.
Внимательно сравните печатные материалы с цветами Web, чтобы попробовать подобрать как можно более близкие. В некоторых случаях цвета могут существенно отличаться. В других случаях цвета могут казаться слишком похожими, чтобы беспокоиться об изменении.
Отсканируйте печатное изображение программой сканирования, которая воспринимает CMYK и использует Pantone Colour Swatches программы Photoshop для как можно более точного согласования. Это последнее решение работает только в том случае, если сканер воспринимает CMYK и вы имеете программу Photoshop.
В данном случае можно было бы подобрать золотой цвет для точного соответствия по изображению талисмана на сайте Georgia Tech Athletic (http://ramblinwreck.cstv.com/). Золотой имеет код #eab200, а черный, он и есть черный ( #000000 ). Фон, который имеет темно-зелено-синий цвет ( #002123 ) использовался для отбрасывания тени на логотипе. Поэтому трудная проблема разрешилась легко с помощью простого талисмана с изображением шмеля, показанного на рисунке 9.2.
(рис 9.2) Часть талисмана Georgia Tech, использованная для подбора цветов логотипаПримечание: Очень редко можно встретить компанию, которая не использует цифрового изображения своего логотипа или бренда в сети для таких объектов как визитные карточки или фирменные бланки, если не только для реального присутствия в Web. Однако многие эти компании видимо используют цвета, которые представлены в Web, а не изменяют цвета в соответствии со своими печатными материалами. Поэтому не всегда полагайтесь на цвета Web для сайта компании, особенно если эти цвета не совпадают с печатными материалами компании, такими как брошюры или фирменные бланки писем. Вместо этого выясните в компании, какие цвета они предпочитают — они могут просто не обращать внимания, что цвета различаются.
Компоновка
Для компоновки и ради простоты этого учебного руководства будет представлена только одна компоновка. Я выбрала компоновку блога, которая предполагает наиболее частые изменения в копии тела вверху, легкий доступ к средствам навигации между верхним колонтитулом и этой последней копией тела, и доступ к предыдущим записям "ниже сгиба" на домашней странице. Термин "ниже сгиба" происходит из газетного производства. Когда газета находится на прилавке, то читатель может видеть только ту часть, которая находится "над сгибом" газеты (т.е. физического сгиба газеты). Эта часть — включая изображения — является очень важной, так как нужно соблазнить читателя купить газету.
Такая же теория "над сгибом" применима к дизайну Web-сайта. Все, что выводится на мониторе, когда посетитель входит на сайт находится "над сгибом". Любой материал, который зритель должен прокрутить вниз, чтобы увидеть, находится "ниже сгиба". Поэтому задача состоит в том, чтобы сохранить внимание посетителя Web-сайта с первых изображений и материала, который они видят на мониторе, независимо от разрешения (что является только одним из хороших поводов протестировать Web-сайт на ряде различных мониторов/разрешений экрана — тема, рассматриваемая далее в этой лекции). Грубый пример начальной компоновки для Wiki Whatevers показан на рисунке 9.3:
(рис 9.3) Грубая компоновка (каркас) домашней страницы Wiki WhateversЭта компоновка остается той же самой на всем сайте, но может изменяться для архивированных страниц для вывода статей и записей блога без изображений. Эта согласованность нужна для сохранения внимания пользователя. Когда пользователи "привыкли" к определенному виду сайта, как его использовать, они обычно не любят видеть изменения на различных страницах. Вот элементы, которые будут входить в конкретный дизайн:
Верхний колонтитул: Верхний колонтитул будет небольшим, так как я не хочу, чтобы логотип занимал слишком много места на странице. Хотя логотип является второстепенным свойством, цвета этого логотипа будут влиять на общую цветовую схему сайта. Верхний колонтитул находится вверху, традиционное размещение, а логотип будет соединен с домашней страницей блога. Соединение через логотип является удобным, так как многие пользователи привыкли использовать логотип в качестве средства возврата на домашнюю страницу любого данного сайта.
), которые используют считыватели экрана для "чтения" страницы Web. Будет ли текст навигации помещен вверху или внизу страницы не имеет большого значения, за исключением значения для дизайна,
так как слепые читатели могут сканировать страницу снизу вверх и наоборот также быстро, как и зрячий человек. Помня об этом, дизайнер и его клиент должны решить, повторять ли средства навигации на данной странице в другом месте. Если для навигации используются изображения и навигационные ссылки не повторяются в виде текста, то не забудьте включить описательные атрибуты alt для этих навигационных изображений. В этом случае пользователи, которые используют считыватель экрана или отключили вывод изображений будут знать, тем не менее, для чего предназначены эти изображения. Посмотрите соответствующий раздел лекции 17 о том, как правильно использовать атрибуты alt.
Последняя запись блога: Самая последняя запись блога заслуживает выделения, а возможность сделать эту запись главным центром страницы "над сгибом" будет выгодна клиенту и его читателям. Как только зритель перемещается на этот сайт, он увидит этот материал. Однако очевидное размещение означает, что клиенту нужно будет постоянно согласованно обновлять сайт или рисковать потерей возвращающихся посетителей — маловероятно, что люди будут возвращаться в блог, если в нем не будут публиковаться новые материалы.
Предыдущие записи блога: Здесь будут располагаться предыдущие записи блога - от трех до пяти записей должно быть достаточно, чтобы зрители могли сразу точно понять, что можно ожидать от этого сайта при постоянном посещении. Изображения должны быть хорошо сделаны, но не являются обязательными, так как в этой области обычно располагаются статьи, которые помещают на страницах после сгиба, а не вывешиваются на стойках (записи блога). Решение об использовании изображений может основываться на том, является ли время загрузки проблемой, или если предыдущая статья действительно нуждается в изображении, чтоб заставить зрителя щелкнуть на нем для перехода к полной статье/записи блога.
Правый столбец: Здесь зритель может получить доступ к записям блога, перечисленным по категориям, архивам, и другим типам контента сайта. Примерами других страниц будут страницы "О компании", индекс сайта и контактная информация. Важно решить, как вы хотите перечислить эти объекты в боковом столбце, так как блог будет создаваться согласно определенным категориям, созданным страницам и архивным материалам. С ростом сайта эти списки будут становиться длиннее, возможно до того момента — в данном случае — когда категории могут быть единственным списком, который зритель увидит "над сгибом". Клиенты могут решить, что "страницы" важнее, чем категории, и показанный выше список может измениться, помещая страницы над категориями. Как дополнительное замечание, этот список включает не все, что можно включить в боковую панель или боковой столбец. Некоторые клиенты могут решить, что два столбца будет лучше,
делая блог трех-столбцовым, а не двух-столбцовым, как показано выше.
Информация нижнего колонтитула: Информация нижнего колонтитула является жизненно важной, так как предоставляет зрителям с одного взгляда основную информацию о компании и ее Web-сайте, исключая необходимость рыться в ее поисках. Название компании, возможно повторение логотипа, адрес, электронный адрес e-mail, ссылки (на контактную форму, уведомления о конфиденциальности, отказ от ответственности, юридическая информация), и сводка новостей являются хорошими кандидатами для включения в нижний колонтитул страницы. Как упоминалось ранее, можно также повторить средства навигации в виде только текстовой версии.
Реклама: В этой компоновке реклама размещается вслед за последней записью блога и перед предыдущими записями блога в горизонтальном баннере. Это предоставляет клиенту гибкость выбора текстовой рекламы или живописного баннера для своих рекламных потребностей. Такой тип компоновки для рекламы помещает только одно рекламное объявление "над сгибом" и другое "под сгибом". Такого количества рекламы вполне достаточно для большинства сайтов. Кроме того, это переводит рекламу на вторичную позицию, ниже материала тела контента сайта.
Эта компоновка позволяет зрителю быстро переходить от материала тела к средствам навигации без прокрутки страницы, и позволяет также пользователям видеть другие темы, которые могут быть представлены на сайте как минимум с помощью дополнительных ссылок на категории сайта. Даже если зритель никогда не прокручивает страницу ниже линии "сгиба", компоновка предоставляет все основные элементы, которые могут понадобиться зрителю, размещенные "выше сгиба".
О рекламе на сайте
Достоинством для клиента и услугой для читателя будет контекстно-зависимая реклама на сайте. Другими словами, если контент сайта посвящен цветам, то реклама для этого сайта может включать услуги ландшафтного дизайна, выездное обслуживание (в дополнение к цветочным аранжировкам), и т.д. Поэтому для сайта, который предоставляет программные материалы с открытым кодом, можно поискать рекламу, которая соответствует программному обеспечению с открытым кодом. Google Adsense (https://www.google.com/adsense/), как один из источников, может помочь в этом отношении, так как реклама является связанной с контентом. Использование такого типа рекламы является хорошей идеей, пока трафик
не вырастет в достаточной степени, чтобы привлечь на сайт других рекламодателей. Однако всегда думайте о последствиях для SEO, прежде чем принимать рекламные объявления, так как некоторая реклама может отрицательно влиять на позицию клиента на страницах поиска. Некоторыми хорошими ресурсами по SEO являются следующие:
Интеллектуальная структура сайта для лучшего SEO! (http://dev.opera.com/articles/view/intelligent-site-structure-for-better-se/), Джуст де Валк.
Семантический HTML и оптимизация поисковых систем (http://dev.opera.com/articles/view/semantic-html-and-search-engine-optimiza/), Джуст де Валк.
Как присоединенные программы могут влиять на ранжирование поиска (http://www.clickz.com/showPage.html?page=3497826), Фредрик Маркини.
Новый отчет исследует, как ранг PPC влияет на трафик (http://www.searchengineguide.com/jennifer-laycock/new-report-explores-how-ppc-rank-affects-traffic.php), Дженифер Лейкок.
Примечание: Вы можете не нести ответственность за рекламу на сайте как дизайнер, если только вы не проектируете сайт для себя, но если вы планируете работать с рекламным или дизайнерским агентством в будущем, вы можете захотеть получить некоторое знакомство с рекламой в этих дизайнерских фирмах. Чем больше вы знаете о том, что делает сайт успешным, тем больше успеха вы встретите в своей карьере дизайнера. При возможности узнайте как можно больше о маркетинге (для себя и своих клиентов) и тактиках оптимизации поисковых машин.
Проверка компоновки с помощью валидаторов и с клиентом
Прежде чем реализовать эту компоновку с помощью кода, я хотела бы получить одобрение компоновки (или каркаса ) от клиента. Одной из тактик, которую я использую, чтобы убедить клиента, что одна компоновка лучше другой, состоит в напоминании, что кодирование дополнительных компоновок стоит денег. Это поможет клиенту выбрать одну компоновку, с тем, что код можно поправить позже, чтобы сделать некоторые структурные изменения.
Следующий шаг состоит в кодировании компоновки и последующей валидации кода. Для подтверждения того, что использованный для компоновки код HTML и CSS не содержит ошибок, я применяю службы W3C Markup Validation Service (http://validator.w3.org/) и W3C CSS Validation Service (http://jigsaw.w3.org/css-validator/). В эти службы валидации можно загрузить файлы прямо со своего компьютера, поэтому нет необходимости загружать их на сайт клиента для тестирования. Этот тест позволяет дизайнеру и/или программисту найти все ошибки во внешнем интерфейсе, которые можно разрешить, прежде чем сайт станет наполняться кодом от изображений, рекламы, и других объектов, добавляемых на страницу.
Доступность является еще одной большой проблемой — проверка, что сайт могут использовать люди с физическими недостатками, такими как слепота или моторная недостаточность. Это не такой простой процесс проверки, как в случае валидации CSS и HTML. Существуют средства проверки, такие как TAWDIS (http://www.tawdis.net/taw3/cms/en), но в идеале это нужно тестировать с реальными пользователями, и выполнить качественный анализ своих сайтов на доступность — механизированное средство проверки не может окончательно сказать, будет ли сайт доступен или нет, хотя оно может дать некоторые указания, что правильно, а что неправильно. Иногда могут также возникать ошибочные решения. В дальнейшем в курсе будет представлена более полная информация о доступности.
Необходимо также протестировать компоновку на различных доступных браузерах, чтобы знать, что Web-сайт сможет просматривать максимально возможное число пользователей Web. Это можно сделать, имея доступными системы Mac, Windows, Linux и Mobile, все с различными установленными браузерами, или использовать эмуляторы, такие как VMWare Fusion (http://en.wikipedia.org/wiki/VMware_Fusion) для моделирования различных систем на одном компьютере, но это достаточно кропотливо и длительно. Другая возможность состоит в использовании специальных служб, таких как BrowserCam (http://www.browsercam.com/Default2.aspx), которые позволяют увидеть, как будет выглядеть страница на различных браузерах и системах (включая большинство старых браузеров). Они предлагают 24-часовой бесплатный пробный период, чтобы можно было убедиться, что эта служба вам подходит. Плата за использование после
пробного периода себя оправдывает, особенно, если вы проектируете большое число сайтов и тестируете на большом числе различных браузеров.
Наконец, будет хорошей идеей согласовать все с клиентом, чтобы сообщить ему, что код для компоновки сгенерирован, и что он прошел валидацию; можно также проинформировать клиента, сколько потребуется сделать в каркасе изменений, чтобы заставить его работать на различных браузерах. Только после того, как код будет сгенерирован, валидация завершена, и одобрение от клиента получено, можно начинать добавлять цвета, изображения, и любой другой код, как, например, код рекламы. Хотя эта работа может показаться скучной, но лучше подтвердить всю валидацию и получить одобрение клиента, прежде чем добавлять какие-то детали. Иначе придется выполнить много лишней работы, так как, в конечном счете, обнаружатся проблемы с кодом и несовместимость с браузерами. Кроме того, любые живописные элементы или основной материал могут отвлекать внимание клиента,
когда он попытается оценить реальную архитектуру сайта.
После завершения этого процесса можно начинать работать над текстом сайта, изображениями, и цветами. Как это начать? Об этом в следующей лекции!
Заключение
Web-дизайнер часто выполняет различные функции, так как дизайн Web-сайта опирается на множество факторов. Будет ли этот сайт увеличиваться со временем, или он будет оставаться статическим? Сможет ли провайдер Web-хостинга обеспечить требуемое качество обслуживания и пространство для развития, или клиенту придется переходить с одного Web-хоста на другой Web-хост при развитии сайта? И если дизайнер не может успешно выполнить все задачи дизайна, имеются ли люди, которые могут в этом помочь?
Поэтому, кроме цвета и графики, требуется иметь некоторое основание, на котором строится этот Web-сайт. Задача создания сайта влияет на дизайн, и все вопросы, которые могут стать проблемами в дальнейшем, можно разрешить на этапе планирования. Такая способность разрешать проблемы до их появления, отличает профессионального дизайнера.
Когда основание создано, и архитектура и каркас сайта разработаны, дизайнер может затем начинать работать с цветовыми схемами для разработки всего Web-сайта для утверждения клиентом.
Дополнительное чтение
Вот несколько других сайтов, которые предлагают памятки для дизайнера Web-сайта:
Памятка начинающего дизайнера (http://www.diveindesigns.com/home/dd1/page_17)
Памятка по юзабилити Web от Net Mechanic (http://www.netmechanic.com/news/vol7/design_no4.htm)
Памятка дизайнера Max Design (http://maxdesign.com.au/presentation/checklist.htm)
Памятка по юзабилити Usability First (http://www.usabilityfirst.com/websites/index.txl)
Памятка David Skyrme and Associates (http://www.skyrme.com/tools/webplan.htm)
Памятка SCORE по дизайну Web-сайта (http://www.score.org/eb_42.html)
Контрольные вопросы
Что необходимо иметь под рукой, прежде чем начинать разрабатывать дизайн Web-страницы?
Почему необходимо создать список всех объектов, которые планируется использовать на странице Web?
Почему важно тщательно выбирать провайдера Web-хостинга?
Дизайнер может выполнять многие функции, но что нужно сделать, если клиент просит создать логотип, а вы не имеете никакого представления о том, что надо делать?
Назовите две важные причины для исследования Web-сайтов конкурентов компании.
Что такое CMYK, и что означают эти буквы?
Назовите, по крайней мере, два способа преобразования CMYK в соответствующие цвета RGB.
Назовите одну из причин, почему дизайнер должен использовать текст для навигации, по крайней мере, в одной области компоновки Web-страницы?
Почему дизайнер должен придерживаться согласованной компоновки сайта Web на всех страницах сайта?
Назовите одну из причин, почему код сайта должен пройти валидацию на ранних этапах дизайна.
Об авторе
Линда Гоин получила степень бакалавра (BFA) в области визуальной коммуникации со специализацией в бизнесе и маркетинге, и степень MA по Американской истории со специализацией по Реформации. Хотя последняя степень кажется не соответствующей первому полученному образованию, Линда использует свой 25-летний опыт дизайна на сайтах, посвященных археологическим раскопкам и изучению материальной культуры.
Похвальные отзывы о ее работе включают пятнадцать первых премий Colorado Press Association, многочисленные премии по изящным искусствам и графическому дизайну, и интервью о разработке контента в The Wall St. Journal, Chicago Tribune, Psychology Today, и L.A. Times. Линда является автором нескольких е-книг по Web- дизайну, доступности и — как побочная линия — пишет также персональные финансовые статьи и пишет для некоторых SEO pros.
Материалы этого курса имеют лицензию
Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
