Различия отображения в разных браузерах

Подведя итог можно заметить основные отличия в поведение браузеров:

1) Корректно отображается шапка только в браузере Opera

2) Низ сайта отображается корректно только в Google Chrome

3) По разному отображается серая граница верхнего горизонтального меню

4) В браузере Internet Explorer на разрешении 1024 на 768 ширина меню каталога слишком мала, из-за чего оно сильно растянулось по вертикали, контакты перестали быть видны на экране.

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

Цветовое восприятие

ñ Сайт выполнен на белом фоне;

ñ графическое оформление красных и оранжевых оттенков;

ñ цвет заголовков: красный;

ñ цвет текста серый или тёмно-серый;

ñ цвет ссылок синий (кроме ссылок в меню и нижней части сайта).

Список используемых цветов по степени влияния:

1. Красный и его оттенки

2. Оранжевый

3. Серый

4. Синий

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

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

Общие рекомендации: сместить цветовой акцент с шапки уменьшив площадь красного и оранжевых цветов; добавить акцентов в области основного содержимого сайта; уменьшить агрессивность восприятия сайта путем смещения красных оттенков к светло-красным и тёмно-бордовым.

Дизайн

Дизайн сайта можно охарактеризовать как минималистичный, информационный. Общее восприятие качество дизайна: среднее.

Из недостатков можно отметить наличие выбивающейся из общего дизайна красной полосы слева вверху и аналогичной серой полосы внизу. Продолжение нижней части сайта в правом углу вносит ненужную асимметрию.

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

P Изображение логотипа компании размыто, чёткая геометрия логотипа требует отсутствия размытости отображения. Надпись «группа компаний» выполнена ввиде изображения, на тексте видно алиазинг - «лесенку» пикселей. Композиционное расположение и цвет надписи «Оптовые и розничные поставки пожарного оборудования» кажутся довольно спорными.

Оформление сайта привлекает к себе внимание, отвлекая от основного содержимого.

Заголовки «продукция» и «спецпредложения» находятся на разном горизонтальном уровне.

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

Навигация по сайту

На сайте присутствует 2 навигационных меню: по сайту и по каталогу. Как было отмечено ранее, страницы сайта находятся на 2-м уровне вложенности, страницы каталога на 2-м - 4-м уровнях. Структуру сайта можно считать простой.

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

P Необходимо выделять активный пункт меню где сейчас находится пользователь как для верхнего меню, так и для каталога.

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

P Страница сайта не должна ссылаться на саму себя: пункт меню где находится пользователь не должен являться ссылкой.

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

Необходимости создания карты сайта нет.

Информационная сетка

Рассмотрим сетку сайта. Чёрным прямоугольником выделена область просмотра при разрешении 1024 на 768.

1. Коричневый — меню каталога;

2. Голубой — контактная информация;

3. Синий — основной контент;

4. Зеленый — спецпредложения;

5. Фиолетовый — нижняя часть сайта.

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

Масштабирование

Рассмотрим отображение проекта на экране с разрешением 1600 на 900 (широкоформатный).

OK Вёрстка сайта является тянущейся, на широком экране сайт отображается корректно, блок контактов попадает в видимую область экрана.

P На данном разрешении и данном размере шрифтов текстовая информация в зоне основного контента сильно растянута по ширине и трудна для восприятия.

P При увеличении разрешения сайт продолжает масштабироваться по ширине, необходимо задать максимальную ширину под которую тянется сайт.