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

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

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

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

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

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

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

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

Назад на стр. 015-048-2  Содержание  Вперед на стр. 015-048-4

загрузка...
Cпец Хакер #075Cпец Хакер #074Cпец Хакер #073Cпец Хакер #072Cпец Хакер #071Cпец Хакер #070Cпец Хакер #069Cпец Хакер #068Cпец Хакер #067Cпец Хакер #066Cпец Хакер #065Cпец Хакер #064Cпец Хакер #063Cпец Хакер #062Cпец Хакер #061Cпец Хакер #060Cпец Хакер #059Cпец Хакер #058Cпец Хакер #057Cпец Хакер #056Cпец Хакер #055Cпец Хакер #054Cпец Хакер #053Cпец Хакер #052Cпец Хакер #051Cпец Хакер #050Cпец Хакер #049Cпец Хакер #048Cпец Хакер #047Cпец Хакер #046Cпец Хакер #045Cпец Хакер #044Cпец Хакер #043Cпец Хакер #042Cпец Хакер #041Cпец Хакер #040Cпец Хакер #039Cпец Хакер #038Cпец Хакер #037Cпец Хакер #036Cпец Хакер #035Cпец Хакер #034Cпец Хакер #033Cпец Хакер #032Cпец Хакер #031Cпец Хакер #030Cпец Хакер #029Cпец Хакер #028Cпец Хакер #027Cпец Хакер #026Cпец Хакер #025Cпец Хакер #024Cпец Хакер #023Cпец Хакер #022Cпец Хакер #021Cпец Хакер #020Cпец Хакер #019Cпец Хакер #018Cпец Хакер #017Cпец Хакер #016Cпец Хакер #015Cпец Хакер #014Cпец Хакер #013Cпец Хакер #012Cпец Хакер #011Cпец Хакер #010Cпец Хакер #009Cпец Хакер #008Cпец Хакер #007Cпец Хакер #006Cпец Хакер #005Cпец Хакер #004Cпец Хакер #003Cпец Хакер #002Cпец Хакер #001