<< Пред. стр.

стр. 4
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

лучше подходит для среды операционной системы.
В Интернете лучше использовать кнопки, чем значки
ГЛАВА4.
ДостиЖение сбалансированности
Сбалансированность - это путь дзэна. Сбалансированность также является важной ди-
зайнерской характеристикой в Интернете. Если макет не сбалансирован, кажется,
что с ним что-то не в порядке. Он визуально отталкивает, что продемонстрировано на
рисунке 4.1. Однако если добиться сбалансированности, как показано на рисунке 4.2,
все элементы макета будут выглядеть гармонично. Они кажутся подходящими друг
другу. Web-страница обретает внутреннее спокойствие и гармонию, и это успокаивает
посетителей.




2
rtranscendental procrastination»
Our promise: Action through inaction.
Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here
Text goes here Text goes here Text goes here Text goes here
Text goes here Text goes here. Text goes here Text goes here Text goes here Text goes here Text goes here Text
goes here. Text goes heie Textgoesnere Texlgoesnere Texlgoesnere Textgoeshere
Text goes here Text goes here Text goes here. Text goes here Text goes here Text goes here Text goes here




,




Рис. 4.1. Этот макет не кажется слишком хорошо сбалансированным

Сбалансированность дизайна предназначена не только для того, чтобы посетители
чувствовали себя комфортно. Сбалансированный макет более удобен в использова-
нии, чем несбалансированный макет. Он кажется более организованным, что помога-
ет посетителям находить желаемую информацию. Взгляните на несбалансированные
столбцы, показанные на рисунке 4.3. Поскольку столбец слева гораздо короче, чем
столбец справа, посетители могут не подумать пролистать страницу, чтобы увидеть
кнопки, расположенные внизу страницы, как показано на рисунке 4.4. Использование
Web-страницы не должно напоминать игру в прятки. Если столбцы сбалансированы,
как показано на рисунке 4.5, сам макет подсказывает, что продолжение содержимого
страницы находится вне экрана.
37
ГЛАВА 4. Достижение сбалансированности




transcendental procrastination
Our promise: Action through inaction




Text goes here, Text goes here Tex! goes here Text
goes here Texi goes nere Text goes nere. Text goes
here. Text goes here Text goes here. Text goes here
Text goes nere. Texi goes here Text goes here




Рис. 4.2. Ощущения от сбалансированного дизайна приятнее




rtranscendentaiprocrastination«cai«)i«rED

How it works: Nothing is everything.

Texi goes here. Text goes here. Text goes here. Text
Text goes here. Text goes here. Text goes here. Texi
goes here. Texi goes nere. Text goes here
goes nere. Text goes nere Text goes here.
Text goes here Text goes here Text goes here Texi
Text goes here Text goes here Text goes here. Text
goesnere.
goes here.

Text goes here Text goes here. Text goes here. Text
Text goes here. Text goes here. Text goes here. Texi
goes here. Text goes nere. Text goes nere Text goes
goes here. Text goes nere Text goes nere. Text goes
here Text goes nere. Text goes here Text goes nere.
Лвге Text goes here.
here Text goes nere Text goes
Text goes here. Text goes here. Text goes here
Text goes here Text goes here. Text goes here.

Text goes here Text goes here. Text goes here. Text
goes here. Texi goes here Text goesnere Text goes
here.

Text goes here Text goes here Text goes here.

Text goes here. Text goes here. Text goes here. Text
goes пеге. Text goes here Text goes nere.

i Text goes here Text goes here Text


Text goes here Text goes here Text goes here Text
goes here. Text
«l˜s goes here. Text goes nere. Text goes
nere. Text goes nere. Text goes here Text goes nere.
Tex; goes nere.
Text goes here Text goes here

Text goes here. Text goes here Text goes here. Text
goes nere. Tex', goes here Text goes here. Text goes


j 100% •
• I S00 x TOO »



Рис. 4.3. Этот несбалансированный макет не способствует тому,
чтобы посетители пролистали страницу
Строим Web-сайты
38




Tent goes nefe Text goes here Text goes here Texl
Text goes here. Text goes here Text ooes here Tex'
ooes nete Text goes here Text goes nere.
g o e s l w e . Text goes nere Text goes

Text goes nere Text goes here Text goes hare. Text
here. Text goes here Text goes here. Texi
goesh

Text goes nore. Text goes here Text goes here Text
Text goes here. Text goes here Text goes here. Tex<
Texl Text g goes
nere T
goes nere. Text goes here Text goes here. Text goes goes t w e Text goes here Text
here. Text goe* here. Text goes here. Text goes here goes here. Text goes here. Text goes
Text
Text goes nere Texl goes here Text goes hem.
Texl goes here Text goes here Text goes

Text goes nere Text goes here Text goes here Text
here Texl goes nere Text goes nere Text goes


Text goes here Text goes i w e

here Text
Texl goes here Text
aoes nere. Te*t goes

Text goes here Text goes here, rexl


Text goes here Text goes here Text goes here. Texi
goes nere Тем goes here Text goes nere. Text goes
here Text goes rtere Text goes here Text goes nere
Text ooes Texi goes here Text goes here.

Text g o e * here. Text goes here. Text
g o e s t a e . Text goeshere. Text goes


Text goes here Text goes here Text goes here




Puc. 4.4. Если они не пролистают страницу, то не увидят «примочки»,
расположенные внизу страницы




transcendental procrastination


How it works: Nothing is everything.
Tex- goes here. Text goes here. Text goes
Text goes here Text goes here Texl goes
hem. Text goes here. Text goes here. Text
here Text goes here. Texl goes here T e x l
goes here.
goeshere.

Text goes here Text goes
Text go«« h e m Text goes here. Text goes
here. Text goes here. here.

Text goes here Text goes here Text goes Text goes here Text goes
here. Text goes here. Text goes here Text hem Text ape* e. Text
goes here/Text goes here Text дом goes here.Text goes nere. text goes
Fere Texl goes here Text goes here Text Tex- goes here. Text aoes here. Text aoes
goe* here Text goes here Text goes hero Text goes
here

Text goes here Text goes here Texi goes тега Texl goes here Text
here. Твой goes here. Text goes here Text goes here
goeshere.



Tex- goes here
her*! Text goes
Text goes here
goe;here.
Text goes
goes here Tex!
Text goes here Texl goes
Text goes extgoes here
here.
here Text goes here Texl goes




Puc. 4.5. Сбалансированные столбцы помогают укрепить мысль,
что страница не заканчивается внизу окна браузера
ГЛАВА 4. Достижение сбалансированности 39




Определение
Содержимое, находящееся вне экрана, - это информация, которую
посетители могут увидеть, только пролистав страницу.


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




«» т*ч •'«* -




Рис. 4.6. Работа с макетом в абстрактной форме помогает сконцентрироваться
на сбалансированности, а не на содержимом

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




Определение
Визуальный вес определяет, насколько тяжелым кажется элемент
дизайна.



Классический подход не подойдет, если вы желаете, чтобы дизайн был захватываю-
щим. В таком случае необходим более динамичный макет, который делает балансиро-
вание более сложным и субъективным процессом. Вам окажет содействие принятие
во внимание визуального веса элементов дизайна.
Визуальный вес тяжело измерить, однако он включает в себя размер и форму рассмат-
риваемого элемента. Визуальный вес имеет весьма отдаленное отношение к действи-
тельному весу объектов, если они существуют в реальном мире. Как показано на ри-
сунке 4.7, большие элементы дизайна обычно бывают тяжелее, чем меньшие элемен-
ты, даже если последние представляют собой что-то, что весит больше в реальном ми-
ре. Квадрат кажется более тяжелым, чем прямоугольник, даже когда они имеют оди-
наковую площадь, как показано на рисунке 4.8. И даже вымывание или уменьшение на-
сыщенности большего элемента дизайна не повлияет на его визуальный вес (Рис.4.9).




Рис. 4.7. Больший рисунок визуально кажется более тяжелым,
чем меньший рисунок, хотя на меньшем рисунке изображено нечто,
что является гораздо более тяжелым в реальном мире




Рис. 4.8. Квадрат и прямоугольник могут иметь одинаковую площадь,
но выглядящий массивно квадрат кажется тяжелее
ГЛАВА 4. Достижение сбалансированности 41




Рис. 4.9. Можно уменьшить насыщенность большего элемента дизайна,
но он не потеряет от этого свой визуальный вес

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




transcendental procrastination




Рис. 4.10. Кажется, что эти элементы расположены в беспорядке
Строим Web-сайты
42




[•transcendental procrastination «о»»»»»




X60O i 100% *



Рис. 4.11. FlepepacnpedejieHue их весов создает большее ощущение равновесия,
не жертвуя при этом ощущением динамики
ГЛАВА 5.
Выбор цветов
Выбор эффективной цветовой схемы для Web-сайта является одним из самых боль-
ших фокусов в арсенале дизайнера. Каждый элемент дизайна на странице - включая
пустое пространство - имеет цвет, и мы хотим убедиться, что все цвета работают со-
обща для укрепления настроения и назначения сайта.


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

Работу по выбору цвета можно разбить на три общие области: цвета текста и фона,
цвета ссылок и цвета интерфейса.



Выбор цветоВ текста и фона
ЛЮДИ не читают текст на Web-странице. У них нет на это времени. Чтение чрезвычай-
но затягивает процесс. Вместо этого они любят просматривать страницу и выбирать
частицы и кусочки информации, которая им интересна. Если хотите, можете винить
в этом закат западной цивилизации или слишком большое количество телевизионных
программ и видеоигр, но вредные привычки просматривать все бегло остаются фак-
том. Лучшее, что вы, как дизайнер, можете сделать с текстом на вашем сайте, - выпол-
нить его простым для просмотра.
В этом отношении контраст является наиважнейшим инструментом. Нам требуется
мягкое выделение текста на фоне, чтобы блуждающие взгляды могли просматривать,
не щурясь и не замедляя скорость, и читать текст слово за словом. Если контраст не-
достаточен, как показано на рисунке 5.1, вашим посетителям будет тяжелее просмат-
ривать текст, что в свою очередь приведет к тому, что им будет тяжелее найти необхо-
димую информацию.
В то же время, не менее важен и тип контраста. Разительный или яркий контраст, по-
хожий на рисунке 5.2, исполняет две роли. Во-первых, он привлекает слишком боль-
шое внимание к тексту, который должен отходить на задний план, когда посетители
не нуждаются в нем. А во-вторых, заставляет глаза посетителей работать усерднее,
чем обычно, что приводит к головным болям и зрительному напряжению. Идеальный
контраст между текстом и фоном понятен с точки зрения выделения текста, и споко-
ен в том смысле, что он не подавляет дизайн.
Строим Web-сайты
44




• ARCHIVE | • ACCOUNT
The truth you шнч! at the price yoinan afford | # NEWS




Рис. 5.7. Ваши посетители просматривают текст бегло,
а текст с низким контрастом тяжело просматривать бегло




Рис. 5.2. Разительный контраст может быть легким для чтения,
но заметьте, как он привлекает к себе слишком много внимания
ГЛАВА 5. Выбор цветов 45


Совет
Для повышения контраста на странице вы можете подвергнуться
соблазну использования жирного шрифта для всего текста. Не стоит

<< Пред. стр.

стр. 4
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>