Дизайн интернет-издания «Комсомольская правда»

Главное о кейсе

1. Сделали блочную систему контента -> пользователям удобнее ориентироваться в сайте.
2. Создали дизайн-конструктор для редакторов -> журналисты могут сами формировать главную страницу в зависимости от новостей и их важности.
3. Переработали баннерные места -> отныне вся реклама — на подложках, не раздвигает контент и самое главное — не бесит пользователей.
4. Расставили акценты на новых/значимых блоках, чтобы они были заметнее (видео, фото, колумнисты).
5. Сделали удобный поиск и фильтрацию.
6. Переработали внешний вид меню -> находить интересующие разделы и контент стало намного проще.

И, конечно, нарисовали адаптивный дизайн, потому что почти 75% читателей приходят с мобильных телефонов.

Для редакции мы разработали подробный UI-кит, который содержит более сотни макетов и рекомендаций: шрифты, отступы, размеры блоков или картинок, цветовую палитру, рекомендуемое размещение баннеров.

Behance: https://www.behance.net/gallery/101737771/Komsomolskaya-Pravda
Кейс на сайте: https://www.agima.ru/projects/kp/
***

1. We have made a block content system -> now it is more convenient for users to navigate the website.
2. We created a design kit for editors -> now journalists can create their own home page, taking into account the nature of the pieces of news and their importance.
3. We have reworked banner placeholders -> from now on, all ads are placed on the intermediate layer, do not push the content apart, and, most importantly, do not annoy users.
4. We have highlighted the new and most significant blocks to make them more visible (video, photo, columnists).
5. We have provided a convenient search and filtering.
6. We have redesigned the appearance of the menu -> now it is much easier to find the sections and content of interest.

And, of course, we created an adaptive design, because almost 75% of the readers use mobile phones.

For the editorial board, we have developed a detailed UI kit with over a hundred layouts and recommendations: fonts, margins, block or image sizes, color palette, and recommendations for banner placement.

Бизнес-задача и ее решение

Для таких масштабных проектов должен быть особый подход и, конечно, дизайн.
Для начала мы провели исследование, которое было разделено на несколько частей:
— Интервьюирование бизнеса и редакторов.
Так, мы выяснили, что одна из основных задач – создание баннерных мест и привлечение рекламодателей. А редактором не хватает возможности выделить контент привлечь бОльшее внимание к новостям-молниям.

—Опрос читателей.
Мы поняли, что пользователям нравятся, а какие моменты раздражают, проведя опрос на сайт и собрав ответы более 10 000 респондентов.

Так, мы создали прототипы, которые легли в основу UI-дизайна.
****
Therefore, such projects require a special approach and, of course, design.
To begin with, we conducted a study that was divided into several parts:
1. Interviewing business users and editors.
Thus, we found out that one of the main tasks was to create banner placeholders and attract advertisers. In their turn, editors lack the ability to highlight certain content and draw more attention to the breaking news.

2. Reader survey.
We realized what users like and what annoys them by conducting a survey on the website and collecting responses from more than 10,000 respondents.

So, we created prototypes as the basis of UI design.

Прочая информация о кейсе

Комсомольская правда — народная газета, которую, по данным Google Analytics, читают более 57 млн. человек от 18 до 67 лет.
***
Komsomolskaya Pravda is a national newspaper, which, according to Google Analytics, is regularly read by more than 57 million people aged 18 to 67.

Скриншоты