О том, на какие детали стоит обращать внимание при создании дизайна веб-сайта, написано много, при этом мало кто пишет, какие аспекты должны быть учтены при окончательной проверке. Сегодня мне хотелось бы поделиться с вами материалом, который был написан, основываясь на книге Терри Фельке-Морриса «Большая книга веб-дизайна».
Вполне возможно, что многие из вас читали данную литературу, но есть и те, кто слышит впервые об этой книге. К тому же в своей статье я попыталась изложить прочитанное наиболее понятным языком для простого обывателя, чтоб даже заказчик, не являющийся профессионалом, смог проверить и оценить качество сданного проекта.
Итак, основные пункты, по которым нужно проводить оценку состояния веб-сайта – это макет страницы, браузерная совместимость, навигация, графика и цвета, контент мультимедиа, представление содержания веб-страницы, работоспособность, а так же доступность сайта. Но давайте обо всем более подробно.
Макет
1. Начиная проверку макета страницы, в первую очередь нужно проверить была ли учтена целевая аудитория ресурса.
2. Следующим пунктом, мы проверяем идентичность и схожесть логотипа, заголовков и всех других элементов навигации.
3. Веб-страница должна иметь информативный заголовок, в котором отображается название компании или сайта, а так же должны быть указаны все необходимые контактные данные и копирайт внизу страницы.
4. Основные компоненты сайта, такие как графика, текст и пробелы между ними должны быть сбалансированными, а сама страница не нуждается в горизонтальной прокрутке, если расширение экрана пользователя составляет 1024х768 или больше.
5. Текст хорошо контрастирует с фоном, а при открытии сайта, на главной странице содержится основная информация, не требующая прокрутки вниз.
6. Заголовок и навигация должны занимать максимум треть окна пользовательского браузера (разрешение 1024х768).
7. Максимальное время загрузки главной страницы составляет 10 секунд.
Браузерная совместимость
После того, как вы проверили макет, следующим пунктом в вашем списке должна идти проверка на совместимость сайта со всеми браузерами:
1. Internet Explorer, начиная от 8-й версии и позже;
2. Google Chrome;
3. Opera – 10-я версия и позднее;
4. Firefox – 4-я версия и позднее;
5. Safari;
6. Совместимость с мобильными устройствами .
Навигация сайта
1. В первую очередь проверяется четкость и единообразность навигационных элементов, а так же легкость в использовании целевой аудиторией.
2. Если в качестве навигации вверху страницы вы выбрали изображения, динамические элементы или анимацию, то необходимо разместить так же и текстовые элементы навигации внизу веб-страницы.
3. Все гиперссылки на сайте работают правильно.
Графика и цвета
1.Выбирая для веб-страницы цвета, которые будут использованы, как для фона, так и для текста, их количество не должно превышать четыре. Кроме того все цвета должны использоваться одинаково.
2. Цветовая схема, используемая при создании сайта, должна способствовать воспринимаемости содержимого сайта, а так же улучшать его внешний вид, но при этом не отвлекать пользователя от контента.
3. Графика должна быть максимально оптимизирована, чтобы не создавать проблемы при загрузке сайта, в частности не замедлять ее.
4. Все элементы image веб-страницы должны иметь атрибут alt.
5. При наличии анимированных изображений на сайте, они не должны отвлекать от содержимого страницы и не повторятся слишком долго.
Контент мультимедиа
1. Любая анимация, видео или аудио использованы с определенной целью и не отвлекают внимание пользователя от содержимого сайта.
2. Все видео- и аудио-элементы имеют свои заголовки.
3. Для файлов мультимедиа предусмотрены действующие ссылки на устройства их воспроизведения.
Представление содержания страницы
1. На странице используются наиболее распространенные шрифты, способные беспроблемно восприниматься всеми браузерами. Как правило, это Times New Roman и Arial.
2. Шрифты, их размеры, а так же цветовая схема использована одинаково для более легкого восприятия.
3. Весь контент на сайте является информативным, а главное – организован идентично.
4. Для поиска нужной информации на сайте – нет нужды делать много щелчков.
5. Корректно указаны даты копирайта и последнего обновления информации на странице.
6. Ссылки на открытые страницы выделяются другим цветом, отличающимся от цвета ссылок, страницы которых не открыты.
Работоспособность веб-страницы
1. Все внешние и внутренние гиперссылки на веб-сайте работают.
2. Функции форм заполнения и обратной связи работают, как требуется.
3. На странице отсутствуют какие-либо ошибки JavaScript.
Доступность
1. Везде, где есть необходимость, используются атрибуты, способные улучшить доступность страницы – alt, title, longdesc. Кроме этого в нужных местах имеется вся необходимая краткая информация в виде текста.
2. Если на сайте используются фреймы, то значимый текст и заголовки фреймов должны быть размещены вне фреймов.
3. Атрибуты HTML-элементов xml:lang и lang указывают язык веб-страницы, чтобы тем самым помочь программам экранного доступа.
Вот в принципе и все основные моменты, на которые стоит обратить внимание, может получилось у меня не совсем профессионально со стороны дизайна, зато думаю, что вполне понятно.
0 комментариев