Зареалье: феномены Сети и технологии
работы с ними
Цикл # Гипермедиа Опыт 21-3
О стилях оформления сайта
Аннотация. Предпочтения цветов у каждого посетителя сайта индивидуальны, и, как доказал замечательный психолог Макс Люшер, выражают глубинные особенности личности. В то же время существуют общие законы влияния различных цветовых оттенков на эмоции человека и общепризнанные принципы их гармонического сочетания. То же самое касается и других особенностей оформления. Любопытно послушать различных дизайнеров о том, что же такое пресловутый "фирменный стиль" и каково его место в создании сайтов.
Стиль - физиономия ума, менее обманчивая, чем настоящая физиономия.
Подражать чужому стилю - все равно, что носить маску.
А. Шопенгауэр
Слова Д. Дидро, вынесенные в заголовок, как и слова Шопенгауэра, раскрывают глубинное значение стиля для раскрытия богатства индивидуальности автора. Ж. Бюффон дал еще более краткую формулу: "Стиль - это человек".
Что же думают веб-дизайнеры на эту тему?
Стиль - это функциональность, считает первый эксперт. И он прав - ведь сайты создаются для выполнения определенных функций.
Михаил Мельников. Что такое стильный web-сайт? (оригинал статьи)
Стильный web-сайт -
это когда каждая страничка Вашей публикации имеет ярко выраженную принадлежность
ко всему web-сайту. Когда легко ориентироваться и поиск информации не сопряжен с
опасностью заблудиться и потерять время. Когда странички загружаются менее, чем
за минуту. Когда...
Стильность web-сайта достигается несколькими приемами. Можно выделить следующие
элементы, участвующие в создании стиля:
шрифт - в пределах публикации он должен иметь одинаковые
характеристики - такие, как гарнитура (начертание), кегль (высота), цвет.
абзац - желательно, чтобы преобладал какой-нибудь один из видов
выравнивания на страничке, например, публикация сделана с отступом от левого
края и выравниванием влево.
цветовая схема - она начинается с выбора тех трех цветов страницы,
которые используются для представления обычного текста, ссылок и посещенных
ссылок. Цветовая схема должна повторяться на всех страничках публикации, это
создаст у посетителя ощущение связности сайта.
графическое оформление - во-первых, оно должно укладываться в общую цветовую схему; во-вторых, вы должны продумать общую концепцию графического оформления. Старайтесь не смешивать рисованные и фотореалистические элементы. И всегда пишите пояснения к фотографиям в параметре ALT тэга IMG - это будет восприниматься как подпись к фотографии и, кроме того, избавит пользователя от ожидания в случае, если его не интересует данная страничка.
навигация по сайту - именно она не дает посетителю запутаться в дебрях Вашего сайта. Всегда оставляйте для посетителя возможность перехода на главную страничку публикации. Кроме этого, не забывайте, что очень много людей попадают на Ваши странички через поисковые системы, т.е. не на первую страницу, и хороший сайт должен позволить читателю перейти на первую страничку; попросту говоря, дублируйте навигационную систему на всех страничках или сделайте так, чтобы они, по крайней мере, имели переход на основную страницу. В случае, если Вы выполняете навигационную панель графическими средствами, то обязательно сделайте ее текстовую копию и поместите где-нибудь снизу (текст в любом случае загружается быстрее графики.
Стиль - это фэн-шуй коммуналки, в которой проживают визуалы, аудиалы и кинестетики, утверждает второй эксперт. И он, конечно же, прав.
Грегори Гуд. Секреты веб-дизайна (оригинал)
Существует три типа
людей:
1. Мыслящие преимущественно зрительными образами (визуалы)
2. Мыслящие проговариванием мыслей внутри (аудиалы+дигиталы).
3. Мыслящие преимущественно ощущениями (кинестетики).
Соотношение их примерно такое - 40% визуалов, 5% аудиалов, 55% кинестетиков. В
Интернете доля визуалов больше.
Замечено, что расположенные в разных частях экрана элементы лучше действуют на
определенных людей. Вот идеальное расположение элементов, чтобы включить
внимание всех типов людей.
Если логотип вашего сайта хорошо известен посетителям, то он будет хорошо
работать на вас слева сверху (для примера: Intel Inside). Если же
логотип вашего сайта малоизвестен, то имеет смысл разместить его справа
сверху (это будет способствовать его запоминанию посетителями).
Все верхнее пространство экрана лучше отдать графическим решениям,
фотографиям, и т.д.
Расположение в средней части экрана: слева
известные, справа малоизвестные. Аудиальные компоненты обычно мало
важны, если это не сайт посвященный музыке. Но здесь возможно разместить
соответствующий слоган, например: Имидж ничто, жажда все или Эффективная
коммуникация ключ к успеху.
Внизу экрана желательно выделить две зоны:
Справа внизу - лучше дать числовую, количественную информацию и
т.д. (адрес или цены).
Слева внизу - фразы, которые там написаны, вызывали у посетителя
Вкус, Чувства, Ощущения. Картинки должны быть в том же духе. (Пример: Кружка
пива и надпись "Почувствуй себя настоящим студентом".)
Баннер, расположенный в этом месте с надписью "Нажми меня", будет иметь большой
% нажатий (CTR). Так, нами был разработан для данной зоны такой слоган: "Учишься
в школе - Жми Сюда". Вы можете свободно применять его, слегка изменив для своих
нужд первую часть. При расположении такой кнопки снизу справа она даст
замечательные результаты. У нас получился CTR 7-12%, что очень неплохо.
Стиль - это гармония, радующая глаз, полагает третий эксперт. Ну, разве он не прав?!
Александр Аверин. Немного о теории цвета (оригинал)
Вообще гармонию можно описать как сочетание частей, которое доставляет приятные ощущения (музыка, поэзия и т.д.). В дизайне и графике под гармонией принято понимать нечто услаждающее, радующее глаз. Эта гармония должна вызывать в человеке определенные чувства и ощущения.
Существует огромное количество всевозможных формул и теорий цветовой гармонии. Мы рассмотрим наиболее простые и наглядные .
Цветовая схема на базе близлежащих цветов. Близлежащими цветами принято считать любые три цвета, расположенные один за другим на цветовом круге, например желтый, желто-оранжевый и оранжевый. Подобные сочетания цветов хорошо подходят для основных элементов, четко выделяя их "уровень", кроме того, благодаря их близкому расположению они очень хорошо сочетаются.
Цветовая схема на базе противоположных цветов. Противоположными цветами являются любые два цвета расположенные напротив друг друга на цветовом круге, такие как желтый и фиолетовый. Этот прием обычно используется для создания акцентов, так как противоположные цвета очень контрастны по отношению друг к другу.
Цветовая схема на базе природных сочетаний цветов. Природа зачастую предлагает просто великолепные примеры цветовой гармонии. Так почему бы этим не воспользоваться...
Стиль - это движение и ритм, провозглашает четвертый эксперт, законодатель моды в современном веб-дизайне. Что ж, "жираф большой - ему видней...".
Хиллман Кертис. Flash Web-дизайн.
- М.: ДМК Пресс, 2002. - 256 с.
Движение и ритм - универсальные формы общения. Передача сообщений посредством
движения глубоко внедрена в нашу культуру. Задача дизайнера - хорошо передавать
информацию. Ваша идея и сообщение должны глубоко проникать в душу пользователя,
где бы он ни был.
Если, например, я медленно перемещаю текстовый элемент к центру экрана, увеличивая и постепенно осветляя его, я наполняю ролик ощущением драматизма, сосредоточенности и, возможно, фундаментальности. Если я беру тот же самый текстовый элемент и вращаю его вокруг экрана, то он в большинстве случаев вызывает ощущение игривости... или флирта.
В качестве универсального метода высокого стиля Кертис предлагает программу из 4 пунктов:
Глобальный визуальный язык - использование простых символов, жестов и движений, понятных представителям многих наций. Ведь Сеть охватывает весь мир и проходит сквозь языковые барьеры.
Необходимо считаться с техническими возможностями Сети - использовать их в своих интересах и обходить ограничения. Практически весь мир пока подключен к Сети через 28,8-килобитный модем - и этот факт определяет, что вы можете, а что не можете делать на своем сайте.
Сетевой дизайнер обращается к зрителю, испытывающему многозадачный дефицит внимания (одновременная работа пользователя с двумя и более программами является нормой). Перегруженные деталями и громоздкие клипы, требующие длительной загрузки, будут пропущены аудиторией. Вы должны избегать излишеств и уложить ваше целевое сообщение в 5-10 секунд.
Стильный проект имеет эмоциональное ядро, определяющее все остальное. При работе с заказчиком и определении задания Кертис рисует мишень из 3 кругов. В центр ее он помещает слово, выражающее ощущение, которое должен вынести пользователь после посещения сайта (просмотра клипа). Аналогично на внешних кольцах фиксируются дополнительные обертоны смыслового ядра. Впоследствии этот общий замысел переводится в систему деталей и реализуется. Но проект только тогда оценивается как удачный, если у каждого после знакомства с ним сложится впечатление, соответствующее хотя бы одному из трех ключевых слов.
Обзор мнений о хорошем стиле можно было бы удвоить и утроить, но тем самым мы перекрыли бы себе путь к самостоятельным критическим суждениям...
Если постараться суммировать приведенные точки зрения, то сначала стоит все же определить поточнее, что же такое стиль как общее понятие.
Стиль - это характерные признаки поведения субъекта, различимые в оставленных им следах.
При таком определении мы получаем связь данного понятия и со способностями первобытных следопытов (чувство стиля как необходимое для выживания), и с культурой человеческого общества (стилевое своеобразие культурных эпох и школ), и с индивидуальным творчеством (потребность авторов оставлять след своей индивидуальности в стиле).
Проясняются и границы этого понятия. Так, серийно производимые автомобили несут отпечаток стиля конструкторов и дизайнеров модели, но в них напрочь стерт стиль работы бригад сборщиков на конвейере. Стандартизация убивает индивидуальный стиль.
Если, к примеру, при создании персональной странички вы воспользуетесь шаблоном, взятым с веб-сервиса или из библиотеки FrontPage и хорошо всем известным, то тем самым вы как бы придете на дискотеку в комбинезоне, телогрейке и валенках... ;о)
Становится понятным и происхождение псевдостилей - подражания, стилизации и подделки. В этих случаях автор мимикрирует под иного, популярного творца.
Наконец, существует и не-стиль - эклектическая мешанина фрагментов от разных авторов или даже от одного, но запутавшегося в самом себе (если бы мы в этом выпуске ограничились приведением разных точек зрения на стиль без какого-либо их сопоставления, то тем самым продемонстрировали как раз такой не-стиль).
Стиль является аналогом закономерности, но взятой в сфере действия свободы воли.
В свете сделанных определений мы уже можем оценить представленные выше точки зрения на стиль.
Стильный веб-сайт по Мельникову - это просто культурно сделанный сайт. Индивидуальностью автора здесь и не пахнет.
Стильный сайт по Гуду - то же самое, только акцент сделан на вариацию типов восприятия.
Стильный сайт по Аверину - аналогично, с акцентом на психологию цвета.
И только у Кертиса мы можем различить признаки настоящего стиля - то самое эмоциональное ядро, вокруг которого надстраиваются и визуальный язык, и технические особенности, и борьба с дефицитом внимания.
Вот и всё пока... Вопросы и замечания mailto: feod@narod.ru
До новых встреч!
Юлий Феодоритов,