Небольшой полезный трюк для тех, кто постоянно использует в своей работе шаблоны модульной сетки от 960.gs. Этот фреймворк довольно распространен и, в последнее время, находит все больше и больше поклонников среди дизайнеров и верстальщиков.

Но в стандартных заготовках сетки есть один небольшой недостаток — там нет никакой привязки к вертикальному ритму (по сути, это просто колонки), поэтому все поиски вертикальных отступов основываются на личных предпочтениях рисующего дизайнера. С одной стороны правильно, с другой, хотелось бы упорядоченной системы отсчета для элементов будущего макета.

Размечать самостоятельно заготовки с помощью зебр-заливок и направляющих — не выход. Это лишняя трата рабочего времени, которое лучше потратить с большей пользой. Поэтому воспользуемся онлайн-генератором Modular Grid Pattern, чтобы доработать стандартные шаблоны 960.gs.

Задача: быстро получить из левой части картинки то, что изображено в правой:

Переходим по вышеприведённой ссылке, выставляем следующие параметры с картинок ниже и сохраняем полученные результаты в виде PNG или Photoshop-pattern.

Для 12-ти колоночного макета:

Для 16-ти колоночного макета:

Для 24-х колоночного макета:

Параметр Baseline (здесь используется для задания интерлиньяжа или line-height) я выставлял 18px в расчете, что размер основого шрифта 12px (font-size × 1,5 = line-height). У вас он может быть другим, в зависимости от личных убеждений и выбранного кегля для текста.

Высоту модулей (Module height) выставляйте по собственному вкусу, я оставил стандартные значения.

Полученные результаты в виде PNG-файлов также отлично подходят для наложения на макет в процессе HTML-верстки с помощью PixelPerfect (или подобных расширений для браузеров).

Особо внимательные могут обнаружить, что на сайте Modular Grid Pattern есть еще ссылка на расширение для Photoshop, но у меня с ним что-то не срослось. После n-ной попытки победить его недружественное автозаполнение параметров, я его удалил.

Ну и в конце, пара полезных ссылок в тему:

• Статьи Алексея Черенкевича о модульной сетке.
• Генератор вертикального ритма для сайтов.

Критикам и троллям — просьба обойти стороной тему достоинств и недостатков подобных фреймворков, суть поста не в этом.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. 96% или резиновая модульная сетка для Web
2. Спорное оформление вкладок и кнопок
3. Скрытые возможности text-shadow

Не удержался и решил перепостить сюда ссылку из своего твиттера (присоединяйтесь, иногда, делюсь полезностями) на интересный пример использования text-shadow. То, что нарисовано на картинке к посту в живую можно посмотреть здесь.

Помимо того, что здесь не используется никакой дополнительной разметки (типа :before и :after), особо внимательные дизайнеры могут заметить, что у текста есть не только «объём» (в коде, строки параметров 1-5), но и тень (остальные строки, с указанием цвета через RGBA, что позволяет делать слои-тени прозрачными) .

В принципе, весь код изложен на той же странице. Суть подхода — многократное повторение параметровtext-shadow через запятую. При этом первый параметр указывается для тени «первого слоя», второй — слоя ниже и т.д. (Для тех, кто вообще не в курсе, как работает text-shadow — читайте).

Выглядит потрясающе, реализуется просто. Можно использовать в меню, кнопках, заголовках и везде, где придумается.

Работает во всех современных браузерах, кроме IE (неожиданно, правда? :)

Кроме того, как пишут здесь, подобный многослойный подход можно использовать и в box-shadow.

Развитие

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

Слегка доработанный эффект вдавленного текста (за счёт добавления верхней тени выглядит естественнее, чем растиражированные в сети примеры):

Inset Text

.inset {
	font-size: 72px;
	color: #666;
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

Наоборот, выдавленный текст:

Outset Text

.outset {
	font-size: 72px;
	font-weight: bold;
	color: #666;
	text-shadow: -2px -2px 2px #fff, -2px 0 2px #fff,
		0 -2px 2px #fff, 2px 2px 2px #000,
		0px 2px 2px #000, 2px 0 2px #000;
}

Радужная тень:

Rainbow

.rainbow {
	font-size: 72px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0); /* сам текст невидим */
	text-shadow: 3px 0 0 #d91f26, 6px 0 0 #e25b0e,
		9px 0 0 #f5dd08, 12px 0 0 #059444,
		15px 0 0 #0287ce, 18px 0 0 #044d91,
		21px 0 0 #2a1571;
}

