Дизайн новостного сайта с личным кабинетом

Задача

Нашей задачей стало «освежить» дизайн сайта и плечом к плечу с разработчиком доработать функционал сайта (его внешний вид), исходя из технического задания владельца сайта.

Процесс работы:

1. Изучили ТЗ

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

2. Выполнили прототипы

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

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

Благодаря вовлеченности клиента в проект мы быстро внесли правки и согласовали все прототипы.

3. Приступили к дизайну

Так выглядел дизайн сайта до переделки.

Дизайн по желанию клиента мы сделали более современным, с использованием синего и оранжевого оттенков как акцентных.

Разработали дизайн опроса. Клиент захотел, чтобы опрос был универсальным и его можно было размещать на разных страницах сайта.

Уделили внимание поиску на сайте. Выполнили внешний вид для десктопов и мобильных телефонов.

Нарисовали страницы «Все новости» и «Все статьи».

Выполнили страницу со статьей и новостью.

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

Следующую задачу, которую выполнили — многоуровневые комментарии. Нам нужно было отобразить комментарий, которому можно поставить оценку (как положительную, так и отрицательную) и общая оценка будет отображаться рядом с текстом комментария.

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

Выполнили дизайн квиза.

Далее выполнили страницу-шаблон для размещения биографий артистов и информации о телевизионных проектах.

И карточки артистов для размещения на странице о телевизионных проектах.

Приступили к выполнению дизайна личного кабинета.

Клиент хотел, чтобы у авторизованных пользователей была возможность участвовать в опросах и писать комментарии. За выполнение этих действий у них собирался рейтинг и ранг. Рейтинг отображался в виде числового значения, например, 8.1. А ранг присваивался в зависимости от собранного рейтинга от «Новичка» до «Бывалого».

Мы отрисовали страницу «Настройки», где будут данные пользователя, возможность сменить пароль, заполнить информацию о себе и связать аккаунт со своим аккаунтом во Вконтакте или Яндекс.

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

4. Нарисовали паттерны

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

5. Собрали UI Kit

Последним этапом нашей работы стал ui kit, который мы выполнили для разработчика.

Итоги:

Мы отдали все дизайн-макеты (десктоп+телефон), выполненные в Figma, разработчику. Клиент получил современный редизайн сайта, выполненный с учётом всех пожеланий.