Дизайн верхней части сайта основной страницы центра поддержки
Задача состоит в следующем: разработать дизайн/концепцию только верхней части/верхнего блока сайта поддержки (above the fold content).
Верхняя часть должна включать следующие элементы, эстетично предоставленные в плане дизайна. Необходимо продумать дизайн каждого из нижеследующих элементов:
- (0) Не нужно думать о логотипе, он уже имеется.
- (1) Верхняя узкая строчка (важное объявление), уведомляющая пользователей о какой-то общей проблеме/ошибке в системе. Пример сообщения: "Important Announcement: Due to technical maintenance activities "Company name" accounts may not work 4-6pm PST". Данный элемент сайта не постоянен, предполагается его появление изредка, только в случае тех. ошибки, которая исправляется в течении определенного времени.
- (2) Заголовок - "Customer empowerment support centre"
Подзаголовок - "Answer today is better than one tomorrow"
- (3) Строка поиска - Search Box (Важнейший элемент верхней части сайта, пользователи должны сосредоточить свое внимание на данном элементе как только пришли на страницу. Так как задача состоит в том, чтобы они смогли сами найти ответ на свой вопрос. Предполагается продвинутый поисковый движок.
- (4) Популярные запросы (чуть ниже строки поиска, вернее прямо под ней).
Примеры выражений: "how to refund", "how to cancel", "can't login" etc... (Пример:http://support.twitter.com)
- (5) 4 главных категории:
"Troubleshooting" (тех. заминки, ошибки при сбросе пароля, баги и прочее)
"Payments & Orders" (платежи и заказы)
"Accounts & Learning" (аккаунт, профайл)
"Products" (продукты и курсы)
Внимание: Если разделить web страницу на секции/блоки, повторюсь, что верхняя секция должна включать строку поиска и 4 категории. Это основные элементы на которые должно отводиться внимание пользователя.
Когда пользователь щелкает на одну из 4 категорий, то предполагается что он увидит ниже контент относящийся к данной категории по смыслу без перезагрузки страницы. Категории должны быть интуитивно понятными для пользователя, но и наверно не занимать много места, так как они будут оставаться видимыми (будет возможность переключения между ними без перезагрузки страницы) когда пользователь будет просматривать контент относящийся к каждой из них ниже. Контент раскроется/появится на этой же странице, только ниже. Пользователь должен иметь возможность легко переключаться между категориями и категории должны быть интуитивно понятными со стороны дизайна.
Контентом будет служить список тем, относящихся к данному разделу/категории, на которую нажал пользователь.
Список категории "troubleshooting" смотрите здесь (все на английском языке):
List of topics for "troubleshooting" category as an example:
- Cannot log in to my account
- Password Issues: Can't Change or login afterwards
- Didn't receive a program after purchase
- Cannot open my program
- Program disappeared from my account
- etc...
Хочется обратить внимание, что при исполнении дизайна 4 категорий, необходимо продумать 2 главных действия: 1. Наведение на категорию (интуитивно должно показывать, что категория в принципе кликабельна) 2. Клик, щелчок на категорию (показать режим нахождения в данной категории - selected state). Обращаю внимание, что когда пользователь щелкает по категории, категория должна быть выделена, тем самым показывая что пользователь сейчас под ней. При этом, все еще есть возможность с легкостью переключиться в другую категорию в любое время.
Требования к стилистике и дизайну: Основные цвета:#1989ce, #116598, #1a1b1c, #333333, #ffce00. Можете добавлять по усмотрению, главное чтобы это было стильно.
Категории можно показать по-разному, вы свободны поиграть с структурой. Может это будут 4 блока по горизонтали, может разместить их по 2 рядами. Можно показать их иконками. Вообщем, предложите идею.
Данная верхняя секция сайта должна снимать стресс с пользователя. Тут можно подумать о фоновом изображении. Дизайн должен быть минималистичным, плоским, но в то же время креативным и интересным, светлым. Постарайтесь использовать тренды 2015-2916 годов в дизайне.
Пробудите позитивные эмоции у пользователя, но помните, что он пришел на сайт поддкржки, чтобы решить проблему. Не используйте изъезженные и банальные варианты, как это делается на сайте https://support.apple.com/ (у них в качестве фонового изображения используется группа поддержки сидящая за столом). В нашем случае не интересно. Найдите немного экстраординарный путь предоставления шапки сайта. В качестве фона можно использовать следующее направление:
природа (океан, лес, горы и прочее), дети (всегда позитивные эмоции), уверенная женщина.
Может быть, если это будет человек или ребенок, взгляд должен быть направлен на строку поиска.
В качестве фона также может служить видео.
Привожу примеры видео для вдохновления:
http://www.shutterstock.com/video/clip-16600531-stock-footage-mystic-foggy-sunset-forest-dolly-movement-toned-footage.html?src=rel/2618195:1/3p
http://www.shutterstock.com/video/clip-6253433-stock-footage-father-and-son-running-on-jetty.html?src=/DKXr1dN_8VVPP6uqHmi2-A:2:61/3p
http://www.shutterstock.com/video/clip-8017804-stock-footage-silhouette-of-forest-trees-at-sunset-mystical-light-beam-effect-background.html?src=rel/2618195:3
http://www.shutterstock.com/video/clip-5432333-stock-footage-aerial-shot-of-a-tropical-rainforest.html?src=/dNd9qSKxcjDm8k32dysgxQ:2:11/3p
http://www.shutterstock.com/video/clip-17119159-stock-footage-aerial-view-over-pines-tree-forest-of-a-mist-covered-whanganui-river-new-zealand.html?src=/dNd9qSKxcjDm8k32dysgxQ:2:29/3p