|
При оформлении веб-страницы необходимо решить две основные задачи: определиться с цветовым оформлением и добиться «удобочитаемости» текста.
1. Выбирая цвет при создании контента в Открытом классе (впрочем, как и создавая веб-страницу на любом другом ресурсе) помните, что цвет в данном случае также является средством передачи информации. От того, какую цветовую гамму Вы выберите, зависит, какие будут вызваны эмоции у посетителей, какое у них будет настроение при просмотре.
В какой-то степени цвета веб-страницы можно сравнить с голосом человека. Блеклые цвета на веб-странице с низким контрастом похожи на тихий голос, когда слова произносятся застенчиво и нерешительно. Спокойные цвета при сильном контрасте похожи на сильный голос спокойного человека. Насыщенные яркие цвета и резкий контраст создают ощущение, что кто-то громко кричит. Понятно, что громкий голос всегда привлечет наше внимание, но согласитесь, мы так не любим, когда с нами разговаривают, повышая тон.
Ясные цвета улучшают читаемость Ваших страниц, которая зависит в первую очередь от того, насколько легко воспринимается используемый шрифт на цветном заднем фоне. При этом необходимо отметить, что очень сильные, очень яркие или же очень теплые цвета нежелательны, так как при чтении они вызывают напряжение и утомление.
Кому-то умение правильно подобрать цветовую гамму для веб-контента дается от природы, кто-то учится этому опытным путем, а можно использовать и научные знания, ведь есть целая наука – цветоведение, или наука о цвете.
Помните детскую присказку: «Каждый охотник желает знать, где сидит фазан?». Многие из нас запоминали последовательность цветов в спектре по первым буквам данной присказки. Именно основные цвета (красный, оранжевый, желтый, зеленый, голубой, синий, фиолетовый), да еще желто-зеленый, зелено-голубой и оттенки пурпурного составляют цветную шкалу цветов, ее еще называют хроматической, она представлена на рисунке.
Цвета делятся на «теплые» и «холодные». Желто-красная часть спектра относится к «теплым», а сине-голубая – к «холодным».
Причем не надо забывать о том, что существует еще одна шкала цветов – так называемая ахроматическая, или бесцветная. Она состоит из двух основных цветов – белого и черного и из цветов, полученных от их смешения в разных пропорциях. Таким образом получаем достаточно большой ряд серых цветов разной интенсивности – от чистейшего белого до иссиня-черного.
Хроматические и ахроматические цвета сочетаются между собой следующим образом, что тоже может пригодится Вам при создании веб-страниц: «теплые» цвета соответствуют темно-серым, а «холодные» - светло-серым.
Т.е. если мы на странице на светло-сером фоне пишем оранжевыми буквами, то нарушаем дизайнерские традиции  |
Интересно, что цвета соседствуя друг с другом, иногда оптически кажутся выступающими вперед или же напротив, отступающими назад. Выступают «теплые», светлые и насыщенные цвета, а отступают «холодные», темные и ненасыщенные.
| Знание об этом эффекте может помочь Вам |
| вывести на первый план какие-нибудь элементы оформления Вашей страницы |
Как Вы уже поняли, мы пытаемся вместе с Вами найти гармоничные цветовые сочетания для страниц ОК, и не только ОК, а для любых ресурсов, создаваемых Вами в Интернете.
Иногда смотришь на страницу – вот вроде бы и ничего особенного в цветовой гамме нет, а глаз радуется.
А иногда… Да Вы и сами знаете – откроешь некоторые странички, а там такая «красота», что глаз совсем не радуется, а наоборот, неуютно ему на этой странице…
Так как же нам выяснить, какие цвета гармонируют друг с другом, а какие ни в коем случае нельзя сочетать? Какие цвета будет выигрышными на том или ином фоне, а какие – нет? Для того, чтобы ответить на эти вопросы, давайте поговорим о цветовых гармониях (или другими словами, о комбинациях небольшого количества цветов, расположенных в строго определенном порядке).
В основном используются три основные схемы гармонических сочетаний цветов: двухцветная гармония, трехцветная гармония и четырехцветная гармония, причем из двух последних лучше использовать не все цвета, а только два из трех и три из четырех соответственно.
1. Двухцветная гармония - сочетания противоположных в цветовом круге цветов (например, оранжевый и темно-синий). Получается контрастное сочетание, несколько грубоватое, хотя именно эта нарочитая контрастность могут придать Вашему дизайну определенную неповторимость.
2. Трехцветная гармония - цветовой круг делится точно на три части. Выбрав один цвет, в двух других третях круга подбирают соответствующие цвета (получается, что гармонируют друг с другом каждый четвертый цвет, например, желтый, голубой и фиолетовый).
3. Четырехцветная гармония – цветовой круг делится на четыре части, соответственно, гармонирую друг с другом каждый третий цвет, например, красный, салатовый, , ярко-синий и лиловый.
Понятно, что приведенные рекомендации по работе с цветовым оформлением Вашего веб-контента не являются догмой, а лишь – руководством к действию. При выборе того или иного цвета важны многие факторы: тематика веб-ресурса, способ подачи информации, личные вкусы и так далее. Иногда приходится весьма немало времени потратить на эксперименты, пока получится требуемый результат. Профессиональные дизайнеры разработали ряд оптимальных цветовых сочетаний в зависимости от тематики веб-ресурс.
Можно использовать их рекомендации как основу для творчества.
2. Встречают по одежке, а провожают по уму. Эту житейскую мудрость еще никто не отменял. Понятно, что любого из нас в первую очередь привлечет красивая оболочка, а уже потом мы будем разбираться с начинкой (и как же бывает обидно, когда в красивой большой коробке обнаруживаешь несколько штук безвкусных конфет..). Если провести аналогию между конфетами и веб-страницами, то обертка – это цветовое оформление, о котором мы говорили выше, а начинка – это текст. И как же хочется, чтобы начинка была «вкусной» пищей для ума!
Для удобства чтения текста на веб-странице его лучше разбивать на абзацы, при этом страница оформляется в едином стиле. Что в данном случае мы подразумеваем под понятием «стиль»? Это набор элементов, применяемых для форматирования:
- гарнитура шрифта;
- размер шрифта;
- начертание шрифта;
- метод выравнивания.
Шрифт, как правило, выбирается исходя из соображений комфортного чтения. Так как заголовки нужно выделить, то можно применять шрифта большего размера, чем в основном тексте.
Размер шрифта согласуется с общим видом веб-страницы. Не следует выбирать, как слишком мелкий, так и слишком крупный размеры шрифта. При оформлении не стоит использовать большое количество шрифтов, оптимальным считается использование не более двух видов шрифтов.
Полужирное начертание чаще применяется в заголовках и редко используется в основном тексте. Курсивом можно выделять и заголовки, и часть текста с целью привлечения внимания к отдельному слову и фразе.
 Внимание! Подчеркивание при оформлении текста на веб-страницах не рекомендуется использовать, т.к. пользователь привык считать любой подчеркнутый текст ссылкой.
