Пользовательское взаимодействие
Прежде чем приступить к дизайну мы начали с построения пользовательского взаимодействия. На сайт канала ходят тысячи пользователей с разными целевыми запросами и уровнем владения компьютером, а сам сайт содержит сотни страниц и десятки разделов, поэтому, прежде всего мы сосредоточились на понятной навигации и «дружественном» интерфейсе. Чтобы решить эту проблему, вначале, необходимо было детально проработать информационную архитектуру — каркас всех будущих страниц сайта, то где будут располагаться различные элементы интерфейса (текст, картинки, ссылки и т.д.) и насколько «удобно» они будут восприниматься пользователям. Далее мы занялись составлением пользовательских сценариев — паттернов поведения людей на сайте. Соединив их с информационной архитектурой, мы получили карту экранных переходов — визуальную схему связей всех страниц сайта — на основе которой уже создали продуманную навигацию. Затем мы преступили к проектированию динамических (полноценные и «кликабельные» HTML-страницы) прототипов экранов, и уже только после этого перешли к стадии дизайна.
Новый сайт — новый адаптивный дизайн
Возрастная аудитория телеканала довольно неоднородна: от молодых и «продвинутых», до пенсионеров. Люди будут просматривать сайт на различных устройствах — кто-то на большом экране монитора, кто-то на планшете или ноутбуке, а кто-то, вообще, на своем смартфоне. Поэтому было принято логичное решение сделать один адаптивный сайта для всех устройств, отказавшись от отдельной мобильной версии, чтобы оптимизировать временные, ресурсные и финансовые затраты.
Мобильная версия — главная страница
Пример страницы программы на планшете и смартфоне
Стратегия
Разработана информационная архитектура сайта и основные элементы навигации
Проектирование
Спроектированы динамические прототипы — они «кликабельны» и имеют HTML верстку
Дизайн
Сделаны концепты и дизайн всех типовых разделов, look and feel схема и UI-kit интерфейса