Текст с обводкой:

Stroke

.stroke {
	font-size: 72px;
	font-weight: bold;
	color: #999;
	text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
		1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f;
}

Неоновый текст:

Neon Text

.neon {
	background: #000;
	font-size: 72px;
	font-weight: bold;
	color: #407ec4;
	text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,
		1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,
		4px 4px 8px #2c5889, -4px 4px 8px #2c5889,
		4px -4px 8px #2c5889, -4px -4px 8px #2c5889;
}

Такой модный сейчас анаглиф:

3D Anaglyph

.ananglyph {
	font-size: 72px;
	color: #333;
	text-shadow: -4px 0 1px #1ef2f1, 4px 0 1px #f6050a;
}

Удачи в освоении!

* * *

Постовой:

Установите себе в подпись красивые юзербары.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Забытые возможности :first-letter
2. text-align: justify. Добро или зло?
3. 96% или резиновая модульная сетка для Web

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

Еcли пробовать работать без него (а я пробовал, каюсь), то схемы, скетчи и прочие наброски утверждаются без проблем и без особого внимания к деталям. Наблюдается полная неактивность заказчика до момента презентации макета. И тогда уже начинается креатив с перестановкой блоков, размерами, цветовыми экспериментами и идеями, переворачивающими все с ног на голову.

Поэтому, без ТЗ никак, если важны нервы и время.

Но, как показывает практика, ТЗ для фрилансера клиенты больше ленятся заполнять, нежели при работе с вебстудией. Объясняется это, примерно, так: «Эй. У меня сейчас нет времени. Я тебе и так о многом написал, посмотри в истории переписки. Если что, задавай вопросы. Потом обсудим твой вариант.»

Но это всё частные проблемы, теперь (ниже) мысль поста.

В сети полно примеров различных ТЗ на разные типы сайтов (например). Но, бегло пробежавшись в них, я не нашел одного, как мне кажется, актуального вопроса, который я недавно добавил в своё техническое задание, где-то между пунктами с описанием модулей и размерами рекламных баннеров. А именно:

«Есть ли у вашей компании корпоративные аккаунты, группы в соцсетях? (twitter.com, facebook.com, vkontakte.ru и т. д.)».

Не принципиально знать об этом заранее? Для блогов, возможно, да. Туда не трудно добавить новый виджет. Но что делать, если клиент приходит со своим макетом сайта компании (скорее, своей картинкой-на-стену за ***$) с free-lance.ru и просит добавить иконки в такое произведение при верстке?

В итоге, то «облачков не видно», то красивый рендер «теряется». Получается, что уже можно добавить только в «пустые места», но не туда, где виджет действительно будет уместен.

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

Нужно это учитывать. И лучше до, чем после. Апдейтим свои техзадания, подстраиваемся под современные тенденции.

P.S.: В процессе написания поста наткнулся на интересный сервис TZGen — сервис автоматического создания технического задания на разработку веб-сайта. Поле заполнения полей формы можно бесплатно скачать PDF-версию своего техзадания на дизайн сайта.

Постовой:

Скачайте без регистрации красивые кисти для photoshop. naikom.ru/blog — блог о дизайне сайтов.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Спорное оформление вкладок и кнопок
2. Чем заменить Welcome?
3. Прокачиваем шаблоны от 960.gs

Гостевой пост от Анны Быстровой, автора блога sprosonok.ru посвящённого урокам и теории пиксель-арта. (Поэтому не удивляйтесь, что текст написан от женского лица :)

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

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

Оказывается, пиксельная графика (пиксел-арт или Pixel Art) — это вид компьютерного дизайна, при котором изображение рисуют на экране монитора при помощи растрового графического редактора с использованием простейших инструментов — карандаша и ластика, т. е. каждый пиксель дизайнер рисует ВРУЧНУЮ! Причем желательно использовать 16 цветов палитры.

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

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

Чем же интересен Pixel Art, что он получил такой толчок в развитии в последние годы? Причин несколько: скорее всего одна из них то, что огромное количество людей выросло, играя в эти самые Суперденди и Сегу в детстве, и при виде графики тех времен на них накатывает ностальгия. Также немаловажный момент — научиться рисовать несложные рисунки может человек, даже не имеющий способностей в изобразительном искусстве, а уроков по этой теме в сети хватает. Например, здесь один из них. Подогревает интерес к пиксельной графике и то, что с каждым днем появляется все больше настоящих шедевров — энтузиасты этого направления рисуют целые картины, отличительной особенностью которых является огромное количество мелких деталей.

