Автор статьи: Тимченко Максим
>О том, что внизу
Разрабатывая очередной сайт, вы наверняка просиживаете много времени за дизайном верхней части страницы — за заголовком. Но достаточно ли времени вы уделяете тому, что находится внизу страницы?
В большинстве случаев страница, разработанная дизайнером, состоит из трёх элементов: заголовка, содержания и окончания.
С дизайном заголовка никаких проблем не возникает. фотошоп (или один из его многочисленных конкурентов) знает каждый, а разработать и воплотить навигацию (которая тоже относится к заголовку) не так уж сложно. К тому же, заголовок — это первое, что посетитель (и заказчик!) видят на странице, поэтому качественный заголовок обязателен для любой страницы и для наполнения кошельька самого дизайнера.
Самим по себе содержанием дизайнер, как правило, не занимается — наполнение сайта ему даёт заказчик. В оформлении содержания достаточно сохранить текст легко читаемым, оставить немного пустого места и обеспечить лёгкое редактирование. Поэтому собственно дизайна в теле страницы очень мало и большинство эффектов достигается простым HTML. Задачей разработчика остаётся — правильно расположить колонки текста, добавить изображения и расставить комментарии для будущих «обновителей» сайта — или не расставлять и требовать деньги за support.
В низу страницы находится окончание. Подходя к его разработке, дизайнер уже вымотан многочасовым рисованием заголовка, а мозг его иссушен форматированием десятков абзацев текста в содержании. Вдобавок, поскольку окончание находится в самом низу, то далеко не каждый заказчик обратит пристальное внимание на последние строки, и не каждый посетитель их увидит.
Руководствуясь этими аргументами и ведомый собственной усталостью, дизайнер сочиняет стандартное окончание — горизонтальная линия, счётчик, нижний рекламный блок, рейтинг и вечное «(c) такой-то год by Иван Иванович», думая, что этого достаточно.
Если вы действуете так же, то вместе с Иван Иванычем вы делаете большую ошибку, потому что окончание страницы не менее важно для общего впечатления, чем заголовок, и вот почему:
«Повторение — мать учения». В окончании страницы можно повторить что-нибудь, относящееся к сайту — логотип компании, или фирменные цвета, или рекламный слоган. Каждый, кто досмотрит страницу, увидит повторенную часть дважды и соответственно увеличится шанс на запоминание увиденного.
Запоминание — это вторая причина. Красивое окончание привлекает внимание к сайту хотя бы потому, что сайтов с хорошим окончанием не так много. Эстетическое удовлетворение посетителя хорошим окончанием может быть настолько велико, что он захочет посетить сайт ещё раз… А потом и ещё раз…
И последняя причина — предложить посетителю продолжить путешествие по сайту. В окончании можно повторить навигацию, или предложить перейти к другой странице, как-либо связанной с этой. Или дать адрес e-mail для того, чтобы все могли высказать своё мнение о сайте вообще и об окончании в частности.
К этой заметке есть 6 примеров: 2 сайта с хорошими окончаниями, 2 с недостаточно хорошими и 2 без них вообще. 2 из них — на этой странице, а на остальные есть ссылка внизу заметки.
Сайт без заголовка — 1 : interactive agency .dot (www.dot.ru)
На сайте окончания нет вообще. При таком красочном заголовке — я не знаю, почему нельзя было что-нибудь добавить. Таланта у дизайнеров этого сайта достаточно — это видно, и оправдания им нет. (см. страница слеваа — зелёная полоса разделяет между началом и концом страницы)
На таких страницах, к тому же, никогда нельзя понять — это всё содержание или нет. Всё время кажется, что вот сейчас придёт из Сети ещё кусок HTML и появятся несколько новых сообщений внизу. Окончание как бы говорит посетителю, что загрузка закончена, и больше ничего на странице не будет.
Кстати, иллюстрацией этого принципа может послужить этот скриншот с сайта Артемия Лебедева (http://www.tema.ru/) — справа. Пока содержание есть, справа добавляется зелёная стрелка и побуждает посетителя прокрутить до низа, а там — своеобразный стоп-сигнал. Соответственно, если загрузка страницы обрывается посредине, то последняя стрелка будет зелёной. Пора жать Reload!
Cайт с заголовком — 1 : Cтудия РусАрт (www.studio.ru)
Окончание есть, причём оно реализует все 3 причины: внизу находится контактная информация (лучше запомнить название — или сразу позвонить); стиль окончания повторяет дизайн заголовка и поэтому лучше запоминается; а кнопки «на главную страницу» и «карта сервера» предлагают продолжить путешествие по сайту.
Сайт без заголовка — 2 : Cherry Design (длинный адрес)
Аналогично примеру в тексте заметки — на сайте нет даже намёка на окончание страницы. Текст просто обрывается смайликом 🙂 — но смайлик, увы, не заменяет хорошего окончания.
Я выбрал этот сайт потому, что на нём многократно повторяется одна и та же картинка — фужер с вишнями. И эту картинку вполне можно было бы положить в основу отличного окончания страницы. Даже просто повторить её внизу страницы — уже помогло бы посетителю запомнить сайт получше.
Cайт с заголовком — 2 : руководство(www.design.ru/kovodstvo)
И опять, хорошее окончание реализует несколько причин: во-первых, руки и «пройдёмте, товарищ!» являются горизонтальной навигацией по «параграфам»; в то же время, есть ссылки на главную страницу и на другой раздел сайта. Во-вторых, есть адрес для связи и копирайт. Светло-синий цвет некоторых элементов повторяется в заголовке и таким образом объединяет страницу.
Можно улучшить — 1 : CarsEverything (www.carseverything.com)
Здесь окончание присутствует, и его ярко-желтый фон отделяет его от содержания страницы. Но всё же, при таком перенасыщенном графикой заголовке страницы можно было бы уделить окончанию побольше внимания и не ограничиваться двумя строчками текста… Разумеется, в таком аскетичном окончании никакой навигации или адресов для связи нет. Нехорошо, товарищи дизайнеры… Устали? 🙂
Можно улучшить — 2 : SWSoft (www.sw.com.sg)
Здесь окончание тоже есть. Копирайты, адрес и даже телефон для связи — всё на месте. Но есть один неожиданный элемент — WebRing. Такому элементу вряд ли место в окончании страницы… особенно если он повторяется и на других страницах сайта. И опять — никакой графики.
В этом случае, очень хорошо на окончании смотрелась бы копия зелёной полосы навигации сверху — на страницах высотой более одного экрана, она очень помогает уменьшить количество прокруток обратно наверх страницы только для того, чтобы нажать на ссылку (которой нет внизу).
Позволю себе надеяться, что посмотрев примеры и прочитав эту заметку, вы хорошо запомните важность окончания для любого сайта (да-да, и вашего тоже). И перестаньте ссыпать туда рекламные кнопки десятками! Пожалуйста!
