Веб-дизайн
Веб-дизайн читать книгу онлайн
Книга автора бестселлера `Факс-модем: от покупки и подключения до выхода в Интернет` — Дмитрия Кирсанова — первый полный курс веб-дизайна на русском языке, написанный профессиональным дизайнером. От теоретических основ визуального дизайна до интернетовских технологий и приемов практической работы над сайтом — все это есть в книге, написанной понятно, подробно и увлекательно. Издание будет полезно не только начинающим создателям сайтов, но и дизайнерам, работающим в более традиционных областях, специалистам по рекламе и маркетингу, художникам, программистам, — и, конечно же, всем творческим и любознательным людям.
Внимание! Книга может содержать контент только для совершеннолетних. Для несовершеннолетних чтение данного контента СТРОГО ЗАПРЕЩЕНО! Если в книге присутствует наличие пропаганды ЛГБТ и другого, запрещенного контента - просьба написать на почту [email protected] для удаления материала
На килограмм живого веса. Последний в списке, но далеко не последний по важности фактор, оказывающий влияние на CTR баннера, — это объем графического файла в байтах: чем дольше загружается баннер, тем большая доля читателей страницы не дождется его полного проявления и, следовательно, будет навсегда потеряна для рекламодателя. На западных сайтах верхней границей размера для баннера формата 468х 60 считается 15 Кб, а на некоторых живущих за счет рекламы и потому стремящихся к максимальной эффективности контент–сайтах — даже и 10 Кб. В России, где пропускная способность интернетовских каналов заметно ниже, баннеру лучше не выходить за пределы 7–8 Кб. Для этого приходится прибегать к значительно более агрессивной, чем обычно, оптимизации графических файлов (стр. 252), в особенности для баннеров анимированных.
Совместить несовместимое — богатую анимацию и минимальный размер файла — в одном баннере очень сложно. Проще сделать это в серии баннеров, образующих спланированную рекламную кампанию. Если цель оправдывает затраченные средства, даже не очень крупные фирмы вполне могут добиться того, чтобы средний посетитель сайтов определенной тематики видел их баннеры не реже раза в день. В таких случаях выгодно выпустить одновременно серию близких по стилю и содержанию баннеров, различия между которыми позволили бы охватить максимально широкую аудиторию.
Очевидно, в первую очередь баннеры должны различаться начальными кадрами представления: если одного обязательно привлечет «мультик», то другого с большей вероятностью заинтересует текстовый вопрос на близкую ему тему. Кроме того, принадлежность баннеров к одной серии лучше раскрывать только в самом конце, чтобы не ослаблять внимание тех, кто, возможно, уже видел другие баннеры на ту же тему. Не менее важно варьировать баннеры серии по объему файлов, так чтобы самые легковесные экземпляры могли «зацепить» пользователей с медленной связью за счет быстрой загрузки, а «тяжеловесы» поражали бы качественной анимацией воображение тех, для кого время загрузки страницы значения не имеет.
Рис. 72 Менее «агрессивный» вариант баннера на рис. 68, использующий иные средства для начального привлечения внимания
Рис. 73 Самый простой и незамысловатый баннер из той же серии (см. рис. 68, 72)
Пример такой сбалансированной рекламной кампании — баннеры на рис. 72 и рис. 73, вместе с рис. 68 составляющие серию, одновременно «выпущенную в обращение» фирмой IBM для рекламы продукта под названием «Conference Tracker». Если баннер на рис. 68 весит без малого 15 Кб, то баннеру с рис. 72 хватает десяти, а объем рис. 73 — всего три с половиной килобайта. Очевидно, последний баннер имеет смысл только в контексте всей серии, так как сам по себе он не слишком интересен.
Acknowledgements. Кроме полноразмерных, часто сменяющихся рекламных баннеров, на первых страницах сайтов можно встретить особые «минибаннеры» (или попросту «кнопки»), обычный размер которых — 88х 31 пикселов. Большинство из них предназначено для несменяемых ссылок на сайты, которые автор, обычно на вполне добровольной основе, хотел бы порекомендовать своим посетителям. Нередко минибаннеры ссылаются на страницы тех программных продуктов, с помощью которых данный сайт был создан или (с точки зрения его автора) должен просматриваться, — бесчисленные «Powered by», «Created in» и «Best viewed with». Конечно, нет ничего плохого в том, чтобы поддержать бесплатной ссылкой производителей понравившейся вам программы. Однако по непонятной лично мне причине многие дизайнеры предпочитают вывешивать на своих сайтах кнопки именно тех двух фирм, которые вряд ли нуждаются в их рекламе, — Netscape и Microsoft. Утверждение, что данную страницу «лучше всего» смотреть в таком–то из броузеров, если и соответствует действительности, должно звучать скорее как признание автора в непрофессионализме — ведь, как я уже показывал, в большинстве случаев ничто не мешает сделать информацию сайта доступной для всех мыслимых броузеров и устройств воспроизведения. А какой именно из броузеров будет самым удобным для вашего пользователя — решать во всяком случае не вам. В тех же редких ситуациях, когда основное содержание сайта визуально по своей природе, корректнее ограничиться как можно более обшей формулировкой (например, «A browser with image display capability is recommended»), не пытаясь угнаться за быстро меняющейся броузерной модой.
ВИЗУАЛ
Нечто среднее между «декоративным пятном», тематической иллюстрацией и эмблемой, визуал (англ. visual) — главное оружие дизайнера в борьбе за внимание пресыщенного информацией посетителя. У фирм поменьше и победнее визуал на первой странице месяцами остается одним и тем же; в этом случае он обычно иллюстрирует постоянную основу деятельности фирмы, метафорически отражает ее название (пример 10) или рекламный лозунг. Более богатые и влиятельные фирмы, стремясь к тематическому разнообразию при сохранении общего стиля оформления, могут позволить себе регулярно менять визуал первой страницы вместе с относящимся к нему текстом — последними новостями, пресс–релизами, обзорами и т. п.
На внутренних страницах сайта визуал обычно сводится на роль призаголовочной графики (пример 9). Иногда используется сквозной визуал, повторяющийся на всех страницах сайта и обычно входящий в состав другого постоянного элемента — блока логотипа или навигационной панели. Такие визуалы уже не могут меняться чаще, чем весь дизайн сайта, и «визуальная» функция в них почти уступает свое место «фоновой» (см. пример на стр.319), Тем не менее довольно часто, особенно в призаголовочной графике, определяющими для выбора картинки являются ее сюжет и тема — что, по–видимому, и следует считать основным признаком визуала в отличие от других жанров веб–графики.
С другой стороны, в отличие от иллюстраций в научных и деловых документах, однозначно соотносящихся со смыслом текста, темы визуалов могут быть практически любыми. Уместной будет аналогия с логотипами: как и там, здесь противопоказана прямая иллюстративность, а лучшие результаты дает вольное толкование, творческое переосмысление темы страницы. Нужно, чтобы зрителю пришлось затратить определенные усилия, чтобы сообразить, «при чем тут это», — получаемое от этого интеллектуальное удовлетворение есть необходимая приправа к удовлетворению чисто эстетическому.
Рынок визуалов. Из эстетических же требований к визуалу стоит отметить в первую очередь достаточный текстурный контраст между изображением и его окружением. Поскольку на типичной веб–странице преобладающими текстурами являются плоский цвет фона и почти что геометрическая текстура рядов букв, нет ничего удивительного в том, что самым популярным источником для визуалов служат фотографии, часто сопровождаемые градиентами прозрачности или аморфными, размытыми облакообразными краями (пример 17). Не будет преувеличением сказать, что большинство производимой в мире на продажу фотопродукции употребляется для визуалов веб–страниц и их аналогов в других жанрах дизайна. (Отчасти по этой же причине на любительских страницах, авторы которых не могут или не умеют пользоваться настоящей фотографикой, столь популярны псевдотрехмерные, часто анимированные заголовки и логотипы, стр.293).
Есть и другие источники графики для визуалов. Именно здесь уместно будет сказать несколько слов о рисованной графике — теме, безусловно заслуживающей гораздо более подробного рассмотрения. Как я уже упоминал, умение рисовать — талант совершенно отдельный от таланта дизайнера, и к тому же в гораздо большей степени врожденный и слабо поддающийся воспитанию (и уж разумеется, ни в коей мере не ставит целью научить вас рисовать эта книга). Рисованию научиться гораздо труднее, чем дизайну (хотя это совсем не означает, что дизайну научиться легко). Однако любой дизайнер должен понимать совершенно особую ценность рисованной графики и уметь с выгодой пользоваться ею в своих работах.