2.3. Дизайн сайта

Как правильно пишут в умных книгах по вебдизайну, он разбивается на пять основных составных частей (иногда их еще объединяют между собой):

• разработка структуры сайта и отдельных страниц;


• подбор шрифтов;


• подбор цветов;


• навигация по сайту;


• картинки и прочие “украшения”.

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

Честно говоря, на этом этапе я посчитал подбор шрифтов “делом десятым” и просто установил на всем сайте Arial, Verdana, Helvetica, sans-serif с разными сайзами (по научному атрибут size тэга font), а на первом форуме вообще не определил шрифт, т. е. высвечивался тот шрифт, который у каждого пользователя установлен по умолчанию на компе. Позднее на некоторых страницах мне все-таки пришлось прибегнуть к помощи технологии CSS, чтобы некоторые страницы не “перекособачивались” при увеличении шрифтов браузера, но это было уже гораздо позднее. Поэтому о важности такой детали дизайна, как шрифт, опять позднее в тематической части по модификациям сайта.

С навигацией по сайту решение нашлось просто. На главной странице по традиции предполагалось отвести ей левый столбец, на первой странице не предполагалось ничего, кроме графической ссылки на главную страницу в виде двери, на остальных главный страницах страницах разделов было решено использовать идею с уже упоминавшегося сайта http://www.conservator.ru/forums/free/ с навигацией в виде раскрывающейся формы на навигационной панели уже апробированного скрипта. И наконец на страницах сообщений в разделах было решено ограничится ссылками на главную страницу раздела и ближайшие сообщения (это стандартная функция практически всех форумных скриптов). Описание выбранной формы дано на многих ресурсах по вебдизайну, например, здесь http://webco.host.sk/doc/web.php?id=28 (первая попавшаяся ссылка при поиске в Яндексе, потому что я уже не помню с какого адреса взял этот код тогда, применив такой же поиск). Правда, использование этой формы показало мне, что мои знания html более, чем поверхностны, но подробнее об этом ниже в тематическом подразделе о “подводных камнях” html. Также в первом варианте я не слишком заботился о логике иерархии страниц сайта и расположил их в порядке по времени размещения на сайте, поэтому возникло несоответствии между порядком списка страниц в форме и на навигационной панели на главной странице. Потребовалось почти полтора года, чтобы у меня дошли руки исправить этот недочет и то только потому, что появились новые разделы и их стало так много, что в форме при перечислении всех появлялась прокрутка. Чтобы не появлялась прокрутка в форме, я убрал часть ссылок из форм и расположил ссылки в определенной логической последовательности (главная, серьезные тематические разделы (кроме раздела, на котором расположена форма), форумы и гостевые книги). Ссылки же на статические страницы, типа “Карта сайта”, я оставил только на Главной странице.

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

index30032002.shtml

index300320021.shtml

index300320022.shtml

12.shtml

Не выручил меня и учебник – в списке эргономичных сочетаний для желтого фона, помимо черного, фигурировал только один цвет – красный, но его мне на сайте не хотелось видеть в качестве ссылок, которых предполагалось очень много – все-таки большинство разделов сайта предполагались динамические, а значит их заглавные страницы должны были на 90% состоять из ссылок и красно-желтое сочетание было бы слишком напрягающим. Поэтому я пошел, в общем, по не совсем правильному пути. Ссылки все-таки решил сделать стандартно синими, для страниц с текстом, содержащим небольшое числом ссылок, я оставил сочетание “черный на желтом”, а для страниц с большим числом ссылок фон заменил на белый. Так я пришел к наиболее распространенному в Интернете сочетанию цветов “бело (фон) – сине (ссылки) - черный (текст)”. Как бы не ругали этот дизайн профессиональные дизайнеры, но для информационных сайтов белый фон получается практически единственный, если исходить из принципов эргономичности и разных цветов для ссылок и текста. Тем болеe, что в силу своей распространенности, он стал привычен, что немаловажно, если Вы хотите, чтобы материалы Вашего сайта прочитывались пользователями. Но подчеркну – этот вывод касается лишь информационных сайтов, предназначенных для чтения размещенных материалов. Для интернет-магазинов наверное лучше выделится из общей цветовой массы, чтобы заставить посетителя посмотреть “товар лицом”, тем более, что товар, как правило, представлен картинками.

Удивительно, но совсем недавно я увидел, что еще один трейдерский сайт http://alfatraders.narod.ru/ сменил дизайн на “сине-бело-черный” с вот такого http://alfatraders.narod.ru/old_index.htm и, как мне кажется, значительно выиграл с точки зрения эргономичности.

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

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

