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

Работа с изображениями

• Задание фона страницы
• Немного о дизайне
• Добавление простого изображения
• Взаимоположение изображения и текста
• Добавление альтернативного текста к картинке
• Создание ссылок на картинке
• Создание ролловеров
• Создание навигационной панели
• Создание Карт изображений

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

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

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

Ответ прост - воздействие на подсознание зрителя. Вспомните, когда вы бродите по интернету, с какой скоростью вы листаете ссылки? Вы успеваете осознать и оценить страничку? По видимому нет, поскольку со многих страниц вы уходите, даже не дождавшись загрузки. А остановить этот забег, в котором сознание принимает мало участия, можно только зацепив вас чем-то, так, что вы вначале останавливаетесь, а потом решаете, что же именно вас здесь остановило. А вот зацепить вас может в первую очередь дизайн. Что то необычное, к примеру. И при этом нужно учитывать аудиторию. Не буду обсуждать достоинства и недостатки решений, просто объясню их причины. Взгляните на ядовито-зеленый фон http://irina.sourex.com Этот фон заставит поморщиться делового человека или дизайнера, но зацепит ребенка, на что он и рассчитан. А вот еще пример - http://www.vagroup.ru - элегантная страничка дизайнерской группы. Вы можете проскочить эту страничку при свободном поиске, но остановитесь если вас интересует дизайн - и дизайн этой конкретной странички выполнил свою задачу номер 1 - он остановил пользователя раньше, чем пользователь успел что-либо сообразить.

И вот только в этот момент он начинает думать. Но это не означает что подсознание теперь отключилось. Оно продолжает активно вести за собой пользователя. Есть старый трюк - быстро назовите имя великого русского поэта. Пушкин? А плодовое дерево. Яблоня? Весь фокус этого трюка в слове "быстро". Сознание не включилось, сработало подсознание, но вы то думаете, что ответили вполне осознанно :) То же самое и у пользователя. Он остановился, но только начал задумываться, а подсознание уже подсовывает ему свое мнение. А пользователь принимает это мнение за чистую монету. Именно в эти несколько секунд у пользователя формируется мнение: нравится - не нравится; формирует его подсознание, сознание только проснулось и зафиксировало ответ. И что же тогда является фактором, который вынес вердикт? Дизайн. Он выполнил (или не выполнил :) задачу номер 2 - сформировал отношение пользователя. И сделал он это на основе установки - в лачуге редко лежат алмазы. А во дворце жить не по карману. А потому вы должны продумать кого вы хотите остановить и удержать. Слишком бедный дизайн скажет посетителю, что здесь ловить нечего. Слишком богатый - средний пользователь решит, что эта контора имеет слишком высокий ранг для него. Вот еще пример: http://www.d-t.narod.ru (ссылка публикуется с согласия авторов) Если успеть вчитаться, то оказывается, что это сайт двух мальчишек, которые всерьез увлекаются музыкой. Ну-ка скажите, задача 1 и 2 выполняются? Для того что бы понять, нужно заставить себя вчитаться. Ребята очень молоды, им трудно поставить это в вину, они учатся. Но взгляните на свой сайт и решите для себя - ваш дизайн соответствует первым двум задачам? Надеюсь, соответствует. Тогда идем дальше.

Пользователь остановился, ему здесь понравилось и он начинает рассматривать картинку. Не читать, не разглядывать изображения, а рассматривать картинку в целом. Если вам не лень загляните еще раз www.vagroup.ru (ей-Богу - это не в порядке рекламы, ребята ни очем не просили, просто просили заглянуть - и сайт мне понравился, да и по теме он как раз) куда сразу тянет взгляд? Влево, на меню. Теперь кликните на прайс куда тянет взгляд? Когда открывается окошко - на прайс. Когда начинаешь читать - глаз ловит мельтешение слева и подсознание уводит внимание от прайса. К счастью, здесь этот эффект проявляется мало, все-таки сайт сделан профессионально, но я хотел показать сам принцип. Взгляните на рекламное объявление, которое сделал наш художник для небольшой компании: http://home.sourex.com Эта страничка по качеству дизайна уступает предыдущей, но здесь есть именно те решения, о которых я говорю. Во-первых мелькающие шарики уводят взгляд к тексту. Первые буквы фиксируют на нем внимание. Если взгляд уходит от текста - то внимание фиксируется на апплете с картинками, что опять же помогает решить назначение этой странички. Таким образом, дизайн помогает решить задачу номер 3 - повести внимание посетителя в ту точку, которую вы считаете важной, удержать интерес пользователя на тех вещах, которые важны в самом деле. Поэтому я в своей работе избегаю навороченных меню - они уводят внимание зрителя от прайса :) (Опять же замечу, что навороченное меню у ребят вполне оправдано, потому как им нужно показать свои возможности).

И наконец, задача номер 4 - привести пользователя на сайт еще раз. Это не просто - призыв занести в "Избранное" вашу ссылку всего лишь с помощью одного клика делу не поможет, скорее навредит. Не знаю как у вас, а у меня избранное - каталог может и поменьше яхушного, но рыться там - дохлый номер. И заносить туда левую ссылку никто не станет. Ваш сайт должен быть полезен. Тогда он осядет в Избранном. Школа Веб (можно я чуть-чуть похвастаюсь и приму важный вид? ;) набирает и посетителей и подписчиков не благодаря дизайну - он сугубо утилитарен - а благодаря тому, что эта информация оказалась полезной многим людям, и они запомнили сайт. Отсюда делаем вывод - задачу 4 - удержание посетителя - решает сознание. Отношения сознания и подсознания здесь похожи на семейные: все решает муж, выслушав предварительно все, что сказала жена.

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

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

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

И в заключение одна полезная ссылка - Компания DMTS, которая специализируется на выпуске обучающих курсов для профессионалов сейчас предлагает два своих продукта - курс обучения по Dreamweaver и по Flash на компакт-дисках. Вообще стоимость курсов этой компании по нашим меркам не малая - от 150 до 370. Для меня приятной находкой было то, что именно два самых необходимых для меня курса компания высылает бесплатно. В данном случае компания берет небольшие деньги только за пересылку, причем заказывать можно несколько дисков сразу. Разумеется, если для вас ваш сайт - хобби, то 10$ за пересылку - большие деньги. Но если вы занимаетесь всерьез, или претендуете на работу за рубежом или для иностранного клиента - то это может вам помочь.

Если вы не получали предыдущих выпусков, найти их вы сможете на сайте рассылки

Всего наилучшего
Eris (Геннадий Николаец)