Реальный веб-дизайн

Спецвыпуск Xakep, номер #015, стр. 015-048-3

Ударный элемент и шапка сайта

Ты не задумывался, почему внешний вид некоторых сайтов с маленьким количеством информации запоминается лучше, чем фейс корпоративных сайтов с обилием оной, со множеством возможностей и функций? Я сам недавно понял: у них был путевый и запоминающийся элемент, идентифицирующий именно этот сайт среди многих других - я бы назвал его логотипом сайта. У многих компаний он совпадает с ее обычным логотипом. Располагается он, как правило, в левом верхнем углу страницы. Отсюда вывод: если хочешь, чтобы тебя помнили, постарайся сделать оригинальную графическую фишку. Придется долго возиться в редакторах, пробовать много вариантов, но это просто необходимо для удачного дизайна. Делай его без использования большого количества цветов и уж, конечно, без использования каких-либо текстур. Логотип сайта можно выносить в баннеры, на визитки, распечатывать на бумаге или вешать на стену. Он должен присутствовать на каждой странице - можешь считать его штырем сайта, на который насажены все страницы.

Кроме логотипа, немалую роль играет шапка страницы. Следующий эффект применяется на многих веб-страницах, баннерах, да и просто в полиграфии. Успешнее всего этот эффект лабается в многострадальном Фотошопе, благодаря этому и появился фразеологизм "в стиле Photoshop". Делается это так: на имеющуюся картинку накладываешь вторую, копируя ее откуда-либо через буфер (она попадает на слой выше). Затем выбираешь ластик, делаешь в нем следующие настройки: Brush - как можно больше, но не переборщи; Mode - Airbrush; Pressure - ставь поменьше, 10-30%. Теперь, аккуратно подтирая в нужном месте верхнюю картинку :), ты получишь крутую полупрозрачность.

Разбор помета

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

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