БИБЛИОТЕКА CАЙТОСТРОИТЕЛЬСТВА

новости, статьи, обзоры по веб-дизайну и графике, разработке, оптимизации и продвижению веб-сайтов

Приветствую всех, уважаемые читатели! Рассылка жива, я о вас помню, никуда не пропадаю :) Спасибо тем читателям, которые, в свою очередь помнят о рассылке и проявляют беспокойство по поводу редких выпусков. Всё собираюсь исправить ситуацию. Напомню, что выпуски рассылки можно обсудить, к примеру, на форуме Библиотеки.
Хочу поговорить сегодня о современных веб-дизайнерских макетах. Тему разговора изначально предполагаю ограничить дизайном для веб-сервисов, социальных сервисов, служб и сетевых тулзов. Т.е. всё, что так или иначе, полностью или краем впишется в псевдопонятие web 2.0. Я имею ввиду, что мы сегодня поговорим не о презентационных сайтах (и не о сайтах-визитках, которые обычно так же - презентационные сайты, только проще), не о традиционных информационных сайтах (тех во всяком случае, где публичный интерфейс и админка - разделены, аудитория видит только внешний интерфейс и приходит только читать информацию, а писать и постить может только редколлегия, для неё интерфейс другой).

"Масштабируемый" дизайн

Незаметно изменились требования к макетам современных сайтов - вместе со всеми социальными аспектами, с модой на web2.0, с отношением к рекламе, с развитием технологий и каналов, для которых уже совсем не страшны как раньше большие объёмы тяжёлой графики. Изменились требования к дизайнерам, к уровню знания технологий и к их готовности работать так сказать в ногу с веяниями. "Обратить" же дизайнера-консерватора, рисующего по-старинке фиксированный макет (может, и красивая картинка, но не функциона-альная) - это тяжко и грустно. Вроде и умные люди, и грамотные. А объяснить надо новый мифический дизайнерский термин - "масштабируемый" дизайн. Хочу обсудить два аспекта масштабируемости.

1. Масштабируемость на уровне прототипов или дизайн для бета-версий

Суть этой проблемы в том, что большая часть сервисов, на которые приходится делать дизайн - они в мир выходят в состоянии беты. Эта ситуация вполне обычна для современного веба, ещё не прошла мода вешать лейблу "beta" возле лого сайта или даже в имени-ссылке (beta.ya.ru) указывать на то, что выпущенная версия - это (неполная? тестовая?) не конечный вариант сервирса. Для дизайнера же в большинстве случаев это означает, что тот эскиз, который он рисует, ->верстает и внедряет на публичный сервис, должен быть, с одной стороны, очень даже модный, эффектный, запоминающийся, лёгкий etc., а с другой стороны - любое расширение функциональности, добавление новых фич, создание глобальных рубрик-информационных блоков, внедрение чего бы то ни было проходило максимально безболезненно для дизайна в целом. Чтобы не пришлось для каждой новой версии беты рисовать новый дизайн, который базируется на перехлёстывающихся блочечках с тенюшечками, скруглёнными уголками, градиентами, которые можно порезать без злостного нарушения композиции в масштабе 1:1 и только, а стоит только перепрорезать очередной блок под большее количество элементов - оп-па, и композиция нарушена, и дизайнер злобно смотрит на верстальщиков и программеров - испохабили шедевр!

Как приноровиться к дизайну для публичных бета-сервисов? Возможно, столь обсасываемый пресловутый стиль web2.0 - это как раз он и есть - квадратно-гнездовой дизайн информационными блоками с акцентом на крупных формах (заголовках, иконках), с как бы оформлением блоков информационных (панели-уголочки-тени), дизайн, с которым добавление на сайт целого раздел, или рекламных блоков, или новых фич - дело техники. При этом примеров подобных решений, довольно приятно визуально оформленных - полно, казалось бы. И вот стопор. Поставить задание дизайнеру с формулировкой "масштабируемый дизайн" и попытаться объяснить, что я имею ввиду. И почему здесь сейчас три раздела и что делать (куда летит его "композиция"), когда добавиться четвёртый, а когда доделается до полноценной беты наш очередной тулз - где и как будет размещаться его реклама и что там будет размещаться сейчас. А может, кстати говоря, и не будет - если тулз купят раньше, чем мы его начнём рекламировать. Все прототипы, на бумаге или с помощью других подручных средств, дают только очень базовую модель будущеё страницы.

А дизайнер рисует ассимитричные формы, где в одной ассиметрии - гармонично так располагаются два доменных раздела, в другой - так же немасштабируемо - пяток главных разделов… Послушай, говорю. Вот у тебя языки - русский/английский, почему? А если придётся (и скорее всего таки придётся) делать fr версию - куда, извиняюсь, и как? Переделывать весь эскиз, весь макет? Но ведь на этот макет завязан не один человек (рисующий дизайнер) - туда же и верстальщик, и программер, т.е. глобальное переделывание эскиза сайта прибавит работы части команды. А если придумать для выбора языков другой… "дизайн"? расположить, реализовать, как-то так, что бы добавить третий язык или даже 50 (каким нибудь псевдокомбобоксом реализованный) - что бы это не нарушало твою "композицию"? И так по каждому объекту макета. Жёсткая привязка к сложному графическому макету использовалась часто на сайтах-визитках начала века, реже - на корпоративных сайтах, но никак не подходит для бета-сервисов нынешнего поколения. Такой вот web2.0

Основная проблема не столько в масштабировании модульной сетки на экране (о модульных сетках - ниже), сколько (и я к этому возвращалась, ибо очень трудно объяснить суть проблемы) в том, что дизайнеру, рисующему интерфейс, следует предусмотреть фактически изменение дизайна в следствие роста проекта - при добавлении новой функциональности встраивание в интерфейс новых блоков БЕЗ ПЕРЕОТРИСОВКИ и соответственно без принципиальной перерезки эскиза в целом. Т.е. когда дизайнер рисует "открытку" - проблема не столько в том, что из этой открытки трудно или невозможно сделать резину (в этом кстати говоря в большинстве сл. нет большой необходимости), сколько в том, что когда речь заходит о постоянно развивающемся сервисе, постоянно обновляющемся (с периодичностью, скажем, раз в месяц) - нельзя мыслить макетом, в котором добавление одной лишней кнопки приведёт к полному искажению дизайна, нарушению композиции ну и прочему. Т.е. в таких проектах... на уровне идеи нужно видеть по-другому.

При этом, кстати говоря, формально можно упрекнуть постановщика задачи (дизайнеру) в том, что как раз именно он не может чётко и внятно рассказать дизайнеру, что конкретно ему нужно делать. Формально художник-дизайнер как раз вовсе не должен изучать предметную область и, в том случае, если грядёт разработка какого-то очередного социального сервиса, тратить своё драгоценное время на то, чтобы посетить несколько тематических проектов, похожих по сути на грядущий в работе, и даже (кощунство какое!) зарегестрироваться и посмотреть, что и как организовано в этих проектах внутри за границей авторизации, по ходу дела проанализировать достоинства и недостатки дизайна, сделанного кем-то для этих сервисов. Формально дизайнер из принципа может отказаться расширять свой кругозор, объявить о том, что "ваши социальные сети - для лохов, я регистрироваться не буду" и отказаться вникать. И формально он будет абсолютно прав. Я скажу так - лучше избегать сотрудничества с такими формалистами, или же перепоручать им работу, которую они, со своим формальным отношением к работе, не смогут испортить или сорвать.

2. Модульные сетки.

Вот раньше было просто - находим сайт по теме, чтобы было максимальное пересечение аудитории, в статистике снимаем показатели по процентам - какие разрешения экрана наиболее популярны. Читаем руководства великих гуру. И изучаем два глобальных типа модульных сеток: фиксированные на размер800х600 (width=770) и резиновые колоночные (width="100%"). Так можно было угодить и пользователям со (на сегодняшний день) старенькими слабенькими мониторами, и богатеям-буржуям с глобальными диагоналями, сильными видеокартами, и даже аудитория разделялась на "наши товары покупают только очень богатые клиенты, у них давно не используются такие разрешения" и "наши клиенты сидят на 14? и старых картах, пусть не будет у них горизонтальной полосы прокрутки!"

Сейчас-то всё меняется. Богатые клиенты как раз всё чаще заходят на сайты с устройств с мелкими разрешениями, с всяческих КПК, к примеру. С лёгких, тончайших, воздушных и очень не дешёвых ноутов. И они же (всмысле такие же не бедные) - смотрят с гигантских устройств, с диагональю побольше несущей стены моей квартиры. Каким должен быть дизайн современного сайта, удовлетворяющего изысканные вкусы богатых клиентов? Какой должна быть модульная сетка? Фиксированной? С каким минимальным width? Резиновой? И куда она должна тянуться на разрешения, хотя бы, 1600х1200 (а ведь есть и значительно больше)? А на больших разрешениях - кто нибудь видел, как убого смотрятся эти тоненькие полосочки контента, сделанные с учётом пользователей с малыми разрешениями экрана (и ещё хорошо, когда разработчики дизайна не поленились эту тоненькую тощенькую колоночку центрировать, а если поленились и она выровнена по левому краю - то этого сайта на больших мониторах-разрешениях и не видно)? Как ещё более убого смотрятся резиновые длинные строки - два абзаца в одну строку, прочитать текст - шею свернёшь? Я - видела. Кшмар.

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

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

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

3. Мыслить масштабнее

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

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

"Надо добавить кнопочку "Help" возле этих, этих и этих блоков" - "Ал-лё, мы же делаем сайт не для полных дебилов…"
"Хорошо бы здесь поместить блок настроек фильтрации пользовательских запросов, а в гриде выводить данные с возможностью сортировки по любому полю и вложенным фильтрам" - "И как мы объясним работу этого отчёта нашим пользователям, некоторые из которых - юнцы школу не закончившие, а некоторые - закончили её же что-то типа 65 лет назад?.."

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

Так вот о проблеме. Есть дизайнеры, которые умеют мыслить (фантазировать?) таким масштабируемым дизайном, есть - у которых не получается ни в какую, что ты ему не говори и как не объясняй (что вот эту ассиметричную плашку с вот этими милыми изгибами и градиентами, и вот эти "элементы дизайна", и вообще - её никуда не поставишь, оно разумеется всё тут круто заверчено, но…) - что это не плакат для полиграфии, где нарисовал, сдал в печать - и забыл. А рисует дизайнер именно плакат для полиграфии. Не пугает даже что плакат сей будет не просто заверстать, картинки в css фоновыми повыносить, пугает именно то, что добавление даже простой кнопки на такой дизайн потребует, извиняюсь, нового эскиза, и ещё одной недели работы в целом для трёх человек команды.

Цифровое неравенство - среди пользователей (ЦА), цифровое неравенство в среде дизайнеров - куда катится мир? Может есть курсы какие-нибудь типа "web2.0 для дизайнеров"? А что делать, если дизайнер "закрыт" для подобной информации? Если рекомендации типа "зарегестрируйся на таких и таких сервисах, пощупай, попользуй, присмотрись" - чтобы хоть в теме был о том, что и где должно быть удобно, не жать и пятки не растирать, а дизайнер в ответ горделиво замечает, что он подобной фигнёй (к примеру, блог вести или френдить-расфренживать кого-то, или одноклассников искать) не страдает и в ближайшее время страдать не собирается? Заставить его ознакомиться с предметной областью? Или пусть живёт, просто задание ему ставить так дотошно-подробно, чтобы ни одного завитка без моего контроля не появилось (извиняюсь, а к чему мне тогда в команде такой дизайнер?) - и продолжать мечтать о вменяемом и адекватном, знакомым с современными требованиями и модой дизайнере? Или… может, ну его нафиг? Продолжаем собеседования c дизайнерами, ищем способного мыслить масштабно? По некоторым авторитетным мнениям обучить дизайнера видеть будущий эскиз таким, чтобы в вёрстке не нужны были хаки и непреодолеваемые трудности - несбыточная мечта. Или. Возможно, дизайнер должен либо вырасти из верстальщика, либо одновременно быть им, хотя так тоже происходит редко - стоит только веб-дизайнеру освоить вёрстку более-менее да подразобраться в скриптах - он в визуальный дизайн уже не возвращается. Как правило. Не ясно почему. Так только разве что под настроение для себя что-то поправить. Я во всяком случае преобразование художника-дизайнера в верстальщика-программера наблюдала много, обратного - ни разу.

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

---

Н O B O C T И

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

:: Пять принципов дизайна
Технологии обслуживают людей. Люди склонны брать на себя вину за ошибки в программах. Если их компьютер виснет, они говорят «Я что-то сделал не так». Если сайт плохо спроектирован, они говорят «Я, наверно, слишком глуп, раз не могу найти то, что нужно».

:: Премия Рунета – 2007: главное – польза!
Продолжается прием заявлений на участие в главном состязании отечественного интернета — Конкурсе на присуждение ежегодной Национальной премии за вклад в развитие российского сегмента сети Интернет «Премия Рунета – 2007», учредителем которого выступает Федеральное агентство по печати и массовым коммуникациям.

:: Page Promoter Эксперт – время учиться
Появление нового, информационного, общества – самый впечатляющий феномен нашего времени. Почему? Люди действуют, используя информацию. А, значит, новые коммуникации, возникшие на базе всемирной сети интернет, побуждают к действию. Например, формированию и развитию коммерции, использующей уникальные возможностях виртуального пространства.

:: ClickDensity – новая буква в веб-аналитике
В последние год-два в Интернете появилось сразу несколько стартапов, которые предлагают веб-приложения для построения heat-map по кликам: Crazy Egg?, Click Density?, Click Tale?. Все эти приложения «вертяться» вокруг одной уникальной фичи, а именно...

:: 20 июля – бесплатный семинар по анализу, продвижению и управлению ресурсом
Net Promoter? и Un Media? проведут бесплатный семинар серии «Анализ, продвижение и управление ресурсом в интернете». На семинаре будут рассмотрены вопросы продвижения сайтов в интернете, анализа аудитории сайта и оценки эффективности рекламных кампаний с помощью программных инструментов.

:: Google удалит сайты перегруженные рекламой
Компания Google объявила о намерении удалить из поисковой базы данных сайты, перегруженные рекламой. Компания уже уведомила нескольких владельцев веб-сайтов, наполненных рекламой в ущерб контенту, об удалении их ресурсов из базы своей рекламной программы Ad Sense? с 1 июня 2007 г.

:: Как измерить известность бренда?
Согласно исследованиям компании Spy Log? в первом квартале 2007 г. наиболее известным брендом по недвижимости в Интернет стал бренд Компании МИЭЛЬ. Исследование проводилось на основе анализа поисковых фраз, которые пользователи вводят вручную в строке поиска на крупнейших порталах Яндекс, Рамблер, Google.

:: Google Hot Trends
Самые популярные поисковые запросы в реалтайме – об этом совсем недавно можно было только мечтать. Google и здесь оказался на высоте – инструмент Google Hot Trends будет показывать статистику, обновляемую несколько раз в день.

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

:: «Убийца» Flash наступает: инструментарий создания машапов и гаджетов
Microsoft выпустила бесплатный набор инструментов для создания веб-страниц, веб-гаджетов и приложений, комбинирующих несколько веб-источников (mashups), Popfly.

:: Page Promoter 7.5.1: новые возможности управления ресурсом
Компания Net Promoter? сообщает о выходе новой версии программы Page Promoter – 7.5.1. Новая версия программы Page Promoter представляет собой глобальную платформу, содержащую все инструменты, необходимые для эффективного анализа, продвижения и управления ресурсом.

:: Материалы конференции РИТ 2007 можно заказатьна DVD
Команда организаторов РИТ-2007 прислала уведомление о том, что начинается прием предварительных заказов на DVD с материалами конференции. В сборник войдет два DVD-диска с видеофайлами всех докладов всех восьми секций.

