Пример воображаемого сайта

Этот воображаемый сайт принадлежит компании, которая создает свободно распространяемый (Open Source) код для wiki, и в среднем в неделю они создают не менее трех новых вариантов кода. Так как код является бесплатным для использования и модификации, то владельцы сайта хотят монетизировать сайт (получать от него деньги) через пожертвования, размещение рекламы и дополнительные услуги, предлагаемые программистами. Название сайта "Wiki Whatevers" и имя домена были выбраны. Контент был разработан, и он содержит фрагменты кода, каталоги которые надо создать, статьи и биографии некоторых программистов, участвующих в этом проекте. Web-хост обеспечивает доступность базы данных MySQL (http://www.mysql.com/), и может обеспечить самые большие всплески трафика без простоя. Теперь пора собрать вместе все объекты, которые будут использоваться на сайте:

1. Для применения существующего логотипа компании необходимо подготовить его цифровую копию для использования на Web-сайте клиента. Для этого требуется сканер для сканирования изображения в графической программе, такой как Photoshop (http://www.adobe.com/products/photoshop/index.html) или Gimp (http://www.gimp.org/). Размер логотипа я определю позже, когда будет определена компоновка. Я сохраняю изображение с разрешением 72 dpi (dot per inch), что позволит получить более быстрое время загрузки. Возможно, что этот логотип будет использоваться также для пункта #4 ниже.

2. Фотографии программистов будут использоваться на странице персонала (или странице "About"), поэтому для этого проекта необходимо получить их цифровые изображения. Они могут либо предоставить фотографии для сканирования или прислать цифровые изображения. Если они присылают цифровые изображения, то желательно иметь размер больше планируемого, поэтому подходящим будет изображение 300 dpi, или полноразмерное изображение, которое можно будет уменьшить потом до требуемого размера.

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

4. С помощью FTP (на рынке существует несколько вариантов для выбора, свободно доступные продукты, такие как Filezilla (http://filezilla-project.org/), или fireftp (http://fireftp.mozdev.org/) для Firefox, или коммерческие клиенты, такие как CuteFTP (http://www.cuteftp.com/)), я загружаю статическую страницу, которая объявляет о скором появлении сайта.. "Under Construction" является ужасной фразой, которую иногда используют, так как посетители сайта могут не вернуться, если они не будут знать дату "открытия". Вместо этого используйте страницу, которая содержит название компании, что они собираются предложить, дату, когда сайт станет активным, и контактную информацию (адрес e-mail отлично подходит — если компания имеет стандартный офис, используйте также почтовый адрес и номер телефона). Еще лучше использовать форму e-mail, которую посетители могут использовать, чтобы получить уведомление, когда сайт заработает. Последнее предложение создает для клиента потенциальных заказчиков, даже еще до того, как сайт будет готов к работе.

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

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

7. Затем я выберу другие фотографии или иллюстрации в базе данных фотоматериалов, такой как 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 показывает логотип:

Проблема здесь состоит в том, что я просто отсканировала печатный логотип, собираясь использовать тот же самый логотип в сети. Печатные цвета, которые являются CMYK (http://desktoppub.about.com/cs/basic/g/cmyk.htm) (Cyan, Magenta, Yellow и Key, или Black - черный), не будут совпадать с цветами Web, которые состоят из RGB (Red, Green, Blue). Поэтому мне нужно попробовать сделать небольшую подгонку цветов, чтобы цвета Web соответствовали логотипу как можно ближе. Существует три способа выполнить эту задачу:

1. Связаться с печатником и выяснить, какие цвета использовались при печати логотипа Wiki Whatevers на напечатанных ранее материалах. Обычно печатники используют цвета Pantone (http://www.pantone.com/pages/pantone/index.aspx), и компания Pantone предоставляет инструменты, которые помогают дизайнерам согласовать цвета печати с цветами Web. Эта система согласования цветов Pantone Colour Matching может находиться у печатника под рукой, поэтому печатник может помочь согласовать цвета печати с соответствующими подходящими цветами Web, позволяя избежать затрат на приобретение инструментов Pantone.

2. Так как владельцы Wiki Whatevers используют цвета Georgia Tech, можно посетить сайт Georgia Tech, чтобы проверить, нельзя ли подобрать цвета из Web. Можно использовать графическую программу для извлечения цвета с сайта Web, делая снимок с экрана (http://www.iopus.com/guides/screenshot.htm) и перенося это изображение в графическую программу для использования "пипетки" или другого инструмента для согласования цветов.

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

4. Отсканируйте печатное изображение программой сканирования, которая воспринимает 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

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

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

2. Средства навигации: Размещенные сразу под верхним колонтитулом, средства навигации имеют очевидный вид и простое использование. Эти средства навигации будут также повторяться в нижнем колонтитуле. Я повторяю средства навигации в нижнем колонтитуле как простой текст для тех пользователей, которые не выводят в своем браузере изображения. Так как я в этом месте не уверена, будут ли вверху для навигации использоваться изображения, я автоматически включаю также текстовую навигацию в других местах страницы — обычно в нижнем колонтитуле. Этот текст поможет также слепым читателям (http://www.afb.org/Section.asp?SectionID= 57&TopicID=167&DocumentID=2757), которые используют считыватели экрана для "чтения" страницы Web. Будет ли текст навигации помещен вверху или внизу страницы не имеет большого значения, за исключением значения для дизайна, так как слепые читатели могут сканировать страницу снизу вверх и наоборот также быстро, как и зрячий человек. Помня об этом, дизайнер и его клиент должны решить, повторять ли средства навигации на данной странице в другом месте. Если для навигации используются изображения и навигационные ссылки не повторяются в виде текста, то не забудьте включить описательные атрибуты alt для этих навигационных изображений. В этом случае пользователи, которые используют считыватель экрана или отключили вывод изображений будут знать, тем не менее, для чего предназначены эти изображения. Посмотрите соответствующий раздел "Изображения в HTML" о том, как правильно использовать атрибуты alt.

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

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

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

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

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

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

Достоинством для клиента и услугой для читателя будет контекстно-зависимая реклама на сайте. Другими словами, если контент сайта посвящен цветам, то реклама для этого сайта может включать услуги ландшафтного дизайна, выездное обслуживание (в дополнение к цветочным аранжировкам), и т.д. Поэтому для сайта, который предоставляет программные материалы с открытым кодом, можно поискать рекламу, которая соответствует программному обеспечению с открытым кодом. 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), Дженифер Лейкок.

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

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...

Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...

ЧТО ПРОИСХОДИТ ВО ВЗРОСЛОЙ ЖИЗНИ? Если вы все еще «неправильно» связаны с матерью, вы избегаете отделения и независимого взрослого существования...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: