Naamaah все записи автора

Решил выложить свои старые статьи-размышления на тему веб-дизайна "для начинающих", если будет интересно - буду писать еще:

Веб-дизайн. Шаг 1. Разработка концепции.

И даже домашняя страничка Васи Пупкина из города-героя Крыжополя, сверстанная в MSWord 97, заключает в себе все эти три элемента. Но зачем тогда думать о концепции, спросите вы, если и так уже есть фундамент, которого не изменишь? Ничего, это только начало. Вся задача в том, чтобы выделить из этих трех оснований то единственное, на котором стоит сделать акцент. То есть, если вы хотите сделать обычный «хомяк», то сперва задайтесь вопросом: а зачем? Например, вы не имеете себе подобных в написании картин маслом. Замечательно! Тогда в основу своего сайта вы должны положить именно рекламу: о вас все узнают а уж продажей займутся другие. Это очевидно: кто сделает вам более дешевую и развернутую рекламу, кроме вас самих? А вот пробовать переплюнуть «EBay», торгуя в Сети только своими шедеврами, не стоит. Они все равно сделают это лучше.

2. Концепция дизайна.
Итак, вы выбрали цель. Переходим к концепции дизайна. Именно к концепции, к идее, а не к ее воплощению. До этого еще далеко. Если вашей целью стоит реклама – ваша страница (сайт, портал) должны пестреть слоганами о том, что круче вас только яйца, и красочными картинками с изображением продукции. Тут главное не переборщить, иначе вместо сайта вы получите хохломскую роспись: яркую, но абсолютно пустую. Если же вы задумали стать конкурентом ИА «Рейтер», то ваш путь это минимум дизайна, максимум функциональности и текст, текст, текст… (плюс, конечно, баннеры, без них никуда, но об этом позже). И, наконец, такое направление, как трейдинг. Самое сложное, между прочим. Здесь вы должны в одном сайте сделать и рекламу, краткое/развернутое описание товара, удобную систему покупок. Главная сложность, опять же в том, чтобы все это уравновесить, чтобы магазин остался магазином, а не стал барахолкой или выставочным центром.
Но ведь все это невозможно держать только в своем воображении. Поэтому мы берем лист белой бумаги, и… чертим. Чертим мы зоны: где будет текст (описание), где картинки, где реклама, где навигация. Много, не правда ли? А теперь самое смешное. Смотрим на мазню, и там, где у нас остались островки незамараной бумаги, там у нас и будет дизайн! Круто? И никакой пышности, помпезности и графических изысков (за исключением случаев, если вы рекламируете свой талант веб-дизайнера, но и тут необходимо не забывать об осторожности).

3. Навигация.
Продолжаем экзерцисы с бумажкой. Переворачиваем листок и засовываем карандаш в зубы. Начинается самый мучительный процесс – продумывание навигации по сайту. Продумываем все: от рубрик, до ссылок на e-mail’ы. Так уж сложилось, что пользователь привык видеть вертикальную иерархию от общего частного. Посмотрите хотя бы наверх этой страницы: наверху по горизонтали находятся ссылки на разделы портала, ниже – ссылки на подразделы (ссылка на дневник), еще ниже, слева, по вертикали, расположены ссылки на подразделы подраздела (дневника), и так далее. Не надо изобретать велосипед. Так как задачей любой страницы является привлечение и удержание посетителя, не надо предлагать ему того, к чему он не привык. Зачастую посетителю проще забить на все и свалить со страницы вместо того, чтобы искать глазами то сокровенное место, куда вам взбрело в голову засунуть навигационную ссылку.
Теперь вынимаем карандаш изо рта и рисуем карту сайта. Получаем самое настоящее дерево, где каждая веточка, каждый листик – плотно связанные между собой разделы, подразделы и странички. Все должно быть связано. Ну не каждая страница с другими, но так, чтобы с «нижней» страницы одного раздела можно было попасть на «нижнюю» страницу другого за минимальное количество кликов. Вот для того, чтобы на этом этапе не получилось никаких сложностей мы и пользуемся банальными карандашами и бумагой.
Только после того, как вы пройдете все вышеописанные три этапа формулирования концепции можно будет, наконец, нажать кнопку включения компьютера. Но об этом уже в следующей статье.

Веб-дизайн. Шаг 2. Начало дизайна.

1. Что должно быть установлено на компьютере?
После того, как была продумана и запечатлена на бумаге концепция вашего сайта, самое время преступить к разработке дизайна. Какие для этого понадобятся программы?
1. Html-редактор типа WYSIWYG (What You See Is What You Get – редактирование не кода, а непосредственно самого внешнего облика, лучше использовать Dreamweaver MX от Macromedia);
2. html-редактор типа «сделай сам» (редактирование кода, больше подойдет или HomeSite 5 от той же Macromedia, или 1stPage 2000, хотя можно воспользоваться и Notepad’ом);
3. Adobe Photoshop 7.01 – нужен на все 100%. Дешевые «закосы» типа Paint Shop Pro не катят! Для полноты ощущений можно поставить Macromedia Fireworks MX.
4. Редактор векторной графики. Лично я пользуюсь Corel Draw 11. Можно также использовать Flash MX, но он несколько не для этого, хотя, без сомнения, удобен. Вообще векторных редакторов – туча. Выбирайте, что больше понравится. Все равно в основном всю графику вы будете творить в растре.
Вот основные программы с которыми вам предстоит работать. Есть еще куча полезного и интересного ПО, которое служит скорее для удобства, а не для самой работы (например, ACDSee или Microangelo). Есть одно предупреждение - не ставьте Photoshop 6.0, иначе заработаете головную боль. Версия сырая и абсолютно недоработанная. Если нет возможности поставить 7-ю версию, лучше тогда будет остановиться на 5.5.
Во время покупки дисков с программами, купите еще пару дисков с клипартом и шрифтами, чтобы потом не прочесывать весь Интернет в поисках качественной картинки или фотографии или подходящего по стилю шрифта.
И, конечно, как любой уважающий себя дизайнер вы должны иметь хотя бы 2 разнородных браузера. Internet Explorer у вас уже наверняка есть, а в качестве альтернативы к нему сойдет Opera 7. Версии браузеров желательно постоянно обновлять.

2. Начало дизайна. Код.
Главное, что надо запомнить – любая веб-страница верстается исключительно на базе таблиц. То есть сперва, задавая архитектуру всего дизайна, необходимо создать «фундамент» из таблиц. Вспомните таблицы в MSWord – по сути html-таблицы на них очень похожи. Вы их можете сделать толще, тоньше, видимыми или невидимыми. По умолчанию видимые таблицы будут иметь толстые выпуклые границы, способные изуродовать любой, даже самый простой дизайн, поэтому в свойствах таблицы (тег table) элемент border лучше прировнять к 0. Тогда таблицы будут не заметны в браузерах, при этом удерживая всю верстку от расползания. В принципе, ячейки таблицы (тег td) и являются теми самыми блоками, которые составляют дизайн и которые вы с такой тщательностью зарисовывали на бумаге. Если дизайн простой, то можно обойтись одной - двумя таблицами, если сложный – то придется рисовать по несколько таблиц в одной. Но при этом нельзя забывать, что чем больше таблиц – тем больше время загрузки страницы, и, следовательно, уменьшается количество пользователей, так как далеко не у каждого есть нескончаемое терпение и желание ждать, пока все, что вы на ваяли, появится на экране. Время загрузки страницы надо стараться свести к минимуму, оптимизируя код и графику. Поэтому придется чуток помаяться, воспользоваться математическими навыками, приобретенными еще в школе и рассчитать точно количество точек, занимаемое той или иной ячейкой в зависимости от расположенных в ней объектов от текста до графики.
Одним из основных вопросов, которые возникают при заготовке таблиц является: какой ширины делать основные таблицы, т.е. непосредственно информационное поле. Учитывая то, что не малая часть пользователей все еще использует разрешение экрана 800х600, советую делать ширину примерно в 780 пикселей, чтобы оставалось место для scrollbar и интерфейса баннера. Но это не принципиально, можно растягивать дизайн по всей ширине. Также старайтесь, чтобы вся информация была сконцентрирована в примерно одной области экрана, дабы не создавалось ощущения ее нехватки. Как считают большинство веб-разработчиков, идеальным является тот дизайн, где 80% отведены под информацию, а 20% и меньше – под навигацию, то есть все пространство экранно должно быть заполнено вами по максимуму. И помните – вы никогда не сможете угадать какой монитор и какой экран находится в распоряжении пользователя, поэтому старайтесь угодить всем (и попробуйте свести использование % в качестве параметров таблиц к минимому, лучше рассчитать все до точки).
С таким же успехом вы не угадаете конфигурацию системы компьютера посетителя. Поэтому сразу запомните – в качестве шрифтов для текста можно использовать только те, которые имеются в большинстве ОС по умолчанию. Как правило используется одна и та же font-family: Arial, Helvetica, Verdana, sans-serif. Сразу возникает вопрос, а что такое font-family? Это список шрифтов, использование которых допустимо в данном теге. Система просматривает его и использует тот шрифт, который стоит в списке раньше других, если он установлен в системе. Меняя порядок элементов в списке, вы можете влиять на дизайн. Декоративные шрифты лучше использовать только в графике.
Постарайтесь использовать стандартный код. Теги это не однотипные кирпичи, которые можно нашвырять в произвольном порядке. Интерпретация тега самого по себе может отличаться от интерпретации этого же тега, если он будет вписан в другой. К сожалению, или к счастью, но код не любит авангардистских выходок. Отслеживание подобных «ошибок» также является элементом процесса оптимизации кода, на котором более подробно я остановлюсь в следующей статье.

Веб-дизайн. Шаг 3. Оптимизация кода.

Главное, что необходимо запомнить, код – не школьное сочинение, в нем важно содержание, а не объем. Точнее, чем «плотнее» написан код, тем быстрее будет грузиться страница. По сути, оптимизация кода заключает в себе три основных составляющих:
1. чистка кода ручками от лишней лабуды (например, неиспользуемые таблицы, ячейки, параграфы и т.д.);
2. CSS;
3. SSI.
Что такое «чистка ручками» , я думаю объяснять не надо, а вот на следующих двух словах из трех букв я остановлюсь поподробнее, так как именно они способны очень сильно облегчить и код, и вашу работу.

CSS
CSS – cascading style sheets, или каскадные листы стилей используются для того, чтобы придавать в основном не-графической части дизайна необходимый внешний вид. Листы стилей бывают:
1. автономные (файлы с расширением *.css) – подключаются к страницу следующими строчками: