MZero #7 [сентябрь 2004]
Меню
  Главная
  Авторам
  Разделы
  Команда MZero
  Клуб ICQ
HiTech
  В Канаде хотят запретить дышать алкоголем .
  Пять машин и технологий готовы изменить наш мир.
  Плавающие ботинки превращают людей в водомерок.
Моддинг
  СветоНожки для компа своими руками.
  Светильник из шариковой ручки.
  Светильник из шариковой ручки 2.
Mobile
  Проба КПК Fujitsu-Siemens Pocket-LOOX 420.
  "Мобильное телевидение" .
  Электробабло-2. Теперь в телефонной трубке.
Windows
  Как создать загрузочную дискету в Windows NT/2000?
  Microsoft разработала защищенную Windows XP .
Пингвин'zzz
  Пингвинодизайн: Стань крутым *nix-дизайнером!
  Bluetooth и Linux на примере Nokia 7650.
  Проблемы русификации в Linux.
Delphi
  Создание графического интерфейса пользователя средствами Win32 API .
  Создание плагинов к Winamp.
Интернет - программинг
  Анатомия межсайтового скриптинга.
  Flash-навигатор.
  PHP Inside #0 [Журнал для начинающи и проффесионалов].
Web - desigN
  Книги по web-дизайну.
  Четыре правила профессионального дизайна. Часть I .
  Четыре правила профессионального дизайна. Часть II .
  Четыре правила профессионального дизайна. Часть III .
  Четыре правила профессионального дизайна. Часть IV .
Жизнь в сети
  И на Google есть пятна.
  МАСЯНЯ IS BACK!!!
Софт
  WebSubmitter— на пути к известности.
  Управляем цифровой фотографией.
  Оживление цвета.
Чтиво
  Пауло Коэльо - Алхимик.
  С любовью Алиса.
Games
  Sacred (Князь тьмы).
  The Matrix Online.
  Far Cry.
  Cheats.
Интервью
  Что нового у ReGet?
  С разработчиками файлового менеджера Фрегат.
  С хакером, взломавшим Lenta.ru
Музыка
  Моя музыка существует отдельно от меня.
  Осёл-меломан.
  Outkast.
Стиль
  Гламурная девушка.
  Женская мода. Осень: твид, плащи, метал и космический шик.
  Стильная одежда для маленьких модников.
Здоровье
  Как правильно загорать.
Это мы смотрим...
  Тупичок Гоблина - Ночной дозор.
  Россия наносит ответный удар, сняв свой первый блокбастер.
Наука
  Спутник сфотографировал эльфов и фей.
  Переведи меня!
Pick up
  Как познакомиться с девушкой.
  "15 никогда" для использования в общении со слабым полом. (смешно)
www.mzero.by.ru
Web - desigN

Четыре правила профессионального дизайна. Часть I .

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

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

Тем не менее, если поставить вопрос несколько по-иному, то кое о чем поговорить все-таки можно. Я не буду рассказывать вам, как создать — супер-пупер — дизайн — чтобы — все — дизайнеры — позеленели — от зависти. Такой рассказ, как я уже говорил ранее, невозможен. Я расскажу вам о том, как сделать профессиональный дизайн.

Почему я стал говорить о профессиональном дизайне? По моему мнению, «профессионализм» — это единственное качество, которым должен обладать дизайн любого веб-сайта. Дизайн может быть простым и сложным, текстовым и графическим, цветным и черно-белым — но при первом же взгляде на него посетителю должно становиться понятно, что этот сайт делал мастер своего дела, а не человек, который Интернет увидел только вчера.

Конечно, то, что я рассказываю вам о том, как делать профессиональный дизайн, вовсе не означает то, что при этом вам уже не нужны способности и вкус. Если вам нравятся поголовно все странички с narod.ru, то прочитайте вы хоть 20 томов о профессиональном дизайне — все равно не поможет.

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

Первое правило таково: «Побольше мелких деталей».

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

Если же добавить в элементы дизайна мелкие детали, а крупные объекты визуально разбить на более мелкие (например, применив градиентную заливку) — картина значительно улучшится.