С точки зрения картинок, то прежде всего нужен логотип (-ы) для наиболее посещаемых страниц сайта. Его красота зависит от Ваших художественных способностей. Но даже, если у Вас, как и у меня, их нет, то не расстраивайтесь. Во-первых, его можно заказать за 30-50$$, во-вторых, подойдет и просто название сайта на подобранном фоне. Цвета текста и фона должны сочетаться с цвета, отобранными Вами для ссылок или текста. На сайте “Как стать трейдером?” цвет текста был задан первой строчкой приветствия “За дверью с надписью ЗЛАТОЮ”. Осталось только подобрать вид шрифта и цвет фона. Для золотистого шрифта фоновый цвет должен быть темным и выбирая между черным, темно-коричневым и темно-синим, я выбрал последний только потому, что черный мне показался мрачным, а коричневый не использовался ни в каком другом качестве. Так невольно я повторил цвета флага ЕС. Почему я взял фоновый цвет, а не фоновый рисунок? Только из-за того, что так логотип получался легче “по весу”.

Теперь надо представить, какой Вы хотели бы видеть надпись. Я ее хотел видеть такой

Однако попытки воспроизвести нечто подобное с помощью средств WordArta оказались весьма аляповатыми и громоздкими (см. пример htt1.gif), но, тем не менее, я остановился на них, как на первоначальном варианте и только позже вместе с уменьшением размера “шапки” перешел к существующему логотипу. Сейчас, когда я уже знаю, что в Интернете можно найти кучу красивых шрифтов (на том же упоминавшемся сайте http://www.woweb.ru/) нет-нет, да порываюсь сменить логотип. И даже создал несколько макетов с использованием других шрифтов. Однако то, что даже с простым логотипом, сайт стал достаточно посещаемым, удерживает меня от смены логотипа, чтобы невольно не вызвать недоумение постоянных посетителей. Вообще восприятие сайта постоянными посетителями очень “тонкая” штука и любое радикальное действие с сайтом должно проходить проверку тезисом “не навреди”. И я не уверен, что односторонняя смена логотипа не навредит. Поэтому, если я и решу что-то менять, то перед этим проведу опрос, как и сделал совсем недавно при дополнении логотипа картинкой дороги. Пустота под надписью меня давно удручала, но идей по ее изменению не было, да и хотелось ее сделать совместно с изменением шрифта надписи. Но отобранный мной старославянский стиль не получил поддержки и надпись осталась прежней. Этот принцип “не навреди” особенно важно распространить на динамические разделы сайта. Но об этом подробнее в тематическом разделе “заменяем скрипты”.

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

Давайте будем ориентироваться на минимальный из современных размер в 600 пикселей. Учтем, что примерно 100 пикселей занимает навигационная панель браузера. Получаем, исходя из половины экрана – 200 пикселей. Однако, ИМХО, некрасиво, когда навигационная панель браузера плюс “шапка” - половина экрана. Поэтому лучше ориентироваться на 150 пикселей. Но в случае сайта “Как стать трейдером?” надо было еще и учесть высоту цитаты, которая будет восприниматься, как часть “шапки”. Высота цитаты при стандартном размере шрифта порядка 60 пикселей. Итого получаем не больше 90. Увы, но в первом варианте я этого не учел и допустил явную ошибку с высотой “шапки”. Дело в том, что кроме надписи мне захотелось что-нибудь “прицепить” по тематике сайта. Не владея талантом художника и Фотошопом, я не нашел ничего лучшего, как создать картинки-графики из Метастока – “бычий тренд” и “медвежий тренд”. Для четкости их пришлось сделать высотой в 96 пикселей. С цитатой получилось 156 пикселей. Но помимо “шапки” по условиям бесплатного хостинга, я должен был разместить на странице и баннер размером 468 на 60 пикселей, который я разместил в центре над “шапкой” (это меня не смутило, потому что я уже знал, что такое “баннерные сети” и предполагал, что баннеры на сайте будут, как и знал, что баннер – это не так уж и плохо, так как вносит “динамику” в статичную “шапку”). C навигайционной панелью брайзера уже получилось 316 пикселей, что заняло больше половины экрана при разрешении 800 на 600. Это конечно было ошибкой, на которую Вы можете взглянуть на страницу восстановленной старой “шапки”. Посмотрите на нее, чтобы узнать, как не надо делать.

oldlabl.html

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

И наконец о последнем “дизайнерском” решении. Страница приветствие мне показалась слишком статичной. И я решил в ее “шапку” “прикрутить” Ява-скрипт со сменой картинок с быком и медведем из “шапки” в ссылке, через фильтр в виде вертикальных подвижных жалюзей. Лучше б я этого не делал. Оказалось, что этот скрипт имеет постоянное место на экране, задаваемое координатами в настройках, если сайт просматривается из-под Виндов и совершенно непонятным образом располагался на экране при просмотре из разных браузеров под Линкусом. Более того, Нетскейп из-под Винда и Линукса показывал его совершенно по-разному, причем ответа на вопрос “почему?”, я так и не знаю до сих пор. Кроме того, IE показывал скрипт без рамки, а Нетскейп заключал его в рамку, в результате чего при одних и тех координатах, он в разных браузерах показывался немного на разных местах, при том, что в разных браузерах сайт выглядел почти одинаково (кроме отображения навигационной формы, но об этом, как я уже сказал, позже). Опять же из-за этого скрипта пришлось сделать эту страницу постоянной ширины – 800 пикселей и на более широких разрешениях экрана появилось пустое место, что тоже не очень хорошо с точки зрения дизайна. А главной “головной болью” стал подбор координат при каждом изменении страницы Приветствие, чтобы хотя бы в IE этот скрипт стоял рядом с надписью в “шапке”. А изменения точно будут – после открытия сайта надо установить счетчик (-и), возможны дополнения и изменения в текстах и т. д.. Если б этого скрипта не было, то вносить изменения было бы гораздо легче.

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

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

2.4. Подбираем новые скрипты

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

Однако у этого скрипта оказалось два недостатка. Во-первых, по бесплатной лицензии на нем можно было открыть только 4 форума и все “места” оказались занятыми. Кроме того, этот скрипт занимает очень много места на диске из-за дублирования сообщений и добавления большого количества служебных тэгов в сообщения. Так сообщение из 1000 знаков занимает в этом скрипте почти 8Кб. А форум предполагалось сделать активным и при активном использовании 200 Мб пространства исчерпались бы очень быстро (среднее сообщение занимало бы около 6Кб и места хватило бы только примерно на 30000 сообщений (с учетом того, что остальные разделы тоже бы имели сообщения), т. е. то число, которое форум преодолел примерно через полтора года существования).

Поэтому для раздела Форум нам нужен был другой более экономный скрипт. Вторым условием поиска была обязательная привычность форума для участников. Третьим условием было отсутствие необходимости использования MySQL базы, в которой я, как не разбирался, так и не разбираюсь до сих пор. Четвертым условием была возможность настройки дизайна скрипта под дизайн сайта. В ходе поиска на указанных сайтах со скриптами и просмотра демоверсий разных подходящих под вышеуказанные условия скриптов, я обнаружил скрипт, аналогичный уже стоявшему на сайте одного из соавторов сайта “Как стать трейдером?” – Михаила Королюка ( http://www.moysha.ru/ ), а также на другом трейдерском сайте http://www.gelium.net/ (т. е. привычность была обеспечена). Тогда же я впервые применил новый алгоритм поиска скрипта, уже вскользь упоминавшийся в предыдущей части. Дело в том, что, как правило, в каталогах хранятся старые версии, а на сайтах разработчика есть более новые. Конечно это не спасает от “глюков” скрипта вообще, но есть вероятность того, что хотя бы часть “глюков” исправлена. Позднее этот скрипт был сменен на всех трех сайтах, но это уже другая история и о ней в тематической части.

Аналогичным образом мы подобрали скрипты новостной ленты и гостевой книги. В общем, в этом отборе не было уже ничего особенного – алгоритм отбора, установки и настройки был уже отработан. Но о последнем скрипте надо сказать пару слов. Раздел с гостевой книгой предполагался как немодерируемое место для рекламы, флейма и(или) грубостей с переходом на личности, если последние возникнут на форуме. Я думал над названием и остановился на “Доска объявлений”. Получилось как в известной песенке: “как Вы яхту назовете, так она и поплывет”. Флеймовых резких обсуждений в этом разделе не было вообще, даже когда предлагалось участникам изредка возникавших дискуссий на форуме “на гране фола”, перенести их туда. А были и остаются только рекламные объявления, к тому же размещаемые и по “новым технологиям” с использованием спам-роботов (это “явление” было моей самой большой проблемой при работе с сайтом в последнее время, но о ней опять же в тематическом разделе).

Вот собственно и все готово к открытию сайта. И он открылся в марте 2002 года. Подведем итоги данной части.

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


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


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


4. Сделать логотип сайта не только просто, а очень просто. Можно заказать у профессионала за 30-50$$, а можно скачать из Интернета красивый фон (сочетающийся с цветами сайта), красивый шрифт и в качестве логотипа сделать надпись на этом фоне даже в Worde. Только учтите, что высота верхней “шапки” с этим логотипом не должна превышать 150 пикселей, а ширина 780.


5. Откажитесь от украшательства страниц Ява-скриптами, которые




• затруднят будущие модификации страниц;


• приведут к невыполнению п. 3.





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



6. При выборе скриптов не поленитесь и сходите на страницу разработчика за последней версией понравившегося скрипта.