Vladyslav Sereda - Webnauts

«Success is one percent inspiration, ninety-nine percent perspiration»

Zvit — project of automation of accounting services. Stack: HTML, CSS/SCSS, JavaScript, JQuery

Gagarin Rental — platform for renting equipment. Stack: HTML, CSS/SCSS, GULP, JavaScript, JQuery, GSAP

Ray — creative consulting agency project. Stack: HTML, CSS/SCSS, GULP, JavaScript, JQuery, GSAP

Stack

CSS
Git
Gulp
HTML 5
JavaScript
JQuery

Array ( [0] => WP_Post Object ( [ID] => 16567 [post_author] => 10 [post_date] => 2022-08-26 09:49:16 [post_date_gmt] => 2022-08-26 06:49:16 [post_content] =>

About the project and task

Fixers is a Ukrainian team of fixers and military journalists who are engaged not only in creating news stories, but also in organizing the most comfortable work of foreign press teams in Ukraine: from meeting at the airport to organizing filming in the hottest spots.

To tell about their activities, the team lacked a minimalistic, presentable and budget-friendly website / landing page in English. Webnauts is always open and ready to give organizations and brands what they want. Especially if you have to deal with such serious, respectable and special projects as Fixers.

Technological solution

CMS WordPress

For a one-page site, the WordPress CMS is the best — one of the most popular platforms due to its security, ease of use and unlimited possibilities. Convenient setup, search engine optimization, integration with payment services are just some of the advantages that make us choose WordPress. Moreover, the platform is used by such giants as The New Yorker, Reuters, TechCrunch, Fortune and many other major media outlets. We are sure that this will be a good sign for the Fixers team, especially in the near peaceful future.

But it is not only about symbolism: the Webnauts team did a good job to get an impressive result. After all, WordPress is not always about creating a template site without code, especially if the customer has a ready-made unique design. Therefore, when developing the site, we used languages such as HTML, CSS, JS and PHP.

Website design and navigation

As you already understood, the site was developed in full compliance with the design provided by the client. The minimalistic design of the interface looks like a page of an authoritative magazine: only high-quality photos, contrasting headlines and text about the main thing presented as columns. The site palette is dominated by white and black colors, including animation: all effects are limited to changing colors when hovering over buttons. With all this, the design of the site does not look simple, but rather bold in its simplicity.

First screen

The first screen greets visitors with a professional photograph of a reporter in front of explosions, which emphasizes the theme of the site and is especially touching with its caption: «photo provided by Max Levin», a Ukrainian journalist who died in the war.

An unusually large letter logo and a slightly smaller slogan reinforce the main photo and serve as the beginning of an intriguing story. Finally, the visitor needs to pay attention to the miniature menu of three sections: «Services», «Team», «Contacts».

Contrast in typography

As you can see, the interface design is dominated by size contrast: photos and headlines, along with other elements, are not at all shy about their massiveness and are even proud of their importance.

When it comes to typography, there is also the contrast of weights: bold text stands out against the background of text with a thinner font of the same style. This technique eliminates any need to «smear» content across multiple sections. Everything is already very clear: on the left is the history of the team, on the right is the list of services, and at the bottom is the conversion button:

For the headings, a stylish Chakra Petch square font with rounded corners was used. The font choice was symbolic, as it is great for digital and print media. In addition, it is associated with masculinity and stamina. Body text has a thinner, easier-to-read sans-serif font.

Our clients

This block turned out to be super concise and laconic, although it is not inferior in importance to other sections of the site and naturally continues the history of the team, confirming its professionalism. It's just that the names of the world's famous media, with which Fixers cooperate, do not need to be introduced. They are comfortably and with no extra words placed along the screen in two horizontal lines:

In addition, the photos of the next section, which can be seen here, make the user understand that there is still content further — realistic, natural, and therefore even more interesting.

Authentic introduction to the team

The site block introducing us to the team turned out to be stylish and authentic. Three photos of fixers, placed in full screen, not only attract attention, but also inspire confidence. After all, the pictures were taken in real war conditions in the performance of professional duties of each of the team members:

In addition, a casual form of acquaintance in the form of a simple greeting and a name is captivating. In a smaller font, in just a few words, we learn about the specialization of team members. And as soon as our gaze drops down at the smaller gray text, the unreasonable modesty of the fixers reaches its climax. Because here we are not just getting acquainted with the list of world-famous media, but we can also follow active links to specific articles, the appearance of which became possible thanks to the cooperation of these media with the Fixers team.

Without a doubt, such an acquaintance has every chance of turning into a sincere and strong relationship with the audience.

Contacts

All ways to contact the fixers are given in the footer of the site, visually divided into two parts: the yellow one contains contacts, and the black one invites the user to leave their email to subscribe to company news:

Adaptability

All blocks and elements of the site automatically adjust to the display of absolutely any size. That is why the site looks great on all devices: computers, laptops, tablets and smartphones.

Site functionality

Admin panel

The WordPress admin panel is a treat of its own: it fits on one screen, and content management is not only pleasant, but also ridiculously easy. All fields of the admin panel are quickly and conveniently edited. Take a look for yourself:

/ 02

Plugins

These are WordPress tools that can enhance the site's capabilities depending on the specific needs of the company. By the way, some of them became the reason for the super convenient admin panel, which we praised above. So, in this project we used the following plugins:

Contact Form 7 (CF7) — to provide feedback to site visitors.
SVG Support — for integrating SVG images on the site.
WP File Manager — for quick access to files from the admin menu.
Advanced Custom Fields (ACF) — for quickly editing site content in one simple menu.

Summary

The Fixers project is the clearest example of how a simple and serious site can bring truly aesthetic pleasure and undoubted trust. The modesty and rigor of the design brings Its Majesty the content to the forefront — authentic photos, well-aimed headlines, well known names and real facts. This is how design layouts, sprinkled with the sweat of our developers, turned into a tangible, stylish and adaptive landing page for media fixer services in Ukraine.

[post_title] => Landing page for a Foreign Media in Ukraine [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-landing-of-fixers-for-foreign-media-in-ukraine [to_ping] => [pinged] => [post_modified] => 2023-09-14 16:58:04 [post_modified_gmt] => 2023-09-14 13:58:04 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16567 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [1] => WP_Post Object ( [ID] => 20402 [post_author] => 14 [post_date] => 2023-09-22 17:34:28 [post_date_gmt] => 2023-09-22 14:34:28 [post_content] =>

About the project and the task
Layout
Programming
Online store features
The results

About the project and the task

Trinix, a Ukrainian manufacturer of access control and management systems, approached us with the task of developing a corporate website catalog, which was subsequently to grow into an online store. We got a ready-made design and offered a win-win solution — WordPress + WooCommerce. This technological tandem successfully combines content and commerce, as we have repeatedly seen from our experience. How we managed this time, read in our case.

Layout

In the implementation of the project, our front-end developer used the language:

HTML 5 hypertext markup to form the skeleton of the site;
CSS to style the pages according to the layout design;
JavaScript to bring pages to life with any user interaction.

Of the additional JavaScript tools, the scroll-lock library was used, which blocks page scrolling when opening any modal windows on the site. This library, unlike the similar overflow:hidden library, is friendly with the Safari mobile browser on iPhone iOS devices.

In addition, SCSS was used in the development, a Sass preprocessor syntax that speeds up writing CSS code.

In general, the use of technologies that simplify the life of developers always means saving time on the project, and hence the client's budget.

Therefore, we would like also to mention Gulp, a web project builder that has accelerated JavaScript development by automating routine processes.

Crossbrowser compatibility

Displaying the site in all, even outdated browsers, is a particularly important feature of any online store. In order to make the site accessible to users, we have modernized JavaScript using the Babel.js transcompiler, which turns the new syntax into the old ECMAScript 2015+ standard.

Programming

WooCommerce

The Trinix corporate site is planning to move into the category of online stores soon, so we immediately put the world's most popular WooCommerce commercial plugin into the WordPress admin panel. So the catalog on the site, which is still informative in nature, will be able to sell and scale when the client wishes.

So let's move on to functions. Filtering products on the site is possible by properties depending on their category (type, size, device power supply, etc.):

https://wnauts.com/wp-content/uploads/2023/09/filtering-products-on-the-site.mp4

We have also equipped the site with a convenient search. So, if you enter at least 3 characters in the corresponding field, the site offers the first possible results:

Card Product

Tabs "Characteristics", "Description", "Instructions" and "Video" are displayed on the site provided that these blocks are filled with content.

We have implemented the ability to automatically display product characteristics both in the preview on the category page and on the product page to the right of the photo (and this is without the need for manual duplication of characteristics in the admin panel):

/ 02

When filling in the price of the goods in the admin panel, it is automatically displayed on the site. If the price is not specified, then clicking on the text "Check the price" causes the pop-up "Ask a question":

https://wnauts.com/wp-content/uploads/2023/09/trinix.-card-product-price.mp4

We also implemented the function of loading product instructions in the tab with the same name:

/ 02

Two-way synchronization, implemented by the developers, allows you to display on the card not only instruction files, but also Blog articles corresponding to this product:

The "Video" tab contains a YouTube video embedded on the site using an iframe:

Integration with 1C

Using the WooCommerce — 1C — Data Exchange plugin, we synchronized the catalog on the site with the 1C program. This tool provides quick data exchange between the accounting platform and the website, for example, uploading orders, uploading and updating products and prices, etc.

Additional plugins

As we have already noted, the site is based on WooCommerce, but the functionality of the online store is not limited to it. Back-end developers have implemented many other plugins, in particular:

ACF (Advanced Custom Fields) — for adding input fields to the WordPress admin panel;
CF7 (Contact Form 7) — for creating contact forms;
Premmerce Product Filter for WooCommerce — for filtering products;
WPC Smart Compare for WooCommerce (Premium) — for comparing products;
Elementor — for posting and designing articles;
Yoast — for SEO-optimization of the site.

To protect the site from spam, reCaptcha 3 technology was connected through integration with the CF7 plugin. In addition, the developers took care of the ability to add labels with descriptions to the Google map on the "Contacts" page.

/ 03

Online store features

Non-standard product comparison

We have implemented a non-standard for WordPress and WooCommerce product comparison function. This handy feature helps users who are looking at several products of different categories at once (for example, batteries, cables, and security devices). Thanks to the horizontal filter, they can be sorted in one click and compared with each other within a separate category:

https://wnauts.com/wp-content/uploads/2023/09/a-non-standard-for-wordpress-and-woocommerce-product-comparison-function.mp4

You can add a product to the "Comparison" from the product card, from the product category and from the product display sliders. When adding a product, the icon becomes active both in the card and in the site header without reloading the page.

Blog with custom filters

Blog is still the most effective tool for SEO promotion of an online store, because the higher the site traffic, the more likely it is to get an order.

From a development point of view, the Trinix blog site is somewhat non-standard for the WordPress platform. It has a more advanced filter compared to the standard WooCommerce filter, which allows you to quickly sort articles into categories in real time:

In addition, Blog articles can be easily distributed in social networks and instant messengers:

The results

The Webnauts team once again produced a successful online store on WordPress: they applied the finished design onto the engine, integrated the 1C program and took care of the correct display of the site even in outdated browsers. Moreover, they went beyond the platform and implemented several features that are unusual for WooCommerce, namely the function of comparing products by category and a convenient filter for Blog articles by category.

[post_title] => Website-catalog of a manufacturer of security systems [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-catalog-of-a-manufacturer-of-security-systems [to_ping] => [pinged] => [post_modified] => 2023-09-26 18:38:43 [post_modified_gmt] => 2023-09-26 15:38:43 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=20402 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 20689 [post_author] => 14 [post_date] => 2024-04-02 00:05:52 [post_date_gmt] => 2024-04-01 21:05:52 [post_content] =>

How do you introduce a new product or service to the world? The Internet offers many options, but the key tool remains a promotional website. Its main purpose is not so much to sell as to attract attention and showcase the product. An effective way to do this is to make it memorable, i.e. to evoke emotions and give users an unforgettable experience. That's why all promo sites are characterised by bold design and exciting animations. We were approached by the startup BETEGY to develop such a site.

About the project and task
Layout and animation
Development on WordPress
The result

About the project and task

BETEGY is a start-up that offers a technological solution for the rapid generation of advertising banners. The uniqueness of the platform lies in the automation of this process. The recipe is as follows: Drag’n’Drop all ̶t̶h̶e̶ ̶i̶n̶g̶r̶e̶d̶i̶e̶n̶t̶s̶ the elements into a container (frame) and get a banner. Add animation to your image as you wish and adapt it to the size of different platforms and even languages in different countries with just one click.

This is how BETEGY imagines the process of creating media advertising. They had packaged their idea into a real product, and now they wanted to package this product with an impressive promotional website. The client came to Webnauts with a ready-made design, and we had to bring it to life and pull it on the WordPress CMS.

https://wnauts.com/wp-content/uploads/2024/04/development-of-a-promo-site-for-an-online-advertising-creation-service-on-wordpress.mp4

Layout and animation

Technically, the site is built using HTML 5, SCSS and JS, and it is designed around the company's product, which is already creative in itself. Therefore, the design of the BETEGY interface, as it should be for any promotional website, is made to interest, entice, and engage users. The desired effect is provided by a modern presentation with elements in neon pink and blue shades, which is fully in line with the spirit of the iGaming industry.

Numerous short videos demonstrate how the marketing platform works, so the pages are not overloaded with animation. We gave the most dynamics to the Clients block, which is often and unfairly underestimated, and gave buttons and links a subtle hover effect. We implemented micro-animations, moving lines and slide transition effects with the Swiper package, and the scrolling effect with the scroll-lock library.

https://wnauts.com/wp-content/uploads/2024/04/layout-and-animation-webdeveloping-on-wordpress.mp4

The Gulp web application builder helped automate the routine and speed up the development of the site, and Babel.js technology helped ensure cross-browser compatibility. This tool makes the site accessible to users of all browsers by converting code written in the new standard to the ECMAScript 2015+ version, which is compatible with older browsers.

Development on WordPress

The world's most popular WordPress platform is able to meet not only standard, but also unique business needs, including design. Thus, we have created layouts based on the client's individual design on the WordPress CMS. When we created a custom theme, we took care of convenient site management. In particular, we used the Carbon Fields library for easy content filling and editing, and the Contact Form 7 plugin for sending messages from users.

A WordPress-based startup promo site provides users with a unique experience while requiring no technical expertise on the part of the client. A custom theme makes it easy to add, edit, and delete content, and to add other features to the site in the future as the client's needs evolve.

/ 03

The result

CMS WordPress became the basis for a unique design of a unique product. Airy and laconic, but at the same time meaningful and effective, the BETEGY promo site presents a platform for creating multimedia advertising. Video tutorials, animation effects, and neon colors emphasize the mood of the iGaming niche, for which the creative startup was created.

https://wnauts.com/wp-content/uploads/2024/04/promo-site-for-an-online-service-for-creating-multimedia-advertising.mp4

The site is not only impressive from the outside, but also from the inside. Managing text and multimedia content is very easy thanks to the customized admin panel. WordPress is an ideal platform for vivid product presentation and attracting potential customers. Currently, the promotional website is successfully testing the appetite of bookmakers, online casinos and other online gambling companies.

[post_title] => Promo site for an online service for creating multimedia advertising [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => promo-site-for-an-online-service-for-creating-multimedia-advertising [to_ping] => [pinged] => [post_modified] => 2024-04-03 12:34:36 [post_modified_gmt] => 2024-04-03 09:34:36 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=20689 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )

Worked on

Landing page for a Foreign Media in Ukraine
- Team:
  
  3
- Cases:
  
  0
- Reviews:
  
  0
Website-catalog of a manufacturer of security systems
- Team:
  
  3
- Cases:
  
  0
- Reviews:
  
  0
Promo site for an online service for creating multimedia advertising
- Team:
  
  3
- Cases:
  
  0
- Reviews:
  
  0

Thank you!

Stack

CSS

Git

Gulp

HTML 5

JavaScript

JQuery

About the project and task

Technological solution

CMS WordPress

Website design and navigation

First screen

Contrast in typography

Our clients

Authentic introduction to the team

Contacts

Adaptability

Site functionality

Admin panel

Plugins

Summary

About the project and the task

Layout

In general, the use of technologies that simplify the life of developers always means saving time on the project, and hence the client's budget.

Crossbrowser compatibility

Programming

WooCommerce

Card Product

Integration with 1C

Additional plugins

Online store features

Non-standard product comparison

Blog with custom filters

See also:

The results

About the project and task

Layout and animation

Development on WordPress

The result

Worked on

Landing page for a Foreign Media in Ukraine

Website-catalog of a manufacturer of security systems

Promo site for an online service for creating multimedia advertising