Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
Любой дизайнер по природе своей любопытен. Хотя бы в той части, что является предметом его деятельности. В частности, это относится к его работам: сделав сайт, ему интересно узнать - получилось или нет? В большей части это относиться к начинающим дизайнерам, ибо у профессионалов «проколы» случаются редко.
Обычно, чтобы оценить свой, зачастую построенный на чистом интузиазме, труд, новичок обращается на форумы о дизайне, где есть раздел, посвященный оценке сайтов другими пользователями. И, наверное, такой ход оправдан: создатель сайта при минимуме усилий со своей стороны получает максимум, зачастую достаточно компетентных комментариев. Однако, я советую, прежде чем выносить сайт на обсуждение, самому "заценить" свой сайт. Понимаю, это достаточно сложно сделать это объективно, все-таки свое, родное... Но, чтобы вам помочь, могу привести примерный список деталей, на которые я обращаю внимание при оценке сайта. На всякий случай, я приведу расширенный список, для «глубокой оценки», ведь лучше сделать сразу все в лучшем виде, чем потом выслушивать гневно-насмешливые высказывания в свой адрес. Сразу оговорюсь, что все ниже сказанное зыбко и шатко, и список неполон... Просто примите к сведению. В большинстве случаев, ошибки случаются в «технической части», например неполадки с версткой, или ошибки с юзабилити. Своевременно найдя, и исправив их можно создать качественный и удобный ресурс. Но, с другой стороны, если у вас совершенно нет дизайнерского таланта, то, даже сделав трижды грамотный сайт, но «запоров дизайнерскую часть» (подбор цветов, идея, стиль, исполнение графики), больше чем на «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 секунд после загрузки. Если вам удалось создать стильный, красивый, необычный сайт, и при этом не испортив все впечатление грубыми ошибками, то можете считать, что дизайн удался! Можно начинать заполнять сайт информацией, раскручивать, совершенствовать. Немного терпения - и ваш проект будет популярным! Удачи тебе, Дизайнер!
