Разделы  

  Исследования
Персоны
Пресс-релизы
Разное
Словарь
Ссылки
Статьи
Файлы
Форумы
Фоторепортажи

3D Графика
Adobe Photoshop
Brand marketing в интернете
CSS
Customers Relations Management
DHTML
Direct Marketing
E-commerce
Email-маркетинг
Flash
HTML
IT и авторское право
JavaScript
PHP
PR в интернете
Rapid development tools
Usability в интернет
XML
Агентирование продаж
Администрирование
Баннерные сети
Баннеры
Безопасность
Безопасность PHP
Брендинг
Верстка
Выбираем исполнителя
Графические пакеты
Графические форматы
Дизайн
Документооборот
Должностные инструкции
Заметки маркетолога
Звук в интернете
Интернет и классические медиа
Интернет как инструмент маркетинга
Интранет
Исследования
Исследования и интернет
Исследования регионального интернета
Компьютерные игры
Креатив
Листы рассылки
Маркетологу
Медиабайнг в интернете
Медиапланирование
Менеджеру
Менеджмент студии
Мультимедия технологии
Наружная реклама
Обзоры IT рынка
Оборудуем рабочее место
Оптимизация программирования для web
Основы интернета
Персонал
Платежные системы
Поисковые машины и каталоги
Правила русского языка
Прикладное ПО
Программирование
Программирование, основы
Проектирование сервера
Психология в маркетинге
Работаем над текстом на сервере
Разное
Разработчику
Региональный интернет
Реклама
Реклама в интернете
Сетевые протоколы
Создаем контент-проект
Сопровождение и поддержка
Статистика
Структурное программирование на PHP
Технические вопросы
Управление проектами
Участие в организациях
Хостинг
Шрифты

Все авторы


Наиболее подробные разделы
1Adobe Photoshop76
2Direct Marketing68
3Управление проектами33
4Исследования и интернет32
5Проектирование сервера31
6HTML27
7Графические пакеты25
8Заметки маркетолога23
9Дизайн23
10JavaScript23
Наиболее подробные разделы
1Adobe Photoshop76
2Direct Marketing68
3Управление проектами33
4Исследования и интернет32
5Проектирование сервера31
6HTML27
7Графические пакеты25
8Заметки маркетолога23
9Дизайн23
10JavaScript23
Наиболее обсуждаемые статьи
1Концепция создания контент-проекта.17
2Тонкая голубая линия10
3Предложения10
4Как разрабатывался слоган8
5Заголовок страницы7
6Animatek World Builder 2.0 (или AWB 2.0)6
7Немного о хостах6
8Зачем необходим сайт?6
9Правильные таблицы стилей5
10Снежинки на вашей странице4

 
 
Поиск по сайту:

Подписка на анонсы
Новости выходят раз в неделю по понедельникам.
Введите Ваш email

Режим



А в это время в других разделах: Last 10 person
Ящук Вера
Шанаев Григорий
Шуленин Михаил
Шиденко Кирилл
Шабшин Илья
Сорокина Елена
Семеновская Светлана
Сидорова Ирина
Серов Владимир
Слепнев Сергей

Last 10 topic
Явный отказ
Эффективность услуги
Эксперт по аттестации лаборатории
Цепочка поставки
Устранение несоответствия
Услуга
Усиленный контроль
Усеченный контроль
Уровень качества
Управление качеством

Полезная мудрость:










Создание сервера:



 

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

 
Жарков Станислав

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

Замалчивание темы дизайна было вовсе не от того, что мне нечего сказать по этому вопросу, как многие могли подумать. Причина в том, что научить дизайну, вот так, путем написания нескольких заметок, нельзя. Если по 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-проигрывателей:





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

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

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

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




Жарков Станислав
stas@pro.net.ru
2001-07-23 20:30:29


А может обсудим статью в форуме? Там собралась отличная компания
 




© 2001 авторский проект Алексея Волкова :: О проекте :: Перепечатка материалов приветствуется при ссылке на www.marketer.ru