[Bender]

Реальный веб-дизайн
Спецвыпуск Xakep, номер #015, стр. 015-048-1

"Что за банальная тема! Да в сети полно ресурсов по этому поводу! Сто пудов, автор - лох, сдувший статью с какого-нибудь сайта", - возможно, именно так ты и подумал, взглянув на заголовок этой страницы. Мне придется согласиться с тобой в части количества сайтов по теме: да, их много. Достаточно и книг по веб-дизайну. Мало того, их становится все больше и больше, ведь веб-дизайнер - достаточно модная нынче профессия! Однако и тебе придется согласиться со мной в том, что соотношение путевых и галимых страниц в Интернете в лучшую сторону из года в год не меняется и вряд ли изменится в ближайшем будущем. Как ты думаешь, в чем дело?
Я думаю, что одна из возможных причин такого застоя в том, что издания, предлагающие свои советы и уроки, не являются достаточно авторитетными для таких, как ты и я. Лично мне не раз приходилось наблюдать на странице, подсознательно вызывающей неудержимые рвотные рефлексы, заголовки такого рода: "Лучшая дисятка советов для мастиров веб-дезайна!". Что ж, но ведь СПЕЦ-Хакер - совсем другое дело, не правда ли ?
И потом абсолютное большинство таких советов посвящено технической стороне вопроса - HTML, Javascript, Dinamic HTML и прочему кодингу. Пришло время поговорить собственно о дизайне.
Простота лучше воровства
Самое первое, на что следует обратить внимание, - это сам подход к моделированию сайта и страницы. Начиная работать с чем-то новым для себя, все делают ошибки. Веб-дизайн ничем не отличается от любого другого занятия. Я делал эти ошибки, известные дизайнеры делали эти ошибки на заре своих карьер, сам Якоб Нильсен делал их - он сам сказал мне это по секрету в своей книжке.
Абсолютное большинство новичков, жаждущих известности и сверхпопулярности своего будущего мега-портала, сразу строит в мыслях громадный агрегат с десятками значков, пикчур и прочих элементов, не задумываясь, какую инфу и пользу они будут нести для юзверя. В итоге получается "не пришей везде рукав" - глупый посетитель считает всякую лишнюю пикчурку элементом навигации и наивно тычется туда своим курсором. Так что делай вывод и применяй такую концепцию: сначала - полная подготовка информационного содержания (контента), а уже потом - оформление. В идеале каждая точка на странице должна быть со смыслом .
Цвет
Цвета - бубонная чума многих молодых сайтостроителей, у которых крутость ассоциируется с попугайской пестротой и боевой индейской раскраской. Как ты мог догадаться по моему ироничному тону, это неправильное мнение. И вообще - то, что кажется очевидным, довольно часто оказывается неправильным.
Цвет в веб-дизайне, как и в жизни, имеет весьма нехилое значение. Цветом можно воздействовать на аудиторию. Если на странице ты просто даешь какую-нибудь инфу, скажем, справочную, оптимальным будет использование черного текста на белом фоне. А если ты хочешь, чтобы сонный юзер при заходе на твой сайт мигом проснулся, используй ярко-желтый или красный текст или символ на черном фоне - такой прием иногда используется для подачи какой-нибудь крутой новости.
Теория цвета довольно сложна, и чтобы овладеть ею, нужны интуиция и опыт. Если боишься напортачить, работай с оттенками серого - не проиграешь . Еще одна рекомендация: пока ты не сможешь сказать себе: "Я крут в подборе цвета", используй специальные проги, показывающие совместимые цвета. Я видел такие на серверах фриварного и шароварного софта. Запомни главное: цвета текста и фона должны контрастировать, чтобы читать было легко и приятно.
Задний план
Фон страницы может быть плоскоцветным и текстурным. Плоскоцветный фон использует только один цвет и, несмотря на кажущийся примитивизм, он более популярен у профи. Текстурный фон подразумевает использование изображений, косящих под различные поверхности, либо фотографий. Я прошу тебя, не уподобляйся ламеркам от дизайна, которые, радостно брызгая слюной, делают фон "как настоящий кирпич!" и страшно гордятся этим. Если уж пошла такая пьянка, применяй фотографии, а я раскрою тебе пару-тройку хитростей, связанных с ними. Первое: не ходи на отечественные ресурсы бесплатных полупрофессиональных и любительских фоток. Ходи на зарубежные профессиональные хранилища. Одним из таких хранилищ является www.photodisc.com. В поле поиска ты вводишь ключевое слово, и специально для тебя генерируется страница с X-количеством мини-изображений, связанных с твоим запросом. Выбирай где-нибудь в середине и щелкай - получишь страницу с немного увеличенной фотографией (примерно 250x250 pix) с указанием цены на пикчу большого размера нужного формата. Но для веб-дизайна сойдет и та, 250 на 250, не так ли ?
Второе - просто прямоугольная картинка с резкими краями не всегда смотрится аккуратно, поэтому иногда лучше попыхтеть с графическим редактором. Навскидку могу назвать два стандартных приема. Первый - размытие краев, которое можно сделать с помощью аэрографа: ставишь цвет, как у бекграунда, и обрабатываешь по краям.
Второй прием - эффект тени под изображением (но не под всей картинкой); в разных редакторах он достигается разными путями.
Текст на страницах
Что бы там ни говорили большевики, текст остается главной составляющей содержимого всемирной сети. Собственно говоря, ради этого все и создавалось, а поэтому не надо думать, что оформление текста - ерунда по сравнению со всем остальным.
Главное правило - используй на сайте как можно меньше шрифтов, лучше всего не больше двух. Мы с тобой уже говорили, что не все то круто, что пестрит, - эта фраза уместна и здесь.
Не стоит делать полужирным шрифтом или курсивом большие блоки текста. Эти специальные виды начертания созданы для того, чтобы выделить какую-либо значимую фразу. Вспомни фразу из фильма "Крутые стволы": "Чем реже ты ругаешься, тем весомее твое ругательство" .
Остерегайся использования вычурных шрифтов со всякими рюшечками и завитушками. Бывает, что именно они портят всю картину. Иногда текст оформляют как графические вставки.
Если твоя пага содержит несколько колонок, и они расположены достаточно близко друг от друга, проследи, чтобы строки в соседних колонках находились на одной высоте. Фиг знает почему, но в противном случае лично мне становится как-то не по себе .
Ударный элемент и шапка сайта
Ты не задумывался, почему внешний вид некоторых сайтов с маленьким количеством информации запоминается лучше, чем фейс корпоративных сайтов с обилием оной, со множеством возможностей и функций? Я сам недавно понял: у них был путевый и запоминающийся элемент, идентифицирующий именно этот сайт среди многих других - я бы назвал его логотипом сайта. У многих компаний он совпадает с ее обычным логотипом. Располагается он, как правило, в левом верхнем углу страницы. Отсюда вывод: если хочешь, чтобы тебя помнили, постарайся сделать оригинальную графическую фишку. Придется долго возиться в редакторах, пробовать много вариантов, но это просто необходимо для удачного дизайна. Делай его без использования большого количества цветов и уж, конечно, без использования каких-либо текстур. Логотип сайта можно выносить в баннеры, на визитки, распечатывать на бумаге или вешать на стену. Он должен присутствовать на каждой странице - можешь считать его штырем сайта, на который насажены все страницы.
Кроме логотипа, немалую роль играет шапка страницы. Следующий эффект применяется на многих веб-страницах, баннерах, да и просто в полиграфии. Успешнее всего этот эффект лабается в многострадальном Фотошопе, благодаря этому и появился фразеологизм "в стиле Photoshop". Делается это так: на имеющуюся картинку накладываешь вторую, копируя ее откуда-либо через буфер (она попадает на слой выше). Затем выбираешь ластик, делаешь в нем следующие настройки: Brush - как можно больше, но не переборщи; Mode - Airbrush; Pressure - ставь поменьше, 10-30%. Теперь, аккуратно подтирая в нужном месте верхнюю картинку , ты получишь крутую полупрозрачность.
Разбор помета
Лучший способ наращивать навыки крутого дизайнера - анализировать чужие работы. Конечно, анализ сайта твоего младшего братишки вряд ли приведет к чему-нибудь хорошему, но www-представительства производителей графического софта и профессиональных студий веб-дизайна могут научить многим интересным вещам, а также натолкнуть на свои интересные мысли. Не стоит впадать в панику на тему "я никогда так не смогу" - надо пытаться повторить то, что ты видел; размышлять, какими инструментами это достигалось, изучать литературу и постоянно повышать свой уровень мастерства.

