|
 Вы - профессиональный дизайнер, или еще только начинаете свою дизайнерскую деятельность. Тем не менее, как для новичков, так и для специалистов, существуют простые правила профессионального дизайна.
Научить дизайну, вот так, путем написания нескольких заметок, нельзя. Если по HTML-верстке или азам проектирования веб-сайта еще можно написать пошаговую инструкцию, то с дизайном не так. Здесь нужно наличие таких качеств, как талант, творческое воображение, художественный вкус. Мало того, что эти понятия не поддаются описанию и классификации, так у многих людей такие качества попросту отсутствуют. "Профессионализм" - это единственное качество, которым должен обладать дизайн любого веб-сайта. Дизайн может быть простым и сложным, текстовым и графическим, цветным и черно-белым - но при первом же взгляде на него посетителю должно становиться понятно, что этот сайт делал мастер своего дела, а не человек, который Интернет увидел только вчера. Профессиональный дизайн основывается на четырех правилах. Конечно, есть и еще много разных аспектов, но если вы не будете соблюдать хотя бы эти четыре правила, у вас точно ничего не получится. И еще раз напоминаем: это правила, а не пошаговая инструкция. Применять их будете вы, и насколько удачно - будет зависеть только от вас и ваших способностей. Правило первое Побольше мелких деталей. Дело в том, что крупные объекты в составе любой композиции смотрятся довольно неважно. Нужно быть большим мастером, чтобы дизайн, основанный на таких объектах, выглядел хорошо. Аршинные буквы в заголовках, кнопки навигации высотой в 40 пикселей, верстка в одну колонку шириной в 600 точек, разделитель одного цвета, растянутый на весь экран - все это придает дизайну непрофессиональный вид. Если же добавить в элементы дизайна мелкие детали, а крупные объекты визуально разбить на более мелкие (например, применив градиентную заливку) - картина значительно улучшится. Вот что конкретно можно предпринять для "размельчения" дизайна: 1) если позволяет содержание сервера, заголовки, набранные шрифтом большого размера, дополните подзаголовками, выполненные более мелким кеглем; 2) по возможности применяйте верстку в несколько колонок. При этом "разбивайте" колонки и по вертикали, выделяя их части, например, разными цветами (или оттенками одного цвета); 3) не заливайте большие объекты (например, линии-разделители) одним цветом. Выберите градиентную заливку или просто разделите объект на несколько частей с помощью линий и других графических примитивов; 4) не делайте кнопки навигации, заголовки колонок и другие подобные объекты однотонными. Придумайте какую-нибудь интересную рамку, визуально выделите часть объекта (например, угол), добавьте тень; 5) добавьте там, где, на ваш взгляд это требуется, декоративные элементы: пиктограммы, горизонтальные полоски или даже что-нибудь типа орнамента. Естественно, бросаться в крайности не нужно. Чувство меры - такое же необходимое качество дизайнера, как и буйная фантазия. Не делайте так, чтобы от мелких деталей у зрителя рябило в глазах. Следите, чтобы все заголовки, кнопки навигации, текст читались хорошо. Добавленные вами мелкие детали не должны сбивать с толку читателя: он не должен принимать их, например, за элементы навигации и пытаться ткнуть в них мышью. Примеров работы этого правила - масса. Например, в 1997 году главную страницу rambler.ru "украшал" здоровенный бело-синий логотип, и при этом он занимал около 50% всей главной страницы. Зрелище было довольно тоскливое (даже директор проекта Д.Крюков в одном из интервью сетовал, что с дизайном у них не очень). Теперь же логотип сильно уменьшился, на главную страницу вынесли ссылки категорий Rambler"s Top100 (отличный "размельчитель" дизайна), появились разноцветные колонки с новостями и другой информацией - и, как результат, сервер теперь выглядит гораздо лучше (хотя дизайн, конечно, еще далек от идеала). Правило второе Из-за чего случается большая часть несчастных случаев на производстве, аварий сложной техники и прочих бедствий с участием человека? Почему, несмотря на отточенность технического процесса, множество испытаний и тщательный контроль качества, взрываются электростанции, падают самолеты и тонут подводные лодки? Чаще всего это происходит от того, что кто-то просто-напросто махнул на сущие, как ему показалось, мелочи и подумал: "Авось обойдется". Потому что еще надо подняться на два уровня в "Тетрисе", или не пропустить сериал по ТВ, или банально лень. В конце концов, вахтенный на "Титанике" заметил злосчастный айсберг слишком поздно всего лишь из-за того, что один из офицеров просто забыл бинокль для дежурного в своей каюте. Если в жизни результатом пренебрежения мелочами становятся человеческие жертвы и многомиллиардные убытки, то в интернете беспечность дизайнера, хотя и имеет гораздо менее катастрофические последствия, тоже не приносит ничего хорошего. Если и удастся облапошить заказчика, то отзывы разочарованных посетителей сайта и насмешки коллег по цеху в конечном итоге создадут дизайнеру дурную репутацию. И тогда единственное, что ему останется - сшибать по 10 долларов за сайт с мелких лавочников, желающих "дешево и сердито" приобщиться к современным информационным технологиям. Поэтому каждый профессиональный дизайнер уделяет повышенное внимание мелочам и никогда не позволяет себе халатного отношения к делу. Это и есть второе правило профессионального дизайна - "Повышенное внимание к мелочам". Продумывайте до конца все элементы дизайна. Следите, чтобы каждый из их был на своем месте и хорошо сочетался с другими. Не ленитесь потратить лишний час на дизайн кнопки размером 15x15 пикселей - вам обязательно воздастся. Не пожалейте времени, чтобы выяснить, какой именно тег в 10 килобайтах вашего HTML-кода вызывает смещение таблицы на всего лишь один ничтожный пиксель. Не думайте: "А, фиг с ним. Так сойдет." Не получится. Из тщательно "вылизанных" в графическом редакторе кнопок и пиктограмм, грамотно составленного текста, отлаженного HTML-кода, как из кирпичиков, и складывается профессиональный дизайн. Правило третье "Гармоничное сочетание цветов". Сочетание цветов на сайте должно быть таково, чтобы, во-первых, текст, размещенный на веб-страницах, читался хорошо, а во-вторых, общий цветовой фон не вызывал у пользователя раздражения. С читаемостью текста все просто. Но почему-то для многих дизайнеров выбор цветов текста/фона составляет проблему.
Критерий оценки допустимости того или иного сочетания цветов для использования их в качестве цветов фона и текста таков: чтение текста не должно вызывать у пользователя никакого дискомфорта. Критерий достаточно субъективный, но если вам показалось, что текст на странице выглядит недостаточно контрастно, или для его чтения нужно всматриваться в экран, то данное сочетание цветов не годится. Да, кстати, дело не только в контрастности. Например, в ярко-зеленом тексте на темно-синем фоне контраста - хоть отбавляй, но любой профессиональный дизайнер такое сочетание использовать не будет. Если данный способ у вас применять не получается, то сделайте скриншот страницы, а затем в Photoshop переведите ее в режим grayscale (градации серого):
Обратите также внимание, что большие тексты (например, статьи) нужно размещать на светлом фоне, так как в этом случае их читать гораздо легче. Для отдельных же предложений и слов можно выбрать и темный фон. Теперь о выборе цветов для дизайна в целом. С одной стороны, зеленый с розовым явно не сочетаются, но с другой стороны, в Сети полно зелено-розовых сайтов. То есть многие дизайнеры в принципе не способны определить, какие цвета сочетаются, а какие нет. По-моему, тут медицина бессильна. Предположим, что вы сидите перед открытой в Photoshop"е палитрой и все не можете решить, какие же из цвета вам выбрать. Вот вам универсальный "рандомайзер" для генерации совершенно невообразимых сочетаний цветов, которые в зависимости от случая могут привести профессионального дизайнера как в шок, так и в восторг. Так сказать, рабочий инструмент для страдающего кризисом выбора дизайнера :-) Сначала все-таки поднапрягитесь и выберите какие-нибудь несколько цветов - пусть даже те, которые вам давно надоели. Нарисуйте ими какую-нибудь простую композицию (надпись на фоне нескольких прямоугольников, например). Далее сохраните получившуюся картинку в GIF или JPEG и загрузите в Internet Explorer. Теперь - финальный шаг: нажмите Ctrl+A или выберите из меню команду пункт "Правка-Выделить все". Выделение инвертирует цвета, и получаются довольно интересные сочетания. А теперь, если понравилось, делайте скриншот и используйте найденные цвета на здоровье, а если нет - продолжайте эксперементы. Правило четвертое "Гармоничное сочетание шрифтов".  Повышенное внимание к шрифтам со стороны любого профессионального дизайнера вполне закономерно. Текст - важнейший элемент дизайна всех веб-сайтов, на которые ходят посетители - ведь ходят они за информацией, представленной в большинстве случаев в текстовой форме. Исполнение логотипа, заголовков, основного текста во многом определяют внешний вид сайта.
Конечно, обо всех аспектах применения шрифтов в одной заметке не расскажешь - это тема для отдельной книги. Но кое-какие общие рекомендации изложить вполне возможно. Как и в случае с подбором цветов, здесь нужно брать в расчет несколько важных моментов. Во-первых, не стоит в дизайне одного сайта использовать много разных шрифтов. Вполне достаточно одного-двух. Особенно хорошо действие этого правила заметно в полиграфии. В подавляющем количестве печатных изданий и других публикаций используется один шрифт с засечками для набора основного текста и рубленый (без засечек) шрифт для заголовков. Да взять хотя бы русский народный текстовый редактор MS Word: в качестве стандартных стилей он предлагает шрифт Times New Roman для обычного текста и Arial - для заголовков.
Естественно, никто не заставляет вас набирать весь текст шрифтом одного и того же размера и начертания. Экспериментируйте. Только, как всегда, нужно придерживаться "логического единообразия": уж если вы решили выделять важные участки текста полужирным, то не нужно какой-нибудь из абзацов непонятно почему делать подчеркиванием. А если для текстового меню навигации вы решили сделать , то ни в коем случае не нужно половину пунктов меню делать в "Фонт сайз равно плюс один".
Во-вторых, не используйте декоративные и стилизованные шрифты - например, рукописные, церковно-славянские, имитирующие штамповку на военный манер или буквы на LCD-дисплее, и т.п. О них нужно забыть и вспоминать только тогда, когда понадобится сделать именно стилизацию под конкретную тематику или временную эпоху. Как писал Артемий Лебедев о создании дизайна-стилизации для Рекламы.Ру: "Тут мне пригодились такие гарнитуры, которые я даже спьяну никогда бы не использовал в своих работах": В основном профессиональные дизайнеры не любят использовать декоративные гарнитуры потому, что эти шрифты сами по себе слишком сложны, чтобы являться всего лишь средством для передачи информации, опубликованной на сайте. Декоративная гарнитура представляет собой законченную композицию, тогда как в большинстве случаев она сама должна являться составной частью дизайна. В результате применения таких шрифтов трудно добиться хорошей сочетаемости всех элементов, формирующих внешний вид сайта, так как гарнитура буквально лезет на передний план. Пожалуй, единственная возможность избежать негативных последствий выбора декоративной гарнитуры - это использовать ее при оформлении небольших по размеру и второстепенных по значению элементов. Как, например, сделано в дизайне проекта "Logotype Free": Кроме того, шрифты, как и многие другие вещи, подвержены влиянию моды, и декоративные шрифты - особенно. Большинство из них уже устарели и выглядят точно так же, как одежда, которая пользовалась сумасшедшим успехом 10 лет назад - банально и нелепо. Многие же классические шрифты популярны уже десятки лет - например, Futura был создан в 1928 году, а Garamond ведет свою историю вообще с XV века. Тем не менее, даже если вы решите для разработки дизайна воспользоваться парой каких-нибудь классических шрифтов, это еще не гарантирует того, что их сочетание будет смотреться органично. Например, однотипные, но немного разные шрифты (скажем, рубленые Arial и Futura) в паре выглядят плохо. Полагайтесь на свой художественный вкус и интуицию.
|
