Особенности 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
- 10 правил визуального маркетинга в Instagram (12834)
- 9 советов по созданию успешного контекстного объявления (3934)
- Оптимизация больших сайтов (10032)
- 50 приемов ретаргетинга в электронной коммерции (2501)
- 17 способов создать контент, который понравится Google (2888)
- 5 правил продающих форм заказа (9758)
- Маркетинг в социальной сети (2989)
- 10 примеров продающих заголовков для сайта (10309)
- Яндекс Директ и Google AdWords. Сравнительный анализ для рекламодателя (10873)
- Как заработать на собственном сайте (2956)
- Черные и белые методы продвижения сайтов (3478)
- Оценка эффективности рекламных кампаний в Интернет (9824)
- Механизм баннерной рекламы (3029)
- Как не попасть в бан (2849)
- Как продвигать кафе и рестораны в социальных сетях (10765)
- Контекстная реклама. Рецепты применения (2380)
- Использование коэффициента эффективности в «Яндекс.Директ» (2537)
- Как правильно написать SEO-текст (9450)
- Расчет бюджета контекстной рекламы (14573)
- Уходим в Интернет! (18036)
- Обзор технических решений для интернет-магазинов (13545)
- Проблема соответствия концепции рекламной кампании в сети Интернет (11760)
- Стратегия разработки рекламных кампаний в Интернет (15666)
- К вопросу о ссылочном ранжировании (8731)
- Как создать эффективный сайт. Проектирование сайта: маркетинговый подход (17187)
- Оптимизация сайта для поисковых систем (12782)
- Контекстная реклама или лучший способ попасть на первую страницу поиска (13604)
- Включение сайта в баннерообменную сеть (10520)
- Как лучше сформулировать требования к дизайну веб-сайта (13953)
- Автомобили и семантическое ядро (9850)
- Виды Интернет-маркетинга (16997)
- Проекты и Интернет-проекты (26426)
- Подготовка сайта для индексирования в поисковых системах (18650)
- Реклама в сети интернет (36329)
- Оптимизация сайтов для поисковых машин и каталогов (18799)
- Блог как рекламная площадка (12629)
- «Пьяная» реклама на службе Интернета (9393)
- Офлайновая поддержка виртуальных проектов (8759)
- Особенности поисковых систем и каталогов (10568)
- Поднимаем индекс цитирования (ИЦ) хитрыми способами (12935)
- Как поднять Индекс цитирования сайта в поисковых системах (12548)
- Практические рекомендации по раскрутке сайта (9810)
- Обмен баннерами (19848)
- Реклама в Интернет: виртуалии и реалии (11184)
- Новейшая обсервация российских счетчиков: формация Rambler TOP 100 (9601)
- Веб-индустрия остаётся слепой (9143)
- Успешный Интернет-проект (12620)
- О доменных зонах Интернета (9063)
- Пособие для начинающего заказчика сайта (17959)
- Как создать успешный сайт? (12859)
- Яндекс. Положение страницы в результатах поиска (11572)
- Чем занимается веб-мастер? (13379)
- Эффективные рекламные ссылки в рассылках. (9091)
- E-mail рассылка как важнейший маркетинговый инструментарий российского экспортера. (11794)
- Хотите поговорить о деле - не уподобляйетсь спамерам. (8785)
- Шесть типов on-line покупателей (16294)
- Кое-что о спаме (15290)
- Факторы ранжирования сайтов в SE (8859)
- Четыре источника и четыре составных части Интернет-маркетинга (11101)
- Зачем вам нужен сайт? (9551)
- Текстовые баннерообменные сети (8570)
- Раскрутка - неочевидные аспекты (10028)