Bender добавил [date]1145944504[/date]:
Чтобы не оставаться голословными, давай вместе разберем главную страницу Adobe Systems. Как вылезешь в сеть, набери в адресной строке браузера www.adobe.com. Итак, какие профессиональные трючки мы тут наблюдаем? Как уже говорилось, в левом верхнем углу - фирменный логотип Adobe, использующий три цвета: белый, черный и красный, - отличное сочетание. В шапке страницы - семь ссылок: как сообщают психологи, именно такое количество однородных предметов наш мозг обрабатывает без напрягов. Заметь, что все заголовки на самом деле не текстовые, а графические. Такой ход объясняется следующими причинами: во-первых, юзер видит заголовок именно так, как хотел дизайнер - иногда случается, что на компе клиента не установлены соответствующие шрифты либо браузер отобразит заголовок по-своему; во-вторых, средствами графического редактора к тексту можно применить антиалиасинг (сглаживание), так что он будет более приятным для глаза. Идем далее: слева, как я понял, расположены анонсы с визуальным представлением. Заметил, что эти круглые пикчурки не одинаковы, хотя и представляют информацию вроде бы одинаковой значимости? Этот прием применяется в рекламе - маленький рядом с большим привлекают больше внимания, чем два средних . Перейдем к правой колонке: для украшения текстовых заголовков и кратких аннотаций авторы сайта добавили метафоры - маленькие пиктограммы со смыслом (тулзы для веб-дизайна - курсор в виде руки, щелкающий по ссылке, печать - листы бумаги - и так дальше). Это традиционная и рожденная Интернетом графика тоже хорошо привлекает внимание.

А дальше - сам!
Надеюсь, что эта короткая статья хотя бы немного прояснила для тебя непростую ситуацию в мире дизайна, и ты уже не считаешь меня лохом, копирующим текст с интернет-паг и вставляющим его в текстовый редактор для написания материала. Я показал тебе, в каком направлении и как надо развиваться. Если ты не умеешь работать с графикой и не собираешься учиться, а также тебе лень возиться, изучая творенья мастеров, то мои, да и любые другие советы, тебе не помогут. Но это я так, чтоб ты не зазнавался .
Напоследок добавлю: чтобы сделать реальный дизайн, надо хорошо уметь редактировать как растровую, так и векторную графику. В векторном редакторе удобно делать макет страницы, прикидывать расположение навигации, иллюстраций и прочих элементов. Когда наступает необходимость профильтровать какую-нибудь фотку, приходит время растрового редактора. "СПЕЦ" обязательно подкинет тебе что-нибудь интересное и по этим вопросам .