Объявления:

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

Принцип создания сайта

Концепция.

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

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

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

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

Дизайн.

Еще одна печальная ошибка – это подход к работе веб-дизайнера только с точки зрения оценки красоты шапки сайта.

Поверьте мне, если у вас совершенно не красивый сайт, но имеющий интересную индивидуальную информацию, правильный функционал и структуру, позволяющую найти эту информацию, то пользователю не будет никакого дела до красоты шапки сайта (например посмотрите на мега-популярный сайт библиотеки Машкова http://lib.ru).

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

По поводу какой сайт должен быть – резиновый (масштабируемый под различные разрешения браузера) или жестко сверстанный под определенный размер. Заказчик обычно ни секунды не колеблясь заявляет – конечно резиновый.

Но! Резина не всегда хороша. Конечно все это замечательно, сайт разъезжается в ширь и занимает все пространство монитора и использует по максимуму возможное разрешение. Многим кажется, что это очень круто.

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

Обязательно нужно закладывать какую-то максимальную ширину, дальше которой сайт разъезжаться не будет.

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

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

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

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

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

Постарайтесь отказаться от красивых меню на flash и JavaScript, поисковики очень плохо индексируют ссылки, запрограммированные при их помощи. И, если уж отказаться не получается, обязательно сделайте карту сайта, имеющую ссылки на все страницы реализованные простыми тегами <a href=””>. Конечно же, на карту сайта должна вести также простая текстовая ссылка. Этим вы поможете поисковикам проиндексировать весь ваш сайт.

На сайт, выполненный на белом фоне обычным шрифтом Verdana, выровненным по левому краю намного приятнее смотреть, чем на что-нибудь такое:

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

Какие шрифты выбрать?

- Тут все просто. Используются только самый популярные шрифты, такие как Tahoma, Verdana, Arial,  Times New Roman. Делается это из-за того, что в случае отсутствия шрифта у пользователя текст будет отображаться шрифтом по умолчанию и лишь немногие браузеры поддерживают загрузку недостающих шрифтов. А какой у пользователя шрифт назначен по умолчанию для нас загадка. И как будет выглядеть в этом случае текстовый блок никому не известно.

Вооружившись всеми этими знаниями запускайте Photoshop и отрисовывайте весь сайт в нем.

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

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

Программинг.

Нарисовали, сверстали, теперь наполняете сайт жизнью при помощи PHP-скриптов например.