Одна из самых известных студий в сфере пиксельного дизайна, студия eBoy, создала свое видение известных мегаполисов, на данном рисунке изображен Токио, согласитесь, неправда ли завораживает? (Картинка кликабельна.)

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

Мое мнение — я сомневаюсь, что пиксельная графика исчезнет совершенно, вполне вероятно мода на данный вид дизайна и пройдет в скором будущем, однако останутся как минимум энтузиасты, такой себе андеграунд. Также вполне возможно пиксел-арт просто-напросто перерастет в вид искусства, все-таки, довольно интересные картины получаются при использовании данного вида дизайна. Но не будем раньше времени хоронить пиксельную графику, один раз в своей статье это сделал небезызвестный Артемий Лебедев после появления true color, а это было в далеком 2001 году.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. В поисках вдохновения: Pixel Art

Чуть больше месяца назад многие новостные порталы Байнета шумели по поводу ещё неподписанного документа (проекта) «ГОСТ для сайтов госструктур и организаций с долей государства». Кроме того, были и бурные дискуссии на Хабре и гневные твиты от белорусских вебмастеров.

Текст интересный (учитывая, что ничего подобного в стране ещё не было), но после его прочтения осталось ощущение, что это чей-то неотредактированный черновик (не зря его пока назвали предстандартом), и принимать такое в качестве стандарта никак нельзя.

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

Даже после беглого просмотра предложенного текста появляются вопросы по многим разделам. Ведь стандарт подразумевает 100% соблюдение требований к продукту, а здесь много туманных отсылок к «рекомендациям и стандартам W3C» или наоборот, не всегда уместных конкретных требований.

Из явных промахов, за которые цепляется глаз:

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

Зачем, например, сайту с двухуровневой навигацией breadcrumbs?

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

Исходя из реальных (читать привычных пользователю), ссылки могут быть также «Наверх» и «К началу».

«Все страницы интернет-сайта должны иметь единый дизайн.»

По всей видимости, должны быть выдержаны в едином стиле оформления.

«При разработке макета страниц интернет-сайта необходимо придерживаться следующих основных правил:
…
— URL, содержащие статическую информацию, не должны содержать информацию о сеансе работы пользователя с интернет-сайтом;»

Слегка шокирующе выглядит этот пункт в разделе «Требования к дизайну».

И здесь же:

«— для задания размеров шрифтов, межстрочных интервалов и отступов между абзацами текста необходимо использовать относительные величины;»

Попытка реанимировать IE6? Для остальных браузеров это вообще не проблема.

«— необходимо избегать эффектов, затрудняющих восприятие информации или отвлекающих пользователя от содержания страницы: мигания и мерцания, эффектов выделение, движущихся строк;»

А как же быть с js-каруселями, новостными бегущими строками и прочими слайдерами, вполне себе прижившихся на спортивных, новостных или сайтах телеканалов? (Пусть даже и государственных.)

Да, и главное моё замечание — ссылки должны быть подчёркнуты, а не «визуально выделяться».

И прочие мелочи, которые для каждой отдельной ситуации должны оговариваться, и решения вполне могут не удовлетворять требованиям пока не универсального и не гибкого ГОСТа.

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

Ну и чтобы у поста была интересная концовка, откройте проект ГОСТа и пройдитесь по основным пунктам на сайте самого ОАО «Гипросвязь» и Министерство связи и информатизации Республики Беларусь, составителей данного стандарта. Полный бардак :)

P. S.: С тех пор судьба данного документа больше нигде не освещается. Засекречен? :)

* * *

Постовой:

sprosonok.ru — блог про пиксель-арт для начинающих и интересующихся. Как проверить верстку дизайна в разных браузерах.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Как мы заказывали сайт у конкурентов
2. Устаревшие приёмы в веб-дизайне

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

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

Думаю, что многие из этих flash-фотогалерей могут отлично вписаться в дизайн промо или имиджевого сайта, там где самое (единственное) место для flash.

3D Grid Photo Gallery

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

Посмотреть демо и скачать можно здесь.

3D Curve Photo Gallery

Реактивная карусель с эффектом головокружения. Спрятана на том же сайте на этой странице.

PostcardViewer

Небрежная сетка подойдёт для создания чего-нибудь молодежного и не очень строгого.

Демо | Скачать

TiltViewer

Похожа на предыдущую, но всё упорядочено и добавлен эффект вращениея плоскости.

Демо | Скачать

Polaroid Gallery v. 1.01

Вполне себе обычная галерея, много раз встречалась подобная реализация на js. Попала в этот список из-за того, что поддерживает фотки с flickr и очень легка в настройке.

Демо/Скачать.

Flickr Widget

Наверняка многие «крутили» 3D облако тегов от Roy Tanсk, но не все знают, что есть похожий виджет, который использует фотографии с flickr. Всё, что вам нужно — это ввести адрес своего фида на этой странице и получить код.

Демо можно посмотреть, например, здесь.

Cu3er

Не совсем фотогалерея, скорее слайд-шоу, но штука очень впечатляющая. Лучше смотрите сами. Там же есть и расширенная инструкция по эксплуатации.

В статью намеренно не попали платные галереи и такие же инструменты для самостоятельного создания своих галерей (как этот) ввиду непопулярности платных сервисов в наших сетевых широтах :)

Если вас заинтересует нечто подобное на JavaScript, то могу поделиться в одном из следующих постов — в закладках полно подобных скриптов для 3D галерей и слайд-шоу.

* * *

Интересное в сети:

18 Методов и инструментов cжатия CSS.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. 111 CSS-галерей и сайтов для раскрутки дизайна
2. Как вставить угловой flash-баннер на сайт
3. Как вставить угловой flash-баннер на сайт 2 (кроссбраузерное решение)

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

Отмечу сразу, что переводом мой текст можно будет назвать лишь условно, скорее это будут свои мысли, основанные на чужой статье. А оригинал вы сможете найти здесь.

Сейчас в разметке большинства сайтов, в той или иной мере, используется подход с применением float, для «лечения» которого верстальщики применяют разные подходы (всем ведь известно про схлопывающийся контейнер для блоков с float, нарушение потока для последующих элементов разметки, и проблемы, связанные с этим?).

Из часто встречающихся решений для очистки плавающих блоков можно увидеть (кратко пройдёмся по всем методам):

1. Метод с дополнительным <div style="clear:both"></div>

Который (<div>) помещается в тот же контейнер, в котором есть плавающие блоки, непосредственно после них. Позволяет контролировать плавающие элементы относительно последующей разметки. Например, не позволит следующими за плавающей картинкой заголовкам, спискам, абзацам и т.д, наползать на неё.

Негибкий, в плане, что всегда нужно вмешиваться в HTML-код и создавать лишний пустой блок в разметке.

2. Метод с position: relative

Позволяет «вернуть» высоту и видимость фона родительского блока, относительно плавающего, с помощью свойства position: relative.

Основная сложность метода в том, что такой подход трудно контролировать в сложной разметке, если родителей для элемента с float очень много. И для всех придется дополнительно прописывать CSS-свойство position: relative. Ест много времени верстальщика и требует усиленного тестирования. Поэтому, лучше сразу забыть про этот способ.

3. Метод overflow: hidden

Наиболее популярный, простой и часто встречающийся. Здесь можно остановиться подробнее, так, как с ним мы, собственно, и собрались попрощаться :)

Суть метода в том, что родителю плавающего блока добавляется свойство overflow: hidden. Преимущество в том, что по сравнению с предыдущим способом, можно вылечить поток всего лишь одной строкой.

Правда, требуется дополнительный «костыль» для IE6: дополнительно включаем hasLayout с помощью zoom: 1, или, если требуется валидность, height: 1%.

Весь код в этом случае выглядит примерно так:

1
2
3
4
5
6

#container {
    overflow: hidden;
}
* html #container {
    height:1%;
}

Несмотря на кажущуюся простоту, overflow: hidden иногда не годитcя, если в верстке нужно использовать элементы с отрицательным margin (попробуйте прицепить вебдванольный стикер в такой блок), есть проблемы с ссылками-якорями в Opera (об этом я расскажу в следующий раз), и способен преподнести сюрпризы, как в этом демо (два нижних примера).

Если есть ограничения, значит метод уже не универсальный.

4. Самоочистка для плавающих блоков

Давно известный (да, я не сделал громких откыртий в этом посте!), но мало распространённый метод, основанный на применении к плавающему блоку свойства content: after, выводящему дополнительный контент (текст, точка или пробел) после него, к которому применяется display: block, чтобы сделать его блочным элементом с очисткой clear: both, и одновременно невидимым с помощью visibility: hidden…

