ВАРИАНТЫ ДИЗАЙНА САЙТА
Вариант 1
Данный макет сайта был выполнен в формате 1024* пикселей по горизонтали с фиксированной шириной. Использование такого формата позволяет корректно отображать сайт, как на настольных компьютерах, так и на экранах ноутбуков (нетбуков) компактного размера, а также планшетных компьютерах. Цветовая гамма оформления сайта базируется на основных цветовых оттенках логотипа компании. Навигационные элементы и меню основных рубрик выполнены с учетом требований юзабилити и эргономики для планшетных устройств - все элементы легко нажимаются и хорошо видны при любом разрешение экрана. Область контента максимальна, что позволяет корректно отображать большие широкоформатные данные (в том числе табличные данные) без дополнительных действий со стороны пользователя. Таким образом, удается избежать дополнительных кликов для увеличения графика или табличных данных. Контент размещается на белом фоне, что дает максимальную контрастность восприятия информации и ее корректное отображение при распечатывании на черно-белых принтерах. Макет адоптирован для быстрой загрузки даже при использовании неширокоформатного интернет-соединения (при использовании мобильного интернета). В некоторых рубриках основного меню планируется активация выпадающего подменю. Причем выпадающее подменю будет располагаться только на имиджевой области с иллюстрациями (это нейтральный, не функциональный элемент сайта). В качестве примера на макете показана активация подрубрик в рубрике «ПОЛОЖЕНИЕ В ОТРАСЛИ». В нижней части сайта дается дубликат основного меню, кнопки загрузки iPad-приложения и PDF-файл. Также допустимо размещение блока дополнительного функционала в этой области сайта.
Вариант 2
Данный макет был выполнен в формате экрана 1024 пикселей по горизонтали с фиксированной шириной. Такой размер позволяет контролировать верстку элементов сайта (текста и графиков) и гарантировать корректное отображение информации на ресурсе. Вертикальная компоновка меню является интуитивно понятной для пользователей, что делает навигацию по сайту простой и логичной. Однако, такое расположение сокращает размер, отведенный под контент, и для некоторых графиков и табличных данных пользователю придется использовать режим увеличения, что потребует дополнительных кликов для активации «лупы» («увеличить график»). Для наглядности в анимированном примере («Вариант А») дано отображение двух графиков. При взгляде на них становится очевидным, что данные в нижнем графике, который растянут на ширину страницы, читаются легче. На макете также показан блок доп. функционала, элементы которого пока что условны и требует доп. обсуждения.
Вариант 3
Верхняя шапка сайта имеет «резиновую» ширину и растягивается по параметрам экрана пользователя. Имиджевый блок с иллюстрациями на внутренних страницах предположительно будет иметь более компактный вид (ужат по высоте).
Все указанные выше макеты оформления сайта представлены на данный момент в виде растровых изображений и не являются сверстанными html/css страницами. В связи с этим характер отображения шрифтов в текстовых блоках после верстки макетов в html/css формат будет частично отличаться от шрифтов в данных растровых изображениях.
АНИМАЦИЯ
Пример анимации в верхней шапке
Выборочное использование небольших анимированных вставок (по технологии HTML5) в основных рубриках может усилить позитивный эффект восприятия визуальной составляющей сайта. При этом, конечно же, анимационный блок не несет смысловой нагрузки и является условно вторичным или даже лишним с точки зрения информативности. На типовых внутренних страницах планируется использование статичных имиджевых блоков, чтобы внимание пользователя было сконцентрировано лишь на основном информационном контенте.
В примерах для удобства просмотра анимация зациклена и постоянно повторяется.
(*) Прим.: по данным статистики портала ***** основными разрешениями экрана пользователей являются:
· 1366x768
· 1280x1024
· 1024x768
