Журнал «Компьютерра» № 17 от 09 мая 2006 года

Идеи: Креативный дизайн в сайтостроении

Автор: Вадим Ермолин admin@imperior.info

Вряд ли можно найти тему, при обсуждении которой было сломано больше копий, нежели дизайн веб-сайтов. Есть масса людей, которые уверены, что хороший дизайн — это удел крупных и именитых студий, есть и другое мнение: «дизайн» придумали как раз эти самые студии, чтобы выбивать деньги из клиентов.

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

Ох уж это модное слово — «креативный»! Выражаясь проще, «креативный» — это не что иное, как особый стиль художника, его основная идея или изюминка, которая несет в себе скрытый замысел своего создателя. Это то, что отличается неповторимостью, уникальностью и привлекает внимание посетителей сайта.

Креативный дизайн как «компьютерный стереотип» — очень замысловатая архитектура построения работ на его основе. В таких работах обычно присутствуют элементы из реальной жизни, элементы, придающие необычный стиль работе. Неплохим примером может быть работа дизайнеров студии Артемия Лебедева. Они «положили» в низу каждой страницы настоящую изюминку (ну, если точнее, фотографию изюминки)! Тем самым они оживили страницы сайта и придали им необыкновенный вид, несущий в себе смысл и каплю тонкого юмора! Дизайн страниц Василия Пирогова с элементами XVII-VXIII веков тоже отлично иллюстрирует такой подход. Студия FreshLabs «пропагандирует» на страницах своего сайта лампы, лимоны и прочее — это тоже «креатив». То есть главная идея состоит в размытии границы между контентом и оформлением сайта таким образом, чтобы текстовое содержимое стало частью графического оформления. К тому же это привносит некий объем. А наличие третьего измерения дает в руки дизайнеру еще один инструмент для управления иерархией содержимого и вниманием посетителей.

Но как отойти от простого «блочного» дизайна помимо добавления «изюминок»? Конечно, «блочного» — это грубо сказано, но большинство сайтов построены именно на блоках, то есть «блок слева — блок справа». Текст в середине — по стойке смирно! Дело в том, что некоторые люди (в том числе и веб-дизайнеры) понимают под удобством и привлекательностью в первую очередь минимализм сайта (минимальное число графических элементов на его страницах) и размещают на нем массу «нереальной» графики (например, абстракции, изготовленные в Photoshop’е). Но этого недостаточно! Представьте, что вы зашли на обычный портал о веб-программировании. Шапка (верхняя часть страниц) представляет собой рисунок-абстракцию, состоящую из кривых линий, «вспышек», «тарелок» и прочего; остальные элементы дизайна выполнены примерно в том же стиле. Возможно, вы привыкнете к такому оформлению и виртуальные художества вас не смутят. Но если посмотреть со стороны, то таких сайтов тысячи, даже миллионы — и все на один и тот же лад. И этот — очередной — вряд ли привлечет внимание и запомнится.

Чтобы создавать настоящий «креатив», перечисленных технических приемов мало, да и опыта может не хватить. В любом случае, нужно вдохновение — то чувство, которое дремлет во многих потенциально хороших дизайнерах! Попробуйте разбудить его, зайдя на Design Collector . Там собраны ссылки на множество дизайн-студий, работы фрилансеров и вообще красивые, а главное — необычно оформленные сайты. Вот парочка из тех, что понравились лично мне: NetHouse, и очень много неплохих работ на 73dpi . Можете заглянуть на ImperiorStudio … В общем, не поленитесь, прогуляйтесь по многочисленным ссылкам с Design Collector’a.

На самом деле, абстракции редко ассоциируются с комфортом, а цель дизайна (по крайней мере, большинства сайтов) — комфортное пребывание на них посетителей. Используя же нестандартные, но «живые» объекты в оформлении сайта, вы сделаете его привлекательнее, сохранив необычность оформления. Представим, что вам нужно переделать тот же портал. Тема: веб-программирование. Итак, вместо старой шапки поставьте, например, клавиатуру и мышь (компьютерную!), или «от обратного» (самоирония иногда полезна) — стакан пива и кусок пиццы, но в любом случае — нечто из реальной жизни, что может ассоциироваться с работой программиста. Важно, чтобы вокруг них не было лишнего фона (проще говоря, фон картинки должен быть прозрачным или совпадать с фоном страницы). «Вещи» на сайте должны выглядеть так, будто они «лежат» на нем. Именно это придает глубину, объем вашему оформлению. Тот же стакан с пивом или пицца должны быть сфотографированы под некоторым (одинаковым!) углом. Вряд ли шапка с абстракцией могла выглядеть действительно «трехмерной». Очевидно, что и остальные элементы страницы следует оформить в том же стиле.

Снова обратимся к сайту студии Артемия Лебедева (www.artlebedev.ru). Если бы картинки были вставлены просто в виде квадратных фотографий, они бы не выглядели органичными элементами сайта, а представлялись бы тривиальными иллюстрациями, разрушающими общую концепцию дизайна… Секрет — в отрыве объекта от фона, который порой не только мешает, но даже конфликтует с общим цветовым и стилистическим решением.

Напоследок отмечу, что, пожалуй, самая распространенная ошибка при создании сайта — неправильное расположение текста и неудачный выбор движка. Нужно выбирать CMS (см. «КТ» #604 от 08.09.2005), скрипт для форума, чата или дневника — в том числе и с точки зрения свободы управления структурой. Очень сложно креативно оформить форум с его закоренелой табличной структурой или дневник, где есть одно-единственное место для художественного творчества — верхнее поле. К тому же из-за ошибок в скриптах при изменении текстового содержимого некоторые графические элементы могут некорректно отображаться или неудачно стыковаться. Всегда следите за этим! Иначе кого потом винить: дизайнера или программиста?

Можно сформулировать кое-какие приемы, которые позволят отойти от банального «вспышка слева, вспышка справа» при оформлении страниц вашего веб-сайта.

Если картинка не является иллюстрацией к статье, а относится к дизайну самого сайта — избавляйтесь от фона! Он отвлекает внимание от объекта и совсем не смотрится. В этом легко убедиться: на бесплатных хостингах фоном страницы часто служит какая-нибудь текстура камня, а вокруг все засыпано фотографиями из любимого кинофильма в качестве «создателей настроения». Вы, конечно, уже сталкивались с таким «дизайном». Стоит ли идти тем же путем?

Всегда следите за качеством картинок! Речь не о том, что нужно очертя голову конвертировать JPG в TIFF. Форматы JPG, GIF, PNG вполне допустимы, но в то же время разрешение ваших изображений должно быть ровно 72 dpi (стандарт для веба) При большем разрешении файл будет слишком велик, и на низких скоростях возможны случаи, когда просто не удастся открыть страничку. Сохраняя изображения, придерживайтесь золотой середины между размером и качеством. Не забывайте в тегах прописывать размеры всех картинок. Неплохим примером креативного дизайна, в котором кое-где используются графические элементы размером менее десяти килобайт, является сайт дизайн-студии «Зебра». При этом картинки выглядят прекрасно.

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

Делая многослойный дизайн, не «кладите» картинки поверх текста; оставляйте их на заднем плане (позади текста), за исключением, может быть, логотипа. Текст, который «загораживают» картинки, посетитель сможет прочитать исключительно шаманскими способами.

Если вы не профессиональный художник, то при оформлении не используйте ваши собственные «творения», нарисованные на компьютере. Не стоит помещать свое супрематическое произведение с трогательной поясняющей надписью «лошадь» для тех, кто вдруг по ошибке узнает в ней первый советский трактор.