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