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

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

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

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

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

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

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

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

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

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

Идеи: Мы говорим монополия, подразумеваем…

Авторы: Константин Курбатов, Владислав Бояров