!О дизайне

С чем его едят

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

Не откажу себе в удовольствии привести пространную цитату из книжки «Недизайнерская книга о дизайне» американки Робин Уильямс (СПб.: ИД «ВЕСЬ», 2004).

Итак, четыре основных правила (в применении к плоскостному дизайну, т.е. дизайну полиграфической — и экранной, добавлю от себя — продукции)

Контраст

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

Повтор

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

Выравнивание

На странице ничего не должно размещаться случайно. Каждый элемент нужно зрительно связывать с другими элементами. Это придаёт странице аккуратный, утончённый и чистый внешний вид.

Приближенность

Элементы, которые относятся друг к другу, должны располагаться рядом. Они являются единым целым, а не несколькими отдельными фрагментами. Это помогает организовать информацию и уменьшает пустоты.

Книжка Робин Уильямс помогла мне систематизировать всё, что я уже знал и умел. Позволю себе ещё одну цитату.

Процесс

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

Группируйте информацию по смыслу; решите, какие конкретно смысловые отношения будут прослеживаться между группами. Сделайте понятным характер этих отношений, используя принцип приближенности или удалённости отрезков текста (по правилу приближенности).

Распределяя на странице текст или рисунки, создавайте и поддерживайте жёсткие выравнивания. Если вы заметили, что в тексте есть жёсткий край, в частности край фотографии или вертикальная линия, выравнивайте основной текст относительно этой линии.

Создавайте повторы или найдите такие элементы текста, которые могут быть связаны определённой повторяющейся связью. Используйте для этого жирный шрифт, или подчёркивание, или специальный символ, или пространственное распределение текста. Обратите особое внимание на естественные повторы в тексте, определите, насколько уместно усилить эффект этого повтора.

Удостоверьтесь, что в вашем оформлении есть сильные контрасты, которые привлекут взгляд читателя. Помните, что контраст — это контраст. Главное, чтобы была разница, и ваш взгляд притягивался к ней.

Чем его едят

Кто чем, а я — Adobe Photoshop и Corel Draw для работы с графикой, Corel Draw и Adobe PageMaker для работы с полиграфическоё продукцией, Macromedia HomeSite и EditPlus для интернет-проектов. Что из этого получается (см. страницу «Дизайн» сайта «Гений чисто красоты»), судить вам.

Баннер

Этот баннер я соорудил без использования флеша и гиф-анимации. В основе — два мизерных гифа (паучок и фоновая надпись), малюсенький java-скриптик и столь же ничтожный css, использующий фильтр Blur. В Нетскейпах этот баннер получается статичным, но вполне виден. В Опере blur не работает, но динамика правильная. Наконец в МСИЕ — всё как положено.

HTML-текст следующий.

<table width=380 cellspacing=0 cellpadding=0 id=banner title="JosWEB: разработка, программирование, дизайн, и сопровождение сайтов">
<tr>
<td id=josweb>
<p id=YammaYamma>
<a id=banner href="mailto:#">РАЗРАБОТКА, ПРОГРАММИРОВАНИЕ, ДИЗАЙН, СОПРОВОЖДЕНИЕ САЙТОВ</a>
</p>
</td>
</tr>
</table>

Пишем небольшой стилевой фрагмент.

.F1 {
filter:blur(Strength=20);
width:300px;
height:70px
}
.F2 {
filter:blur(Strength=20);
width:350px;
height:70px
}
.F3 {
filter:blur(Strength=20);
width:250px;
height:70px
}
a#banner {
color:darkred;
text-decoration:none;
padding:.5em;
display:block
}
table#banner {
cursor:pointer;
background:#fff url(images/ban.gif) no-repeat 3px 3px;
border:2px solid lightpink
}
td#josweb {
background:url(images/josweb.gif) no-repeat 100% 100%
}
p#YammaYamma {
font:bold .9em arial,sans-serif;
color:darkred;
margin:0;
padding:0;
text-align:right
}

Написали. Поместили в часть <HEAD> документа. Пишем функцию на javascript.

var rate = 1000
var i = 0;
var F = 'F1';
function doThing() {
if (document.getElementById&&document.all) {
ok = true;
i++;
if (i==1) F = 'F1';
if (i==2) F = 'F2';
if (i==3) F = 'F3';
YammaYamma.className = F;
if (i > 2) i = 0;
timer = setTimeout('doThing()',rate)
}
}

Написали. Поместили <HEAD> же.
В дескриптор <BODY> добавляем обработчик onload=doThing(). Всё, работа закончена. Можно любоваться результатом.

РАЗРАБОТКА, ПРОГРАММИРОВАНИЕ, ДИЗАЙН, СОПРОВОЖДЕНИЕ САЙТОВ

Наверх

Copyright © 2006 I am the Welder

All rights reserved