:: Рыжий сайт год спустя
Более года назад мы писали о чудесном проекте – “Рыжий мир“. “Если у тебя пламенные волосы, в душе огонь, значит – ты рыжий или рыжая! С древнейших времен рыжие люди считались особыми.” – написано на главной, и для тех рыжих в натуре или в душе действительно откроется особый мир.

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

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

:: Wordpress-Tamagotchi, или ещё раз о блогосервисе
Завели свой дневничёк? А ухаживать за ним кто будет? Взращивать, пестить, лелеять? Не уподобляясь злым безчувственным животноводам, которые заводят у себя дома, к примеру, кошечку… или собачку. Поиграются с ними какое-то время, уси-пуси все дела, молочко на блюдечке, бантики да рюшечки. Потом надоедает, потом раздражать начинает, и вот уже кажется – лучшее решение – нафиг, нафиг с моей территории, из моей жизни – и на улицу своё зверьё прикормленное было выкидывают, враги.

---

Ф О Р У М Ы [горячие темы]

:: nun: Фото литература [Веб-графика]
Хорошая подборка книг для фотомастеров, фотохудожников и дизайнеров, полезно.

:: Ghost Dog: вопрос о кэшировании изображения [Проблемы верстки]
если одно и то же фоновое изображение дается нескольким элементам на разных страницах оно кэшируется или грузится по новой на каждой странице?

:: Ghost Dog: margin-bottom в Ослике [Проблемы верстки]
Почему IE не делал стиль для формы margin-bottom:0px;Ослик понял только чего от него хотят когда я ввел margin-bottom:1px; Вот только мне пришлось по своей неопытности убить много времени на то, чтобы найти в чем была проблема. так вот подскажите почему значение 0 не работало?

:: Night: проблема в CSS [Проблемы верстки]
Несколько месяцев назад я сделала сайт. Его я сделала полностью табличным. Недавно прочитала про DIV и поняла, что создание сайта в цсс гораздо удобнее. Но сталкнулась с проблемой буквально сразу же...Я создаю 2 колонки. По идее - обе ширины фиксированные в правильной пропорциональности...но на деле получается вот это ячейки находятся друг под другом, хотя должны быть рядом(в одной строке). Не понимаю в чем дело...подскажите, пожалуйста.

:: obed: Как меняется дизайн сайта на CMS? [CMS]
Или к примеру, как можно перевести готовый дизайн статического сайта на CMS? Во всех ли CMS это предусмотренно или есть наиболее для этого подходящие?

:: nun: Литература по js/Ajax [Веб-программирование]
Уважаемые программеры, поделитесь рекомендациями - что стоит почитать новичку по теме поста? Какие книги имеет смысл купить, что где можно найти скачать, или ссылки на хорошие, стоящие публикации в сети. Тему можно разделить если есть желание - общий сборник ссылок на документацию и платформоориентированный аякс. Спасибо.

:: nun: Google рекламируется в рунете [Веб-программирование]
По всем последним данным google давно уже во многом второй по значимости поисковик и сервис-лидер в рунете, второй после Яндекса. Анализ статистики траффика из поисковиков на веб-сайты, опросы предпочтений при выборах тулзов - от почтовых до совсем уж уникальных, гугла в нашей жизни становится с каждой неделей всё больше. И всё им мало. Ить не первые.

---

У Л Ы Б Н И Т Е С Ь !

Из цитатника рунета http://bash.org.ru:
Key_Pusher: вы в шахматы не играете?
melalex: а по конкретнее вопрос поставить можно?
Key_Pusher: такие фигурки слонов и лошадей не двигаете по полю в клеточку?
--
morinko: я знаю два его почтовых ящика, его ник в чате, его сайты, форумы на которых он зареген, его фотоальбом где в сети выложен. его адрес (улицу дом квартиру), как зовут его девку (и прошлую тоже) и рожу ее знаю - а он от меня спрятал свой статус. идиот

---

• Обсудить этот выпуск рассылки можно в спецтопике нашего форума

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

---

::: рассылку ведет:     Татьяна Вукс      http://design.i2r.ru     2007 :::