Вот что конкретно можно предпринять для «размельчения» дизайна:

1) если позволяет содержание сервера, заголовки, набранные шрифтом большого размера, дополните подзаголовками, выполненные более мелким кеглем;

2) по возможности применяйте верстку в несколько колонок. При этом «разбивайте» колонки и по вертикали, выделяя их части, например, разными цветами (или оттенками одного цвета);

3) не заливайте большие объекты (например, линии-разделители) одним цветом. Выберите градиентную заливку или просто разделите объект на несколько частей с помощью линий и других графических примитивов;

4) не делайте кнопки навигации, заголовки колонок и другие подобные объекты однотонными. Придумайте какую-нибудь интересную рамку, визуально выделите часть объекта (например, угол), добавьте тень;

5) добавьте там, где, на ваш взгляд это требуется, декоративные элементы: пиктограммы, горизонтальные полоски или даже что-нибудь типа орнамента.

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

Примеров работы этого правила — масса. Например, в 1997 году главную страницу rambler.ru «украшал» здоровенный бело-синий логотип, и при этом он занимал около 50% всей главной страницы. Зрелище, надо сказать, было довольно тоскливое (даже директор проекта Д.Крюков в одном из интервью сетовал, что с дизайном у них не очень). Теперь же логотип сильно уменьшился, на главную страницу вынесли ссылки категорий Rambler's Top100 (отличный «размельчитель» дизайна), появились разноцветные колонки с новостями и другой информацией — и, как результат, сервер теперь выглядит гораздо лучше (хотя дизайн, конечно, еще далек от идеала).

А вот еще один пример. Это — два рекламных баннера для проекта job.list.ru (рисовал их автор этих строк):

Баннер
Баннер

Верхний баннер откровенно не удался — выглядит явно не профессионально (виной тому — жесткий цейтнот: баннер делался 15 минут). В итоге буквы высотой почти во весь баннер и отсутствие мелких деталей придают ему любительский вид.

К созданию нижнего баннера я подошел более серьезно (на него ушло, страшно сказать, целых полтора часа). Дизайн здесь, как видите, посложнее. Несколько рамок внутри баннера, фоновая картинка за буквами «Job.List.ru», штрих-код, анимированная пунктирная линия со стрелкой, тени в обоих нижних углах баннера, подзаголовок, набранный мелким шрифтом — все эти элементы добавлены исключительно для «размельчения» дизайна. К упоминавшемуся вопросу о крайностях — обратите внимание, что при большом количестве мелких деталей все слоганы и заголовки читаются хорошо. В результате — готовый баннер мне было не стыдно сдавать заказчику.

Правило «Побольше мелких деталей» работает не только в области интернет-дизайна. Например, посмотрите на эти два образца DVD-проигрывателей:

DVD-плейер DENON
DVD-плейер NAD

Нижний плейер — от компании NAD. Грубые кнопки, лицевая панель проигрывателя, на которой очень много пустого места, а также большой радиус закругления углов дисплея и крышки лотка DVD-диска придают аппарату какой-то кустарный, самодельный вид.

Справедливости ради нужно заметить, что некоторым людям дизайн от NAD нравится. Если вы почитаете журнал Stereophile, то найдете там одни восторги по поводу внешнего вида этой техники. Ее дизайн считается необычным, не похожим на оформление техники других компаний. Но ведь домашние странички на geocities и angelfire тоже не похожи на сайты, сделанные профессиональными студиями, верно? И они тоже вызывают восторг у экспертов в разных областях — но только не в области веб-дизайна.

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

О втором правиле профессионального дизайна — в следующей заметке.




наверх Автор: Пахомов Алексей Источник: http://www.e-notes.ru


Copyright by MZero
Копирование и использование данных материалов разрешается
только в случае указания на журнал "
MZero", как на источник получения информации.
При этом во всех ссылках обязательно явное указание адреса вэб-сайта
www.mzero.by.ru.
Журнал тестировался на IE 5.0/6.0; Opera; Mozilla; MYIE 2.0; Netscape