Четыре правила профессионального дизайна.Часть I

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

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

Тем не менее, если поставить вопрос несколько по-иному, то кое о чем поговорить все-таки можно. Я не буду рассказывать вам, как создать — супер-пупер — дизайн — чтобы — все — дизайнеры — позеленели — от зависти. Такой рассказ, как я уже говорил ранее, невозможен. Я расскажу вам о том, как сделать профессиональный дизайн.

Почему я стал говорить о профессиональном дизайне? По моему мнению, «профессионализм» — это единственное качество, которым должен обладать дизайн любого веб-сайта. Дизайн может быть простым и сложным, текстовым и графическим, цветным и черно-белым — но при первом же взгляде на него посетителю должно становиться понятно, что этот сайт делал мастер своего дела, а не человек, который Интернет увидел только вчера.

Конечно, то, что я рассказываю вам о том, как делать профессиональный дизайн, вовсе не означает то, что при этом вам уже не нужны способности и вкус. Если вам нравятся поголовно все странички с narod.ru, то прочитайте вы хоть 20 томов о профессиональном дизайне — все равно не поможет.

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

Первое правило таково: «Побольше мелких деталей».

Дело в том, что крупные объекты в составе любой композиции смотрятся довольно неважно. Нужно быть большим мастером, чтобы дизайн, основанный на таких объектах, выглядел хорошо. Аршинные буквы в заголовках, кнопки навигации высотой в 40 пикселей, верстка в одну колонку шириной в 600 точек, разделитель одного цвета, растянутый на весь экран — все это придает дизайну непрофессиональный вид.

Если же добавить в элементы дизайна мелкие детали, а крупные объекты визуально разбить на более мелкие (например, применив градиентную заливку) — картина значительно улучшится.

Вот что конкретно можно предпринять для «размельчения» дизайна:

1) если позволяет содержание сервера, заголовки, набранные шрифтом большого размера, дополните подзаголовками, выполненные более мелким кеглем;

2) по возможности применяйте верстку в несколько колонок. При этом «разбивайте» колонки и по вертикали, выделяя их части, например, разными цветами (или оттенками одного цвета);

3) не заливайте большие объекты (например, линии-разделители) одним цветом. Выберите градиентную заливку или просто разделите объект на несколько частей с помощью линий и других графических примитивов;

4) не делайте кнопки навигации, заголовки колонок и другие подобные объекты однотонными. Придумайте какую-нибудь интересную рамку, визуально выделите часть объекта (например, угол), добавьте тень;

5) добавьте там, где, на ваш взгляд это требуется, декоративные элементы: пиктограммы, горизонтальные полоски или даже что-нибудь типа орнамента.

Естественно, бросаться в крайности не нужно. Чувство меры — такое же необходимое качество дизайнера, как и буйная фантазия. Не делайте так, чтобы от мелких деталей у зрителя рябило в глазах. Следите, чтобы все заголовки, кнопки навигации, текст читались хорошо. Добавленные вами мелкие детали не должны сбивать с толку читателя: он не должен принимать их, например, за элементы навигации и пытаться ткнуть в них мышью.

Примеров работы этого правила — масса. Например, в 1997 году главную страницу rambler.ru «украшал» здоровенный бело-синий логотип, и при этом он занимал около 50% всей главной страницы. Зрелище, надо сказать, было довольно тоскливое (даже директор проекта Д.Крюков в одном из интервью сетовал, что с дизайном у них не очень). Теперь же логотип сильно уменьшился, на главную страницу вынесли ссылки категорий Rambler's Top100 (отличный «размельчитель» дизайна), появились разноцветные колонки с новостями и другой информацией — и, как результат, сервер теперь выглядит гораздо лучше (хотя дизайн, конечно, еще далек от идеала).

А вот еще один пример. Это — два рекламных баннера для проекта job.list.ru (рисовал их автор этих строк):

Верхний баннер откровенно не удался — выглядит явно не профессионально (виной тому — жесткий цейтнот: баннер делался 15 минут). В итоге буквы высотой почти во весь баннер и отсутствие мелких деталей придают ему любительский вид.

К созданию нижнего баннера я подошел более серьезно (на него ушло, страшно сказать, целых полтора часа). Дизайн здесь, как видите, посложнее. Несколько рамок внутри баннера, фоновая картинка за буквами «Job.List.ru», штрих-код, анимированная пунктирная линия со стрелкой, тени в обоих нижних углах баннера, подзаголовок, набранный мелким шрифтом — все эти элементы добавлены исключительно для «размельчения» дизайна. К упоминавшемуся вопросу о крайностях — обратите внимание, что при большом количестве мелких деталей все слоганы и заголовки читаются хорошо. В результате — готовый баннер мне было не стыдно сдавать заказчику.

