Когда эсть свободное время, люблю засесть за компьютер, и писать какие-то программки. Самая полезная программа, которую сначало писал лично для себя тут. Может тут есть еще кто-то, кто знает pascal, С/С++, Assembler ???
Как "заценить" собственный сайт?
Любой дизайнер по природе своей любопытен. Хотя бы в той части, что является предметом его деятельности. В частности, это относится к его работам: сделав сайт, ему интересно узнать - получилось или нет? В большей части это относиться к начинающим дизайнерам, ибо у профессионалов «проколы» случаются редко.
Обычно, чтобы оценить свой, зачастую построенный на чистом интузиазме, труд, новичок обращается на форумы о дизайне, где есть раздел, посвященный оценке сайтов другими пользователями. И, наверное, такой ход оправдан: создатель сайта при минимуме усилий со своей стороны получает максимум, зачастую достаточно компетентных комментариев.
Однако, я советую, прежде чем выносить сайт на обсуждение, самому "заценить" свой сайт. Понимаю, это достаточно сложно сделать это объективно, все-таки свое, родное... Но, чтобы вам помочь, могу привести примерный список деталей, на которые я обращаю внимание при оценке сайта. На всякий случай, я приведу расширенный список, для «глубокой оценки», ведь лучше сделать сразу все в лучшем виде, чем потом выслушивать гневно-насмешливые высказывания в свой адрес.
Сразу оговорюсь, что все ниже сказанное зыбко и шатко, и список неполон... Просто примите к сведению. В большинстве случаев, ошибки случаются в «технической части», например неполадки с версткой, или ошибки с юзабилити. Своевременно найдя, и исправив их можно создать качественный и удобный ресурс. Но, с другой стороны, если у вас совершенно нет дизайнерского таланта, то, даже сделав трижды грамотный сайт, но «запоров дизайнерскую часть» (подбор цветов, идея, стиль, исполнение графики), больше чем на «3», ваш сайт «не потянет».
Ищем грубые ошибки
* Не остались ли на сайте страницы, отличающиеся дизайном от общего стиля? Все одинаковые элементы должны быть выполнены в одном цвете, одним шрифтом и.т.д. Ситуация, когда на одной странице меню в синих тонах, а не другой в зеленых - недопустима.
* Нет ли ошибок в скриптах, ssi-директивах? Все ли ссылки работают и ведут на существующие страницы?
* Исправлены ли все орфографические ошибки, особенно в важных элементах, таких как заголовки?
* Исправлены ли грубые ошибки в верстке - блоки разной ширины, «поехавшие» заголовки, отсутствующие изображения, текст вне предназначенного для него места, в общем, все, что бросается сразу в глаза
* Правильно ли подобраны цвета? Нет ли нечитаемого текста, с цветом, близким к цвету фона? Цвета шрифта и текста должны быть контрастными.
Ошибки в использовании шрифтов и оформлении текстов
* Контрастен ли шрифт по отношению к фону? Например, серый шрифт по черному фону совершенно нечитабелен
* Шрифт не задан фиксировано? В принципе, фиксированный шрифт имеет право на существование, но, если вы лишаете пользователя возможности самому выбрать необходимый размер шрифта, уделите двойное внимание подбору оптимального размера шрифта.
* Нормально ли выглядит страница при любом размере системного шрифта. Некоторые пользователи устанавливают в настройках максимальный размер шрифта, отчего плохой дизайн сразу разваливается. Проверте свою верстку на прочность при максимальном размере шрифта
* Корректно ли сайт печатается? Для информационных сайтов есть смысл создавать специальную версию для печати
* Текст выводиться удобной для чтения гарнитурой? Отвечает ли данная гарнитура настроению и стилю сайта? Помогает ли (или хотя бы не мешает?) усвоить содержание текста?
* Разбит ли текст на абзацы? Абзацы должны быть не слишком длинными, в каждом абзаце должна быть законченная мысль
* Нет ли лишних эффектов в тексте? Мигающий, яркий, движущийся текст часто раздражает пользователя. Использовать данные эффекта лучше только в крайних случаях
* Выделяются ли главные мысли наклонным или жирным шрифтом? Выделение существенных моментов позволяет облегчить восприятие текста
* Отсутствует ли выделение текста подчеркиванием? Подчеркивание - это стереотип, обозначающий для пользователя ссылку. Не стоит обманывать пользователя, лучше обойтись другим методом выделения
* Присутствуют ли заголовки и подзаголовки? Такое деление помогает пользователю лучше ориентироваться в документе. Причем, деление следует проводить с помощью специальных тэгов
* Если вы используете тёмный или чёрный фон, установлено ли жирное начертание текста по умолчанию (на большинстве низкокачественных мониторов, которые и составляют большинство, тонкий светлый текст на тёмном фоне проявляет несведение лучей и от этого выглядит сильно размытым)?
Ошибки при использовании графики
* Хорошо ли оптимизирована графика? Нет ли лишних изображений, особенно больших? Графика существенно увеличивает время загрузки сайта. Обычно, вес всей страницы с графикой, не должен превышать 50 kb. Иначе пользователь может так и не дождаться полной загрузки и уйти
* Использует ли графика метафоры, известные пользователю по обычной жизни? Лишаете ли вы её несущественных подробностей, без пользы усложняющих её восприятие? Вообще говоря, нет никакого смысла, как в абстрактных пиктограммах, так и в пиктограммах, инспирированных компьютером. Место хранения файлов можно обозначить изображением жёсткого диска, но при этом от пользователя будет требоваться знание того, как этот диск выглядит. Что неправильно, т.к. от пользователя вообще нельзя ничего требовать. Лучше нарисовать шкаф.
* Если вы используете графику, имитирующую трехмерность, все ли тени падают в одну сторону? Это очень распространенная ошибка, сайт на котором все тени падают в разные стороны выглядит нелепо и смешно
* По назначению ли используется флеш и анимированные изображения? Лишнее мельтешение на странице еще никому не принесло пользы. Кроме того, такие объекты обычно прилично «весят»
* У всех ли графических изображений есть соответствующий альтернативный текст? Он поможет разобраться, если у пользователя в браузере отключена возможность просмотра графики, кроме того, указание этих атрибутов является обязательным в стандарте html 4.0
Ошибки в навигации
* Хорошо ли продумана навигация? Разбит ли сайт на разделы, если это необходимо?
* Навигация должна присутствовать на всех страницах сайта. На каждой ли странице есть ссылка на главную страницу?
* Отражает ли навигационная панель текущее местоположение посетителя на сайте? Это может быть выделение текущего пункта в меню цветом, либо другим эффектом
* Всегда ли корректно работает кнопка back браузера? Некоторые страницы, переданные по шифрующему протоколу, не могут быть взяты браузером из кэша и их требуется загружать заново (в лучшем случае пользователю нужно самому нажать кнопку refresh, в худшем - производить более сложные и неочевидные действия). При повторной загрузке таких страниц может также слететь установленная в браузере кодировка (и весь русский текст превратится в тарабарщину). Избегайте делать такие страницы. Также, если у вас есть страницы с формами ввода, добейтесь того, чтобы вернувшийся на эту страницу пользователь (не важно, копкой ли back, либо благодаря гиперссылке) нашел её со всеми своими установками (это очень экономит время, если нужно вернуться и что-нибудь поправить).
* Если навигация вашего сайта непрозрачна, сложна, имеет древовидную структуру, то доступна ли карта сайта?
Тестируем юзабилити
* Использованы ли все возможности для взаимодействия с пользователем? Я имею в виду интерактивные кнопки, другие элементы, реагирующие на действия пользователя.
* Если объем сайта велик, имеется ли возможность текстового поиска?
* Всегда ли доступен архив информации? Старая информация не значит ненужная.
* Предупрежден ли пользователь о возможных неприятных последствиях его действий? Это может быть открытие нового окна, запуск апплета, уведомление о ходе загрузки страницы или размер файла, доступного для скачивания
* Видимы ли все изменения в содержании и дизайне, произошедшие из-за действий пользователя? Например, если пользователь установил какой-нибудь переключатель, то во всех страницах, демонстрирующих результаты его действий, должно быть показано, что этот переключатель установлен в соответственное положение. Принципом, послужившим основой этого вопроса, является утверждение, гласящее, что любое действие пользователя должно быть отражено интерфейсом.
* Находятся ли важные данные в начале страницы? Важная информация должна заинтересовать пользователя, заставить его прочесть до конца ваш материал
* Помогает ли альтернативный текст понять изображение? Имеется ли у всех навигационных ссылок пояснение? Пояснение должно отвечать на вопрос, куда попадет пользователь, щелкнув по ссылке.
* Различаются ли цвета у пройденных и непройденных гиперссылок?
* Отражают ли заголовки (title) путь к данной странице?
* Стараетесь ли вы использовать кнопки с глаголами, нежели иными частями речи, например "Показать" вместо "Готово"?
* Нет ли на странице ссылок на саму себя? Это нелогично, т.к. ссылка сама по себе предполагает перемещение.
* Изображение логотипа должно быть ссылкой на главную страницу.
* Помните что синий подчеркнутый текст - это стереотип? Так чаще всего обозначают ссылки. Старайтесь это использовать и вашу ссылку заметят
Послесловие
Это лишь основные, но далеко не единственные пункты. Соблюдение всех из них необязательно, более того, иногда даже вредно и может совершенно испортить весь дизайн. Но все же, для большинства сайтов большинство пунктов актуально. Хотя даже соблюдение правил не гарантирует создание хорошего дизайна. Ведь, зайдя на сайт, мы прежде всего оцениваем общую красоту, стильность, а лишь потом сталкиваемся со всеми прочими частями.
Впечатление от сайта, как известно, формируется в первые 5-10 секунд после загрузки. Если вам удалось создать стильный, красивый, необычный сайт, и при этом не испортив все впечатление грубыми ошибками, то можете считать, что дизайн удался! Можно начинать заполнять сайт информацией, раскручивать, совершенствовать. Немного терпения - и ваш проект будет популярным!
Удачи тебе, Дизайнер!
Автор: Поликарпов Роман
Любой дизайнер по природе своей любопытен. Хотя бы в той части, что является предметом его деятельности. В частности, это относится к его работам: сделав сайт, ему интересно узнать - получилось или нет? В большей части это относиться к начинающим дизайнерам, ибо у профессионалов «проколы» случаются редко.
Обычно, чтобы оценить свой, зачастую построенный на чистом интузиазме, труд, новичок обращается на форумы о дизайне, где есть раздел, посвященный оценке сайтов другими пользователями. И, наверное, такой ход оправдан: создатель сайта при минимуме усилий со своей стороны получает максимум, зачастую достаточно компетентных комментариев.
Однако, я советую, прежде чем выносить сайт на обсуждение, самому "заценить" свой сайт. Понимаю, это достаточно сложно сделать это объективно, все-таки свое, родное... Но, чтобы вам помочь, могу привести примерный список деталей, на которые я обращаю внимание при оценке сайта. На всякий случай, я приведу расширенный список, для «глубокой оценки», ведь лучше сделать сразу все в лучшем виде, чем потом выслушивать гневно-насмешливые высказывания в свой адрес.
Сразу оговорюсь, что все ниже сказанное зыбко и шатко, и список неполон... Просто примите к сведению. В большинстве случаев, ошибки случаются в «технической части», например неполадки с версткой, или ошибки с юзабилити. Своевременно найдя, и исправив их можно создать качественный и удобный ресурс. Но, с другой стороны, если у вас совершенно нет дизайнерского таланта, то, даже сделав трижды грамотный сайт, но «запоров дизайнерскую часть» (подбор цветов, идея, стиль, исполнение графики), больше чем на «3», ваш сайт «не потянет».
Ищем грубые ошибки
* Не остались ли на сайте страницы, отличающиеся дизайном от общего стиля? Все одинаковые элементы должны быть выполнены в одном цвете, одним шрифтом и.т.д. Ситуация, когда на одной странице меню в синих тонах, а не другой в зеленых - недопустима.
* Нет ли ошибок в скриптах, ssi-директивах? Все ли ссылки работают и ведут на существующие страницы?
* Исправлены ли все орфографические ошибки, особенно в важных элементах, таких как заголовки?
* Исправлены ли грубые ошибки в верстке - блоки разной ширины, «поехавшие» заголовки, отсутствующие изображения, текст вне предназначенного для него места, в общем, все, что бросается сразу в глаза
* Правильно ли подобраны цвета? Нет ли нечитаемого текста, с цветом, близким к цвету фона? Цвета шрифта и текста должны быть контрастными.
Ошибки в использовании шрифтов и оформлении текстов
* Контрастен ли шрифт по отношению к фону? Например, серый шрифт по черному фону совершенно нечитабелен
* Шрифт не задан фиксировано? В принципе, фиксированный шрифт имеет право на существование, но, если вы лишаете пользователя возможности самому выбрать необходимый размер шрифта, уделите двойное внимание подбору оптимального размера шрифта.
* Нормально ли выглядит страница при любом размере системного шрифта. Некоторые пользователи устанавливают в настройках максимальный размер шрифта, отчего плохой дизайн сразу разваливается. Проверте свою верстку на прочность при максимальном размере шрифта
* Корректно ли сайт печатается? Для информационных сайтов есть смысл создавать специальную версию для печати
* Текст выводиться удобной для чтения гарнитурой? Отвечает ли данная гарнитура настроению и стилю сайта? Помогает ли (или хотя бы не мешает?) усвоить содержание текста?
* Разбит ли текст на абзацы? Абзацы должны быть не слишком длинными, в каждом абзаце должна быть законченная мысль
* Нет ли лишних эффектов в тексте? Мигающий, яркий, движущийся текст часто раздражает пользователя. Использовать данные эффекта лучше только в крайних случаях
* Выделяются ли главные мысли наклонным или жирным шрифтом? Выделение существенных моментов позволяет облегчить восприятие текста
* Отсутствует ли выделение текста подчеркиванием? Подчеркивание - это стереотип, обозначающий для пользователя ссылку. Не стоит обманывать пользователя, лучше обойтись другим методом выделения
* Присутствуют ли заголовки и подзаголовки? Такое деление помогает пользователю лучше ориентироваться в документе. Причем, деление следует проводить с помощью специальных тэгов
* Если вы используете тёмный или чёрный фон, установлено ли жирное начертание текста по умолчанию (на большинстве низкокачественных мониторов, которые и составляют большинство, тонкий светлый текст на тёмном фоне проявляет несведение лучей и от этого выглядит сильно размытым)?
Ошибки при использовании графики
* Хорошо ли оптимизирована графика? Нет ли лишних изображений, особенно больших? Графика существенно увеличивает время загрузки сайта. Обычно, вес всей страницы с графикой, не должен превышать 50 kb. Иначе пользователь может так и не дождаться полной загрузки и уйти
* Использует ли графика метафоры, известные пользователю по обычной жизни? Лишаете ли вы её несущественных подробностей, без пользы усложняющих её восприятие? Вообще говоря, нет никакого смысла, как в абстрактных пиктограммах, так и в пиктограммах, инспирированных компьютером. Место хранения файлов можно обозначить изображением жёсткого диска, но при этом от пользователя будет требоваться знание того, как этот диск выглядит. Что неправильно, т.к. от пользователя вообще нельзя ничего требовать. Лучше нарисовать шкаф.
* Если вы используете графику, имитирующую трехмерность, все ли тени падают в одну сторону? Это очень распространенная ошибка, сайт на котором все тени падают в разные стороны выглядит нелепо и смешно
* По назначению ли используется флеш и анимированные изображения? Лишнее мельтешение на странице еще никому не принесло пользы. Кроме того, такие объекты обычно прилично «весят»
* У всех ли графических изображений есть соответствующий альтернативный текст? Он поможет разобраться, если у пользователя в браузере отключена возможность просмотра графики, кроме того, указание этих атрибутов является обязательным в стандарте html 4.0
Ошибки в навигации
* Хорошо ли продумана навигация? Разбит ли сайт на разделы, если это необходимо?
* Навигация должна присутствовать на всех страницах сайта. На каждой ли странице есть ссылка на главную страницу?
* Отражает ли навигационная панель текущее местоположение посетителя на сайте? Это может быть выделение текущего пункта в меню цветом, либо другим эффектом
* Всегда ли корректно работает кнопка back браузера? Некоторые страницы, переданные по шифрующему протоколу, не могут быть взяты браузером из кэша и их требуется загружать заново (в лучшем случае пользователю нужно самому нажать кнопку refresh, в худшем - производить более сложные и неочевидные действия). При повторной загрузке таких страниц может также слететь установленная в браузере кодировка (и весь русский текст превратится в тарабарщину). Избегайте делать такие страницы. Также, если у вас есть страницы с формами ввода, добейтесь того, чтобы вернувшийся на эту страницу пользователь (не важно, копкой ли back, либо благодаря гиперссылке) нашел её со всеми своими установками (это очень экономит время, если нужно вернуться и что-нибудь поправить).
* Если навигация вашего сайта непрозрачна, сложна, имеет древовидную структуру, то доступна ли карта сайта?
Тестируем юзабилити
* Использованы ли все возможности для взаимодействия с пользователем? Я имею в виду интерактивные кнопки, другие элементы, реагирующие на действия пользователя.
* Если объем сайта велик, имеется ли возможность текстового поиска?
* Всегда ли доступен архив информации? Старая информация не значит ненужная.
* Предупрежден ли пользователь о возможных неприятных последствиях его действий? Это может быть открытие нового окна, запуск апплета, уведомление о ходе загрузки страницы или размер файла, доступного для скачивания
* Видимы ли все изменения в содержании и дизайне, произошедшие из-за действий пользователя? Например, если пользователь установил какой-нибудь переключатель, то во всех страницах, демонстрирующих результаты его действий, должно быть показано, что этот переключатель установлен в соответственное положение. Принципом, послужившим основой этого вопроса, является утверждение, гласящее, что любое действие пользователя должно быть отражено интерфейсом.
* Находятся ли важные данные в начале страницы? Важная информация должна заинтересовать пользователя, заставить его прочесть до конца ваш материал
* Помогает ли альтернативный текст понять изображение? Имеется ли у всех навигационных ссылок пояснение? Пояснение должно отвечать на вопрос, куда попадет пользователь, щелкнув по ссылке.
* Различаются ли цвета у пройденных и непройденных гиперссылок?
* Отражают ли заголовки (title) путь к данной странице?
* Стараетесь ли вы использовать кнопки с глаголами, нежели иными частями речи, например "Показать" вместо "Готово"?
* Нет ли на странице ссылок на саму себя? Это нелогично, т.к. ссылка сама по себе предполагает перемещение.
* Изображение логотипа должно быть ссылкой на главную страницу.
* Помните что синий подчеркнутый текст - это стереотип? Так чаще всего обозначают ссылки. Старайтесь это использовать и вашу ссылку заметят
Послесловие
Это лишь основные, но далеко не единственные пункты. Соблюдение всех из них необязательно, более того, иногда даже вредно и может совершенно испортить весь дизайн. Но все же, для большинства сайтов большинство пунктов актуально. Хотя даже соблюдение правил не гарантирует создание хорошего дизайна. Ведь, зайдя на сайт, мы прежде всего оцениваем общую красоту, стильность, а лишь потом сталкиваемся со всеми прочими частями.
Впечатление от сайта, как известно, формируется в первые 5-10 секунд после загрузки. Если вам удалось создать стильный, красивый, необычный сайт, и при этом не испортив все впечатление грубыми ошибками, то можете считать, что дизайн удался! Можно начинать заполнять сайт информацией, раскручивать, совершенствовать. Немного терпения - и ваш проект будет популярным!
Удачи тебе, Дизайнер!
Автор: Поликарпов Роман
Что такое фирменный стиль?
Фирменному стилю довольно трудно дать строгое словарное определение. Однако что такое фирменный стиль, понять и представить очень легко. Авангардные художники часто любят издеваться над одним из символов Америки – логотипом компании «Coca-Cola», вписывая в красный круг витиеватым фирменным шрифтом разнообразные тексты, от юмористических до провокационных. Но что бы они там ни написали, их творения все равно вызывают ассоциации, прежде всего с «Coca-Cola», и лишь потом, c теми идеями, которые они хотели донести. Фирменный стиль «Кока-Колы» узнаваем настолько, что его можно искажать и пародировать как угодно, но люди все равно смогут уловить связь с этой компанией и ее знаменитым напитком.
Этот пример показывает, что текст – наименее важная составляющая фирменного стиля. Название фирмы может играть исключительно важную роль в рекламе, в маркетинге, в конкурентной борьбе, но стиль – это нечто иное. Фирменный стиль воздействует не столько на разум, сколько на подсознание, и подчас фирму легко узнать по таким элементам стиля, которые вообще лишены текста.
Так узнают фирму «Nike» по одной галочке, которая неизвестно что обозначает, но запоминается с первого взгляда. Так узнают фирму «Адидас», про которую еще в советское время веселые школьники пели на мотив «Учкудук»: «Адидас – три полоски»… Так узнают компанию «Билайн» с ее черно-желтой цветовой гаммой и компанию «Мегафон» с ее сине-зеленым значком, похожим на инь-ян в стиле хайтек.
В таком деле, как разработка фирменного стиля нет ничего важнее индивидуальности, оригинальности и креативности. Цель и смысл фирменного стиля состоит в том, чтобы фирму, ее продукцию и ее рекламу узнавали всегда и везде и не могли перепутать ни с какой другой.
Первое, о чем следует подумать, приступая к работе над фирменным стилем компании – это разработка логотипа. Вообще говоря, фирменный стиль состоит из логотипа, цветовой гаммы, шрифтовых решений и единых элементов оформления, которые применяются везде – в дизайне офисных и производственных зданий компании, в оформлении продукции, тары и упаковки, в рекламе и документации, в фирменных сувенирах и корпоративной одежде. Но разработка логотипа – это центральное звено всей работы над стилем фирмы.
Все остальные решения, используемые в фирменном стиле, прямо или косвенно зависят от того, как выглядит логотип компании. Цветовая гамма, шрифты, формы и линии логотипа в дальнейшем применяются и в других элементах фирменного стиля. Если это правило не соблюдается, то велика вероятность, что единый стиль создать не удастся – он просто распадется на элементы, не связанные друг с другом. Поэтому к работе над логотипом следует подходить с особой тщательностью, а затем, при разработке других элементов стиля, постоянно сверяться с логотипом во всех его вариантах, которых может быть немало. Как минимум полный и краткий, цветной и черно-белый, и для каждого есть свои нюансы, поскольку, например, в одноцветных распечатках служебной документации стиль фирмы должен быть не менее узнаваем, чем на полноцветных рекламных плакатах.
Конечно, не всем дизайнерам под силу создать шедевры фирменного стиля, которым суждено стать знаменитыми в любой точке планеты. Но ориентироваться в этой работе нужно именно на высшие достижения дизайнерского искусства.
Автор: Илма
Фирменному стилю довольно трудно дать строгое словарное определение. Однако что такое фирменный стиль, понять и представить очень легко. Авангардные художники часто любят издеваться над одним из символов Америки – логотипом компании «Coca-Cola», вписывая в красный круг витиеватым фирменным шрифтом разнообразные тексты, от юмористических до провокационных. Но что бы они там ни написали, их творения все равно вызывают ассоциации, прежде всего с «Coca-Cola», и лишь потом, c теми идеями, которые они хотели донести. Фирменный стиль «Кока-Колы» узнаваем настолько, что его можно искажать и пародировать как угодно, но люди все равно смогут уловить связь с этой компанией и ее знаменитым напитком.
Этот пример показывает, что текст – наименее важная составляющая фирменного стиля. Название фирмы может играть исключительно важную роль в рекламе, в маркетинге, в конкурентной борьбе, но стиль – это нечто иное. Фирменный стиль воздействует не столько на разум, сколько на подсознание, и подчас фирму легко узнать по таким элементам стиля, которые вообще лишены текста.
Так узнают фирму «Nike» по одной галочке, которая неизвестно что обозначает, но запоминается с первого взгляда. Так узнают фирму «Адидас», про которую еще в советское время веселые школьники пели на мотив «Учкудук»: «Адидас – три полоски»… Так узнают компанию «Билайн» с ее черно-желтой цветовой гаммой и компанию «Мегафон» с ее сине-зеленым значком, похожим на инь-ян в стиле хайтек.
В таком деле, как разработка фирменного стиля нет ничего важнее индивидуальности, оригинальности и креативности. Цель и смысл фирменного стиля состоит в том, чтобы фирму, ее продукцию и ее рекламу узнавали всегда и везде и не могли перепутать ни с какой другой.
Первое, о чем следует подумать, приступая к работе над фирменным стилем компании – это разработка логотипа. Вообще говоря, фирменный стиль состоит из логотипа, цветовой гаммы, шрифтовых решений и единых элементов оформления, которые применяются везде – в дизайне офисных и производственных зданий компании, в оформлении продукции, тары и упаковки, в рекламе и документации, в фирменных сувенирах и корпоративной одежде. Но разработка логотипа – это центральное звено всей работы над стилем фирмы.
Все остальные решения, используемые в фирменном стиле, прямо или косвенно зависят от того, как выглядит логотип компании. Цветовая гамма, шрифты, формы и линии логотипа в дальнейшем применяются и в других элементах фирменного стиля. Если это правило не соблюдается, то велика вероятность, что единый стиль создать не удастся – он просто распадется на элементы, не связанные друг с другом. Поэтому к работе над логотипом следует подходить с особой тщательностью, а затем, при разработке других элементов стиля, постоянно сверяться с логотипом во всех его вариантах, которых может быть немало. Как минимум полный и краткий, цветной и черно-белый, и для каждого есть свои нюансы, поскольку, например, в одноцветных распечатках служебной документации стиль фирмы должен быть не менее узнаваем, чем на полноцветных рекламных плакатах.
Конечно, не всем дизайнерам под силу создать шедевры фирменного стиля, которым суждено стать знаменитыми в любой точке планеты. Но ориентироваться в этой работе нужно именно на высшие достижения дизайнерского искусства.
Автор: Илма
Пять принципов дизайна
Five Principles to Design By
Автор: Joshua Porter
Источник: bokardo.com
Технологии обслуживают людей
Люди склонны брать на себя вину за ошибки в программах. Если их компьютер виснет, они говорят «Я что-то сделал не так». Если сайт плохо спроектирован, они говорят «Я, наверно, слишком глуп, раз не могу найти то, что нужно».
Это ужасно! Люди не должны считать себя причинами ошибок при использовании технологии. Пользователь, так же как и клиент, всегда прав. Если в программе ошибка, то это ошибка разработчика программы. Если на сайте нельзя найти нужную информацию, то это ошибка дизайнера.
Технологии обслуживают людей. Люди не обслуживают технологии.
Дизайн – не искусство
Искусство – это средство самовыражения. Это жизнь, чувства, мысли и идеи художника. Это небольшие детали, незаметные сторонним наблюдателям и, в принципе, не обязательные. Они необходимы для самого художника и только для него.
С другой стороны, дизайн – это использование. Дизайнеру нужно, чтобы кто-нибудь пользовался тем, что он создает. Дизайн не может существовать без людей, которые им пользуются. Дизайн помогает людям решать проблемы. Лучшее что мы можем сказать о дизайне это не то, что он красивый, а то, что он удобный.
В отличие от искусства, дизайн всегда контекстен. Для решения какой проблемы он создается? Для кого? В какой момент времени? Дизайн непосредственно связан с технологиями, и, соответственно, должен меняться. Дизайн, созданный десять лет назад, вряд ли подойдет для решения сегодняшних задач. Многие замечательные дизайны остались в истории.
Искусство, наоборот, не зависит от времени. Мы по-прежнему ценим оригиналы картин Микеланджело или Леонардо, несмотря на то, что сегодняшние технологии позволяют создать хоть миллион копий. Дизайн же зависит от времени, в котором он был создан, и от задачи, которую он решает.
Когда людям нравится искусство, они говорят «Это красиво». Когда людям нравится дизайн, они говорят «Это хорошо работает». И это не случайно. Хороший Дизайн – тот, который хорошо работает.
Опыт принадлежит пользователю
Дизайнеры не создают опыт, они создаю артефакты, с помощью которых этот опыт можно получить. Это означает, что опыт появляется не тогда, когда дизайнер говорит, что это можно сделать так-то, а когда пользователь действительно это сделает.
Опыт – это то, что находится у пользователя и принадлежит ему.
Хороший дизайн не виден
Интересная особенность хорошего дизайна состоит в том, что он считается как нечто, само собой разумеющееся. Это работает так хорошо, что мы забываем, какие творческие усилия были потрачены на его создание. Иногда, как, например, с чайной ложкой, объект кажется настолько простым, что трудно поверить, что когда-то его не было. Другой пример – автомобиль – объект настолько умный и удобный потому, что миллионы человеко-часов были потрачены на его разработку. Каждый пример хорошего дизайна имеет богатую историю. И каждый из них появлялся тогда, когда дизайнер пытался решить какую-то проблему.
Плохой дизайн виден сразу – он мешает пользоваться. Он неудобный, сложный, запутанный. По странной иронии плохой дизайн увидеть намного легче, чем хороший.
Простота
«Совершенство достигается не тогда, когда нечего добавить, а тогда, когда нечего отнять» (А. Сент-Экзюпери).
Знать, что нужно оставить, а что можно выбросить – высший уровень профессионализма для дизайнера.
Five Principles to Design By
Автор: Joshua Porter
Источник: bokardo.com
Технологии обслуживают людей
Люди склонны брать на себя вину за ошибки в программах. Если их компьютер виснет, они говорят «Я что-то сделал не так». Если сайт плохо спроектирован, они говорят «Я, наверно, слишком глуп, раз не могу найти то, что нужно».
Это ужасно! Люди не должны считать себя причинами ошибок при использовании технологии. Пользователь, так же как и клиент, всегда прав. Если в программе ошибка, то это ошибка разработчика программы. Если на сайте нельзя найти нужную информацию, то это ошибка дизайнера.
Технологии обслуживают людей. Люди не обслуживают технологии.
Дизайн – не искусство
Искусство – это средство самовыражения. Это жизнь, чувства, мысли и идеи художника. Это небольшие детали, незаметные сторонним наблюдателям и, в принципе, не обязательные. Они необходимы для самого художника и только для него.
С другой стороны, дизайн – это использование. Дизайнеру нужно, чтобы кто-нибудь пользовался тем, что он создает. Дизайн не может существовать без людей, которые им пользуются. Дизайн помогает людям решать проблемы. Лучшее что мы можем сказать о дизайне это не то, что он красивый, а то, что он удобный.
В отличие от искусства, дизайн всегда контекстен. Для решения какой проблемы он создается? Для кого? В какой момент времени? Дизайн непосредственно связан с технологиями, и, соответственно, должен меняться. Дизайн, созданный десять лет назад, вряд ли подойдет для решения сегодняшних задач. Многие замечательные дизайны остались в истории.
Искусство, наоборот, не зависит от времени. Мы по-прежнему ценим оригиналы картин Микеланджело или Леонардо, несмотря на то, что сегодняшние технологии позволяют создать хоть миллион копий. Дизайн же зависит от времени, в котором он был создан, и от задачи, которую он решает.
Когда людям нравится искусство, они говорят «Это красиво». Когда людям нравится дизайн, они говорят «Это хорошо работает». И это не случайно. Хороший Дизайн – тот, который хорошо работает.
Опыт принадлежит пользователю
Дизайнеры не создают опыт, они создаю артефакты, с помощью которых этот опыт можно получить. Это означает, что опыт появляется не тогда, когда дизайнер говорит, что это можно сделать так-то, а когда пользователь действительно это сделает.
Опыт – это то, что находится у пользователя и принадлежит ему.
Хороший дизайн не виден
Интересная особенность хорошего дизайна состоит в том, что он считается как нечто, само собой разумеющееся. Это работает так хорошо, что мы забываем, какие творческие усилия были потрачены на его создание. Иногда, как, например, с чайной ложкой, объект кажется настолько простым, что трудно поверить, что когда-то его не было. Другой пример – автомобиль – объект настолько умный и удобный потому, что миллионы человеко-часов были потрачены на его разработку. Каждый пример хорошего дизайна имеет богатую историю. И каждый из них появлялся тогда, когда дизайнер пытался решить какую-то проблему.
Плохой дизайн виден сразу – он мешает пользоваться. Он неудобный, сложный, запутанный. По странной иронии плохой дизайн увидеть намного легче, чем хороший.
Простота
«Совершенство достигается не тогда, когда нечего добавить, а тогда, когда нечего отнять» (А. Сент-Экзюпери).
Знать, что нужно оставить, а что можно выбросить – высший уровень профессионализма для дизайнера.
Броузеры которые мы выбираем
Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design" http://www.cherry-design.spb.ru/
Теперь давайте поговорим о броузерах. А что о них говорить, скажете Вы, и так все ясно - это программа, при помощи которой мы смотрим Web-странички. Ну что же, это правильно, основное их предназначение заключается в этом - просмотре Web-страничек. Но почему же в мире тогда так много броузеров? И почему они показывают странички по-разному?
Давайте вспомним. Что лежит в основе Web-страничек? Верно, язык HTML, и определятся он как текст в формате ASCII со вставкой специальных разметочных кодов (или тэгов). И когда броузер отображает страничку, то он находит эти коды и выполняет соответствующие им действия (например, встречая тэг <b> начинает вывод последующего текста полужирным шрифтом, а встречая </b> - прекращает это делать). Полный набор таких тэгов называется спецификацией и поддерживается WWW-консорциумом, в который входят все основные компании, разрабатывающие программное обеспечение для Internet (в том числе, и Microsoft с Netscape). В идеале, все броузеры должны удовлетворять данным спецификациям, но, к сожалению, реальная жизнь и конкуренция между ведущими производителями броузеров вносят свои коррективы.
Напомню, что первоначально HTML позиционировался как язык логической разметки текста, независимый от устройства вывода. То есть тэги воспринимались как указание к выделению части текста некоторым образом. Отсюда в языке имеется множество т.н. логических тэгов типа <strong>, <em>, : , к сожалению, редко применяющихся. Фраза "независимый от устройства вывода" обозначает, что результат интерпретации HTML-кода может быть выведен не только на экран, но и, к примеру, на звуковую карту (когда компьютер сам будет читать Вам содержимое HTML-странички) или на специальное устройство, воспроизводящее содержимое странички кодом Брайля. Но получилось так, что язык HTML, в конце концов, превратился в язык описания страниц на экране компьютера.
В настоящий момент имеются два броузера, особенности которых должен учитывать web-дизайнер при изготовлении страничек. Это "Netscape Navigator" и "Microsoft Internet Explorer" (а вдруг кто не знает Smile На самом деле броузеров гораздо больше, но они все вместе занимают всего около 1% рынка и, как правило, стремятся к совместимости с одним из двух лидеров. Между собой лидирующие броузеры делят рынок в соотношении примерно 75/25 (на данный момент лидирует Internet Explorer). Так что, в дальнейшем будут рассматриваться только эти программы.
Первое правило профессионального web-дизайна
Для чего же мы должны учитывать то, как смотрятся наши странички в обоих броузерах, если имеется стандарт языка HTML, и все они обязаны правильно просматривать код? А в том-то и дело, что интерпретируют они код по-разному (иногда очень по-разному), причем не только версии разных броузеров, но и разные версии одного и того же броузера. Причиной этого явилась конкуренция компаний, когда они вводили новые тэги для повышения конкурентоспособности своих продуктов. И как следствие любой закрытой программы, они по разному понимают значение тех или иных тэгов.
Отсюда, первое правило - профессиональный web-дизайнер просто обязан знать, как просматриваются его странички во всех популярных броузерах и их различных версиях.
Второе правило профессионального web-дизайна
Кроме этого, приходится также учитывать тот факт, что пользователи имеют компьютеры с различной аппаратной конфигурацией. Я не имею ввиду, что кто-то ходит по Web на 286 машине (а вдруг правда? Smile, но есть много вполне современных компьютеров, которые обладают низкой разрешающей способностью. За примерами далеко ходить не надо - ноутбук. Большое их количество выпускается с черно-белым экраном, а цветные ноутбуки чаще всего ограничены палитрой в 256 цветов. Или, например, палмтопы (становящиеся популярными карманные компьютеры) под управлением Windows CE - они изначально были черно-белыми.
Вот, добрались и до второго правила - профессиональный Web-дизайнер должен просматривать странички при различном количестве цветов. И в случае необходимости делать странички с использованием только безопасной палитры.
Третье правило профессионального web-дизайна
Все странички принадлежат одной большой объединенной сети (WWW называется Smile, и в этой сети находятся совершенно разные компьютеры: IBM PC-совместимые, Apple Macintosh, различные версии UNIX, Amiga, : Да и все что угодно. И все эти платформы, так скажем, немного отличаются при выводе графики на экран. Вряд ли шрифт в Linux будет точно таким же, как в Windows, да и палитра цветов по умолчанию может отличаться, и алгоритм дизеринга при выводе на экран, и : В общем, если сайт важный и представляет интерес для широкого круга пользователей, то обязательно протестируйте сайт на разных платформах и под разными операционными системами. Это было третье правило профессионального Web-дизайнера Smile
И не забывайте про текстовые броузеры, самым известным представителем которых является Lynx. Сайт может быть сколь угодно красив, но что от этого толку, если его не увидят! Поэтому всегда думайте о том, как сайт будет выглядеть в текстовом варианте. Навигация должна оставаться простой и понятной. И достигается это простыми способами: если у вас меню в виде картинки, то не поленитесь снабдить все картинки подписями, а если не получается, то продублируйте меню текстовыми ссылками внизу страницы. Владельцы текстовых броузеров будут счастливы Smile И заметьте, что ни один из текстовых броузеров не отображает таблицы, а текст внутри ячеек выводит сплошным потоком (слева направо и сверху вниз). То же самое с фреймами.
В общем, не все ладно в мире броузеров. Придут времена и все они будут показывать странички так, как описано в спецификации, но сейчас : Сейчас нам приходится учитывать все нюансы и особенности броузеров при изготовлении Web-страниц.
Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design" http://www.cherry-design.spb.ru/
Теперь давайте поговорим о броузерах. А что о них говорить, скажете Вы, и так все ясно - это программа, при помощи которой мы смотрим Web-странички. Ну что же, это правильно, основное их предназначение заключается в этом - просмотре Web-страничек. Но почему же в мире тогда так много броузеров? И почему они показывают странички по-разному?
Давайте вспомним. Что лежит в основе Web-страничек? Верно, язык HTML, и определятся он как текст в формате ASCII со вставкой специальных разметочных кодов (или тэгов). И когда броузер отображает страничку, то он находит эти коды и выполняет соответствующие им действия (например, встречая тэг <b> начинает вывод последующего текста полужирным шрифтом, а встречая </b> - прекращает это делать). Полный набор таких тэгов называется спецификацией и поддерживается WWW-консорциумом, в который входят все основные компании, разрабатывающие программное обеспечение для Internet (в том числе, и Microsoft с Netscape). В идеале, все броузеры должны удовлетворять данным спецификациям, но, к сожалению, реальная жизнь и конкуренция между ведущими производителями броузеров вносят свои коррективы.
Напомню, что первоначально HTML позиционировался как язык логической разметки текста, независимый от устройства вывода. То есть тэги воспринимались как указание к выделению части текста некоторым образом. Отсюда в языке имеется множество т.н. логических тэгов типа <strong>, <em>, : , к сожалению, редко применяющихся. Фраза "независимый от устройства вывода" обозначает, что результат интерпретации HTML-кода может быть выведен не только на экран, но и, к примеру, на звуковую карту (когда компьютер сам будет читать Вам содержимое HTML-странички) или на специальное устройство, воспроизводящее содержимое странички кодом Брайля. Но получилось так, что язык HTML, в конце концов, превратился в язык описания страниц на экране компьютера.
В настоящий момент имеются два броузера, особенности которых должен учитывать web-дизайнер при изготовлении страничек. Это "Netscape Navigator" и "Microsoft Internet Explorer" (а вдруг кто не знает Smile На самом деле броузеров гораздо больше, но они все вместе занимают всего около 1% рынка и, как правило, стремятся к совместимости с одним из двух лидеров. Между собой лидирующие броузеры делят рынок в соотношении примерно 75/25 (на данный момент лидирует Internet Explorer). Так что, в дальнейшем будут рассматриваться только эти программы.
Первое правило профессионального web-дизайна
Для чего же мы должны учитывать то, как смотрятся наши странички в обоих броузерах, если имеется стандарт языка HTML, и все они обязаны правильно просматривать код? А в том-то и дело, что интерпретируют они код по-разному (иногда очень по-разному), причем не только версии разных броузеров, но и разные версии одного и того же броузера. Причиной этого явилась конкуренция компаний, когда они вводили новые тэги для повышения конкурентоспособности своих продуктов. И как следствие любой закрытой программы, они по разному понимают значение тех или иных тэгов.
Отсюда, первое правило - профессиональный web-дизайнер просто обязан знать, как просматриваются его странички во всех популярных броузерах и их различных версиях.
Второе правило профессионального web-дизайна
Кроме этого, приходится также учитывать тот факт, что пользователи имеют компьютеры с различной аппаратной конфигурацией. Я не имею ввиду, что кто-то ходит по Web на 286 машине (а вдруг правда? Smile, но есть много вполне современных компьютеров, которые обладают низкой разрешающей способностью. За примерами далеко ходить не надо - ноутбук. Большое их количество выпускается с черно-белым экраном, а цветные ноутбуки чаще всего ограничены палитрой в 256 цветов. Или, например, палмтопы (становящиеся популярными карманные компьютеры) под управлением Windows CE - они изначально были черно-белыми.
Вот, добрались и до второго правила - профессиональный Web-дизайнер должен просматривать странички при различном количестве цветов. И в случае необходимости делать странички с использованием только безопасной палитры.
Третье правило профессионального web-дизайна
Все странички принадлежат одной большой объединенной сети (WWW называется Smile, и в этой сети находятся совершенно разные компьютеры: IBM PC-совместимые, Apple Macintosh, различные версии UNIX, Amiga, : Да и все что угодно. И все эти платформы, так скажем, немного отличаются при выводе графики на экран. Вряд ли шрифт в Linux будет точно таким же, как в Windows, да и палитра цветов по умолчанию может отличаться, и алгоритм дизеринга при выводе на экран, и : В общем, если сайт важный и представляет интерес для широкого круга пользователей, то обязательно протестируйте сайт на разных платформах и под разными операционными системами. Это было третье правило профессионального Web-дизайнера Smile
И не забывайте про текстовые броузеры, самым известным представителем которых является Lynx. Сайт может быть сколь угодно красив, но что от этого толку, если его не увидят! Поэтому всегда думайте о том, как сайт будет выглядеть в текстовом варианте. Навигация должна оставаться простой и понятной. И достигается это простыми способами: если у вас меню в виде картинки, то не поленитесь снабдить все картинки подписями, а если не получается, то продублируйте меню текстовыми ссылками внизу страницы. Владельцы текстовых броузеров будут счастливы Smile И заметьте, что ни один из текстовых броузеров не отображает таблицы, а текст внутри ячеек выводит сплошным потоком (слева направо и сверху вниз). То же самое с фреймами.
В общем, не все ладно в мире броузеров. Придут времена и все они будут показывать странички так, как описано в спецификации, но сейчас : Сейчас нам приходится учитывать все нюансы и особенности броузеров при изготовлении Web-страниц.
Информация вот основа Internet!
Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design" http://www.cherry-design.spb.ru/
Информация - вот, что в первую очередь привлекает посетителя на Ваш сайт. Все остальное лишь помогает сориентироваться в ней и облегчает доступ. И с этой точки зрения, самый первый вопрос, который можно предъявить WEB-сайту - для чего ты, собственно, нужен? Что ты можешь сказать мне такого, чего я не знаю? Чем ты лучше других?
На какой круг людей рассчитан WEB-сайт?
Спросите себя об этом. На тинэйджеров или на профессоров-медиков? - от этого вопроса напрямую зависит и дизайн сайта, и та информация, которую следует размещать на сайте. Исходя из контингента предполагаемых посетителей попытайтесь встать на их точку зрения и расставьте пункты меню Вашего сайта в порядке привлекательности для посетителя (а не для web-мастера) - это может оказаться достаточно трудно, но можно уже после запуска сайта проверить статистику посещаемости разделов и, исходя из этого, скорректировать меню. В качестве примера можно привести, допустим, некий предполагаемый web-сайт некой предполагаемой фирмы Wink, специализирующейся на предоставлении финансовой информации. А теперь вопрос: какая самая интересная информация для пользователя? История фирмы? НЕТ. Штат сотрудников? НЕТ. Услуги? НЕ совсем. Курс доллара? ДА-ДА-ДА. И эта информация должна быть доступна на первой странице, а не в каких-то там меню, закопанных в дебрях сайта.
Что собой представляет информация?
On-line публикацию статьи или статистические данные, полемику по горячему вопросу или интервью со звездой?
Давайте начнем с публикации в Internet книги. Книги рассчитаны на чтение от начала до конца (исключая справочники и словари) - мы к этому привыкли, поэтому и в Internet мы должны поместить ее таким образом, чтобы ее можно было читать от начала и до конца. Гипертекст позволяет организовать оглавление в виде удобных гиперссылок и перейти сразу к нужному разделу; но если человек читает все подряд, то в конце каждого раздела мы должны сделать ссылку на следующий, не заставляя человека пробираться назад в поисках оглавления. Кроме этого, в отличие от обычной книги, в которой то и дело появляются сноски, в HTML-документе такую сноску можно и должно оформить как переход к глоссарию или отдельной страничке, на которой эта сноска объясняется.
В случае опубликования какой-нибудь научной статьи или горячего материала появляются, как правило, отклики и рецензии. Их нужно оформлять как отдельные документы, но в конце рецензируемого документа нужно сделать ссылку на рецензию - это позволит читателю ознакомиться со всеми "за и против".
Теперь рассмотрим случай, когда у нас статистические данные. Как представляется статистика? Правильно - в виде таблиц. А теперь вопрос: Вы любите длиннющие таблицы, в которых можно найти все что угодно через каких-нибудь полчаса после начала исследования? Я - нет. Поэтому надо позаботиться о пользователе и дать ему ту информацию, которая ему интересна (и не обязательно публиковать в Internet всю базу данных). В случае, если информация не помещается в окне броузера и требует скроллирования по горизонтали (О ужас! Они сами смотрят на свои таблицы?), разделите одну большую таблицу на несколько маленьких и легко понятных, а затем свяжите их перекрестными ссылками (на то он и гипертекст Smile. А если у Вас все же получается длинная таблица, то визуально отделяйте, допустим, каждую пятую строку при помощи изменения цвета ячейки (все современные броузеры это поддерживают).
И в случае, если Ваша статья или таблица занимает больше пяти экранов, разместите в начале краткий список подразделов и от них локальные ссылки в пределах статьи.
Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design" http://www.cherry-design.spb.ru/
Информация - вот, что в первую очередь привлекает посетителя на Ваш сайт. Все остальное лишь помогает сориентироваться в ней и облегчает доступ. И с этой точки зрения, самый первый вопрос, который можно предъявить WEB-сайту - для чего ты, собственно, нужен? Что ты можешь сказать мне такого, чего я не знаю? Чем ты лучше других?
На какой круг людей рассчитан WEB-сайт?
Спросите себя об этом. На тинэйджеров или на профессоров-медиков? - от этого вопроса напрямую зависит и дизайн сайта, и та информация, которую следует размещать на сайте. Исходя из контингента предполагаемых посетителей попытайтесь встать на их точку зрения и расставьте пункты меню Вашего сайта в порядке привлекательности для посетителя (а не для web-мастера) - это может оказаться достаточно трудно, но можно уже после запуска сайта проверить статистику посещаемости разделов и, исходя из этого, скорректировать меню. В качестве примера можно привести, допустим, некий предполагаемый web-сайт некой предполагаемой фирмы Wink, специализирующейся на предоставлении финансовой информации. А теперь вопрос: какая самая интересная информация для пользователя? История фирмы? НЕТ. Штат сотрудников? НЕТ. Услуги? НЕ совсем. Курс доллара? ДА-ДА-ДА. И эта информация должна быть доступна на первой странице, а не в каких-то там меню, закопанных в дебрях сайта.
Что собой представляет информация?
On-line публикацию статьи или статистические данные, полемику по горячему вопросу или интервью со звездой?
Давайте начнем с публикации в Internet книги. Книги рассчитаны на чтение от начала до конца (исключая справочники и словари) - мы к этому привыкли, поэтому и в Internet мы должны поместить ее таким образом, чтобы ее можно было читать от начала и до конца. Гипертекст позволяет организовать оглавление в виде удобных гиперссылок и перейти сразу к нужному разделу; но если человек читает все подряд, то в конце каждого раздела мы должны сделать ссылку на следующий, не заставляя человека пробираться назад в поисках оглавления. Кроме этого, в отличие от обычной книги, в которой то и дело появляются сноски, в HTML-документе такую сноску можно и должно оформить как переход к глоссарию или отдельной страничке, на которой эта сноска объясняется.
В случае опубликования какой-нибудь научной статьи или горячего материала появляются, как правило, отклики и рецензии. Их нужно оформлять как отдельные документы, но в конце рецензируемого документа нужно сделать ссылку на рецензию - это позволит читателю ознакомиться со всеми "за и против".
Теперь рассмотрим случай, когда у нас статистические данные. Как представляется статистика? Правильно - в виде таблиц. А теперь вопрос: Вы любите длиннющие таблицы, в которых можно найти все что угодно через каких-нибудь полчаса после начала исследования? Я - нет. Поэтому надо позаботиться о пользователе и дать ему ту информацию, которая ему интересна (и не обязательно публиковать в Internet всю базу данных). В случае, если информация не помещается в окне броузера и требует скроллирования по горизонтали (О ужас! Они сами смотрят на свои таблицы?), разделите одну большую таблицу на несколько маленьких и легко понятных, а затем свяжите их перекрестными ссылками (на то он и гипертекст Smile. А если у Вас все же получается длинная таблица, то визуально отделяйте, допустим, каждую пятую строку при помощи изменения цвета ячейки (все современные броузеры это поддерживают).
И в случае, если Ваша статья или таблица занимает больше пяти экранов, разместите в начале краткий список подразделов и от них локальные ссылки в пределах статьи.
Рисунок сотен слов дороже нам
Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design" http://www.cherry-design.spb.ru/
Теперь поговорим о графике на Web-страничках, ведь именно благодаря ей WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.
Что особенного в графике, применяемой на web-страничках?
А то, что она имеет свои определенные ограничения, с которыми мы должны считаться и извлекать из этого выгоду.
Для использования в Web применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен, и не все броузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.
Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.
Формат GIF
• Поддерживает не более 256 цветов (меньше можно и часто нужно Smile;
• Использует палитру цветов;
• Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы практически не сжимаются);
• Поддерживает чересстрочную развертку;
• Является поточным форматом, т.е. показ картинки начинается во время перекачки;
• Позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;
• Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;
• Поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах Smile, осуществлять задержку между показами изображений и т.д.
А теперь немножко разъяснений - к чему эти свойства могут привести. Как Вы прочитали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если у Вас красивая фотография с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если Вы хотите все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.
А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.
Формат JPEG
• Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение;
• Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов;
• Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается.
•
Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.
Всю работу по обработке графики делайте в промежуточном формате
Ну вот, с форматами разобрались, теперь рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы Вам понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто - одновременно с оптимизацией размера файла).
Оптимизация графики
Для web-страниц очень важным является вопрос размера фотографии. Какого размера их делать? Не будут ли они слишком долго грузиться? При оптимизации можно уменьшить размер файла, но вряд ли стоит оптимизировать фотографию, не несущую смысловой нагрузки. Самый первый этап оптимизации - выделение в фотографии главного (с отбрасыванием всего остального) и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение, и в этом случае оно действительно будет иметь наименьший размер.
А с размерами фотографий нужно придерживаться определенного компромисса - не делайте их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не делайте их слишком огромными, чтобы время не растянулось в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией я понимаю фотографию размером примерно 250x300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все Ваши фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.
В этой статье приведены некоторые базовые сведения по применению графики на web-страницах. А в последующих статьях я опишу различные аспекты изготовления и оптимизации графики.
Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design" http://www.cherry-design.spb.ru/
Теперь поговорим о графике на Web-страничках, ведь именно благодаря ей WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.
Что особенного в графике, применяемой на web-страничках?
А то, что она имеет свои определенные ограничения, с которыми мы должны считаться и извлекать из этого выгоду.
Для использования в Web применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен, и не все броузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.
Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.
Формат GIF
• Поддерживает не более 256 цветов (меньше можно и часто нужно Smile;
• Использует палитру цветов;
• Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы практически не сжимаются);
• Поддерживает чересстрочную развертку;
• Является поточным форматом, т.е. показ картинки начинается во время перекачки;
• Позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;
• Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;
• Поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах Smile, осуществлять задержку между показами изображений и т.д.
А теперь немножко разъяснений - к чему эти свойства могут привести. Как Вы прочитали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод - если у Вас красивая фотография с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если Вы хотите все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.
А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.
Формат JPEG
• Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение;
• Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов;
• Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается.
•
Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.
Всю работу по обработке графики делайте в промежуточном формате
Ну вот, с форматами разобрались, теперь рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы Вам понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто - одновременно с оптимизацией размера файла).
Оптимизация графики
Для web-страниц очень важным является вопрос размера фотографии. Какого размера их делать? Не будут ли они слишком долго грузиться? При оптимизации можно уменьшить размер файла, но вряд ли стоит оптимизировать фотографию, не несущую смысловой нагрузки. Самый первый этап оптимизации - выделение в фотографии главного (с отбрасыванием всего остального) и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение, и в этом случае оно действительно будет иметь наименьший размер.
А с размерами фотографий нужно придерживаться определенного компромисса - не делайте их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не делайте их слишком огромными, чтобы время не растянулось в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией я понимаю фотографию размером примерно 250x300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все Ваши фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.
В этой статье приведены некоторые базовые сведения по применению графики на web-страницах. А в последующих статьях я опишу различные аспекты изготовления и оптимизации графики.
Удобство чтения контента увеличит посещаемость сайта (форума)
Значение удобства чтения веб-контента для сайта часто недооценивают. Существует много правил для дизайнеров, советов для SEO специалистов. Но это далеко не все. Хотя привлекательный дизайн и оптимизация сайта очень важны, есть и другие требования, о которых веб-маркетологи не должны забывать. Одним из таких требований является удобство чтения (читабельность).
Если Вы не работаете только над увеличением PageRank сайта клиента, то поисковая оптимизация - лишь одна из задач представления сайта. Хороший оптимизатор будет уделять внимание удобству чтения контента сайта и его внешнему виду, плохой – только методам увеличения PageRank.
Иногда поисковой оптимизацией сайта занимаются сами владельцы сайта. Некоторые могут посчитать это неплохим решением, т.к. есть возможность контролировать весь процесс. Но не стоит исключать помощь SEO консультанта. Хороший специалист поможет клиенту определить оптимальный баланс между оптимизацией контента под поисковые системы и сохранением удобства чтения для пользователей.
Почему нельзя максимально хорошо сделать и то, и другое? Дело в том, что для оптимизации сайта, удобство чтения контента играет незначительную роль. Существует несколько правил читабельности, соблюдая которые, можно не получить достаточно высокого PageRank. Но нужно признаться, что есть такие правила, соблюдая которые возможно сохранить читабельность контента и занять высокую позицию в рейтинге важности страницы, но их очень мало.
Удобство чтения контента и поисковое ранжирование
Определенного соотношения между удобством чтения контента сайта и его позицией нет. Но как уже упоминалось ранее, существует много правил читабельности, которые либо никак не повлияют на позицию сайта, либо повлияют, но негативно. Удобство чтения контента - одна из тех категорий, которая не поддается количественным измерениям. В этом и заключается сложность определения ее влияния на позицию сайта в поисковых системах.
Удобство чтения – одна из характеристик контента сайта. Пока сайты с читабельным контентом не являются залогом высокой позиции по ключевым словам, нужно думать о пользователях, которые непременно оценят такие сайты и захотят вернуться. Сложной дилеммой для специалистов SEO является, как оптимизировать сайт, не делая его при этом менее интересным для пользователей. Ведь иногда, кажется, что текст составлен машиной, а не написан человеком.
Google и другие поисковые системы запрещают подобное мошенничество. Если сайт содержит большое количество ключевых слов, то, вероятно, он наполнен ими искусственно, и к нему следует применить санкции.
Правила удобства чтения контента и поисковая оптимизация
Для дизайнеров правила читабельности – это что-то из области маркетинга. Маркетологи относят их больше к техническим средствам. По правде говоря, они не относятся ни к тому, ни к другому. Может сложиться впечатление, что это невостребованная область и ею никто не занимается. Но следовать этим правилам нужно!
Шрифт и Цвет. Эта категория является первостепенной, т.к. шрифт и цвет - основные элементы веб-страницы. Правда, поисковых роботов больше интересуют текст и гиперссылки, нежели размер шрифта, его цвет или фон. Но вероятность быть наказанным за слишком яркий шрифт и броский фон есть. Подобных проблем с дизайном помогут избежать специалисты в области SEO.
Больше – значит лучше! Ни для кого не секрет, что вес заголовка учитывается при вычислении релевантности. На вес влияют не только тэги, но и более крупный шрифт заголовка. Слова и предложения, написанные крупным шрифтом (жирный, курсив), становятся более заметными и для пользователя, и для поискового робота. Главное знать меру.
Белым по белому. Ни в коем случае не используйте шрифт того же цвета, что и фон. В этом нет ничего хорошего, пострадает и удобство чтения, и позиция сайта. Используя скрытый текст, можно погубить сайт – поисковая система его может быстро забанить. Прятать текст во внешних CSS - тоже не выход, т.к. Google и другие поисковые системы могут не проиндексировать CSS файлы.
Длинные предложения и большие абзацы. Читать с компьютера намного утомительнее, чем с печатных источников. Поэтому читатель не может долго концентрироваться на интерактивном тексте. Большую роль в этом играет форма текста, то, как он составлен. Длинные предложения и большие абзацы – враги веб-контента. Предложение, включающее больше 80 знаков, трудно прочесть, особенно, если абзац большой. Ведь пользователь не читает текст, он его сканирует, просматривает по горизонтали. По тем же причинам большие абзацы – тоже плохой выбор. Старайтесь использовать небольшие. Это может затруднить частое использование ключевых слов, но не даст потерять смысл абзаца.
Гиперссылки.После того, как текст принял нужный вид, необходимо расставить гиперссылки. Они отвечают требованиям поисковых систем и читабельности контента. Для больших статей можно использовать ссылку “Print”, позволяющую просмотреть и распечатать весь текст целиком. Будьте внимательны, т.к. для поисковых систем эта ссылка может означать дубликат текста, что непростительно для SEO. Чтобы избежать подобных проблем, добавьте соответствующую директиву в файл robots.txt, это подскажет поисковой системе не индексировать файл с копией текста для печати. Большое количество гиперссылок может негативно сказаться на читабельности контента, усложнив восприятие текста. А вот для поисковых систем все наоборот: чем больше гиперссылок, тем лучше.
Изображения. Если текст нужно представить на необычном фоне, то первое, что приходит в голову, - это преобразовать его в картинку, хотя удобство чтения контента может ухудшиться, а поиск сайта будет затруднен. Если не предоставить вразумительного описания в тегах, изображение может быть проигнорировано. Что касается удобства чтения, то использование картинок вместо текста – плохо. Главным образом потому, что после преобразования картинки в текст, шрифт будет выглядеть размытым. К тому же, картинки не будут масштабироваться с остальным текстом, если пользователь выберет разрешение, отличное от исходного.
Источник (seochat.com)
Статься была взята с сайта http://www.seonews.ru/
Значение удобства чтения веб-контента для сайта часто недооценивают. Существует много правил для дизайнеров, советов для SEO специалистов. Но это далеко не все. Хотя привлекательный дизайн и оптимизация сайта очень важны, есть и другие требования, о которых веб-маркетологи не должны забывать. Одним из таких требований является удобство чтения (читабельность).
Если Вы не работаете только над увеличением PageRank сайта клиента, то поисковая оптимизация - лишь одна из задач представления сайта. Хороший оптимизатор будет уделять внимание удобству чтения контента сайта и его внешнему виду, плохой – только методам увеличения PageRank.
Иногда поисковой оптимизацией сайта занимаются сами владельцы сайта. Некоторые могут посчитать это неплохим решением, т.к. есть возможность контролировать весь процесс. Но не стоит исключать помощь SEO консультанта. Хороший специалист поможет клиенту определить оптимальный баланс между оптимизацией контента под поисковые системы и сохранением удобства чтения для пользователей.
Почему нельзя максимально хорошо сделать и то, и другое? Дело в том, что для оптимизации сайта, удобство чтения контента играет незначительную роль. Существует несколько правил читабельности, соблюдая которые, можно не получить достаточно высокого PageRank. Но нужно признаться, что есть такие правила, соблюдая которые возможно сохранить читабельность контента и занять высокую позицию в рейтинге важности страницы, но их очень мало.
Удобство чтения контента и поисковое ранжирование
Определенного соотношения между удобством чтения контента сайта и его позицией нет. Но как уже упоминалось ранее, существует много правил читабельности, которые либо никак не повлияют на позицию сайта, либо повлияют, но негативно. Удобство чтения контента - одна из тех категорий, которая не поддается количественным измерениям. В этом и заключается сложность определения ее влияния на позицию сайта в поисковых системах.
Удобство чтения – одна из характеристик контента сайта. Пока сайты с читабельным контентом не являются залогом высокой позиции по ключевым словам, нужно думать о пользователях, которые непременно оценят такие сайты и захотят вернуться. Сложной дилеммой для специалистов SEO является, как оптимизировать сайт, не делая его при этом менее интересным для пользователей. Ведь иногда, кажется, что текст составлен машиной, а не написан человеком.
Google и другие поисковые системы запрещают подобное мошенничество. Если сайт содержит большое количество ключевых слов, то, вероятно, он наполнен ими искусственно, и к нему следует применить санкции.
Правила удобства чтения контента и поисковая оптимизация
Для дизайнеров правила читабельности – это что-то из области маркетинга. Маркетологи относят их больше к техническим средствам. По правде говоря, они не относятся ни к тому, ни к другому. Может сложиться впечатление, что это невостребованная область и ею никто не занимается. Но следовать этим правилам нужно!
Шрифт и Цвет. Эта категория является первостепенной, т.к. шрифт и цвет - основные элементы веб-страницы. Правда, поисковых роботов больше интересуют текст и гиперссылки, нежели размер шрифта, его цвет или фон. Но вероятность быть наказанным за слишком яркий шрифт и броский фон есть. Подобных проблем с дизайном помогут избежать специалисты в области SEO.
Больше – значит лучше! Ни для кого не секрет, что вес заголовка учитывается при вычислении релевантности. На вес влияют не только тэги, но и более крупный шрифт заголовка. Слова и предложения, написанные крупным шрифтом (жирный, курсив), становятся более заметными и для пользователя, и для поискового робота. Главное знать меру.
Белым по белому. Ни в коем случае не используйте шрифт того же цвета, что и фон. В этом нет ничего хорошего, пострадает и удобство чтения, и позиция сайта. Используя скрытый текст, можно погубить сайт – поисковая система его может быстро забанить. Прятать текст во внешних CSS - тоже не выход, т.к. Google и другие поисковые системы могут не проиндексировать CSS файлы.
Длинные предложения и большие абзацы. Читать с компьютера намного утомительнее, чем с печатных источников. Поэтому читатель не может долго концентрироваться на интерактивном тексте. Большую роль в этом играет форма текста, то, как он составлен. Длинные предложения и большие абзацы – враги веб-контента. Предложение, включающее больше 80 знаков, трудно прочесть, особенно, если абзац большой. Ведь пользователь не читает текст, он его сканирует, просматривает по горизонтали. По тем же причинам большие абзацы – тоже плохой выбор. Старайтесь использовать небольшие. Это может затруднить частое использование ключевых слов, но не даст потерять смысл абзаца.
Гиперссылки.После того, как текст принял нужный вид, необходимо расставить гиперссылки. Они отвечают требованиям поисковых систем и читабельности контента. Для больших статей можно использовать ссылку “Print”, позволяющую просмотреть и распечатать весь текст целиком. Будьте внимательны, т.к. для поисковых систем эта ссылка может означать дубликат текста, что непростительно для SEO. Чтобы избежать подобных проблем, добавьте соответствующую директиву в файл robots.txt, это подскажет поисковой системе не индексировать файл с копией текста для печати. Большое количество гиперссылок может негативно сказаться на читабельности контента, усложнив восприятие текста. А вот для поисковых систем все наоборот: чем больше гиперссылок, тем лучше.
Изображения. Если текст нужно представить на необычном фоне, то первое, что приходит в голову, - это преобразовать его в картинку, хотя удобство чтения контента может ухудшиться, а поиск сайта будет затруднен. Если не предоставить вразумительного описания в тегах, изображение может быть проигнорировано. Что касается удобства чтения, то использование картинок вместо текста – плохо. Главным образом потому, что после преобразования картинки в текст, шрифт будет выглядеть размытым. К тому же, картинки не будут масштабироваться с остальным текстом, если пользователь выберет разрешение, отличное от исходного.
Источник (seochat.com)
Статься была взята с сайта http://www.seonews.ru/