В общем, лучше сразу смотрите код, который недавно обновился и больше не поддерживает устаревший IE/Mac:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.floatElement:after {
	visibility: hidden;
	display: block;
	clear: both;
	content: " ";
	height: 0;
}
/* хаки для IE6,7 */
* html .floatElement {
	height: 1%;
}
*:first-child+html .floatElement {
	min-height: 1px;
}

Судя по той же демке (пример 2), способ избавит вас (как минимум :) от проблем с тенью в CSS3.

Способ более универсальный и гибкий, по сравнению с первыми двумя, и позволяет избежать проблем, связанных с «обрезкой» overflow: hidden и просто просится занять свое место в вашем личном CSS-фреймворке. Кроме того, это единственный метод, который применяется непосредственно к плавающему элементу, а не к его родителю.

Лучше всего его использовать, создав отдельный класс в стилевом листе для плавающих элементов, как, например, .group в статье-источнике мыслей или книге Дэна Седерхольма «Handcrafted CSS».

Дополнительно про float можно почитать на designformasters.info

* * *

Участники эстафеты:

• cuprum.name — Работа с цветовой моделью RGBA
• rotorweb.ru — Скажем прощай overflow: hidden!
• dreamhelg.ru — Фантастическая CSS3 лайтбокс галерея с помощью jQuery
• список cо временем пополнится…

* * *

На этом всё, передаю эстафету Сергею М. (iskariot.ru), Виталию (codeisart.ru) и Насте (mannodesign.com).

Кроме того, чтобы эстафета получила активное развитие (или я кого-то забыл пригласить), предлагаю присоединиться, если вы ведёте блог на смежную тему, имеете в своем активе не ниже ста RSS-подписчиков и способны выполнить все условия эстафеты. Присоединяйтесь!

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Скрытые возможности text-shadow
2. Практические примеры анимации и эффектов в CSS3
3. Как добавить разные иконки к пунктам меню, используя только CSS

Множество статей и обзоров в личных и корпоративных блогах IT-компаний и веб-разработчиков посвящено непростым отношениям между заказчиками и исполнителями, сложностях принятия решений, срывов сроков, откатов и прочих неудачных буднях.

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

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

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

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

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

Были выбраны дизайн-студии города (областной центр, ~340 тыс. жителей + некоторые студии работают не только на местном рынке), которые известны из местной рекламы, региональных сайтов или справочников. Всего пять.

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

Дальше уже должна была начинаться работа менеджеров по работе с клиентами. Теоретически...

Студия Ди

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

Первый звонок, он же последний. На вопрос «с кем можно поговорить по поводу создания сайта?», ответ был «с таким-то человеком, которого сейчас нет, а будет после обеда и можно перезвонить на этот же номер».

Никакого интереса по поводу того, кто звонит, как зовут клиента, в чем заинтересован и прочих (стандартных) вещей высказано не было, контактный телефон никто не спросил.

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

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

Cтудия Эм

Студия позиционировала себя, как дизайн-студия, а её сайт отличался тем, что разрабатывался с целью быть интерактивным и заитересовывать, но был подозрительно мертвым (последнняя новость была за лето прошлого года).

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

Первый звонок. Ответ был почти таким же, как и в первом случае: «о создании сайта можно поговорить с таким-то человеком, которого сейчас нет, он будет после обеда, или можно перезвонить по следующему номеру: XXX-XX-XX». Контактные данные потенциального заказчика снова никого не заинтересовали. А по номеру, который был дан, в течение дня никто не ответил и не перезвонил.

Клиент ушёл.

Студия Эс

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

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

Демоверсия была создана, но она нас не устроила, а о развитии сотрудничества и потребностях в проекте больше никто ничего не стал спрашивать. Студией была проделана неоплачиваемая работа, но клиент снова ушёл.

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

Студия Эм2

Сайт, если он и существует, остался загадкой. Все контактные данные были только в справочниках.

При звонке (по традиции, первый и последний) снова никто не спросил, кто звонит и чем интересуется. Менеджер компании очень лениво рассказал, что создание сайта бесплатно, при условии подписания договора на поддержку в течение полугода.

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

Студия И

Сайт веб-студии был красивый, но не впечатляющий. Просто аккуратный, с хорошими работами в портфолио.

Телефонный звонок в студию получился таким же, как и все предыдущие: бессмысленным.

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

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

Ближе к концу разговора, менеджеру компании была продемонстрирована визитка, не содержащая никакого фирменного стиля компании, но предложения разработать логотип или пакет корпоративной идентификации не поступило, даже после прямого вопроса, возможна ли такая услуга.

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