В принципе, как Вы помните, существует четыре способа выравнивания текста:
- по левому краю;
- по правому краю,
- по центру;
- по ширине.
Выравнивание по центру используется для заголовков,
по правому краю – для примечаний и дополнений, а также для эпиграфов,
по ширине и по левому краю выравнивается основной текст.
Интересно, что выравнивание по левому краю увеличивает скорость чтения веб-страницы, глаз человека легче находит начало новой строки.
Для структурирования текста можно использовать таблицы (например, как на странице Небольшие советы по работе в Открытом классе ).
Часто оказывается достаточно для получения приятной для восприятия веб-страницы таблицу в основу положить, перераспределить текст, единообразно отформатировать заголовки.
Что касается заголовков.
ЗАГОЛОВКИ НЕ СЛЕДУЕТ ПИСАТЬ ЗАГЛАВНЫМИ БУКВАМИ, т.к. это затрудняет чтение текста, они должны начинаться с заглавной буквы и присутствовать в начале каждой Вашей веб-страницы.
Подзаголовки привлекают внимание, помогают разделить информацию на части.
Заголовок (подзаголовок) может быть задан стандартным форматированием, а можно в него внести следующие изменения - изменить размер, цвет, гарнитуру и т.д. (помним про цветовые гармонии!).
И напоследок несколько примеров уже реализованных дизайнерских находок, созданных жителями ОК. Возможности ОК позволяют создавать стильные заголовки (подзаголовки). Можно использовать следующие варианты:
- работа со шрифтом и цветом;
- использование таблиц;
- графические заголовки.
Что касается оформления заголовков с помощью цветов и шрифтов, то с одной стороны – это самый очевидный вариант, доступный даже начинающему, а с другой стороны – наибольшее количество излишне украшенных страниц в ОК сделаны именно таким способом.
Напоминаем: два, максимум – три цвета и не более двух шрифтов. Что самое интересное, оказалось так трудно найти примеры, соответствующие дизайнерским канонам… Оказалось, что у нас либо все в черном цвете и одним шрифтом, либо…. Ну что ж, значит, нам всем есть чем заняться.
1. Новые формы образовательной деятельности с использованием современных социальных сервисов и средств сети Интернет
2. Конкурс "Веб-лидер образования"
Причем сделать такие заголовки совсем несложно – вставляете таблицу в одну строку и один столбец, заливаете ее, помня о цветовых сочетаниях – и все! Красота наведена! Нужен подзаголовок – пожалуйста, ниже вставляйте еще одну таблицу в один столбец и одну строку, заливайте – и т.д. Как вставлять и редактировать таблицу, Вам напомнит инструкция Как можно оформить контент в Открытом классе?
1. Спортивный марафон «Папа, мама, Я — здоровая семья»
2. Всероссийская интернет-конференция «Современный учитель и Новая школа»
Обратите внимание, с каким вкусом подобраны цвета на этих страницах.
При создании заголовков можно использовать и графику:
1. Последняя неделя каникул
2. В Роботландском государстве
3. Азы информатики
При создании заголовков на этих страницах используются именно графические заголовки, причем создавать их можно даже в самых простых графических редакторах, например, в Paint. Только необходимо помнить об оптимизации изображений и правильном выборе формата графического файла (напомним, что в данном случае подходит формат png.
Сочетание правильно оформленного текста и красоты дизайна обеспечивают целостность восприятия веб-контента – сделаем грамотно оформленным, стильным и целостным!
|
