Особенности screen (web) - дизайна

Screen (англ.) - экран. Экран телевизора, монитора, телефона, киноэкран должен быть красиво и стильно оформлен, точнее не он сам, а то что он показывает: интерфейс сайта, телепрограммы, презентации. Теоретические законы композиции, цветоведения, формы, типографики везде одни и те же - будь то полиграфия, промышленный или веб-дизайн. Есть только некоторые особенности, которые, как правило, диктует технология данного направления.

В данной статье мы подробно рассмотрим "дизайн для монитора", а именно веб-дизайн, основы которого покоятся на следующих китах:

1. "Юзабилити" (функциональность)

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

2. Компоновка (композиция)

Для начала вам нужна концепция устройства сайта. Концепция и воплощение сайта зависит от его предназначения:

• информационный (СМИ)
• сайт-визитка (небольшая компания)
• корпоративный сайт (много разделов, несколько языков)
• интернет-магазин (интернет-коммерция)
• специфический (развлекательный, рекламный)

Какой дизайн предпочесть "резиновый" или "жесткий" решать Вам. Резиновый (с размером ячеек заданных в процентах) более универсальный, гибкий, вмещает больше информации. Жесткий (с размером ячеек заданных в пикселях) ведет себя более предсказуемо и позволяет воплотить оригинальный дизайн. При задании ширины таблицы в процентах будьте готовы к тому, что на разных разрешениях мониторов ваши странички будут выглядеть по-разному, расползаясь на 17" и скукоживаясь на 11-12" мониторах лептопов. При этом текст может значительно изменять свои блоковые соотношения, а графика - уползать с предназначенного ей места. Для опытных веб-мастеров управлять этим не составляет труда, но новички могут изрядно помучиться. В лучшем случае - они просто не подозревают, что на больших мониторах их страничка просто разваливается на части.

При расположении нужно учесть пропорции блоков полагаясь на правило золотого сечения. Затем нужно определить предназначение каждого блока и его размеры. Размеры отдельных блоков сильно зависят от общей таблицы и своего предназначения. Часто в качестве модульного размера для ширин колон употребляются стандартные размеры баннеров (не значит, что ширина колонки будет именно 88 или 468 пикселов, но какой-то принцип привязки к этим модулям будет присутствовать). Наиболее часто употребляемые стандарты баннеров - 468х60, 88х31, 125х125 (западный стандарт, при котором высота может изменяться), 100х100 (стандарт, используемый в российской баннерной системе ВВ2). Есть и другие, менее распространенные стандарты.

3. Типографика (читабельность)

Интернет-технологии накладывают специфические ограничения на использование шрифтов в оформлении WEB-документов. B частности межплатформенный характер Интернета не позволяет однозначно определять шрифт для вывода "тела" текстового документа на экран монитора клиента. Применение HTML тега <FONT FACE=[гарнитура шрифта]> не есть панацея для решения этой проблемы. На клиентской машине просто может не оказаться нужного шрифта, а замена его другим, выбранным системой по умолчанию, приведет к появлению нечитаемого документа. Поэтому считается правилом хорошего тона не применять вышеобозначенный тег при проектировании WEB-документов. Указанная проблема еще ждет своего корректного решения, которое, возможно, появится в скором будущем.

Одним из показателей удобочитаемости является ширина строки документа. С появлением мониторов поддерживающих большое разрешение экрана стало возможно "укладывать" в одну строку до нескольких сотен знаков, однако строка "идеальной ширины" должна умещать порядка 50-70 знаков. При их большем количестве скорость чтения замедляется и утомляемость наступает значительно быстрее. Часто контраст снижают например используют темно-серый на белом фоне, чтобы резкий контраст не утомлял посетителя. Большие тексты стоит делать покрупнее (Text size 2 и выше). Боже вас упаси - делать слабоконтрастные сочетания шрифта и фона: например, желтый на белом.

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

Шрифт - в пределах публикации он должен иметь одинаковые характеристики - такие, как гарнитура (начертание), кегль (высота), цвет.

"Ошибки в правописании" - одна из самых главных ошибок в web-дизайне. Пользователи не любят грамматических ошибок, если на Вашем сайте множество ошибок, то пользователи могут перестать ходить на ваш сайт. Если у вас плохо с грамматикой, то хотя бы проверяйте правописание в word`e, а еще лучше - дружите с орфографическим словарем.

4. Цвет (восприятие)

Задача цвета - правильно определить эмоциональный настрой сайта. Цветовая схема web-сайта начинается с выбора тех основных цветов (2-4) страницы, которые используются для представления обычного текста, ссылок и посещенных ссылок. Все эти параметры указываются в тэге <body>.

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

Графическое оформление сайта - во-первых, оно должно укладываться в общую цветовую схему; во-вторых, Вы должны продумать общую концепцию графического оформления. Все графические элементы можно разделить на два больших класса: рисованные и фотореалистичные. Постарайтесь не смешивать эти два типа в оформлении. Кроме этого, в случае, если Вы используете на сайте фотографии в качестве иллюстраций, то перед использованием обработайте их - сделайте в случае необходимости тоновую и цветовую коррекцию, кадрирование, выберите примерный размер фотографий в публикации, найдите способ обработать края фотографии. А потом используйте данное оформление по всей публикации. И всегда пишите пояснения к фотографиям в параметре ALT тэга IMG - это будет восприниматься как подпись к фотографии и, кроме того, избавит пользователя от ожидания в случае, если его не интересует данная страничка.

Стандартные схемы.

«Престижные», золото, серебро, темно-серый, черный. Их задача - передать солидность, уверенность, стабильность и высокую стоимость.

«Пастельные», нежные бежевые, розовые, голубоватые... Женственные, мягкие, расслабляющие...

«Здоровые», из американской психологии... Чистота, здоровье, уверенность, семья....

«Природные», близкие к естественным органическим, природным компонентам..

Как вариант использования цвета - «Растяжки»... Обычно тональные оттенки одного цвета, и как акцент - более активный цвет.

Нестандартные сочетания.

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

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

5. Тестирование (работа над ошибками)

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

P.S. Технология

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

2003 © Дмитрий Комаров
пожелания и вопросы: dk@vidish.ru