Alona Kushnir

Alona Kushnir

Project Manager

Download CV

Work hard to get what you like, otherwise you’ll be forced to just like what you get.

Project experience

FoxBook (online library for reading and listening books)

— decompositions, dividing the task/order into components
and distribution between performers/executors;

— approving deadlines with customers and meeting deadlines
by the team;

— step by step control of developers, QA testing performance.
PHP, Laravel, MySQL, Nuxt.js

Sturmanskie (watches brand)

— Implementation of the new features on the website: basket
and payments;

— Site support;

— Coordination of the tasks and their performance between
customer and team;

— Preparation of a financial report for the project.

Bitrix Framework, PHP, HTML, CSS, JavaScript

Park Plus(equipment for beekeeping)

— Daily communication with customer, approving deadlines
with customer, performance evaluation, coordinating budget
issues.

Bitrix Framework, PHP, HTML, CSS, JavaScrip

Stack

  • HTML 5

    HTML 5

  • CSS

    CSS

  • Adobe Photoshop

    Adobe Photoshop

  • Bitrix framework

    Bitrix framework

		Array
(
    [0] => 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 ) [1] => WP_Post Object ( [ID] => 14902 [post_author] => 10 [post_date] => 2022-06-13 14:26:44 [post_date_gmt] => 2022-06-13 11:26:44 [post_content] =>

The objective

The customer turned to Webnauts specialists for a new functionality of a mobile application for athletes who want to be always in touch with their coach. The client is a fitness club that provides professional trainers, fitness programs and sports equipment for training.

At the time of contacting our company, the customer already had the initial version of the mobile application. Its main task was the registration or authorization of users, a description of the exercise machines and a list of exercises for each. A calendar was also available with the possibility of independently compiling a training plan for the week from the proposed list of exercises, displaying the location of the fitness club and contact information.

However, the customer wanted some more functionality:

  • firstly, the client wanted a product that allows you to view various exercises and, with the help of a trainer, form workouts for every day;
  • secondly, to add an online chat between the coach and the client of the gym;
  • thirdly, make it possible to pay for training in the application using Yookassa.

    Below we will talk about how the product turned out at the end, after the careful work of our programmers.
Banner

Improvement of the mobile application

After starting work with the initial version of the application, it turned out that the amount of work to be done was somewhat larger than originally thought.

The first version was made in React Native, but using the Expo framework. To create an online chat between the trainer and the client of the gym, previous developers had to completely rewrite the application from React Native Expo to pure React Native.

React Native is an open source, cross-platform framework for developing native mobile and desktop applications in JavaScript and TypeScript. React Native supports platforms like Android, Android TV, iOS, macOS, Apple tvOS, Web, Windows, and UWP, allowing developers to use the power of the React library outside of the browser to build native apps that have full access to the platform's system APIs.

Expo is a set of tools with which you can write a React Native application in minutes. It includes out-of-the-box tools such as Android Studio/XCode configurations, Apple & Google certificate management and push notifications and more.

In the end, our programmers carried out the following series of works:

  • The original version of the application was carefully redesigned, as it had a huge number of bugs.
  • Online chat was rewritten and implemented using Socket.io libraries.
  • Payment was implemented using Yookassa, the mobile application was linked to this integration using http requests to api.

Yookassa is a payment provider, an online payment service for individual entrepreneurs, legal entities and the self-employed. It is needed to accept payments, send money to customers and solve other tasks related to electronic payments. Connects to a website, blog or online service.

The result of working with the application on React Native

So, this is what the result of the work of our specialists on finalizing the initial mobile version looks like:

  • All the functionality of the mobile application - a selection of exercises, workouts, calendar, products, online chat and payment — works quickly and efficiently.
  • Athletes can always be in touch with their coach. In the online chat, after each workout, you can receive feedback based on subjective well-being and objective data taken by fitness trackers, if any. The messenger built into the application allows you to conveniently and quickly communicate with the coach in real time.
  • Easy and fast payment for trainers' services is available through the Yookassa payment system.

01

/ 06

In general, the task was implemented not only according to the wishes of the client, but also technically improved. Webnauts specialists always perform their work with high quality and are ready to take on the most complex and interesting projects.

[post_title] => React Native Mobile App for Training [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => react-native-mobile-app-for-training [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=14902 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => 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 ) [3] => WP_Post Object ( [ID] => 14210 [post_author] => 10 [post_date] => 2022-05-30 14:43:52 [post_date_gmt] => 2022-05-30 11:43:52 [post_content] =>

About the project

After the full-scale invasion of Russian troops into Ukraine, the work of volunteers has intensified in all corners of the world. The Webnauts team was approached by a member of the Vadim Melikhov Volunteer Team, Natalya Say, who lives in the United States. She had a goal: to help the volunteers of Kharkov to raise funds in support of the Armed Forces of Ukraine and to help people left to live in the most dangerous areas of Kharkov and who are regularly shelled and bombed.

Since the beginning of the war, volunteers have been non-stop:

  • delivering humanitarian aid to Kharkiv;
  • distributing and delivering food to people living in houses and bomb shelters;
  • delivering people in need of medical care to doctors or to the main railway station for evacuation;
  • preparing and distributing prepared food to the soldiers of the Armed Forces of Ukraine, as well as providing two military offices with food.

At the time of contacting us, volunteers were in dire need of financial support. Our team offered a quick and optimal solution — the development of a landing page for collecting donations for volunteers in Ukraine.

Banner

The objective

Volunteers needed a small and user-friendly website, the main purpose of which is to raise funds for the needs of Kharkiv residents and the military. To do this, we needed to tell about the existence of the volunteer organization itself, about the work they carry out, and to ensure integration with payment systems. Thus, everyone who has the opportunity to financially support the organization could quickly and easily transfer funds in any currency, including various types of cryptocurrencies, to the accounts of the organization's members.

Implementation

Our team did not hesitate to respond to Natalia's request and set to work on the project with great enthusiasm. In the shortest possible time, a one-page site was made using CSS/HTML/JS and PHP, with a design that fully complied with the pre-rendered layout. And also made it adaptive for all kinds of mobile devices.

A one-page website = landing page. This format for sites where there is no branched structure is quite popular today. All information is on one page, and the user views it within one session.

The choice of a one-page site was due to the fact that this type of site allows you to concisely present important information and focus on the most important. In our case, it is donations.

Design creation

Since the theme of the site is related to the war and its consequences, we did not make a sophisticated design,which would waste time on complexities and frills. Taking into account the wishes of the customer, we tried to make the site uncluttered, understandable and easy to use. Therefore, when developing the design, we preferred a simple and light style. The colors of the site were chosen with a certain symbolism:

  • white — associated with the kindness of selfless volunteers,
  • blue and yellow — the colors of the Ukrainian flag - as a symbol that help is intended for the people of Ukraine,
  • and the fact that the site itself turned out to be light and transparent indicates the same intentions of the organization's members and that the assistance provided will be available to everyone who needs it so much.

The entire one-pager can be divided into seven small blocks:

  1. «The volunteer team of Vadim Melikhov» — a brief description of what the team does,
  2. «What We Do» — a more detailed account of the types of assistance provided by volunteers,
  3. «Support volunteers» by making a donation — the main target block with buttons for payment systems for financial assistance,
  4. «Gallery» — drawn and implemented with a full photo and video report on the work of the team,
  5. «Tactical equipment» is a kind of message from fellow volunteers from the United States with a call to collect help for the Ukrainian military,
  6. «Help for Refugee Families» — with an appeal to "Contact Us" to provide assistance to refugee families from Kharkiv,
  7. «Team of Volunteers» is a photo gallery of selfless and fearless members of Vadim Melikhov's team.
https://wnauts.com/wp-content/uploads/2022/05/vadym-melikhov-video.mp4

Development

Our developers wrote the server part of the site using the PHP programming language.

PHP is an open source general purpose C-like scripting language. It is used to create dynamic web resources and is supported by almost all hosting providers. PHP code can be embedded directly into HTML and has a wide range of features and a large set of built-in tools for developing web applications.

Using a simple code editor and a standardized HTML document markup language, our developers filled out the template by structuring the content on the page. And, using the CSS markup language used for the visual design of the resource, we formatted the content of the site, making it attractive to users. We also used the Gulp project collector.

Gulp is a task manager written in the JavaScript programming language that automates commonly used tasks in web development, thereby helping to speed up the development process.

With the help of this program, we were able to quickly organize and turn a set of individual files into a one-page site, logically structured and built in sections.

Multilingualism

Since the site was originally designed for Ukrainian and Western audiences, we made it bilingual — the user can read all the necessary information in Ukrainian or English. In this case, we implemented multilingualism by creating two pages in different languages within our site. The required language can be selected using the switch at the top of the web resource, next to the menu.

Banner

Adding donation forms

The main block of the project is located almost in the center of the one-pager.

Banner

Large white buttons are placed on a blue background, indicating various types of payment services and links to forms so that donations can be made in any currency and in convenient ways:

  • Credit Card — payment by credit card,
  • PayPal is the largest debit electronic payment system, providing contactless payments in twenty-five types of currencies,
  • Crypto — payment with cryptocurrency. Here, depending on the type of currency, you can copy the number of a suitable e-wallet in order to make transfers.
https://wnauts.com/wp-content/uploads/2022/05/vadym-melikhov-video-2.mp4

Summary

As a result of the work done, in a fairly short time we drew and laid out a bilingual one-page website (landing) to collect donations to recipients in Ukraine. By connecting payment systems to it, we quickly implemented the task set by the customer-volunteer. This functionality has already shown its effectiveness and perfectly coped with the assigned mission: the first donations didn’t take long to come. Thanks to each and everyone who believes in Ukraine and supports in any way they can at this terrible time for our country.

[post_title] => Landing Page for Collecting Donations [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => development-of-a-landing-page-for-collecting-donations [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:39 [post_modified_gmt] => 2023-04-17 12:06:39 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=14210 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [4] => WP_Post Object ( [ID] => 14923 [post_author] => 10 [post_date] => 2022-08-26 14:03:05 [post_date_gmt] => 2022-08-26 11:03:05 [post_content] =>

About the project: description and the objective

We were faced with the task of developing a mobile application with which it would be possible to scan product labels, or rather, the composition indicated on these labels.

Today, the topic of decoding the composition of products is quite relevant, because the vast majority of the compositions include various additives: flavors, emulsifiers, stabilizers, preservatives, and others. Usually, these additives are indicated by an alphanumeric code, which we usually call "eshki". There are both dangerous or permissible, and absolutely safe additives, such as E-450 or sodium pyrophosphate.

It is impossible to memorize a huge number of codes, and carrying a cheat sheet with you is also impractical. Therefore, we have created a scanner that can identify and decipher various additives from the composition of products. It's like a Google lens, but only for shopping.

Solution: technologies and plugins

By developing the Food Additive Scanner app for Android, we have solved 3 important tasks:

  1. Provided recognition of food additives directly from the label.
  2. Introduced the ability to determine the danger of a product based on its composition.
  3. We set up the decoding and created a detailed description of possible additives. We also ensured a stable connection of the smartphone camera.

Design

And, of course, we paid due attention to the design, making it pleasant and modern, using vector graphics of the product theme.

Banner

To indicate the degree of danger of products, we used the classic color scheme of a traffic light: red — «Dangerous», orange — «Not recommended», green — Safe.

Banner

To implement the above list, we have used several technologies and plugins.

  • Async Storage is an application-wide asynchronous, unencrypted, and persistent system for storing keys and values. Usually, Async Storage is used instead of LocalStorage, which is synchronous, so it works slower and has significant restrictions on the limit of stored data.
  • Stack Navigation is a convenient system for moving between screens, which allows you to go back and exit to the main menu of the application.
  • MLKit OCR is a mobile SDK from Google with fairly broad basic capabilities.

We only used MLKit for reading and recognizing food ingredients, but in general it can recognize faces, objects, barcodes, etc. MLKit is convenient in that it can detect the language of the text and translate texts on the device, and it also guarantees a quick response. In addition to the «boxed» version of MLKit, there is support for custom models, which gives programmers almost unlimited possibilities — you can implement a lot of functions, for example, photo coloring, etc.

The summary

The development of mobile applications of scanner applications is increasingly required in the field of trade and business. Such software is capable of solving various tasks - from reading QR codes to decoding text on labels. A well-chosen package of technologies in a particular case was able to fully meet the needs of the task set before us.

[post_title] => Mobile App for Label Scanning [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => mobile-app-for-label-scanning [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=14923 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [5] => WP_Post Object ( [ID] => 13358 [post_author] => 10 [post_date] => 2022-04-27 15:43:52 [post_date_gmt] => 2022-04-27 12:43:52 [post_content] =>

About the project

We were approached by the company «Vse i srazu», which sells entrance, interior doors and accessories for them. It was necessary to develop an online store with an individual design and convenient functionality for the buyer. The sale of doors is a specific branch of trade, so the client needed more than just a classic online store. They needed a tool for selecting fittings with the possibility of standard and individual configuration of the door.

https://wnauts.com/wp-content/uploads/2022/05/u.mp4

Design and navigation

Color spectrum

This is a laconic solution with the advantage of gray and beige shades in the Scandinavian Hygge style — this color scheme symbolizes the comfort and warmth of a home.

Banner

In UX design, we used orange. According to the psychology of color, orange is able to push the buyer to make a purchase. It also perfectly attracts and keeps attention on the most important UX elements: catalog, cart, new products, Request a call button, etc.

A very modest percentage of color filling is reserved for the basic blue and red colors, which are used to draw attention to new products and discounts.

Banner

A compelling homepage

A slider with a large font and a photo convinces the buyer that he has come to the right address and the online store really sells the doors.

Banner

Catalogs and sorting

The catalog can be accessed in two ways:

  1. In the header of the site — there is a convenient drop-down list of categories and subcategories.
  2. Below, under the slider, there are large buttons that duplicate the categories of the catalog.

01

/ 02

On the main page, the site visitor will find everything they need: promotional offers in the form of small banners, as well as catalog novelties that can be sent to the cart directly from the main page.

In addition to the catalog of goods, the website sorts doors by manufacturers — a separate page has been created for each brand. This will appeal to buyers who trust only selected brands and choose the brand first, and then doors with certain characteristics.

01

/ 02

In each category of goods, sorting by price and rating is available. The user can easily filter the doors by price by setting the price range that suits them on the slider, as well as select the brand, color and purpose of the doors.

01

/ 02

Transparency and honesty

Yes, we were not mistaken, these values can be implemented not only in texts, but also when creating a site. We have made every effort to ensure that the user understands that the terms of delivery are as transparent as possible and there will be no surprises. You can see the cost and delivery time directly in the product card and in the «Delivery» section — the buttons of which we carefully placed at the top and bottom of the site.

Banner

Functionality

Convenient feedback form

It is necessary to fill in only 3 form fields — «Name», «Phone» and «Message» and click the «Order» button so that the «Vsо i srazu» company receives a request and responds to it with a phone call.

Banner

«Comparison»

Today, all «big brothers» (markteplaces) have the option to compare selected products. It is a mistake to believe that for small online stores this is nonsense. This is a useful and easy-to-use tool that will help you find differences between products and at least save you from having to open a lot of unnecessary tabs.

Banner

Thoughtful product card

In the product card, in addition to the standard characteristics and description, you can select the size, color and side of the door opening, send the product to comparison or shopping cart, and buy it in 1 click (after clicking, a form opens with two fields for name and phone number).

Banner

The database of goods was imported from the company's supplier from an XML file, which made it possible to fully preserve the structure of the goods. We also set up regular catalog updates.

Kits

In the product card, it is possible to buy both a simple door and a set with the necessary accessories. We have developed this option additionally.

With our development, the store administrator has the ability to set a zero number of products (for the correct display of prices) that are included in the kit, and the buyer can independently change the composition of the kit.

Banner

Personal Area

For the convenience of customers on the site, it is possible to create a personal account in which you can track the status of an order and more. Registration requires a minimum of data.

Banner

Adaptability

The Webnauts team made sure that the site retains its adaptability on all types of devices, including tablets and smartphones. The design and functionality of the site is almost completely preserved and does not cause inconvenience.

Banner

Summary

vseisrazuint.ru is an example of a light and fast online store for doors and fittings, which is equally convenient for site administrators and customers. Pleasant colors, well-considered UX-design, customizable kits in the product card and a simple order form — all this forms customer loyalty and creates a positive impression of the site and the products offered on it.

Banner [post_title] => E-Commerce of Doors and Accessories [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => online-store-of-doors-and-accessories [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:40 [post_modified_gmt] => 2023-04-17 12:06:40 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=13358 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [6] => 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 ) [7] => WP_Post Object ( [ID] => 10532 [post_author] => 10 [post_date] => 2021-01-17 13:50:03 [post_date_gmt] => 2021-01-17 10:50:03 [post_content] =>

About the project

«Undersun» is a five-star spa hotel located on the Black Sea coast in the village of Gribovka. This area is distinguished by an ecologically clean five-kilometer zone with wide sandy beaches, boarding houses and recreation centers. The hotel provides a wide range of services: restaurant, free parking, seasonal outdoor pool, bar, room service, sauna and much more.

«Undersun» promoted and provided services through Internet booking systems such as «Booking», «HotelsCombined» and a lot of Ukrainian services. But working with them imposed a number of restrictions, so the owners of the spa hotel decided to create their own website to promote the brand.

Our task was to create an attractive, adaptive website with the possibility of booking rooms and demonstrating the services provided.

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

Development process

Before starting work on the site, we deployed an environment for further development and set up the server, taking into account the technology stack used. The fact is that Laravel and Nuxt.js are useful, but rather capricious tools. Therefore, it is important to choose the right environment for them and set it up correctly.

Back-end development on Laravel

For the development of the «internal» component, we decided to use Laravel, a popular and adaptive framework that is best suited for solving light and medium tasks. At the same time, it is easily scalable and finalized, so at any time you can correct existing errors and quickly customize the site at the request of the client.

Laravel is a PHP programming language framework. Thanks to it, coders and designers do not need to reinvent the wheel every time to create a web application. Instead, they can focus on the really important tasks. Laravel allows you to create both simple and complex sites, implementing the desired functionality. No wonder the slogan of the project says that this is a tool for «artisans».

Banner

For the administrative panel, we chose Laravel Nova, which supports the necessary functions out of the box and significantly speeds up development for programmers.

Nova is a beautifully designed and extremely user-friendly admin panel for Laravel. Its main feature is the ability to create, view, edit and delete resources in the database. In addition, the developer can work with lenses, create filters, prioritize tasks, and use SQL search. Therefore, the words of the creators of Nova that their product will make you the most productive worker in the galaxy are not empty words.

In the site administrator panel, we implemented:

  • Adding content with translation into three languages;
  • Adding multiple «room» entities;
  • Saving images and videos;
  • Work with images in a separate section of admin panels;
  • Implementing builders for editing with Flexible Content. Thanks to this, the administrator can create blocks with any set of fields and swap them.

In addition, we used the REST API, with which you can «give» all the content in a convenient json format.

01

/ 05

Front-end development with Vue.js

The main goal of the project is to attract customers with the subsequent booking of rooms, so the site must be indexed by search engines. The Nuxt.js framework is best suited for this. It is based on the more well-known Vue.js and allows us to achieve our goal through Server Side Rendering (SSR). Thanks to this, already from the start, the site supports the necessary functionality for SEO promotion in search engines.

Tourism is an international hobby, which interests more and more people from different parts of the world every year. For this reason, we decided to implement multilingualism using i18n and add Ukrainian, Russian and English versions of the site.

Note that this is not a standard auto-translation - the content is filled in separately for each language and has unique URLs.

Among the interesting tasks during development, we note the addition of a large number of effects and animations. We have implemented the vast majority of them using the GSAP library.

Here are some examples of animations implemented on the site:

  • Scroll Trigger — the appearance of blocks when the scroll on the page reaches a certain position.
  • Split Text — the appearance of text character by character.
  • Timeline + Scroll Trigger + smooth scroll — parallax effect.
Banner

In addition, we have implemented a rather interesting transition animation between slides, which supports several effects at once. To create it, we used the Hover Effects library, based on Three.js.

As the name implies, it works on hover, so we had to refine and adapt it for an element with automatic slide change after a specified period of time (autoplay).

Banner

We have also integrated a booking module that allows you to view the availability of rooms by date and leave a request for a specific time.

Banner

The result

As a result, we got a stylish and fully adaptable site with many interesting effects. A minimalist and user-friendly booking page should be singled out, where everyone can get a brief description, a list of services and benefits, photos, price and possibility of booking.

[post_title] => SPA Hotel Website with Room Booking [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-with-room-booking [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=10532 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [8] => 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 ) [9] => WP_Post Object ( [ID] => 15979 [post_author] => 10 [post_date] => 2022-07-24 16:30:05 [post_date_gmt] => 2022-07-24 13:30:05 [post_content] =>

Today, most web resources are developed on the basis of the flexible and multifunctional WordPress platform. However, not all developers at the initial stages provide for further SEO promotion, which is an integral part of a successful business on the Internet.

Our specialists foresee and take it into account at the very first stages of work. With this approach in developing the structure of commercial projects, further promotion in search engines becomes more efficient and effective. We used this approach in our work with a new client of our company Fluidbusiness group. Thus, our task was to develop an online store for the US market with SEO preparation (website optimization for search engines) already at the stage of its creation.

https://wnauts.com/wp-content/uploads/2022/07/fluidbuissenvideo.mp4

About the customer

The main field of activity of the Fluidbusiness group is the selection, supply and maintenance of pumping equipment from leading world companies. In this area, the specifics of sales are that it is not guaranteed that the final cost will be the same as the preliminary announcement of the cost of a particular item in the catalog, since pumping equipment must be selected taking into account many factors.

Therefore, the main need for the client was to create a product catalog with a price request and a feedback form, through which the managers of the online store could contact the customer to clarify the details of the order and calculate the cost.

Banner

Project implementation

Technical side of the project

As mentioned above, we took the WordPress platform to create a classic online store with a product catalog. The main advantages of the platform are clear logic and a wide range of functions for creating a commercial project.
We decided to divide our web resource into semantic blocks-pages so that site visitors can quickly and efficiently find the necessary information.

Online store includes:

  1. Catalog of production of leading world manufacturers.
  2. Services.
  3. Information about the company.
  4. Sales niches.
  5. Questionnaire for clients.
  6. Company contacts.

To list products in the catalog, we used WooCommerce, one of the best e-commerce plugins.

Why this particular plugin?

Here are a few reasons why we use it in our commercial projects:

  • it allows you to customize the design with a visual designer or through code;
  • it has more than 400 extensions to improve the appearance and functionality of the online store;
  • it provides access to the REST API for management and integration from product cards to orders;
  • it allows you to post ratings and reviews of products for SEO promotion;
  • there are no restrictions on products, images and galleries;
  • advanced sorting and filtering of goods is available;
  • there are customizable checkout areas.

This is what the page with product cards on the site looks like:

Banner

Development of an individual questionnaire

In a separate block on the site, an individual questionnaire form was written for more than 50 fields to meet all the necessary specifics to the goods. This was done so that managers could provide more detailed advice to a potential client when they call back.

https://wnauts.com/wp-content/uploads/2022/07/fluidbussins-video.mp4

We also made it possible to store all completed forms on the server using the Flamingo Address Book plugin. This tool in WordPress saves absolutely all messages that have been sent through contact forms. They are collected exclusively on Flamingo and are always available. With this plugin available, you no longer have to worry about losing important messages due to incorrect mail settings or mail server errors. The plugin is a fairly reliable platform tool.

Performance

Our team pays special attention to such a criterion of a web resource as its loading speed. For a WordPress online store with a WooCommerce module, this is especially true, because CMS sites with a large number of plugins often turn out to be quite slow. We managed to achieve fast loading of the pages of the online store with the help of the correct layout and the optimal use of all available tools. In our case, we ensured that the site was in the green zone on desktop devices, and on mobile devices it provided the yellow zone of performance.

Banner

Competent construction of the structure of the product catalog on the site

Previously, our specialists thought out and built the directory structure immediately for SEO promotion:

  1. Categories and subcategories of goods were designed. A clear structure gives the visitor an understanding of what they will find in the online store and guides them through the logical chain to the necessary product card. In addition, logical structuring increases the position of the resource in search engines.
  2. Correct URL structure was built. The structure of the site addresses should be as simple and understandable as possible, which will make it more convenient for the eyes of visitors. The main points that we paid special attention to are: organization not by identifiers consisting of many numbers, but by ordinary words; using punctuation marks in URLs; using the correct case of the URL; using "/" at the end of the address.
  3. We thought out sections in which informative articles for search promotion will be placed. These are not only categories, but also niches in which products are used — Markets.

The result

The result of creating an online store for pumps on Wordpress / Woocommerce was a web platform with the following important features:

  • initial SEO optimization already at the development stage will ensure a quick start of the project in Google;
  • the speed of loading pages of the store is well perceived by search engines and site visitors;
  • a detailed block questionnaire helps to accurately formulate the needs of the client and offer the best solution;
  • all customer information is securely stored and structured.

At this stage, we are confident that the FLUIDBUSINESS GROUP (USA) online store, created on WordPress with an eye to SEO promotion, has very good sales prospects even for relatively niche, highly specialized equipment.

[post_title] => E-Commerce of Pumping Equipment (USA) [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => online-store-of-pumping-equipment-usa [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:21 [post_modified_gmt] => 2023-04-17 12:06:21 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=15979 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [10] => WP_Post Object ( [ID] => 16635 [post_author] => 10 [post_date] => 2022-08-26 09:42:07 [post_date_gmt] => 2022-08-26 06:42:07 [post_content] =>

About the project

Profi Make is a villa rental company on the Palm Jumeirah in the UAE.

The company is no less than 12 years old, and of course, during this time it managed to acquire a corporate website. However, over time, the client decided to promote their services under a new brand and create another site. This is how Profi Make met the Webnauts team.

Read about what happened as a result of our cooperation in our case.

The objective

Profi Make is represented on various online accommodation booking services, in particular Booking.com and Airbnb. But the main platform is a corporate website that attracts customers with the help of contextual advertising.

So we had the task of developing a website for the company that would fully correspond to its activities: with an attractive design and competent presentation of content. That is, to make sure that all pages of the site are not just convincing, but obviously emphasize the company's rich experience in the field of luxury real estate.

Technological solution

To develop the Profi Make website, we used the Bitrix 24 CMS constructor. The decision was justified by the fact that the client had already used Bitrix24 as a CRM, and the creation of a site within the same CRM came in handy.

Why is Bitrix24 so good? This is a convenient constructor that allows you to:

  • create a design from ready-made blocks and elements;
  • create additional web pages;
  • optimize the site for promotion;
  • get detailed statistics;
  • collect customer contacts using built-in CRM forms;
  • integrate the site with payment and other external services.

In addition, the speed and cost of developing a site on Bitrix24 is simply pleasing.

Banner

Website design and navigation

As we intended, the design of the site turned out to be minimalistic, neat and elegant, as a project for renting luxury villas should be. The color scheme is restrained and consists of 3 colors:

  • white is the main background color of web pages. It gives the site elegance and airy lightness;
  • sand — an additional warm color with a direct reference to the desert landscapes of Dubai;
  • black is the accent color for the main text, header and footer of the site. It is associated with professionalism, maturity and allows you to focus on what is important.

Main page structure

We placed only 3 elements in the site header: a logo and two contacts in the form of a phone number and a link to an Instagram account.

The main screen also has a photo of the Dubai skyline, a laconic slogan and location. All of them aptly and concisely broadcast the activities of the company:

Banner

An animated pop-up in the lower right part of the screen unobtrusively reminds you of the opportunity to write to a consultant, and clicking on it instantly brings up a chat window:

Banner

By the way, all messages sent from the site instantly get into the Bitrix24 CRM system which our client uses for their further and prompt processing.

Catalog

The very first site of the company had a catalog with a solid block structure and 2 search filters: location (an unnecessary item due to the fact that there is only one option) and the number of rooms. Such a catalog lacked logic, visual appeal and ease of perception.

This time, when developing the catalog, we completely abandoned the navigation bar and immediately structured the villas by the number of rooms. This is the main parameter when searching for apartments, which often determines the cost of rent. We presented the sections of the catalog in the form of a circular slider:

Banner

Location Description

As mentioned earlier, all villas have a one and only location — Palm Jumeirah on the coast of Dubai. Copywriters enthusiastically made a laconic description of the island, illustrating it with colorful photographs. To describe the location, we have dedicated a separate screen:

Banner

About Us

This is not just a site block, but a brand mirror. It reflects the history, activities and experience of the company. It is able to create an image that deserves the trust of customers, but only with competent text. As you guessed, here, too, it was not without the skillful thought of a copywriter. As a result, the story about the founder and the Profi Make team turned out to be simple, businesslike and restrained:

Banner

FAQ

The FAQ block is often underestimated. So, this section was missing in the previous project of our client. Very much in vain, because in fact it is mandatory for sites offering complex services. And Profi Make is one of those.

Our copywriters have clearly, specifically and concisely formulated answers to the most frequent questions of clients, and now the FAQ section is fully consistent with its tasks — it brings the client closer to the target action, closes objections, reduces the load of consultants and allows to increase the usability of the site in the future.

We implemented this block as a drop-down list with a hover effect:

Banner

Villa description pages

Like the entire site, they are made in the best traditions of minimalism: a photo card, the main characteristics in infographics and a button that opens a window with an application form. Below is a gallery of photographs, a description and a detailed description of the apartments.

And while the copywriters were writing inspiring texts, our developer also wrote something — a custom js script that allows you to open the villa page when you click on its card (and not on the link):

Banner

The concise feedback form is the crowning achievement of the page design. Let's look at it in more detail.

Feedback form

It is presented in a static form at the end of the main page of the site and individual pages with a description of the villas. This type of form is simple and unobtrusive, besides, we have already used 1 dynamic element in the form of a pop-up window.

In addition to the required fields for the name and contact number, the form has fields for the dates of the villa booking. But even despite this, the window turned out to be clear and concise:

Banner

Site adaptability

All blocks and elements of the Bitrix platform are fully responsive, which means that the site perfectly adapts to different screen resolutions and is equally convenient from all mobile devices — from selection to booking apartments:

Banner

Animations

The Bitrix platform provides ample opportunities for animation without the use of third-party libraries. In this project, we relied on simple effects of appearing and moving away, lifting and shifting elements to the center of the screen, changing colors when hovering over the cursor (on buttons, links, list items and photos of villas), as well as a pulsating online chat button.

Results

In cooperation with developers and copywriters, we managed to create a convenient minimalistic website with a well-thought-out structure, inspiring texts and unobtrusive animation effects. Neat, convincing and solid site perfectly reflects the activities of the company for the rental of luxury real estate.

[post_title] => Website for Renting Luxury Real Estate in the UAE [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-renting-luxury-real-estate-in-the-uae [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:21 [post_modified_gmt] => 2023-04-17 12:06:21 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16635 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [11] => WP_Post Object ( [ID] => 16668 [post_author] => 10 [post_date] => 2022-09-16 13:53:10 [post_date_gmt] => 2022-09-16 10:53:10 [post_content] =>

The multilingual nature of the web resource allows you to significantly expand the scope of your interests and enter new sales markets. It was for the development of multilingualism that the real estate agency «Estate Barcelona» turned to us. They already had a high-quality and working site in Russian on the Bitrix platform, so it was decided not to complicate the work, but to use the platform's tools to develop full-fledged pages with competent content in English and Spanish.

Later, the client also wanted to integrate a tool for generating PDF documentation and ZIP archives with photos on the site.

Banner

About the company

Agency «Estate Barcelona» specializes in the sale of residential and commercial real estate, as well as the implementation of investment projects in Spain. The company provides a full range of services in the field of real estate purchase, investment, trust management, immigration and registration of a residence permit.

Agency specialists also solve additional issues related to the acquisition and management of real estate. They accompany clients not only in the process of choosing and buying real estate, but also provide after-sales services. The agency offers a whole range of services that require the possession and handling of large amounts of information. That is why it was decided to integrate the automatic generation of PDF documentation and ZIP archives on the web resource.

Implementation of multilingualism

Multilingualism is the ability to optimize a web resource so that people from different countries receive the same content in a language they understand. But as our experience shows, it is not enough to upload multilingual articles. It is necessary to translate not only text blocks, but the entire site: menus, links, and SEO data of each page. Information shown to a visitor from anywhere in the world in another language must be complete and of high quality.

In our case, the site is located on subdomains with a common database. That is, most pages have their own independent translations (static pages), and objects have different language properties that are displayed depending on the language. Translation into English and Spanish was made and added to the resource manually.

This is how our customer's web resource is displayed in different languages:

https://wnauts.com/wp-content/uploads/2022/08/estate-barcelona.-multilingual-site.mp4

PDF generation

After the successful implementation of multilingualism, the client wanted to increase the functionality of their Internet resource by generating PDF documents. How this functionality is useful:

  • it is possible to quickly generate price lists of offers;
  • generate all the necessary information about the object in one document;
  • issue invoices;
  • form diplomas, certificates, etc.;
  • makes it possible to conveniently store and print the necessary information.

In our case, the client needed to generate their cards in the form of PDF and quickly create full-fledged catalogs.

The generation of PDF documents on any site begins with the search for a library that can provide this feature. Since the resource works in PHP, the library should also be selected in PHP.

The TCPDF library is an open source PHP library for instantly generating PDF documents that includes full support for Unicode UTF-8. The library is very easy to use and has many settings, and is also included in many popular CMS and frameworks. In our case, this library has become the most suitable option.

This is what a PDF document with the most necessary information about a property looks like:

https://wnauts.com/wp-content/uploads/2022/08/estate-barcelona.-pdf-generation.mp4

Generation of ZIP archives

The next step in improving the functionality of the site was the automatic creation of a ZIP archive with photos. It is much easier to handle large volumes of information when it is possible to use archives rather than individual files. The customer wanted to create a zip archive with images related to the construction site at the push of a button. It was necessary to place such buttons in the public part and the administrative panel.

We used Bitrix to integrate with the admin panel interface and to access images. PHP tools (ZipArchive class) were used to create the archive.

Problems encountered in the work process

It was important for us that the archives opened correctly on both desktop and mobile devices. As it turned out during testing, the archive on mobile devices with the IOS operating system did not open correctly.

Solution

Due to the peculiarities of the IOS architecture, we had to add all the necessary headers to describe the generated file. Given the Bitrix architecture, the code was placed inside the bitrix/php_interface shared folder, which made it available to all sites.

After the work was carried out by us, the site administrator had the opportunity to quickly create archives with photographs of real estate objects of interest to clients and promptly send them to any device.

This is what the offer looks like on the website:

Banner

And this is how the ZIP archive with photos looks like:

01

/ 05

Summary

As a result of our work, the client received an improved website with the following functionality:

  • customers from anywhere in the world can view content in their preferred language;
  • visitors can independently generate PDF files with the real estate options they are interested in;
  • the administrator has the ability to quickly and easily create entire collections and catalogs from suitable offers;
  • an automatically generated zip-archive allows site managers to quickly provide photos of product cards in a compressed format.

Today we continue fruitful cooperation with the real estate agency «Estate Barcelona» to improve and optimize the work of the web resource. We are confident that this cooperation will benefit the client and the experience of our company.

This is not the first time we perform IT work for real estate agencies and have already studied the needs of the market and the necessary tools in this area quite well. Therefore, feel free to contact our specialists for professional advice and optimal solutions.

[post_title] => Real Estate Agency Website in Spain [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => real-estate-agency-website-in-spain [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:18 [post_modified_gmt] => 2023-04-17 12:06:18 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16668 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )

Worked on