Несколько выводов

1. Если для входящего клиента вопрос создания сайта срочный — ему нужно сильно напрягаться, для того, чтобы его получить.
2. Поскольку культура общения клиент-заказчик низкая, то сложностей не избежать.
3. Пытаясь ответить на вопрос «почему так?», ответ пока не приходит на ум. Судя по всему, здесь действует такие же правила, как и на остальном белорусском рынке. Пока для компаний нет никакого смысла разрабатывать программы лояльности клиента, потому что он не получает удовлетворения базовых потребностей.
4. Для того, чтобы быть успешной, компании сегодня достаточно обеспечить соответствие сервиса в реалии тому, который анонсируется в рекламе.
5. Мы решили проводить такое исследование периодически, чтобы посмотреть, что меняется, а также, по возможности, исследовать другие регионы.

Остальные выводы делать вам, разработчики, менеджеры и владельцы студий.

Статья написана в соавторстве с М. Г., как непосредственной участницей событий.

* * *

Читаю в сети:

Плагин «Панель нагрузки WordPress». Вечные контекстные ссылки спасут мир.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Чем заменить Welcome?
2. Как вставить угловой flash-баннер на сайт
3. Как вставить угловой flash-баннер на сайт 2 (кроссбраузерное решение)

Какими должны быть визитки у веб-дизайнера? Этим вопросом я озадачился недавно, когда рисовал свои собственные. Такими же, как у всех? Или обязательно чтобы побольше красок и графики? Дизайнерские же, креатив должен взрывать.

Наверное, для дизайнера это самая сложная часть работы — создавать что-то для себя. Потому что есть тысячи вариантов, из которых нужно выбрать лишь один. И всегда кажется, что этот один не тот, не самый удачный.

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

Модный нынче hand-made, зелёные завитушки и гранжевый стиль сразу же были отставлены в сторону, так как это идеи перенесённые из жизни на экран, а хотелось наоборот. Минимализм тоже не прошёл отборочный тур.

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

А решение, как обычно, лежало на поверхности долгое время, мозолило глаза — такое модное, всем знакомое (кто же его не крутил просто так, играя?) и часто используемое на блогах анимированное 3D-облако тегов. Просто, и раскрыло тему на 100%.

А дальше уже никому не интересные технические моменты и рождение формы посредством иллюстратора.

Результат:

Уже проверено. Работает.

* * *

Интересное в блогах:

Редизайн Байнета — новый социально-сетевой проект для дизайнеров. Инвестируем в блог или как потратить 100$. Всё крутится и летает на CSS3.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Отчёт по эксперименту с CSS-галереями
2. Психология пользователей и оптимизация изображений для веб
3. Новый пункт в ТЗ

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

Достаточно открыть практически любой сайт обычной компании, и первое, что бросится в глаза на главной странице — это заголовок: «Добро пожаловать на сайт компании „Маленькая Но Очень Гордая Межгалактическая Корпорация“». Примерно так. Плюс, многие (продвинутые), еще ставят восклицательные знаки. Чтобы «эффектнее» было, наверное…

Если заглянуть в результаты поиска, то мы увидим примерно такое положение дел — google, yandex.

Причём и среди таких сайтов есть разделения: одни используют приветствия на страницах и в заголовках, другие — только в заголовках окна браузера (что, на мой взгляд, более лояльно по отношению к пользователю и имиджу компании).

Откуда повелась такая традиция, я не знаю, наверняка из тёмного прошлого паутины, но это наследие не самое лучшее во время постоянной борьбы за клиента и место под солнцем.

Зато однозначно можно сказать кто виноват: дизайнеры, веб-студии, маркетологи и контент-менеджеры. Клиент в последнюю очередь. Именно исполнители не объяснили, не захотели объяснить (или сами не знали :) всей важности первого впечатления от сайта, имиджа или влияния заголовка на главной на ту же поисковую оптимизацию.

Теперь вопрос для владельцев сайтов: чем непривлекателен такой заголовок для главной страницы — «Компания „Маленькая Но Очень Гордая Межгалактическая Корпорация“ — основной поставщик антигравитационных двигателей для кораблей класса „линкор“ за пределами Солнечной системы»?

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

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

* * *

Интересное в сети:

Как заставить посетителей подписаться на RSS. Эффект liquid image — потрясная штуковина на JavaScript. Тест на узнаваемость для логотипа.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Новый пункт в ТЗ
2. Спорное оформление вкладок и кнопок
3. Элементы входных страниц