• Main desktop@1x 3

  • Main mobile@1x 1

Topdialog title en


About the project

TopDialog is not just a website, it is an experienced team with a rich background (experience) forming high-level news content.

The team members reside in different cities of Russia but also have the headquarters in the historic center of St. Petersburg next to the Vosstaniya metro station.

Topdialog 12

Technical specifications

Designing a news aggregator based on the WordPress CMS that would handle 50 thousand visitors per day. For this purpose our developers designed a lightweight WordPress theme having the most native integrations.

The goal was to implement a site that would be easy to read news and articles for ordinary users, regardless of the browser or device from which they access the site.

The priority task for this project was also stable synchronization of the website with external services, such as:

Home page

We designed the home page taking into account the need to display such news previews as pictures of the day, news feed, article headings and interviews in one compact format.

  • Topdialog
  • Topdialog

First screen

There are no full-height sections on the home page. The list of the most relevant news in the form of thumbnails is a UX-oriented solution.

The first block “Picture of the Day” is a horizontal slider with news preview, where you can manually specify the necessary news through the admin panel, or set conditions for uploading articles that have been published, for example, over the last week or a couple of days.

It is also possible to pin particular news and fix it out of the slider within the same section.

  • Topdialog
  • Topdialog

Second screen

This block contains several independent elements.

  1. News feed in the form of a sidebar with scrolling in the left part of the section.

  2. Three equal blocks with preview of articles on the topics: education, city, weather.

  3. A block with a digest containing short reviews, annotations, and events by format.

  4. A dynamic ad module.

  • Topdialog
  • Topdialog

Final screen

This block contains previews of articles on the topics: interviews, politics, medicine and healthy lifestyle, society.

  • Topdialog
  • Topdialog

Mobile version

The news portal is fully functional on all mobile devices: tablets and phones and it has another important component for mobile traffic, AMP pages (Google) and Turbo pages (Yandex).

  • Topdialog
  • Topdialog
  • Topdialog


The news agency was founded by Maria Varzegova in 2010. The idea was to create an independent information bureau covering regional news via the Internet.

Topdialog 13

Final blocks

In the footer you can subscribe to the newsletter, get to know the legal data of the news agency and the metrics for resources to understand the traffic, look through the navigation bar partly duplicating links from the header.

Topdialog 14
Topdialog 15

Navigation bar

The idea behind the styling of the navigation bar in the header is that it is a fountain pen, and the logo is its tip which is used to write articles.

The green block contains the main navigation elements – links to the main categories, as well as icons that allow users to go to the agency’s news feed and landing pages of social networks.

On the secondary line of the navigation bar there is an information module showing dollar and euro quotes, the current weather in St. Petersburg and the most relevant section and interactive search throughout the site in the middle.

Topdialog 16
Topdialog 17


more than 120 000 visitors
per month
more than 170 000 site views
per month
62% of users from St. Petersburg
and Leningrad region
11.5% of users from Moscow
and Moscow region
28% of PCs and laptops
72% of smartphones and tablets
55% of the audience is female
45% of the audience is male

Published materials


  • Instructions
  • Reports
  • Notes and announcements
  • Interviews
  • Surveys
  • Articles
  • Banners
  • Press releases
  • Photo stories


  • How is that? (experiments)
  • Where is that? (about places and routes)
  • Simply about difficult (science pop)
  • I like my job (about jobs)
  • Situation (about complex social phenomena)
  • Saint Petersburg turns green (eco)
  • Street dialogues (surveys)

Социальные сети

  • VK.com
  • Instagram
  • Facebook
  • Twitter
  • Yandex.Zen


Photo report + article

The story of a woman from St. Petersburg improving the surrounding area



Guide to St. Petersburg fairs worth visiting for school students’ parents


Partner material

The conversation with a brewery owner about his business and beer culture


News feed

Most of the website visitors (80%) use mobile devices. The news feed is not loaded with design elements for making it easy to read the news.

It looks the same both on phones, tablets and personal computers. The publication is dated to the minute.

Topdialog 18

About agency

The page stylized with corporate colours is dedicated to the TopDialog project description and all the necessary contact and legal information.for demonstrating potential customers real agency workers.

This page also has an additional navigation bar linking to “Our speakers”, “Our projects”, “Social networks”, “Advertising in TopDialog”, “Contacts” pages.

Topdialog 19

Catalogue or articles

This page contains previews of articles with pictures, category tags, text titles and publication dates in a classic 3-column layout. The content is loaded by means of Ajax loader when you click on “load more”.

Topdialog 20

Article page

This template is implemented taking into account synchronisation with the Gutenberg editor, which has quite extensive functionality.

The content orientation is centered, without left or right sidebars, which makes it as convenient as possible to explore the information without being distracted.

Topdialog 21

End of article page

At the end of an article page, 2 recommendation blocks have been made, where it is possible to share news in social networks and telegram messenger, as well as read the news on Yandex services.

The second block is a review with thumbnails and interactive form for subscribing to the newsletter and a link to a separate page “Offer news”.

Regarding the mailing list from the site, a functionality is implemented that allows to automatically generate a newsletter to subscribers with a certain time interval.

  • Topdialog
  • Topdialog

Target audience

  • Engaged readers

    — who are a paying audience and involved in the process of reading the news. It is important to keep users at least 3 minutes on the website.

  • Advertisers

  • Customers who are interested in mass promotion of a product or service

Advertising formats

Partner materials within one of the editorial’s special projects
Media partner publications in constantly updated sections of the website
Developing a unique personal partner project with the introduction of new editorial format
Conducting partner interactive projects (surveys, tests, games, online broadcasts, etc.)
Experts commenting on top news, analytical materials, infographics, photo projects, etc.)
Creating a series of partner publications in various sections of the website with logical references to each other

Advertising spaces

  • Topdialog
  • Topdialog
  • Topdialog
  • Topdialog
  • Topdialog

Advertising opportunities

Banner advertising and portal branding

  • event announcement
  • formation of buying intention
  • maximum reach of the target audience
  • communication with the official website
  • increasing brand awareness

Native advertising

  • brand image formation
  • information field creation
  • deliberate action (purchase)
  • personal PR, personal brand promotion
  • maximum involvement in communication with the brand

Native advertising

  • Implemented using any existing formats of SP Dialog or with the development and implementation of unique special projects.

  • Created by professional journalists taking into account trends of the information field and real preferences of the audience.

  • Allows you to overcome “banner blindness”, which prevents users from responding positively to ads.

  • Not limited by technical requirements, time frames, sizes and designers’ creativity.

  • Gives an opportunity to tell about all the features and benefits of a product, service or brand.

  • Natively integrated into the overall style of the website.

Website styles

  • #0A7354
  • #000000
  • #333333

Website elements

Topdialog 22
Topdialog 23


  • Headings and normal text styles


    • Aa
    • Bb
    • Cc
    • Dd
    • Ee
    • Ff
    • Gg
    • Hh
    • Ii
    • Jj
    • Kk
    • Ll
    • Mm
    • Nn
    • Oo
    • Pp
    • Qq
    • Rr
    • Ss
    • Tt
    • Uu
    • Vv
    • Ww
    • Xx
    • Yy
    • Zz

We implement projects of
any complexity

We are ready to discuss your project, create a strategy for its implementation and form an individual offer. Have some questions? Just leave a request and we will contact you soon.

Get a free consultation View our portfolio

Our recent works

OnePix team always thoroughly study the details of each project. We do our best to provide the clients with high quality service and meet the deadlines. Check out our recent projects. We are pleased to work with you and answer all the questions.

This website uses cookies.