International Gas Forum | Clean Web UI & WebGL

Лучшее

Интерфейсы

В лучшем на Dprofile








About project:


TNF is a key platform for the Russian oil and gas industry. It unites equipment

and service manufacturers, subsoil users, as well as public and private structures

that determine the country's industrial and technological policy.


Every year, TNF hosts large-scale events with the participation of top government officials and heads of the largest companies in the industry. This is an important

business environment, so the digital representation must correspond to the level -

be strict, professional and, above all, understandable for all participants.


Project website - oilgasforum.ru


Client: TNF
Studio: CHIPSA













Concept:

The basis of the new concept was the idea of ​​energy, dynamics and constant movement. It reflected the active and progressive nature of the forum, where ideas and experiences are constantly exchanged. To emphasize this, we used dynamic gradients for the background and smooth color transitions between blocks, which became a metaphor for endless movement.


We also played with the existing TNF logo, which is based on a dot - we thought that it could symbolize that very impulse of energy with which everything begins. Therefore, we integrated it into many interface elements, such as buttons, navigation and links.







International Gas Forum | Clean Web UI & WebGL — Изображение №1 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №2 — Интерфейсы, Анимация на Dprofile






TNF ecosystem:

We divided the site into two categories. The first is the forum, the central element

of the entire system, and the second is the TNF ecosystem. It was important to separate the forum, because the company holds many other events throughout the year that, although part of the ecosystem, are not related to the forum itself.






International Gas Forum | Clean Web UI & WebGL — Изображение №3 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №4 — Интерфейсы, Анимация на Dprofile







Brand book:

The client already had basic elements of the corporate identity — the font and logo.

Our task was not to develop the branding from scratch, but to adapt and integrate

the existing elements into the new visual system of the project.


We reorganized the structure of the brand book, refined the design, and supplemented

it with the missing elements, maintaining continuity with the corporate style.






​​​​​​​

International Gas Forum | Clean Web UI & WebGL — Изображение №5 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №6 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №7 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №8 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №9 — Интерфейсы, Анимация на Dprofile






Analysis and solution:

We started with an analysis of the target audience. Most users are older people accustomed to the current structure of the website. This meant that it was necessary

to maintain the familiar principles of navigation and page layout. In addition, most visitors access the site from mobile devices, so we paid special attention to adaptability —

the site should be as convenient on a smartphone as it is on a desktop.


The greatest focus was placed on refining the structure. The website was overloaded: optimization and improvement of navigation were required so that users could quickly find the information they were looking for. We eliminated unnecessary content and simplified the interface through uniform blocks and adherence to the overall visual style.






International Gas Forum | Clean Web UI & WebGL — Изображение №10 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №11 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №12 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №13 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №14 — Интерфейсы, Анимация на Dprofile







3D configurator:

A 3D configurator was developed for TNF, allowing users to create individual exhibition stands tailored to their needs. The tool provides full control over the design process, providing flexible parameter settings and visual clarity. Thanks to the use of WebGL,
the configurator works directly in the browser without the need to install additional programs.
.

The user can select the dimensions of the stand, change its design, customize colors, materials and add brand elements. All changes are immediately displayed in 3D space, which allows you to accurately imagine the final result.






International Gas Forum | Clean Web UI & WebGL — Изображение №15 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №16 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №17 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №18 — Интерфейсы, Анимация на Dprofile






Stand assembly:

The key part of the configurator is the editor, in which the user assembles a stand from modular elements. Various types of walls and partitions, furniture, advertising surfaces, lighting and decorative elements are available here.

Each object can be moved, its parameters can be changed and its appearance can be customized. Thanks to WebGL, the process is fully interactive, and the scene is updated in real time, ensuring smooth interaction and realistic visualization.

This tool greatly simplifies the design of stands, allowing you to quickly and conveniently create unique designs ready for production.






​​​​​​​

International Gas Forum | Clean Web UI & WebGL — Изображение №19 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №20 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №21 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №22 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №23 — Интерфейсы, Анимация на Dprofile






Inner pages:

For the internal pages of the TNF website, we developed template blocks that were used as needed for different types of content. This approach significantly simplified the process of creating pages, ensuring the flexibility and adaptability of the site. Each block was designed so that it could be easily integrated into any section without unnecessary changes to the design, while maintaining uniformity and functionality.

In addition, the use of template blocks allowed us to significantly simplify the process

of expanding the site. When there was a need to add new content or functionality, we could quickly implement new blocks that were not yet on the page, which accelerated

the work on the project and made it easier to support it in the future. This approach significantly improved the speed of development and made it easy to scale the site, adding new elements as the forum and its ecosystem grew.





​​​​​

International Gas Forum | Clean Web UI & WebGL — Изображение №24 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №25 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №26 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №27 — Интерфейсы, Анимация на Dprofile





Program:

We completely redesigned the event program section by unifying previously inconsistent event cards into a single, clear system with a consistent structure and design.


Each card now includes key information along with an interactive link to a map showing the venue. We also added a "favorites" feature, allowing users to save events of interest, making interaction with the program more convenient and personalized.

​​​​​​​

This new approach simplified navigation, sped up content updates, and made the section as useful as possible for forum participants.





​​​​​

International Gas Forum | Clean Web UI & WebGL — Изображение №28 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №29 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №30 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №31 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №32 — Интерфейсы, Анимация на Dprofile
International Gas Forum | Clean Web UI & WebGL — Изображение №33 — Интерфейсы, Анимация на Dprofile

Оценить

Добавить в коллекции...

От автора