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

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

Немного скриншотов старой версии сайта:

Так и мы всегда приступаем к работе именно с него. Мы могли бы наложить просто красивый UI на имеющийся каркас сайта, но мы так не работаем. Нам интересней проработать удобство использования сервисом, чтобы получился максимально полезный продукт. Не это ли самое важное в медиа, куда заходят тысячи пользователей ежедневно?

В прототипе мы продумываем сценарий взаимодействия юзера с сайтом и всю структуру подачи контента. Работу мы всегда делаем итерациями. Сделали первоначальный прототип — согласовали — ушли дорабатывать — ещё раз показали. И так несколько кругов, пока не получится наилучший результат.

Сначала мы продумали сетку, которой будут подчиняться все страницы на сайте. Разбили весь контент на несколько колонок. Синяя — навигационная колонка, а красные — контентные. С понятной и удобной сеткой будет комфортно разрабатывать продукт вширь, если понадобится добавить к текущим страницам какие-то дополнительные.

Полностью переделали Главную страницу. Сделали интересней выдачу статей, а превью теперь имеют разный вид в зависимости от степени важности и популярности новости. Запроектировали места под рекламные блоки, добавили удобные возможности подписаться и открыть соцсети проекта.

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

В карусели некоторые макеты прототипа. Весь прототип Главной страницы можно посмотреть здесь.

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

В дизайне мы опирались на фирменный стиль iGuides на конкурентный анализ и на стандарты в сфере цифровых медиа. Здесь важно было верно расставить акценты и сохранить удобство восприятия контента. При этом хотелось сделать сайт более современным, технологичным, дружелюбным и узнаваемым. Макетов вышло много, включая мобильные версии всех страниц. В карусели некоторые из них.

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

Отдельный кайф для нас в таких больших проектах — это возможность привести все к идеальному порядку в макетах. Собрать всё на компонентах, продумать ui-kit, прописать все стили. Всё это делает счастливым нашего внутреннего перфекциониста.