Правило «Побольше мелких деталей» работает не только в области интернет-дизайна. Например, посмотрите на эти два образца DVD-проигрывателей:

Нижний плейер — от компании NAD. Грубые кнопки, лицевая панель проигрывателя, на которой очень много пустого места, а также большой радиус закругления углов дисплея и крышки лотка DVD-диска придают аппарату какой-то кустарный, самодельный вид.

Справедливости ради нужно заметить, что некоторым людям дизайн от NAD нравится. Если вы почитаете журнал Stereophile, то найдете там одни восторги по поводу внешнего вида этой техники. Ее дизайн считается необычным, не похожим на оформление техники других компаний. Но ведь домашние странички на geocities и angelfire тоже не похожи на сайты, сделанные профессиональными студиями, верно? И они тоже вызывают восторг у экспертов в разных областях — но только не в области веб-дизайна.

А вот верхний DVD-плейер — от DENON — по дизайну очень даже хорош. И в этом большая заслуга изящных по исполнению элементов управления проигрывателя, сгруппированных в правой части аппарата. Левая часть лицевой панели плейера тоже пустует, но тут над правилами дизайна превалируют правила эргономики: большинство людей — правши, и им удобнее пользоваться элементами управления, расположенными справа.

О втором правиле профессионального дизайна — в следующей заметке.

Статьи по теме

Гигантская подборка сервисов для веб-дизайна. Логотипы, фотобанки, иконки, шрифты и прочее

Онлайн-сервисы для работы с визуальным контентом и дизайном сайта, собрали бесплатные и недорогие площадки. Материал обновлен...

2023-12-28

Дизайн сайта: особенности творческого процесса

Подготовка оформления веб-ресурса традиционно считается одним из наиболее сложных этапов создания сайта в целом. Безусловно, техническ...

2019-08-07

Создание логотипа: семь сервисов в помощь

После того, как основная бизнес-идея сформирована, определены продукты и услуги, которые компания будет продвигать на рынке, возникает н...

2019-01-30

20 ценных уроков дизайна от "Мстителей"

Может это и звучит как-то странно, но марвеловские супергерои могут не только скрасить наш досуг своими приключениями, но и дать нам нес...

2015-05-11

15 трендов веб дизайна в 2014-2015 году

1. Первостепенность дизайна для мобильных устройств. Разработка дизайна теперь начинается с маленьких экранов, следующим шагом являетс�...

2014-06-05

Как не надо верстать сайт или 7 ошибок начинающего веб-мастера

Прежде чем приступить к продвижению сайта в сети Интернет, необходимо позаботиться об отсутствии в нем ошибок, связанных с неправильно�...

2011-12-27

Факторы, определяющие хороший логотип

Если вы решили создать логотип, то нужно подумать о том, где он может использоваться. Существует пять факторов, которые определяют наско�...

2011-12-27

Борьба поисковиков и оптимизаторов

Сегодня интернет стал реальной бизнес-средой, и позиция сайта компании в результатах поискового запроса оказывает значительное вли�...

2011-04-13

Почему не стоит скачивать шаблоны с варезников

Нам часто задают один и тот же вопрос, — какой смысл платить нам за установку шаблона, если полно варезников, где все шаблоны можно скача�...

2011-04-13

О пользе точности темплейтов

Лирическое отступление: Темплейты для сайта (сториборды, вайрфреймы) - спроектированные проволочные схемы страниц сайта. Темплейты пок...

2011-04-07

Методы веб-дизайна и юзабилити

Данный набор статей является почти полным каталогом методов и приёмов, которые используются в дизайне программных систем вообще и веб-...

2011-04-07

Шаблонные решения для web-сайтов

При проектировании стандартных элементов веб-сайта посмотрите, как это сделано на других веб-сайтах, и не изобретайте велосипед. Меньше...

2011-04-07

Как сделать картинки в стиле Карсона

Самое модное сейчас в дизайне — шрифты. Их в работе должно быть как можно больше. Неважно, ЧТО вы этими шрифтами пишете, главное — раск�...

2011-04-07

Переживания должны передаваться

Поток безопасного оформления сайтов, не оставляет после их просмотра никаких переживаний, кроме безысходности. Несмотря на все огранич...

2011-03-29

Про заказчиков

Сегодня наш выпуск посвящён не дизайну или дизайнерам, а тому, с кем они имеют дело — заказчикам. Заказчики делятся на несколько групп. Т...

2011-03-29