As we work with information added by tenants, we are struck by the problem of strong visual noise. Ads are uploaded with no graphic moderation or any concern for the overall style of the website. Each banner is designed to stand out and draw the most attention. Text inside banners often repeats existing descriptions. All of this creates an uncontrollable chaos that overpowers the design of the website. We get an idea to develop a system that would prevent tenants from ruining the appearance of the main page and the news section.
We start by classifying all uploaded banners and studying the existing websites.
The result is a solid approach that can be used to create a banner construction system.
The client approves the idea. Working on banner styles. Deciding to use outline icons of various colors.
Drawing the pictograms and creating rules for their placement.
The client asks to make the page more bright and diverse. Adding more colors and developing new banner types.
Searching for best color combinations for each shopping center.
While the search for the style is under way, we implement the system using standard tools provided by 1C Bitrix. To make sure we don’t repeat the presentation logic, the system asynchronously queries the server for all possible banner types and their settings. All that’s left for the content manager is to choose the best one.
Moving on to the icon placement randomizer. Simple random placement won’t do as it will result in banners with overlapping icons, while the scale of the pictograms won’t allow to create nice combinations. To solve this problem we create several banner placement templates.
As we work on banner design, we realize it’s not always convenient to search the system for icons and chose the best one for each banner.
To solve this problem, we include a neural network to help the content manager. Using a set of existing news items to train the network. However, two hundred pieces of text turn out to not be enough for proper training. Adding texts and names of real and potential stores that are mentioned on the website; the neural network will take them into account when making a decision.
Adding new sample texts and store names, running the training again.
Testing the neural network on an example. Checking the correctness of the source code.
The client doesn’t like the style. Continuing the search, making another approach.
The art director asks not to mess with the banner shapes and concentrate solely on graphics. Making another attempt. Trying different variants of icon combinations and testing everything on the website.
The art director approves. Finalizing the set and showing to the client.
The client doesn’t like the family style of the graphics and asks to add more fashion.
A secret advisor appears and suggests to make another approach using heterogenous backgrounds and more complex graphic elements.
The client approves the concept. Drawing a set of icons, choosing colors, preparing backgrounds and hover effects for all types of banners.
Testing the banner construction system.
After the client’s website administrators are allowed access to the new website, we discover banners that go against the rules right on the main page. The project team panics, as seemingly everything had been taking into account. Deciding to urgently fix the situation.
Hastily training the admins and announcing the project.
