Работа с изображениями

План

Тема: Правила web-дизайна

План

1. Правила регистрации

2. Создание набора ключевых слов и описания сайта

3. Подготовка к регистрации

Основная литература: [1, 5, 6, 13, 14, 16, 23, 32, 33]

Дополнительная литература: [2, 17, 19, 50, 54, 62]

Лекция №4 (2 часа)

1. Основные элементы web-страницы

2. Правила подготовки текстовой информации

3. Выбор цвета и оптимизация графики

4. Определение навигационной структуры

Основная литература: [3, 4, 7, 18, 21, 29, 34, 41]

Дополнительная литература: [9, 10, 14, 15, 20, 27, 28, 31, 33, 37, 38, 40, 42]

В строгом смысле слова дизайн (design) - это разработка, конструирование. Web-дизайн включает в себя - визуальный дизайн (вообще), дизайн представления информации на экране (специфика web-дизайна).

Web-дизайнер в зарубежном понимании - это не кто иной как web-разработчик - верстальщик (web-master/web-coder), специалист по информационной архитектуре (web-developer), программист (web-programmer), администратор (system administrator) в одном лице.

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

Дизайн играет важную роль в привлечении внимания пользователей сети Internet к определенной Web-странице. При разработке дизайна Web-страницы прежде всего нужно учитывать особенности восприятия целевой аудитории. При этом оформление должно соответствовать содержанию Web-страницы. Универсального решения в области разработки дизайна Web-страниц не существует. Возможны совершенно различные варианты исполнения Web-страницы. Все Web-страницы одного сервера должны быть оформлены в едином стиле. Это создаст дополнительное представление о фирме и ее товарах.

Дизайн Web-страниц предполагает разработку следующих элементов:

· цвет;

· шрифт;

· графика;

· компоновка Web-страницы.

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

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

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

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

· Не следует заполнять страницы избыточным количеством графических материалов. Не следует включать в страницу непрерывно двигающиеся элементы - они перенапрягают периферическое зрение. Нужно сохранять баланс между текстом, изображениями и пустым пространством.
Закончив создание Web-страницы, нужно посмотреть на нее со стороны потенциального пользователя. Возможно разработка Web-страницы будет происходить на мощном компьютере Power Mac или Sun, однако большинство пользователей могут находиться в значительно худших условиях, и важно знать, как выглядит Web-страница с их точки зрения.

Цвет

Важность цвета в нашей жизни поистине огромна. Так же огромна она и в Интернете, где всё на этом и держится. Умение правильно использовать цвет позволяет задать благоприятную атмосферу сайта, погрузить посетителя в свой мир. Важно всегда сначала продумывает цветовую схему, потом только начинать создавать графику. Проблема восприятия сайта является одной из наиболее важных задач. Когда пользователь попадает на какой-либо сайт, очень важным моментом становится первое впечатление, которое он получает от ресурса. Это становится отправной точкой для решения пользователя, оставаться ли ему здесь или искать информацию в другом месте. Сайт, который обладает тяжелой психологической атмосферой, отталкивает пользователя, как следствие, у него пропадает желание находиться именно на этом сайте, что может привести к потери потенциального клиента.

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

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

На некоторые цвета у большого количества людей преобладает негативная реакция:

Черный, Красный, Серый, Коричневый, эти цвета при доминировании на сайте вызовут отрицательную оценку сайта. При умелом сочетании цветов влияние негативной составляющей этих цветов можно нивелировать (пример: Синий-черный) или даже превратить в плюсы. Такого эффекта зачастую можно достичь при плавных переходах цветов.

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

Для молодёжи с домашним Интернетом более привычен ночной выход в Интернет. Для них лучше создавать тёмный фон, светлый текст. Если аудитория состоит из людей пользующихся Интернетом на своей работе (в офисах, учреждениях), следует делать светлый сайт с тёмным текстом. По статистике светлый фон лучше тёмного.

Шрифты

Очень важная область дизайна - типографика - шрифтовое решение композиции. Безусловно, шрифт — самый интересный, самый сложный и самый благодарный из всех строительных материалов дизайнера. Ни одна работа не об­ходится без шрифтовых заголовков, логотипов, надписей. К сожалению современные веб-возможности ограничены двумя группами очень похожих и не очень красивых шрифтов: рублеными (Arial, Verdana etc.) и антиквами во главе с Times New Roman. Все остальные шрифты могут оказаться не установленными на компьютере пользователя, и их использование регулярно приводит к невозможности посетителем прочесть послание, - вместо текста будут показаны закорючки. Если же необходимо написать текст каким-нибудь особенным шрифтом, то используется gif изображение для всего текста (например, для заголовков) или для каждой буквы в отдельности, что гораздо экономичнее, но чрезвычайно трудоемко. Тем не менее, использование текста в виде картинок приведет к многократному (sic) увеличению объема страницы, что крайне нежелательно.

Шрифт характеризуется гарнитурой (определяет форму и носит название шрифта, serif, sans-serif, monospace, декоративные, рукописные), кеглей (размер шрифта, измеряется в пунктах), начертанием (курсив, жирный, наклонный).

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

Следующей задачей является подбор параметров набора:

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

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

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

Главное - это единый образ ресурса. Подбор оптимального шрифта и правильность его расположения одна из важнейших задач.

Оформление текста

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

Чаще всего, контентными изображениями являются семейные фотографии (походные, свадебные, институтские и пр.), иллюстрации продаваемой продукции, рисунки или картины, кадры из фильмов, скриншоты игрушек и т.д. Иллюстрации - это и благо, и бич Интернета. Благо, потому что с их помощью можем лучше донести до посетителя нужную информацию, - визуальные образы практически всегда более наглядны и понятны, нежели описательные. Фактически, без картинок Интернет бы не переживал сейчас такой бум, который мы можем наблюдать последние три-четыре года. В то же время, современные скорости работы телекоммуникационного оборудования, составляющего «железную» основу Интернета, не в состоянии предоставить веб-мастерам того комфорта при работе с изображениями, который есть у дизайнеров печатной продукции. В результате веб-мастера, все время должны помнить об объеме получающегося изображения, чтобы посетителям не пришлось полчаса ждать его.

Существует два основных формата графических данных, используемых в веб-мастеринге - это GIF и JPEG, хотя они и не единственные, но на данный момент наиболее распространенные. Формат GIF используется для презентационной (деловой) графики: схем, диаграмм, графиков, а также для анимации, однако если в распоряжении есть подлежащая выкладыванию на сайт цветная фотография, то лучше использовать JPEG.

Дата добавления: 2013-12-12