Текст книги "Создание сайтов"

«Рассылка SeoPult. Выпуск № 26: оптимизация сайта для “Яндекс. Картинок”»: http://seopult.ru/subscribe.html?id=26

«Что такое Shema.org?» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1122752

«Что такое микроформаты?» («Яндекс. Помощь»): http://help.yandex.ru/webmaster/?id=1111670

Основы веб-типографики: http://www.dejurka.ru/web-design/typography_basics/

«Какой doctype выбрать…»: http://webcareer.ru/kakoj-doctype-vybrat.html

Плагин для определения шрифтов на сайтах: http://chengyinliu.com/whatfont.html

О разнице между пунктами, пикселями, процентами, em: http://habrahabr.ru/post/42151/

Сопоставление шрифтов с засечками и без засечек: http://digilinux.ru/2013/05/13/sans-serif-legibility/

Инструмент для проверки цветового контраста «шрифт – фон»: http://www.snook.ca/technical/colour_contrast/colour.html

«Леттердей – проект о шрифтах, типографике, леттеринге и буквах»: http://letterday.ru

«Руководство по обеспечению доступности веб-контента (WCAG) 2.0»: http://www.w3.org/Translations/WCAG20-ru/

«Ководство» на сайте «Студии Артемия Лебедева»: http://www.artlebedev.ru/kovodstvo/sections/

Глава 12. Фирменный стиль: умная одежка

На протяжении книги мы настойчиво призываем вас посылать потенциальному клиенту в Интернете сигналы четкие и вместе с тем раззадоривающие его. Чтобы он в кратчайшие сроки понимал, что ему обещают, и получал эмоциональный импульс подробнее изучить ваше предложение. Контакт с аудиторией принимает множество форм: объявления в контекстной рекламе, посадочные страницы вашего сайта и т. д. Но основа основ – фирменный стиль, пронизывающий ваши проявления в офлайне и онлайне (сокращенно фирстиль).

Фирменный стиль – это совокупность графических решений, которые вместе и по отдельности служат идентификаторами бренда и ассоциируются с ним: логотип (он же лого), корпоративные цвета, шрифты и т. д. Он лицо компании и применяется везде, где та должна заявить о себе: в Интернете и в телерекламе, на упаковке ваших товаров и поздравительных бланках.

В 1974 году ученые из пуэрто-риканской обсерватории Аресибо отправили послание внеземным цивилизациям – радиосигнал в направлении одного из светил в созвездии Геркулеса. В нем были закодированы данные о человеческой ДНК, солнечной системе и другая важная информация о жизни на Земле. Как вы думаете, в какой объем пришлось упаковать эти сведения? Всего в 1679 цифр. В графическом представлении послание – это пиктограмма с простейшими геометрическими фигурами: чтобы обращение было доставлено через космические пространства, оно должно быть лаконичным и слабо подверженным искажениям. То же касается вашего фирменного стиля, хотя в случае с ним исход дела решают не световые годы, а мгновения: хороший логотип воспринимается, как правило, в считанные миллисекунды и запоминается крепко-накрепко.

По одежке встречают, спору нет, но лучше сделать эту одежку умной, чтобы вас не провожали восвояси, пусть даже по уму, а привечали и уважали.

Фирменный стиль не магия. Он не поможет вам с кассовым разрывом и не заставит сотрудников техподдержки быть приветливее с клиентами. И работает иначе – не возносит, а выделяет вас из сонма конкурентов. Обставить соперников в качестве обслуживания, ассортименте и прочем – ваша личная задача.

Полезен фирменный стиль, в частности, тем, что:

• делает ваш бизнес или продукт узнаваемым и формирует его имидж;

• упрощает и удешевляет вывод новых товаров на рынок;

• косвенно служит сплочению ваших сотрудников, работает на корпоративную солидарность.

Ждать от него мгновенного повышения продаж не стоит, хотя косвенно, в комплексе с маркетинговыми мерами он способен влиять на коммерческие метрики бизнеса: чувствуя доверие к визуальному ряду, люди зачастую готовы доплатить за ту надежность, которую бренд приобретает в их глазах.

Разберем небольшой вопрос терминологического свойства. Попадаются дизайнеры, которые, пуская пыль в глаза, возвещают, что делают не фирменный стиль, а айдентику. Сонм голосов нам возразит, но скажем, что думаем: фирменный стиль – ровно то же самое, что айдентика. Второй термин происходит от словосочетания corporate identity, что в вольном переводе с английского означает «совокупность индивидуальных черт компании». В общем, фирменный стиль как есть. Так что далее по тексту мы будем употреблять эти два слова как синонимы.

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

Базовые требования к фирменному стилю рациональны и просты.

• Релевантность вашему бизнесу. По логотипу, написанию названия компании (или сайта) и их обрамлению должно быть понятно, чем вы занимаетесь и как себя позиционируете. Консервативному торговцу замороженным горошком нужно совсем не то, что подходит онлайн-сервису ведения домашней бухгалтерии. В банковском секторе свои пути к сердцу клиента через зрачки, в торговле одеждой – свои. Но сторонитесь клише: Эйфелева башня – тематически логичный, однако глобально пошлый образ для рекламы туров во Францию.

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

• Масштабируемость и универсальность логотипа. Первое требование очевидно: как минимум логотип компании легко поддается увеличению или уменьшению и может использоваться на всех мыслимых носителях: фирменных бланках, в наружной рекламе, на борту корпоративного транспорта и т. д. Второе нуждается в разъяснении. Главное – не раболепствовать перед конъюнктурой рынка. В ответ на вопрос «Как одеваться?» персонаж писателя Евгения Клюева заметил: «Одеваться надо никак, дабы не быть иллюстрацией места и времени». Отчасти эта максима справедлива и в нашем случае. Разница между «быть современным» и «гнаться за модой» огромна. Мода меняется за месяцы, а вот современный, но универсальный логотип года через три будет легко подновить в ходе ребрендинга. Большим упущением было бы изобразить на логотипе фигурку с новейшим смартфоном: несколько лет, и гаджет станет не то что немодным – до смешного архаичным. Стремитесь к тому, чтобы ваш фирменный стиль имел большой срок годности. Чем дольше и крепче укореняется в умах и сердцах ваша айдентика, тем больше пользы с течением времени она вам приносит.

• Простота. Не плодите сущности без необходимости. Часто рекомендуют делать логотип таким, чтобы его было легко запомнить и по силам нарисовать на салфетке любому человеку с улицы. Критерий неплохой, хотя встречаются противоречащие ему блестящие работы. Например, логотип Unilever, будучи узнаваемым, откровенно затейлив, и воспроизвести его в точности – та еще задача (рис. 25).

^{Рис. 25. Логотип Unilever легко запоминается, но от руки на салфетке его нарисует не каждый}

Оптимально, если логотип и композиция фирменного блока (см. ниже) смотрятся в черно-белом варианте не хуже, чем в цветном и допускают использование на самых разных носителях. Вплоть до туалетной бумаги и варварской «рекламы на асфальте». Важнейшие элементы фирменного стиля должны пристойно выглядеть и быть узнаваемыми на любой вашей продукции.

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

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

• Целостная цветовая комбинация. Если логотип передает индивидуальность вашего бизнеса, то фирменные цвета, фигурально выражаясь, скорее типаж и характер. Не демонизируйте и не боготворите краски, тем более вне контекста. «Черный мрачен», «Красный агрессивен» – огульные утверждения, даже притом что первый вправду легко подать как траурный, а второй в правильно выбранной точке оказывает интенсивное психологическое воздействие. Избегайте стереотипов. Дело всегда в палитре и ее сообразности бизнес-задаче, а не в отдельных цветах. Сядьте вместе с дизайнером, возьмите пантонный веер (см. блок «Полезно знать») и выберите оттенки.

Нежелательно использовать в фирменном стиле больше трех-четырех цветов. Лучше два-три. Иначе, во-первых, есть риск скатиться в шутовскую пестроту, а во-вторых, буйство красок способно создать сложности при печати.

Корпоративные цвета следует подбирать так, чтобы их можно было использовать и в отрыве от логотипа и товарного знака. Один из авторов книги до сих пор вспоминает, как попал в центральный офис компании Innova, который был впечатляюще отделан в насыщенно-сиреневой палитре.

Как и логотип, но в меньшей степени, фирменные цвета призваны отражать вашу сферу деятельности: занимаетесь экотуризмом – зеленый вам в помощь; в туриндустрии распространены оранжевый и синий. Но необязательно. «Альфа-банк» активно использует «опасный» красный цвет в логотипе и в оформлении всех корпоративных носителей – и не горит.

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

С нашей точки зрения, если вы не обращаетесь в веб-студию, лучше заказывать фирменный стиль отдельно от оформления сайта. И конечно, приступать к созданию сайта только после того, как у вас на руках окажутся все материалы по айдентике. Каждый второй художник Веба утверждает, что с одинаковым мастерством рисует и фирменный стиль, и порталы, и интерфейсы. Однако из них от силы каждый пятый трезво оценивает свои компетенции. Вдобавок если запуск онлайн-бизнеса для вас – задача спешная и приоритетная, то вы вдвойне рискуете провалить сроки, доверив и оформление сайта, и фирменный стиль одному исполнителю.

Обсудите с дизайнером, какие именно элементы он для вас разработает. Не все трактуют фирменный стиль одинаково с точки зрения состава. В джентльменский набор входят:

• логотип и/или товарный знак;

• цветовая гамма;

• набор шрифтов;

• примеры употребления всего вышеперечисленного на практике (визитные карточки, папки, конверты и т. д.).

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

Обратите внимание

Согласно российскому праву, регистрируется именно товарный знак, юридически понятия «логотип» в РФ не существует.

Повторимся, необязательно, чтобы фирменный стиль был броским и дерзким. Важно лишь, чтобы он отвечал характеру вашего бизнеса и обладал свойством повторяемости – был легко воспроизводимым.

Что под категорическим запретом, так это банальности. Рукопожатие – в числе символов, которые следовало бы законодательно сделать неприкосновенными для творцов лого. Когда-то оно выражало идею доверия, сегодня – отсутствие идей.

Предпочтительно иметь на руках логотип сразу в нескольких форматах. Вам точно понадобится его версия «в кривых», то бишь в векторной графике, обычно. ai (расширение программы Adobe Illustrator) или. eps (Adobe Illustrator, Photoshop и др.). Не помешает и растровый вариант, лучше TIFF. Предпочтительно, чтобы лого у вас имелось в двух цветовых моделях – CMYK и RGB.

Желательно, чтобы конкретные образцы фирменного стиля были изображены в максимально приближенном к реальности виде: бланки – с текстом, конверты – в полной развертке, визитки – с ФИО и должностями реальных людей, а не «Ивана Ивановича Иванова, менеджера».

Наряду с самим фирменным стилем на выходе у вас в том или ином виде должен быть гайдлайн – руководство по его правильному использованию. Эту «книжку стандартов» настолько часто называют брендбуком, что впору было бы махнуть рукой. Но мы тем не менее заметим, что брендбук – это куда более широкое понятие, включающее разъяснение политики бренда, описание его миссии, маркетинговой концепции и т. д. Гайдлайн же – своего рода паспорт фирменного стиля, который фиксирует ключевые принципы его использования «в боевых условиях». А главное, зримо проводит границу: как айдентику можно использовать, а как нельзя (например, недопустимо поворачивать логотип относительно горизонтальной оси, уменьшать свободное пространство между блоками композиции и пр.). Львиную долю возможностей и запретов иллюстрирует так называемый фирменный блок – композиция из логотипа, названия бренда, возможно, также слогана и других элементов в корпоративных цветах либо в отдельности, либо на каком-то носителе.

В среднем по состоянию на конец 2013 года за создание фирменного стиля дизайнер класса «не кот в мешке» берет не меньше 20–30 тысяч рублей. У начинающих финансовые запросы скромнее, но и непредсказуемость результата выше. К счастью, вопрос «Почему так дорого?» возникает все реже, когда дело доходит до айдентики: вредно экономить на том, какими вы будете представать в глазах потенциальных клиентов и партнеров и какой посыл будете транслировать тем, до кого дотянетесь.

^{Рис. 26. Пример использования фирменного стиля сервиса «Интегратор»: набор деловой документации (www.artlebedev.ru)}

Вполне возможно, что вам не понравится первое решение, которое предложит вам дизайнер. Обговорите такую опцию с исполнителем заранее и уточните, сколько вариантов фирменного стиля будет входить в основной гонорар (обычно один, реже два), а сколько он готов сделать при необходимости дополнительно – и по какой модели оплаты. Не соглашайтесь, махнув рукой: «А, и так сойдет!», на исполнение айдентики, которое категорически вам претит. Такие «нелюбимые приемные дети» часто доставляют бизнесу немало хлопот. И все равно потом придется осуществлять ребрендинг.

О целесообразности расходов на фирменный стиль свидетельствует история онлайн-сервиса «Интегратор». Продав доставшуюся ему в наследство квартиру, основатель проекта Евгений Волк пустил значительную их часть на… создание айдентики «Студией Артемия Лебедева». Предельно простой, даже аскетичной. За что только не ругали Евгения: за прожигание бюджета, за конформизм под маской нонконформизма, за дешевый самопиар. Однако, во-первых, он породил могучую волну в медиа, а во-вторых, фирменный стиль по-настоящему удачен и бьет в цель (рис. 26). Видите, мы тоже приводим в пример историю «Интегратора», и совершенно безвозмездно.

Резюмируя все вышесказанное, даем вам совет: полагайтесь на свой вкус, на свое умение выбрать профпригодного дизайнера, изучайте истории успеха чужих брендов – и читайте книгу «Логотип и фирменный стиль» Дэвида Эйри, чтобы понять, какими трудами конструируется то, что кажется со стороны таким простым.

О цветовой модели Пантон: http://ru.wikipedia.org/wiki/Цветовая_модель_Пантон

«Дизайн логотипа: что, как и чего»: http://www.dejurka.ru/inspiration/how-to-do-logo/

Каталог логотипов Logobank.ru: http://www.logobank.ru

Как разработать профессиональный логотип: http://blog.shaihalov.ru/2009/11/21/kak-razrabotat-professionalnyj-logotip/

Глава 13. Контент, часть I: тексты прямого наведения

Узко мыслящим веб-разработчикам и дизайнерам свойственно приуменьшать роль всего выходящего за пределы их юрисдикции: дескать, здание мы построили, воду и канализацию подвели, а что за контора в нем будет дислоцироваться – юридическое бюро, нефтегазовая корпорация или порностудия, – нас не тревожит. Но их просвещенные коллеги при первом же обсуждении брифа спрашивают про контент. И нужно, чтобы вам было что им ответить.

В дословном переводе с английского content означает «содержимое», или информационное наполнение сайта: тексты, фотографии, инфографика, видео, аудиофайлы и т. д. На одни сайты, например онлайн-СМИ и развлекательные порталы, именно ради контента стекаются посетители. На других он «проводящая среда», через которую с большим или меньшим сопротивлением человек движется к покупке товара или заказу услуги.

Хотя Веб становится все более визуальным, в большинстве случаев текст по-прежнему главное средство убеждения аудитории. Структурный каркас сайта – ваши артиллерийские орудия, верстка и контент – система наведения и боекомплект, который достигает цели. Или не достигает. Когда дизайн и устройство веб-проекта адекватны бизнес-задаче, дело решает контент – и перво-наперво текст. Две разные статьи в одной и той же верстке могут побуждать читателя к диаметрально противоположным действиям. Так что, хотя расхожее выражение content is king («контент – король», или в вольном переводе «контент всему голова») в главном справедливо, в зависимости от качества текстов – в продолжение монархической метафоры – сайт может быть захудалым Свазилендом, а может Британской империей.

• Написание авторских материалов, или копирайт. Достойнейший и беспроигрышный путь при условии, что исполнитель квалифицирован и честен. Или вы пишете сами, или берете сотрудника в штат, или выносите задачу на аутсорс (см. подраздел «Откуда брать тексты»).

• Рерайт. Чужие статьи своими словами. Лучший вид рерайта – тот, что подразумевает переосмысление оригинала. Приемлем рерайт в тех случаях, когда самим форматом продиктованы сухость и краткость изложения, а информация о предмете – конечный набор фактов и характеристик, например при составлении карточки товара в интернет-магазине. Переписывать что-либо нужно еще осторожнее, чем писать с нуля. Популярные в прошлом программы-синонимайзеры, которые создавали на основе готового текста «новый» заменой слов и конструкций на сходные по смыслу, – страшнейший раздражитель для поисковиков.

• Переводы. До сих пор огромная часть аудитории Рунета не выбирается за его пределы, поэтому переводы полезных материалов с иностранных языков находят благодарных читателей. В обязательном порядке ставьте ссылки на оригинал.

• Агрегация. Касается главным образом онлайн-сервисов. Материалы автоматически собираются из других интернет-источников, а ценность сайта заключается в удобстве подачи синдицированной информации и в дополнительной функциональности (система комментирования и т. д.). Пример – служба «Яндекс. Новости».

• UGC. Расшифровывается как user-generated content – контент, производимый пользователями: комментарии, отзывы, записи в онлайн-дневниках и т. д. Качественный UGC любят поисковые системы и, например, выделяют в своей выдаче сайты с репрезентативными отзывами о товарах (показывают рейтинг «звездочками» и т. д.).

На пользовательском контенте сковали себе ключи счастья многие ныне процветающие веб-проекты. Например, справочно-информационный портал Banki.ru, изюминка которого в продуманной системе отзывов о кредитных организациях. Или Babyblog.ru: фактически предоставляя беременным женщинам и молодым матерям платформу для ведения дневников, сервис по состоянию на февраль 2013 года половину трафика получал из поисковых систем при расходах на SEO на уровне 50 тысяч рублей (см. блок «Полезно знать»).

Обратите внимание

UGC нуждается в надзоре со стороны администрации сайта – модерации либо предварительной, либо осуществляемой постфактум. Бессмысленные комментарии, ссылки на зараженные или подозрительные сайты робот «Яндекса» или Google может счесть спамом, что скажется на положении вашего ресурса в поисковой выдаче.

• Краудсорсинг. Метод коллективного создания и редактирования контента. Полностью на краудсорсинге основана онлайн-энциклопедия Wikipedia – один из самых посещаемых в мире сайтов. Из российских проектов такого типа упомянем Notabenoid – платформу для распределенного перевода книг, фильмов и т. д. Метод действен при сильной мотивации аудитории и наличии администраторов-волонтеров в достаточном количестве.

Выше мы перечислили этически и коммерчески приемлемые типы контента по «характеру производства». Ниже упомянем те, которые в современном Интернете категорически вредны.

• Копипаст. От англ. copy и paste – «скопировать» и «вставить» соответственно. Почти нейтральный, с легким пренебрежительным оттенком эвфемизм слова «воровство». Вызывает аллергию у поисковиков: заимствования они обнаруживают почти всегда и понижают авторитетность сайта-«повторюшки», из-за чего тот проседает в их выдаче. «Хронический копипаст» – игра на вылет из поискового индекса «Яндекса» и Google.

• Парсинг. От англ. parse – «анализировать», «разбирать». По существу тот же копипаст, но механизированный. Программа-скрипт разбирает страницу чужого сайта на блоки и собирает на вашем собственном, вытягивая из исходника все необходимое, например текст целиком или отдельные его фрагменты.

• Автоматическая генерация текстов. Как шутят бывалые интернетчики, «злое зло». Поисковики давным-давно научились определять контент, вышедший из жерла «бредогенераторов». И за него по справедливости налагают на сайт штрафные санкции.