Olena Kiselyova

Olena Kiselyova

Front-end developer

Download CV

To bring anything into your life, imagine that.

© R. Bach

Stack

  • CSS

    CSS

  • HTML 5

    HTML 5

  • JavaScript

    JavaScript

  • JQuery

    JQuery

  • Git

    Git

  • Gulp

    Gulp

  • Sass

    Sass

  • Bootstrap

    Bootstrap

  • PHP

    PHP

Certificates

Vue - The Complete Guide (incl. Router & Composition API)

Vue - The Complete Guide (incl. Router & Composition API)

SQL

SQL

Responsive Web Design course

Responsive Web Design course

PHP course

PHP course

jQuery course

jQuery course

JavaScript

JavaScript

HTML course

HTML course

CSS course

CSS course

		Array
(
    [0] => WP_Post Object
        (
            [ID] => 9700
            [post_author] => 10
            [post_date] => 2022-03-02 08:37:46
            [post_date_gmt] => 2022-03-02 05:37:46
            [post_content] => 

About the project

We were contacted by PROGRESS Rent, a company that provides rental of special vehicles in Moscow and the Moscow region. The company, which has a fleet of vehicles from JCB, Hitachi, KAMAZ, MAN, IVECO, and Doosan, faced the need to create a website to provide the ability to order special vehicles via the Internet.

https://wnauts.com/wp-content/uploads/2022/03/megarent-video.mp4

The objective

We had to develop a simple and understandable website with a custom design. It was important to make it easy to manage through the administration panel, so that the company's representatives could fill in and change the vehicle catalog independently, without having to contact specialists

Solution

As an engine, we used WordPress, one of the most popular CMS nowadays. The main advantages of the engine meet the set task completely and the most important one is that WordPress has the simplest, most convenient, and most functional administrative panel. The development of the latter will not take more than a few hours.
It is also important that WP is a free engine with a large number of free updates and additions, which is also suitable for those who want to contact the programmers only once, create a website, and then manage it themselves.

Design

Of course, our developers have paid maximum attention to the design:

The color spectrum

For commercial purposes, it is important to stick to the color theory. The color is the first thing that the visitor of a website sees and what his perception depends on. A clever combination of colors is more than just a visual component, which is why contrasting pairs are used in web design.

One of the most suitable color pairs is a combination of black and orange. This is a good choice in this case, as the most special vehicles are made in orange and this color is generally associated with workers' vests and various services from many industries.

Besides, orange can arouse interest and have an invigorating effect on the user. It is a color with an emotional connotation that symbolizes cheerfulness, energy, and enthusiasm.

Banner

Logo

As part of the design, we also developed a unique PROGRESS Rent logo in the brand's colors. We designed it text — based, in the best traditions, as in the world famous companies — Samsung, Nokia, Siemens, etc.

Animations

It is difficult to imagine a modern website without animations (even if they are minimal). With the help of animated objects, you can interact with a user, help them make decisions and generally increase the conversion of the website. We put relevant animations where they are needed — on the most important buttons.

We also animated the main benefits of the company on the main page.

Website pages

In addition to the main page of the site, which looks like a landing page, we have created separate pages for each group of vehicles: Truck Cranes, Manipulators, Long Haulers, Dump Trucks, Crawler Excavators, Forklift Excavators, and Trawls.

Banner

Each page provides access to all types of vehicles offered for rent — with a photo and a detailed description.

01

/ 05

Contacts: pleasant to contact

We have traditionally provided access to the company's contacts from each page. The phone number with a callback button is located in the right corner of the screen and is duplicated in the footer (along with the address and email).

Banner

Also in the footer, the user will find glowing icons of social networks and instant messengers for alternative communication with company representatives. The user can determine the location via the Yandex.Maps widget.

Banner

The «We will call you back» window appears in the lower right corner of the screen after clicking on the handset and does not open by itself, so as not to disturb the visitor. It unobtrusively offers, «Let us pick up a vehicle for you?». The dialing time is 27 seconds and is displayed as a counter in the same window.

Banner

For more convenience and the ability to ask additional questions, the site also offers LeadBack. This is an online chat through which operators and visitors can communicate with each other. When operators are busy or outside business hours, the chat collects customer contacts (leads).

Admin panel: made easy

As we said before, one of the main advantages of a WordPress website is a very simple admin panel that even an inexperienced user can easily understand. We have put together a detailed guide for website administrators to help them correct the catalog, and add and remove categories of vehicles and the vehicles themselves.

For example, to add a vehicle, you need to perform the following steps:

  • Log in to the administration console.
  • Go to the «Vehicles» section and select «Add a vehicle».
  • We will get to the list of all vehicles and click «Add a vehicle».
  • Next, you need to select a category, write a title, and add a small image for the pop-up, a photo in the gallery.
  • Fill in the fields of the tables in the vehicle item card, where you can specify prices and properties.

Following the same principle, the vehicle categories are edited and filled in, and the menu, the footer of the main page, the contact area, etc. are changed.

Results

Websites on WordPress are a convenient and cost-effective solution for businesses, and when the specialists of Webnauts start working, the client receives a custom web design, well thought-out UX and UI elements, a stylish logo, competent advertising and informative texts, as well as easy management of the finished site.

[post_title] => Website for the Rental of Special Vehicles [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-the-rental-of-special-vehicles [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:58 [post_modified_gmt] => 2023-04-17 12:06:58 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=9700 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [1] => WP_Post Object ( [ID] => 7489 [post_author] => 10 [post_date] => 2022-08-26 14:01:00 [post_date_gmt] => 2022-08-26 11:01:00 [post_content] =>

About the project

«Imperial Coffee» is an online shop specializing in coffee and vending machines. Its main customers are retail stores, cafes, restaurants, and coffee shops.

Previously, the company was present on the Prom.ua marketplace, but then it was decided to develop its online shop and transfer the entire catalog of goods. This was the task for the Webnauts team.

https://wnauts.com/wp-content/uploads/2022/06/imperial-coffee.video_.mp4

Design and navigation

The online shop is designed in calm pastel colors and minimalist style. Soft shadows around the interface elements add length and depth to the design. Concise labels, simple typography, no clutter — the site conveys a sense of simplicity and convenience.

To further engage users, small «easter egg» elements were implemented. For example, when hovering over the categories of goods, the mouse pointer turns into a floating tip with the word «Drag».

The catalog of goods and services has the form of a standard grid with offers and a filter unit on the left side. Despite their simplicity, the product cards contain all the necessary elements:

  • the product code, which you can conveniently tell the manager during the consultation;
  • the availability status to save time and avoid visiting pages with missing goods;
  • two basic functions that provide an overview of the product/service;
  • the «Add to Cart» button, which allows you to add all the goods you need to the cart without leaving the catalog.
Banner

On the product page, all information is presented as compactly as possible. The delivery, payment, and return conditions are hidden behind the corresponding tabs, so you only need a minimum of screen space. The same principle applies to the description of the product and its features.

This approach allowed us to achieve a combination of high information density and an esthetically pleasing presentation of the product.

Banner

Responsiveness

When designing, we always pay special attention to the mobile version. When adapting to small screens, the website should retain all its functionality while completely changing the flow of information.

The website of «Imperial Coffee» is fully responsive. It displays equally well on both compact smartphones and high-resolution tablets. We have simplified some elements of the interface and hidden some information, but the overall functionality and convenience are not affected.

Banner Banner

Nova Poshta Integration

We have connected a module for the delivery of Internet purchases from Nova Poshta to the website. Thanks to this module, customers can choose the option of delivery by Nova Poshta and specify one of the convenient options: delivery to the post office, delivery locker or courier. In this case, all data about post offices and delivery lockers are automatically entered into a selection form.

Banner

The integration significantly simplifies the ordering process for both customers and managers who process orders. The latter can place express orders for Nova Poshta directly via the website's management interface.

Import from Prom with a few clicks

At the time of creating their online shop, our client had an extensive product catalog on the Prom.ua marketplace. Manually transferring the content would have been very time-consuming, so we set up a simple import of the goods.

Banner

Prom's built-in feature allows you to export all items as a CSV or YML file, after which we import that data into WordPress with a few clicks. During the transfer, all the components of the product are preserved: the structure of categories and subcategories, description and features, photos, prices, and availability.

Automatic translation into Ukrainian

In response to the «Language Law», from the beginning of 2021, all commercial websites are obliged to have Ukrainian localization. This version of the website should be loaded by default, and its volume and content should not be less than that of the Russian version.

Read also:

Creation of the Ukrainian-language version of the online store

Due to a large number of products and categories, it is extremely difficult to transfer this amount of information manually. Moreover, not only the descriptions but also the headings, metatags, and features have to be translated. In this context, we enabled automatic page translation using the Google Cloud Translation API.

The only exceptions were the user interface elements and main section titles, where we had to manually intervene to fix the machine translation errors.

Summary

The website we developed is simple and convenient for visitors: the products are easy to find in the catalog, all the information is as accessible as possible, and completing the order takes a minimum amount of time.

The administrators of the online shop are not forgotten either: thanks to integration with NP, registration of deliveries has become much easier, and quick import of goods from Prom.ua helps to keep both platforms up to date.

[post_title] => Online Coffee and Tea Shop with Delivery [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => online-coffee-and-tea-shop-with-delivery [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:20 [post_modified_gmt] => 2023-04-17 12:06:20 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=7489 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 15130 [post_author] => 10 [post_date] => 2023-01-13 17:22:26 [post_date_gmt] => 2023-01-13 14:22:26 [post_content] =>

Speed, multifunctionality and multilingualism today are an indicator of a good and expensive site. Such products are better perceived by search robots and visitors — be it a business card site, a promo site or an online store.

Recently, occupying a big share of the total internet content among millions of the largest sites, the WordPress platform is steadily gaining weight in its market segment and becoming the most preferred CMS in the implementation of quality products.

That is why, when a new client approached us with his design layout and asked us to make correct coding, we offered him an implementation on the WordPress platform.

About the customer

Swiss Organic Partners is at the origins of the Alpinols brand of organic medical and cosmetic products made from cannabinoids. All Alpinols products are 100% made in Switzerland using certified organic cannabis extracts. In particular, what makes CBD special is that it is not psychoactive in its nature and has no side effects. Another advantage of cannabidiol is its medicinal properties and cosmetic effect.

The company strives to emphasize its pharmaceutical know-how and innovative approaches in the production of products intended for oncology, diseases of the central nervous system and cosmetology.

Banner

The objective

The customer already had a unique design in white and green that suited ideally for its purpose — to tell potential customers about the environmental friendliness and safety of their products.

01

/ 03

Our task was to make quality coding of the existing design, implement multilingualism, integrate payment by card and implement possibility to place an order both with registration and without it. In addition, it was necessary to ensure the functionality and speed of the site's response.

Implementation of the project

Implementation in WordPress

As already mentioned above, the site is designed in natural colors, which is the closest to the feeling of sustainability and the natural origin of Alpinols products. We had to make a code that would logically fit into the overall concept of the customer.

The WordPress platform allows you to implement a design of any complexity.

WordPress is the most popular Content Management System in the world. This CMS is the base of more than 35% of all sites on the Internet, and this number is constantly growing. WordPress uses PHP and MySQL, they are supported by almost all hosting providers. However, dedicated WordPress hosting plans can greatly improve the speed, performance, and reliability of any site.

So, as a result, we have a product with a main page that logically leads the customer from general information about the company to the final products that the company sells both wholesale and retail. At the top of the main page there is an introductory video showing the main activities of the company: careful cultivation and responsible collection of raw materials from which all the company's products are subsequently made.

In addition, the WooCommerce module was used, which is ideal for creating online stores using elements such as product categories, product cards, and a shopping cart.

Blocks

The site has been divided into the following logical blocks:

  • Information about Alpinols products for wholesale and retail
  • About Alpinols
  • Information about the production of cannabis extract for production of own product
  • Medical information about medicinal cannabis
  • Block «About us»
  • Block «For the customer»
  • Block «Contacts»

Thanks to this division, the client will be able to easily navigate the site and not waste time looking for information.

Technical implementation

Multilingualism

A multilingual site is a web resource adapted for users from different countries. The presence of high-quality translated versions of the site indicates the high level and purposefulness of the company, its concern for users, and also allows you to talk about your advantages, technologies, products and services to a wider audience.

In our case, in addition to German, the site was implemented in the following languages: English, French, Italian, Spanish.

Banner

This feature was implemented using the Polylang language switching plugin.

Polylang is an open source tool that allows you to quickly create multilingual WordPress websites. Its difference from plug-ins with incorrect automatic translation is that it allows you to upload your own correct translation into the desired language. As our practice shows, this attracts a wider range of potential customers to the site due to the fact that the languages ​​switch easily and quickly, while all the text remains correct and readable in any language.

Integrated card payment at checkout

This integration was implemented using the Saferpay system.

Saferpay is a Swiss payment system that provides internet processing services and accepts payments with Visa, MasterCard and Diners Club International bank cards. The payment service supports 3-D Secure technology.

The main advantage for the client is the ability to pay in local currency due to dynamic currency conversion and the absence of problems with PCI, since card data is not stored in the store.

Also, for greater convenience of customers, the mechanics of placing an order with and without registration on the site were implemented.

Banner

Development of a block of reviews

To develop this block, the Strong Testimonials plugin was used.

Thanks to Strong Testimonials, you can easily organize an arbitrary connection with visitors who can easily share their impressions about the goods and services of the online store.

Features include:

  • creation of any fields — the tool resembles a constructor;
  • clear interface;
  • easy integration with shortcodes into blog pages;
  • creating widgets;
  • quick tool update.

Performance

Traditionally, sites, and especially online stores, made on the WordPress platform with the WooCommerce module face the problem of loading speed. Since this is often connected with the approach to product development, we managed to achieve the high performance of a web resource with the help of the correct coding and the optimal use of all available tools.

In our case, we were able to ensure that on desktop devices and on mobile devices, the site was in the green zone of performance.

01

/ 02

The results

After completing the site coding according to the customer's design, we got the following result:

  • intuitive site logic;
  • speed and rationality of the organization of all blocks;
  • customers were able to pay for their order by card;
  • it is possible to place an order without registering on the site;
  • multilingualism has significantly expanded the customer base of Swiss Organic Partners.
[post_title] => Implementation of the Correct Coding of the Site According to the Client's Design [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => implementation-of-the-correct-coding-of-the-site-according-to-the-design-of-the-client [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:05:40 [post_modified_gmt] => 2023-04-17 12:05:40 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=15130 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [3] => WP_Post Object ( [ID] => 13278 [post_author] => 10 [post_date] => 2022-06-13 14:25:43 [post_date_gmt] => 2022-06-13 11:25:43 [post_content] =>

About the project

3Form is a Ukrainian company providing 3D modeling and 3D printing services. Its products are applicable in the field of architecture, medicine, automotive production and jewelry. At the same time, the company produces not only piece copies, but also entire batches of samples for production.

We were tasked with creating a business card site that would effectively present the company's services. At the request of the client, the main focus should be on design and visual storytelling. The development of the site was carried out on a turnkey basis: we were responsible for creating a corporate identity, filling the site with content and conducting basic SEO.

Unique corporate identity

In accordance with the client's request, we did not use ready-made WordPress templates, but developed a custom design from scratch. Since the company offers 3D printing services, volume has become a key idea in the design: in addition to 3D illustrations, shadows and layering of elements on top of each other are actively used in the interface. This technique creates a sense of space, combining depth and plane.

01

/ 04

But the matter was not limited only to volume: thanks to the skillful use of animations, our designers managed to make the site «alive». Interactive interface elements are designed taking into account the response to the movement of the mouse cursor. Such a light background animation does not distract from the content, while creating a tangible effect of presence.

The only exception was the main page, where a demonstration of the 3D printing process immediately grabs all the attention.

The logo, also created by our designer, also refers to the 3D printing process. The letter «O» seems to come out from under the extruder, fixed on the axis of the 3D printer.

Banner

Filling the site with content

The 3Form website consists of only 4 pages: main, «3D printing», «3D modeling», «Contacts». On the service pages, we have placed the most important information that will help convince visitors to contact our client.

  • Description of the technologies used. Assists in the selection of the appropriate printing technology, determining the pricing policy for a specific order.
  • Work examples. A clear demonstration of the level of professionalism.
  • Stages of work. Building the right expectations from cooperation with the company.
  • Detailed price. Informs about current prices depending on the material and accuracy of the product.

    Thus, each semantic block responds to the specific needs of the user, prompting them to place an order.

See also:

Website content filling services

01

/ 03

Online application for calculation

Often a convenient solution for service sites is a built-in online calculator that allows you to calculate the exact cost of services in advance. This feature increases user confidence by making pricing more transparent. It also saves a lot of time when placing an order.

We had already developed such solutions for other clients, but this situation was an exception - it is simply impossible to determine the exact cost of 3D printing in advance. The price of a product depends not only on its size and materials used, but also on the complexity of execution, which can only be determined from a photograph or drawing.

However, to save time for the client and the manager, we have developed an advanced online order for calculating the cost of 3D printing. It is completed in 3 steps:

  1. Uploading a 3D model or a photo (you can leave a link to the layout in the cloud).
  2. Specifying the parameters of the model and the required quantity.
  3. Specifying the client's contact information.

01

/ 03

The 3D modeling service involves only uploading a layout and its description, so the calculation request form looks simpler and takes only one screen.

Banner

Adaptability

The 3Form website looks great not only on desktops, but also on mobile devices. The work of the main animations and contact forms has been preserved; in the case of long lists, horizontal scrolling is used; and the contents of all blocks are rebuilt in accordance with the screen resolution. The site loads quickly on a smartphone and does not feel «heavyweight» during navigation.

Banner

The summary

The Webnauts team has developed a spectacular, stylish and selling business card site for the company. The unique design produces a wow effect, informative content encourages an order, and the introduction of online applications for calculation saves time for both parties. As a result, we have a simple and at the same time powerful tool for attracting customers.

Banner [post_title] => 3D Printing Service Website [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => 3d-printing-service-website [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:37 [post_modified_gmt] => 2023-04-17 12:06:37 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=13278 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [4] => WP_Post Object ( [ID] => 5887 [post_author] => 10 [post_date] => 2021-01-18 12:28:34 [post_date_gmt] => 2021-01-18 09:28:34 [post_content] =>

About the project

Santerra is a company engaged in the creation of turnkey landscaping, including lawns, lighting, and automatic irrigation. We were tasked with developing a website for the company that would allow to acquaint clients with the services provided, showcase a portfolio, and leave a request for work.

https://wnauts.com/wp-content/uploads/2021/01/san-tera-video.mp4

Custom design

If the company's activities are even halfway related to design, then the website should also make a good impression. For this project, we did not use template solutions but developed a custom turnkey design.

The main page is designed in the format of a landing page, where the visitor can get acquainted with the company's projects and services. At first glance, the arrangement of individual elements may seem a bit chaotic, but they are all inscribed in the grid structure. As an indication of the company's activities, sometimes there are decorative inserts in the form of branches, leaves, or stones for the garden on a white background.

01

/ 04

The design adapts to any screen size and device format. On a small screen, all elements line up but are displayed completely correctly.

Banner

Contact points

When the visitor has read the information and is ready to order the service, they can contact the company in three ways:

  1. Сall the phone number provided in the header of the website and on the contact page.
  2. Request a call by entering your name and phone number.
  3. Leave a request for a free estimate by filling out a mini report with three items: You have to select a service, indicate the area of the job site, and the approximate date the work will begin.

01

/ 04

Blogging

An important promotional tool for such sites is a blog. With it, visitors can get acquainted with thematic material that will help them navigate and make the right decision.

During the development of the website, we paid special attention to the blog: our copywriter wrote 10 articles on a list of topics previously agreed with the client. They highlight the most important topics for a potential landscape design client. We plan to continue this blog as part of the SEO promotion for the project.

Banner

Results

The Webnauts team developed a stylish business card website that focused on unique design, conversion elements, and promotion. The website was developed on the WordPress platform, which allows you to conveniently manage and maintain a company blog in the future.

Banner [post_title] => Brochure Website for the Sale of Landscape Design Services [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => business-card-website-for-the-sale-of-landscape-design-services [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:07:00 [post_modified_gmt] => 2023-04-17 12:07:00 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=5887 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [5] => WP_Post Object ( [ID] => 16157 [post_author] => 10 [post_date] => 2022-08-26 14:02:16 [post_date_gmt] => 2022-08-26 11:02:16 [post_content] =>

A task

Enercor, an international consulting company specializing in the management and restructuring of inefficient enterprises, approached us with the task of developing a corporate website. At the time of the request, the client already had a desktop website design with infoblocks reflecting:

  • mission and benefits,
  • the range of services provided,
  • team composition and completed projects,
  • news, vacancies and company contacts with an application form for consultations.

What we had to do was the development — to breathe life into the project and present a modern, functional and adaptive website to the client. Read about how we did it in our case.

Banner

Technological solutions

When developing the site, we used CMS WordPress — one of the most popular platforms. It is good because in the future the client will be able to easily manage the content of the site: add web pages and place text, images and videos even without the help of a developer. WordPress also allows you to scale the site in the future — for example, add a blog or other additional features.

Website coding

Our front-end developer was faced with the task of turning images into code using HTML, CSS (using the SCSS syntax of the Sass preprocessor) and JS. In his work he also used one of the modern coding techniques — Grid. What is it? Grid coding allows you to create responsive pages for any type of device and position elements on the site correctly — text, photo, video, or any other HTML block.

Banner

The implementation of modal windows on the Projects page was interesting: when you click on a case, an easy-to-read card with information appears on the screen:

Banner

The task of bringing web pages to life with the help of animations was also fascinating. For example, when scrolling the page, the slightest movement of the mouse or touching the touchpad, you can get really carried away with the original effect of the cursor following. The decorative airdrop cursor was implemented using the GSAP JavaScript library, or GreenSock Animation Platform, a popular scripted web animation toolkit:

Banner

Front-end development took 170 hours, including edits from the client. To speed up the work and competently prepare the project for release, our front-end developer used the Gulp project assembler, a tool for automating tasks (minification, testing, file merging, etc.), written in the JavaScript programming language.

Website functionality

The development of the server part of the site took 126 hours. In the course of the work, a complex structure of transitions between sections was implemented through many anchor and simple internal links. This means that when clicking on the link, the user goes not only to the desired page, but also to a part of it that is relevant in meaning:

Banner

Thus, the Services section reflects the company's activities with links to separate pages, where each service is described in more detail:

Banner

On the services page, there is an Expertise block with a list of key areas in which the company specializes. Paragraphs of the same name in the description of the expertise of each team member also lead to this block. In the future, the client plans to link these points also with specific projects of the company.

Banner

The Projects section is a catalog of completed projects of the company of 2 types: with brief information presented as a card and with a full description of the case in the form of a separate web page:

Banner

The Team section presents all team members with a photo, a short description, expertise and a link to the city. Clicking on one of the cards takes the user to a page with more detailed information, which contains a link to the LinkedIn profile and a list of financial and economic publications where experts have been published:

Banner

The Vacancies section contains the company's job offers, as well as a form which enables to send a resume even if there are no vacancies:

Banner

The News section of the site displays publications as a gallery, loaded from the company's profile on LinkedIn. The ability to embed this type of content on the site was implemented using the Tagembed social media aggregator:

Banner

The Contacts section contains the contact details of the company and a convenient form for contacting a specific representative office:

Banner

In order to expand the capabilities of the site, the following popular WordPress plugins were used:

  • Yoast SEO is a SEO management tool that helps visitors and search engines get the most out of your site.
  • ACF (Advanced Custom Fields) — for full control over edit screens and custom field data.
  • CF7 (Contact Form 7) — for managing contact forms on the site and flexible configuration of the content of forms and mail.
  • WP Mail SMTP — to fix email deliverability issues via SMTP (Simple Mail Transfer Protocol) - the industry standard for sending emails.

To protect the site from spam, reCAPTCHA v3 technology was used, installed through an extension from the above-mentioned CF7 plugin.

In addition to the catalog of plugins, WordPress has ample opportunities for customization — flexible site customization for client requests: changing the layout, adding various options, etc. So, our backender additionally created:

  • custom post types for Team and Projects sections;
  • custom taxonomies for the Services section, which in turn is linked to the Projects section, and for the cities block linked to the employees of the Team section.

As a result, the client can independently change the visual elements of the site: the order of menu items, the order of blocks, projects, team members, etc.

By the way, remember our amazing decorative cursor? The client could not decide on its color for a long time, so the developer added a color palette for the cursor to the admin panel. Now the client will be able to manage its appearance independently, without the help of a programmer.

Responsiveness

As we wrote earlier, Enercor came to us with desktop layouts. Therefore, our frontender also took care of the convenience of the visitors of the future site, intelligently adapting layouts for mobile devices. If you visit the site from a smartphone or tablet, then you will see that it will be as convenient to perceive text and visual information as it is from a computer screen.

Banner

Presentation of the company

Another task, this time for the design department, was the presentation of Enercor. The visual design is fully consistent with the corporate identity of the company: colors, fonts and corporate symbols are consistent. 28 slides are full of peculiar elements in the form of neural networks, and the entire array of information is conveniently and clearly structured. The business tone of the narrative is softened by unobtrusive animation that will capture and hold the attention of the audience:

Banner

Results

The completed Enercor project and our experience in developing a corporate website for consulting services on WordPress proves once again that the web site of an international consulting company can be fun and harmoniously combine serious information with smooth animation and captivating decorative elements. Add to that a structured animated presentation and you have another powerful marketing tool.

[post_title] => Corporate Website of an International Consulting Company [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => corporate-website-of-an-international-consulting-company [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:20 [post_modified_gmt] => 2023-04-17 12:06:20 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16157 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [6] => WP_Post Object ( [ID] => 16287 [post_author] => 10 [post_date] => 2022-07-19 11:57:02 [post_date_gmt] => 2022-07-19 08:57:02 [post_content] =>

The objective

Webnauts Design is a promo site for Webnauts design services that fully reveals the creative side of our company. The main objective of the project was to create a presentation site-portfolio of web design services, which would contain a minimum of information and a maximum of visibility.

An established, self-sufficient and modern design team whose services went far beyond UI/UX design needed a separate website. It's no secret that our guys were involved in the design of the interface, so the site visitor runs the risk of getting a wow effect without even going to the portfolio section.

Banner

Interface design

It all started with UX analysis and prototyping, and only then this is followed by its majesty UI — visual design in the form of page concepts and drawing layouts. As a result, we got a user-friendly and attractive site. Simple navigation, large moving font and micro-animations are trends that immediately attract attention and, by the way, will be relevant in the UI/UX world for a long time to come. The minimalistic and neat interface somehow resonates with the corporate identity of Webnauts. These are readable sans-serif fonts, and subtle gray colors with a red tint, which gives the site a special accent and dynamism.

80 hours of analytical and creative work — and the design project is ready! And how without magic in the form of animation? Let's talk about this in more detail later.

Banner

Website coding

Together with the designer, the developer brought the layouts to life using three front-end pillars: HTML, CSS(SCSS) and JavaScript.

Animated preloader

The implementation of an animated preloader was an interesting task, the purpose of which is to inform about the loading process of the site and brighten up the user's waiting. The designer suggested notifying the progress of the download using a circular running indicator and using the user's precious time to greet them in different languages of the world.

It was not difficult to animate and style the indicator for the design, but the animation with the greeting block was not easy. But still, after successful attempts to understand the algorithm, our developer got the desired result:

Banner

Parallax effect

The GSAP Scroll Trigger plugin with the locomotive-scroll.js library helped to implement an amazing parallax effect based on smooth page scrolling:

Banner

Running line effect

The first screen greets users with the line “WEBNAUTS DESIGN” running along the screen. A similar, but more spectacular effect can be observed if you hover over one of the portfolio works: in addition to the running red bar with an enlarged title, we also get a preview window showing the project in miniature:

Banner

If you wish, you can get to know each of the works in detail. One click takes the user to a separate page, where the tasks of the project and the creative process are described in a concise, interesting and accessible form (here we need to pay tribute to our copywriters), and of course, the result, supported by numerous images:

Banner

Microanimations

It is especially interesting to interact with microanimation of images. At first, the pictures on the site seem static and gray, but as soon as the cursor “touches” the photo, it seems to come to life and take on colors:

Banner

In addition, the horizontal scroll bar and the Drag graphic element (literally: Pull) prompts users that there is still content outside the screen, which can be seen by grabbing and dragging the gallery with the mouse.

Hover Rotation Effect

The rotation effect turned out to be interesting when hovering over links and menu items, and changing the color additionally focuses users' attention on the desired object:

Banner

To make it pleasant for our audience to interact with the site through animation, our front-ender used the GSAP (GreenSock Animation Platform) JavaScript library.

To speed up the layout process, the Gulp assembler was used - a tool that allows you to automate the routine tasks of web development.

Adaptability

We pay special attention to website optimization, because more than 50% of Internet traffic comes from mobile devices.

Due to the small screen, the site should make the most positive impression on the user. Therefore, in the mobile version, we have shifted the focus from interest to convenience.

Due to the fact that the mobile version does not have a hover (cursor hover), there are fewer animation effects. So, the portfolio block has been modified: now, instead of the hover effect, we see a static and clickable case cover.

Banner

Site functionality

When the coding is ready, the back-end developer gets down to business and places the site on the platform. For this, the most popular CMS in the world was chosen — WordPress (WP), which has an infinite number of add-ons and features.

Let's see how the main page is arranged. Navigation on the site is carried out using anchor links that move the user to the desired part of the landing:

Banner

Under the Cases section, a custom post type and related custom taxonomies Type and Services were created:

Banner

WordPress plugins

You can easily and quickly create custom fields using ACF (Advanced Custom Fields). This is not magic, this is a plugin — a mini-program that increases the standard features of a WordPress site. Our backender installed several plugins for all occasions:

  • ShortPixel Image Optimizer — for optimizing images.
  • WP Super Cache — for caching data.
  • Yoast SEO — for search engine optimization of the site.
  • LocoTranslate — for translating strings embedded in code (form responses, errors in form fields, text in form fields, and other small fragments).
  • Polylang — for translating taxonomies and creating language versions of pages (Main and Cases).
  • Yoast Duplicate Post — for cloning posts.
  • WP Mail SMTP — for sending emails via SMTP.

Forms were implemented without additional WP plugins, but not without other technologies. Applications from the form on the site are sent to email using an Ajax approach that speeds up data exchange in the background.

Website protection

To protect the site from spam, the reCAPTCHA v3 technology was connected to the form - it analyzes the user's behavior on the site before clicking on the Submit button: if the actions took place, then the user is not a bot - and only after that the data is sent.

Banner

To create a special custom field for entering the Site Key, another WordPress tool was used — the Settings API.

Fine-tuning of the site took the developer 40 hours. Now it is not just a beautiful, but also a reliable site with ample opportunities for creating and processing content.

The results

After 255 hours of teamwork of designers and developers, we have an attractive, modern and user-friendly portfolio website for UX/UI and graphic design services on Wordpress. The combination of minimalism, clear navigation and hover animation from the first seconds gives users a fun and exciting experience. Can you ask for more from a design services website?

[post_title] => Promo Site for Webnauts UX/UI Design Services [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => promo-site-for-webnauts-ux-ui-design-services [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:22 [post_modified_gmt] => 2023-04-17 12:06:22 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16287 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [7] => WP_Post Object ( [ID] => 15789 [post_author] => 10 [post_date] => 2022-07-24 16:25:54 [post_date_gmt] => 2022-07-24 13:25:54 [post_content] => [post_title] => Investment Company Landing Page [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => investment-company-landing-page [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:22 [post_modified_gmt] => 2023-04-17 12:06:22 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=15789 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [8] => WP_Post Object ( [ID] => 17010 [post_author] => 14 [post_date] => 2022-10-31 17:27:18 [post_date_gmt] => 2022-10-31 14:27:18 [post_content] =>

About the project and task

Webnauts Academy is an educational project of our company aimed at training and improving the skills of beginners and novice IT specialists.

Webnauts has long been engaged in internal training of employees, as it feels a constant staff shortage. And an attempt to bring the training center to the outside was successful and showed the unprecedented relevance of IT education among the residents of our industrial city.

Having organized the educational process in many areas and convinced of the usefulness and importance of the project, we decided to create a modern IT course website with a minimalistic interface, clear navigation and adjusted for a large amount of content: training programs, video reviews, teachers and graduate cards.

Banner

Design

Visual analysis

Before we started designing layouts, we started visual analysis, highlighting more than 10 exemplary sites in the field of IT education. After evaluating the basic design principles of such projects (grids, shapes, colors, fonts and media), we managed to create our own unique design concept.

Banner

Website prototyping

Based on the results of visual analysis, the designers carefully thought out the structure of the IT academy website, namely: what will the main screen look like, what blocks will be used to appeal to users' trust, and how to talk about the benefits of educational products? This stage is the creation of a black and white sketch of the site, in which designers focus on UX (User Experience) as much as possible, that is how the interface will work and whether it will be user-friendly.

Banner

As you can see, the work of UI/UX designers is not only a creative, but also an analytical process, during which the user experience is carefully studied. This research allowed us to create an effective digital product that turns views into training applications.

Grid in web design

Even though the site contains a lot of information, it looks neat, intuitive, and visually appealing. This effect is created by the grid - the basics of the basics when creating a prototype of any site. But in our case, this is not just an invisible skeleton of the site, but an integral part of the design, and together with large typography, arrows and other signs, it evokes His Majesty the Swiss style.

We can see how thin gray lines permeate all pages, artfully structuring and separating content. Thus, all text, photos, forms and widgets are neatly inscribed in rectangles with clearly defined borders. Thanks to the block structure, we have created an organized and user-friendly interface:

https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-grid-in-web-design-1.mp4-1.mp4

Brand colors and hover animation

At the initial design stage, the designers already had a logo in the Bauhaus color style: white, black and muted red for accents.

https://wnauts.com/wp-content/uploads/2022/09/webnauts-academy.-brand-colors-and-logotype.mp4

So, the design of the site was made in accordance with the existing corporate colors. We used white as the background color: it gives the interface a sufficient amount of space, and at the same time, contrast for other important elements. These are black buttons and drop-down list icons that change their color to red when hovered over. Headings and text boxes with important information are also highlighted in accent red, completely capturing the user's attention:

https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy-hover-animation.mp4.mp4

Layout and navigation

As soon as the design concept is ready, the project moves on to the next stage — the actual development of the educational courses website. The front-ender starts first: he codes layouts using HTML, JS, and CSS (SCSS/Sass) languages, and sets the site in motion by animating widgets using GSAP (GreenSock Animation Platform) technology. Let's break down the site and see what we got.

Website first screen

The first screen forms the user's first impression. It is important to remember that it only takes a few seconds to form it, but at the same time, you should not overload the main section with content. Based on these considerations, we placed the most important on the first screen:

  • a large and understandable title that fully reflects the theme of the site;
  • a horizontal version of the logo with a concise menu in the header;
  • a dynamic video telling the user about the main advantage and location of the training center: «Study at the best IT company in Krivoy Rog»;
  • a banner with a current offer and a button «All promotions of the academy»;
  • main conversion button «Choose a course»:
https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy-website-first-screen-design.mp4

Block «About us»

It plays an important role in building customer loyalty and trust. But this does not mean at all that it should take up a lot of space or even a separate page. We did without a lot of text full of victories, and limited ourselves to a photograph and really important information that fit in just a couple of sentences:

We are sure that users will appreciate the saving of their precious time, and in the meantime we will try to strengthen their confidence in the reliability of the company with the help of other important blocks and pages.

Banner

Educational Products

The main product of the company is a course, and there are no less than 17 of them. We have combined them into 7 categories for individual IT areas and presented them in the form of a drop-down list.

Each course leads to a separate page and introduces more detailed information:

  • title, brief content and the beginning of classes with the «Register» button,
  • photo gallery showing the educational process,
  • the benefits of learning with the button «Full course program»,
  • information about the teacher with a photo,
  • learning conditions,
  • application form with conversion button.

The page is easy to navigate, and all the important and necessary information is at a glance:

https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy-educational-services.mp4.mp4

It is worth noting that thanks to the use of the grid, not only the design has become more beautiful, but also the code, in the literal sense of the word. And translated from the language of developers, beautiful means working, structured and readable.

Communication methods

We thought of many different options for the user to contact the company, and even dedicated a separate screen of the main page to this. The goal is obvious to absolutely everyone, but what a presentation! The section captivates with an original individual approach. So, introverts are invited to write, extroverts — to call, and those who doubt — to attend any class of their choice for free:

Banner

Company advantages

This section reinforces the «About us» block of the site and is a concise list of 4 points, neatly placed in a table:

Banner

Reviews

Video reviews of graduates, or to be more precise, of employed graduates, reinforces the previous text block and inspires even more user confidence. The media section is designed as a circular gallery with black and white photos, numbering and arrows. When you hover over the photo, the photo comes to life, and when you click on it, the full video from Youtube is played.

This block was one of the most interesting and challenging in terms of development, and the result met our expectations. Here is an example of how a fairly minimalistic interface can create a truly unique user experience:

https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-block-reviews.mp4.mp4

Catalog of graduates

This is another advantage of the company, embodied in a separate landing page. It is dedicated to graduates who have successfully completed their studies and are ready to start new IT projects. The page is a catalog with cards of young professionals. In turn, the card contains a photo of the graduate, brief information and a link to the portfolio, contacts for communication and a button with a resume. The page also has a simple navigation in the form of a horizontal list of 3 lines and allows you to filter candidates by specialization:

https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-catalog-of-graduates.mp4.mp4

The graduates section can be accessed from the main page block or from the menu item in the site header «About Us — Graduates».

As for the development, we are ready to sing the praises of the grid layout again, because thanks to its horizontal and vertical lines, the coding of the cards was faster, eliminating such a programming phenomenon as «code duplication».

Photo gallery

The importance of photos on the site is difficult to overestimate: real informative photos arouse interest and describe services instead of a thousand words. We designed the photo in the form of a compact ring gallery, which perfectly reflects the educational process in the creative atmosphere of a modern IT company:

https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-circular-photo-gallery.mp4.mp4

FAQ

The Frequently Asked Questions block is designed to cover common customer objections, thereby reducing the load on managers. In our case, the visitor closes the question of interest, revealing the desired answer. And yes, the drop-down list is still relevant today due to its compactness and ease of use:

https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-faq-dropdown-list.mp4.mp4

Form and contacts

The application form is as simple as possible and includes only one field for entering a mobile number. A funny large button that changes its color on hover and sends the request for processing adds to the mood.

Users who are used to taking the initiative in their own hands can contact the company at any contact listed in the footer of the site:

https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-form-and-contacts.mp4.mp4

Responsiveness

In addition to the desktop version of the site, Webnauts designers have worked hard to create layouts for tablets and mobile devices. All blocks and widgets automatically adjust to any screen size, and as a result, the site is convenient to use both on a smartphone and on a desktop computer.

Banner

Site functionality

«Not only external, but also internal beauty is important», said the back-end developer and masterfully set up the software-server part of the IT course site on WordPress, in particular:

  • custom fields using the ACF plugin (Advanced Custom Fields);
  • custom record types Graduates and Courses;
  • Ajax forms that allow you to exchange browser data with a web server in the background;
  • graduates page with Ajax filters and pagination.

The developer also installed the Loco Translate plugin on the site, which makes it possible to translate all strings wrapped in code, and then converted static strings using the __() function, which can return the original text in the absence of translation or loading of the text domain.

All these complex manipulations made it possible to set up the most convenient and understandable admin panel of the site, in which it is easy to manage the appearance and content of pages without the help of a developer:

Banner

The result

The effectiveness of any site is measured by a first-class user experience, and the creation of such a site requires effective interaction between designers and developers. Thanks to the well-coordinated work of the team at every stage — from visual analysis to setting up the system control panel — we managed to implement a convenient and attractive IT course website, both inside and out.

[post_title] => Website for IT courses on WordPress [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-it-courses-on-wordpress [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:05:41 [post_modified_gmt] => 2023-04-17 12:05:41 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=17010 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )