Принципы оформления текста

Знаешь, как ты выглядишь со своей дорогой сумкой и дешевыми ботинками? Ты выглядишь, как деревенщина. Отмытая наглая деревенщина, у которой нет ни капли вкуса.

Ганнибал Лектор Клариссе Старлинг в фильме «Молчание ягнят» (1991)

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

Секрет успешных покупок в магазинах по сниженным ценам состоит из трех частей:

  • Определите свой стиль и следуйте ему.
  • Цветовая палитра должна быть простой.
  • Линии должны быть четкими.

На таких же принципах основывается хорошо выглядящий Web-сайт. Эти принципы гарантируют, что даже при небольшом бюджете вы сможете сделать блестящий, профессиональный Web-сайт, который будет выглядеть на милли­он долларов.

Можно с легкостью заглянуть в какой-нибудь магазин одежды по сниженным ценам, например в «Сток», и выйти оттуда с одеждой, которая вроде бы вам подходит, но не подчеркивает вашей индивидуальности. Прогуливаясь по ря­дам распродажи, легко сбиться с толку из-за обилия всевозможных предложе­ний и купить что-то, что плохо на вас сидит, либо совсем не вашего цвета. Ни­чего страшного, если вы просто купили летние шорты. Кого волнует, что вы выглядите немного смешно, если вы будете носить их, только прогуливаясь по лужайке? Однако Web-сайт — это прежде всего выход на публику, причем на очень большую аудиторию, поэтому вы должны быть уверены, что не вышли в одежде, в которой гуляете на лужайке.

В случае с Web-дизайном извинения относительно того, что вы выглядите плохо, не принимаются, даже если у вас маленький бюджет. Начиная работать над малобюджетным сайтом, поступайте так же, как поступают отоваривающи­еся в магазине по сниженным ценам модники: определите свой стиль, придер­живайтесь простой цветовой палитры и четких линий. Давайте посмотрим на то, как даже с небольшим бюджетом определенный стиль, простые цвета и четкие линии могут дать хорошие результаты в трех основных областях дизай­на: в оформлении текста, цвета и графики.

Представьте следующую ситуацию: вы только что начали работать в качестве Web-дизайнера на дому, и первое, что просит ваша начальница, — привести в порядок Web-сайт. На это она выделила вам одну неделю (и ноль рублей). Это не должна быть полная переделка дизайна — ею вы займетесь, когда появятся деньги. На данный момент сайт надо лишь немного привести в порядок.

— Кок получить золото из песка    

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

Предположим, что сайт, который вам нужно привести в порядок, был со­здан три года назад. Выглядит он так, будто его сделал племянник начальника, в результате чего ваша компания производит непрофессиональное впечат­ление.

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

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

  1. Частота использования шрифтов. После того как шрифты будут выбраны, составьте небольшое резюме по визуальному стилю, в котором будет оп­ределено, как должен использоваться каждый из шрифтов. Это резюме должно содержать набор правил, затрагивающих такие элементы, как за­головки, навигация сайта, основной текст, ссылки и подписи. Совершен­но очевидно, что вам придется изменять эти правила по ходу работы над сайтом. Ничего страшного, просто не забывайте обновлять каждый раз руководство по стилю.
  2. Создание четких линий с помощью правильного размещения и выравни­вания текста. Размещая текст на экране, уверенно создавайте четкие линии. Что это значит? Это значит, что элементы на вашей странице помо­гают посетителям сайта зрительно перемещаться с одного места на другое благодаря правильному размещению текста. Выравнивание каждо­го фрагмента текста должно быть четким и визуально соответствовать другим фрагментам текста на странице. Четкое размещение стоит не до­роже, чем неряшливое, однако оно сильно улучшает дизайн.

Представим, что ваш краткосрочный проект — это сайт, подобный тому, что представлен на рис. 5.1. Вспомните три пункта — умеренное разнообразие шрифтов, последовательное их использование и четкие линии посредством размещения — и начните исправления.

Рис. 5.1. На сайте оптовой торговли свадебными товарами (www.WholesaleWeddingBands.com) слишком много шрифтов

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

-Примечание    

Если вам любопытно увидеть, какой у этого сайта на самом деле потенциал, посмот­рите на рис. 5.2, на котором показан сайт после нашей трехшаговой корректировки.

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

Владелец сайта является также его дизайнером. В случае с сайтом на рис. 5.1 его владелица купила книгу по HTML и применила на сайте все, о чем она про­читала. Мой первый сайт был не лучше этого. Сайт оптовой торговли свадеб­ными товарами я использую в качества примера сайтов первого и второго по­коления, обреченных на переделку.

Posted in Экономичный Web-дизайн.