Magic ceases to exist once you understand how it works.
© Tim Berners-Lee
Alexander worked on:
bloggermall.com.ua — front-end development on Vue.js(v.2): sliders, modal windows, constructors, pagination, creating a personal account, adaptation for mobile devices, using REST api to interact with back-end.
iqosa.com — transferring the site to Vue.js(v.2) and Nuxt.js(v.2), creating animations through Three.js and GASP, making the layout, implementing multilingual versions, using REST api to interact with the back-end.
leani.ru — front-end development on Vue.js(v.2) and Nuxt.js(v.2), implementation of visual elements, pagination, map integration, creating personal account and shopping cart, checkout pages, implementation of ReCaptcha and PayPal payment system.
Stack
-
HTML 5
-
CSS
-
JavaScript
-
JQuery
-
Git
-
Gulp
-
Webpack
-
PHP
-
Laravel
-
Nuxt.js
-
Vue.js
-
Sass
Worked on
-
Redesign of e-Commerce on Shop Script
-
05.06.2022
-
0
Reviews
-
01
/ 06
Using convenient filters, you can select bloggers with the necessary budget, number of subscribers and engagement rate. The platform also allows you to set filters for the required target audience by interests, age, gender and geolocation. By setting up each filter, the customer will be able to find the perfect candidate for their advertising campaign.
Blogger profile and dynamic analytics
By going to the page of a particular blogger, the advertiser can get acquainted with their indicators and detailed audience analytics. Analytics are dynamic and updated in real time. The service provides real data on the number of subscribers, their geolocation, gender, age, audience engagement rate, as well as the number of likes and comments under publications.
01
/ 03
To get this amount of up-to-date data, we have developed a special application for integration with Facebook Business Manager. Information about the blogger's page is passed to the service via the API: thanks to this, we can display data that cannot be obtained by simply parsing the page. This approach makes the analytics more accurate and deep.
For the analytics to work correctly and display the latest posts, the bloggers links their Instagram accounts to the profiles in their personal accounts.
Non-standard integration with UApay
On the blogger's page, you can also get acquainted with their pricing policy and order the necessary service. The platform acts as a guarantor of the security of the transaction: it reserves and holds the agreed sum of money until the performer places the advertisement.
To implement this functionality, we implemented a non-standard integration with UApay:
- Upon receipt of money, the payment is split into two parts: the blogger's funds (90%) and the exchange's funds (10%).
- The funds are not immediately transferred to the recipients, but are held for the period of the task.
- If the blogger does the work and the customer accepts it, the funds go to the corresponding accounts of the blogger and the exchange.
- If the task is not completed or the work is not accepted, the funds are returned to the payer's account.
The payment process is fully automated and requires no intervention. The exception is when the application is referred to arbitration.
Blogger's personal account
After the advertiser has made a preliminary payment, the order is displayed in the blogger's personal account. Here, the blogger can contact the advertiser through the messenger built into the platform: this is the main way to communicate with the customer, the space for agreeing on the terms of reference and discussing all the details of the transaction. For each order, a separate chat is created, in which you can track the chronology of work, request an additional payment, or confirm the completion of work.
A list of all advertising campaigns is displayed in the personal account (as well as in the advertiser's account). Convenient filtering at the top of the list helps to separate current orders from completed or awaiting confirmation.
After agreeing on all the details and placing the advertising integration, the blogger confirms the completion of the task. If the customer mutually confirmed the completion, then the money goes to the blogger’s account, from where they can be withdrawn to any bank card.
Switching from Wordpress to Laravel
The Bloggermall project was originally launched on the WordPress platform. This was done in order to quickly enter the market and test the business idea. The new project turned out to be attractive and the site went up. However, along with this, technical difficulties began to arise:
- the growth of visitors had a negative impact on the performance of the site;
- there was a need for new elements, the implementation of which is limited by the Wordpress platform.
With a significant increase in the number of users, the loading of the page with the list of bloggers moved into the red zone according to Google PageSpeed. After the analysis, it was revealed that the reason is the inefficient architecture of the database. As a result, it was decided to switch to the Laravel framework. Its use allows you to create a more efficient database structure, and also removes restrictions in the development of the project to add new modules. It was also decided to switch to a more progressive DBMS — PostgreSQL.
A list of all advertising campaigns is displayed in the personal account (as well as in the advertiser's account). Convenient filtering at the top of the list helps to separate current orders from completed or awaiting confirmation.
The implementation of the changes we planned looked like this:
- The frontend part of the application has been radically changed. Now the personal account is written on the VueJs framework. This allowed us to fully apply the Websockets technology. For this, a separate module was developed on the server, which included NodeJs and Redis — the link between Laravel and NodeJs. As a result, the chat has become more functional online.
- All integrations with other services were re-written — Facebook, Instagram, Instagram story parser, sms mailing service, email mailing service, telegram bot notifications, E-sputnik, Google Sheets, payment aggregator.
- A scheme with a task queue was implemented, which assumes the exact execution of a task at a given moment and the distribution of load flows without involving additional server resources.
- As an addition to the functionality, integration with the neural network service was added. This makes it possible to analyze the blogger's audience and an additional section of the site — the blog.
As a result of all our actions, we received:
- green zone for the speed of loading all pages of the site that are in search engines;
- the search for bloggers has become more convenient due to the high speed of server response;
- site managers have a great opportunity to create all kinds of tasks for writing new modules.
Summary
BloggerMall is an example of a convenient and secure service that connects the artist and the customer. It stands out not only for its bright design, but also for its wide functionality for searching for suitable contractors, discussing technical specifications and making secure transactions.
A few words about the project
The online store of modern accessories for electronics has been our regular customer since 2014. Over the years, we have developed a warm and trusting relationship with the customer, so we are happy to tell everyone about how we carry out a comprehensive promotion of this site, paying attention to several areas at once, among which we can note: SEO, crowd marketing, SMM, site speed optimization , content, usability improvement.
This online store has been maintaining its leading positions in many highly competitive queries in Ukraine for a long time and continues to strengthen its positions in search engines. All this is thanks to the well-coordinated work of our «Webnauts» team, from designers to copywriters.
How to achieve good results in search promotion for the Ukrainian region, how to promote an online store website, how much it costs and much more: all these you will learn from this case.
Features of promoting an online store in the region "Ukraine"
The key to the success of any online store lies in its comprehensive promotion, which we successfully demonstrated using the example of Bilka. Over several years of fruitful cooperation, we tried many different ways of promotion, but the main efforts and budget were eventually directed to long-term «slow» methods, the results of which were gradually displayed in increasing the traffic of the resource from organic search.
This method is the most time-consuming and costly, but also more reliable, because in this case the site confidently takes its positions and will not lose them even if the development of the project is suspended.
The peculiarity of promoting the site of an online store in the region «Ukraine» is that after the deterioration of the political situation and the ban on the use of many Russian resources and services (primarily this applies to the Yandex search engine), Ukrainian users prefer to look for answers to their questions in Google, therefore, the main emphasis in the promotion of the online catalog of accessories for mobile devices «Bilka» was placed precisely on this search engine.
It's no secret that Yandex and Google have different algorithms for the distribution of resource positions for a particular request, so the promotion of this online store is aimed at meeting Google's requirements in the first place. After blocking in Yandex (May 2017), the share of visitors from this service decreased to 5% of the total, although the popularity of the Russian service used to be very high in Ukraine (see chart).
A comprehensive approach to promoting an online store
Our SEOs and copywriters from Webnauts are constantly working to increase the attractiveness of the site not only for search engines, but also for visitors. We are regularly engaged in the creation of high-quality materials; in our list of priority work, SEO-optimization of the site occupies the first position. Among the most important procedures, the following is worth noting:
- creating SEO texts and meta tags in all sections of the site;
- filling out cards for new and existing products;
writing competent SEO texts for static pages; - creating a sitemap;
- creation and regular updating of the «News» section with relevant thematic materials;
- setting up the fastest indexing of new pages;
- integration with monitoring and optimization services of Google;
- adding an online store to all major business directories;
- optimization of code and images to speed up loading speed.
Features of filling the online store
An important factor in ranking an online store in search engines, including Google, is the quality content of the site. First of all, you need to pay attention to the main sections, resource categories, static pages, optimize not only meta tags, but also other textual information on each page.
Most online stores in Ukraine have filters in their product catalogs that help you quickly find the right product, compare and buy it. It is very important to organize SEO-optimization of these filters so that a potential buyer can find what they want in just one click from organic search.
Link building, link profile
One of the most important factors for the successful promotion of an online store in Ukraine is link building. And it should be good quality and natural. Since no one promotes online stores exclusively with natural links, we also used some tricks, among which crowd marketing is one of the most successful and effective methods of obtaining targeted visitors and natural links.
There are several people among the Webnauts staff who develop and maintain profiles on specialized forums on various topics. Depending on the tasks set, they make hidden advertising, describe the positive aspects of a particular site, store, advise, share their opinions and recommendations. Promotion through crowd marketing has proven itself in absolutely all areas, including electronics, accessories for which are successfully sold on the website bilka.com.ua
Article promotion also does a great job of building backlinks. This method has always been and remains one of the most effective, because you can choose which pages of the promoted site will have links, in which text (you can write it yourself), on which specific site they will be placed. It all depends primarily on the size of the budget, but even inexpensive links from articles will have a very positive effect on the attitude of search engines to the site.
Natural links speak for themselves, they are indirectly related to promotion, because they are an indicator of the quality of the site and its relevance in the selected category. In other words, if the online store is good, the site is fast and convenient for buyers, they will talk about it, reviews will scatter over the Internet, thereby increasing the number of natural backlinks. This is a nice bonus that every high-quality and optimized site receives. This factor increases the motivation to create a good online store, such as, for example, bilka.com.ua.
Social media also have a big influence on positions in search engines, so we pay a lot of attention to the development of store profiles in popular networks. Backlinks in this case serve as a source primarily of the target audience, which has a positive effect on the overall picture of the behavioral factors of the online store
Responsiveness, usability
Effective promotion of an online store today cannot do without adaptive layout and universal design. More than half of potential customers access search engines through their mobile devices (see statistics on the image), so the site should work correctly on absolutely all known display resolutions. We solved this problem successfully and bilka.com.ua looks great on any gadget, as evidenced not only by satisfied customer reviews, but also by screenshots next to this text.
Since behavioral factors are very important in the promotion of any Internet resource, we also tried our best in the case of Bilka — our designers have developed an excellent interface, which we regularly refine and make better, taking into account customer reviews.
Summary
Online store «Bilka» has been one of the best regular customers of «Webnauts» for several years, because it allows from the very beginning of our cooperation to use as many ways in promoting the resource as possible, which greatly facilitates achieving results. Over the years, we have done a lot of important and useful work, we continue to modernize and improve this online store. And even if the cost of such promotion is much higher, an integrated approach gives reason not to doubt the results, which are reflected in the growth of profits and increase in the growth of visitors (see the chart below)
The price of our services is justified by such results and we hope that SEO promotion of an online store in Ukraine will be of interest to many business owners and they will turn to real professionals in their field.
The objective
Meet another Webnauts project — IOD (Intellectual Outstaffing & Development), which provides outstaffing and outsourcing services. And which badly needed a modern and user friendly platform.
- What for? To sell the services of IT specialists.
- Who for? For Western companies that want to quickly hire the right specialist and make the right choice.
By answering these questions, we managed to create a convenient and practical website that qualitatively presents (and therefore sells) the IT team and solves the problems of customers.
How did we do it? More details in our case.
Interface design
The main treasure of an outstaffing company is its team, and if the team comes from Ukraine, this is the dream of any Western client. It's no secret that Ukrainian IT specialists are one of the most sought-after specialists due to their high professionalism and low level of claims for payment, which cannot be said about their colleagues from the USA and Europe. Due to Russian aggression, the Ukrainian IT sector found itself in difficult conditions, but it has not ceased to arouse interest and attract even more attention from the world. Therefore, the main task of the designers was to introduce the site's guests to the team of potential performers from the first screen: IT professionals from Ukraine.
Call to Action (CTA)
Another important advantage of outstaffing is saving the client's time in finding the perfect employee. On the site, the slogan speaks about this, the button shouts and the gallery with candidates calls for viewing, and it all from the first screen. At the same time, the design is not overloaded at all: there is a lot of air here and everything is clear even for those who do not understand anything about outstaff and outsourcing.
Mega menu for navigation
The second screen offers more opportunities for searching for an employee both by a separate direction («Profession»), and by a specific technology («Technology»). And all thanks to clear search navigation in the form of a mega menu with two sections. So, we presented a block with IT areas in the form of a small plate of 4 points, each of which is tied to a gallery of specialists.
The list of technologies is much wider, so we abandoned a bulky vertical list and placed the categories line by line, adding the «See more» button. This technique is much more efficient in terms of appearance and ease of navigation:
Site search filter
Clicking on the «See all» button or on any of the technologies takes the user to the «Specialists» page, where the possibilities of finding an employee are even wider due to additional filters, such as «Specialization», «Experience», «English level» and «Available» in slider:
Drop-down list
The next block introduces site visitors to the company's services. We designed it in the form of a concise drop-down list with preview arrows. This technique simplifies the interface, focusing on the important, but if desired, allows you to easily access information and reveal additional information in one click:
Company page
The «About us» block allows you to learn more about IOD. Here the text is supported by a photograph and large numbers in the best traditions of Swiss typography. The big button encourages you to get to know the company even closer and takes the user to a separate page of the same name:
It is not only about UX
The next screen is more about UI, not UX, and is a bright and logical continuation of the «About us» block. If earlier the white color played the main role on the site, forming «air» between the elements, and blue only gave an accent, here the blue color sets the tone for the entire composition. It is associated with reliability, safety and trust, which perfectly characterizes the company. In addition, for a clear reason, the blue color is dear to every member of the team, and together with the «Glory to Ukraine» ticker, once again emphasizes the company’s belonging to Ukraine:
List in a table
The «Outstaffing benefits» block in the form of a concise table reveals the benefits of outstaffing using the example of cooperation with IOD:
Applying for a team
The following block offers clients to hire a ready-made team for a project: be it a website, a mobile application, an individual design or a comprehensive promotion. The client can get a proven team in just one click:
Grid in design
The site design is based on a non-standard 16-column grid with two guides, according to which all blocks and interface elements are located. All content is divided into 2 halves (on the left is the heading, and on the right is the main text), making it much easier to perceive information. The composition also has a rhythm due to the alternation of headings (either on the left or in the center), which gives the interface a kind of dynamics:
This is how the designers brought clarity to the outstaffing model with the help of a visual language and reduced a rather complex form of labor relations to a simple and attractive service.
Text content of the site
Having talked about the visual language, we cannot but mention the textual content. After all, if the task of good design is to convince the user to stay on the site, then the task of high-quality content is to convince them to buy. Anyway, a potential client will eventually move from scanning the site to studying it.
Webnauts copywriters tried to make the site of the outstaffing company not only easy to use, but also understandable. Getting acquainted with the platform, the user can first pay attention to well-aimed headings and thus understand the navigation, and then move on to concise and simple texts.
The accessible content of each page allows the user to quickly understand the subject of the site, easily understand the conditions and benefits, increase confidence in the company and use outstaffing services.
Interface coding
Where design ends, front-end development begins.
HTML, CSS and JavaScript are the three pillars of the front-end on which the user interface stands. With the help of these languages, we have turned design layouts into a tangible web product.
In order to simplify and structure the code, we used a kind of CSS extension — the Sass preprocessor scripting language and its SCSS syntax. And to insure the code from errors and make the site work properly, we were helped by the Git (Global Information Tracker) version control system.
However, this is not all. The front-end development was based on the Vue.js JavaScript framework, as well as the Nuxt.js Vue.js framework. These technologies allow you to create powerful web applications for Vue.js, including Alibaba, GitLab, 9Gag, and now the IOD website.
In addition, in the development of the client part of the platform, we used such libraries as:
- Vuex — for managing the state and storing site data.
- Vue router — to sync the site URL with the rendered web page.
- vuejs-paginate — for paginating the site.
- vue-click-outside — to respond to clicks outside the interface element (in our case, this is a dialog box with an application form):
- nuxt/i18n — to adapt the application to the user's language.
- cookie-universal-nuxt — for setting, receiving and deleting cookies.
- nuxtjs/svg-sprite — for uploading SVG files to site pages on Nuxt.js.
- nuxt-ssr-screen-size — to control the screen size between responsive and desktop versions.
- v-scroll-lock — to block the scrolling of the site page when the modal window is open:
- Swiper — to implement a touch slider.
Thanks to the Nuxt Sitemap module, we have created a sitemap, an important document in terms of SEO. It contains a list of all web pages and helps search bots crawl the site.
Animation
Animation continues to be one of the top trends in web development. In our works we use unobtrusive effects, but in this project we have relied on a special dimensionality.
The minimalistic cursor and the smooth appearance of each element when scrolling slowly guides the user through the pages to properly introduce the team, conditions and benefits. Such animation, as if grabbing the sleeve, allows the client to avoid mistakes and make the right choice, thereby arousing interest and trust. In addition, the use of animation confirms the innovativeness of the service and the fact that the visitor is dealing with an IT company.
To create animations, we used the GSAP (GreenSock Animation Platform) JavaScript library, in particular, and for the smooth appearance of blocks and lines separating content:
Animation Cursor
The sliding decorative cursor in the form of an outline circle enlarges and changes color when hovering over links. This effect was implemented using JavaScript and a linear interpolation function:
Animation on hover
The color change effect on hover increases user engagement and allows them to focus on the content inside the cards:
Slider effect
When you hover over a photo, a slider effect appears and calls up a card with brief information about the specialist, and when clicking on it, the user goes to a separate page with a detailed resume. We implemented this effect using CSS:
Ticker effect
We have already talked about this graphic technique that has been attracting the attention of users since the good old 90s. And again, the ticker broke not only into web design trends, but also into our new IOD project. We implemented the ticker effect using the vue-marquee-text-component library and thus increased the interactivity of the site:
Responsiveness
We have completely taken control of the design and adapted the layouts so that the site looks organic on the screen of any type of device. Sometimes adaptivity requires simplification or even cutting off secondary blocks or animations. However, in this project, we managed to keep all the elements and animation effects.
As a result, we rebuilt the blocks in such a way as to correctly convey the meaning and not violate the logic of the site. In addition, each item is large and clickable, and along with the competent placement of elements, it allows you to effortlessly switch between items and conveniently explore all the content, whatever the size of the display.
A harmonious design responsive to mobile devices is a must have for any commercial site, because more than half of the world's users access web services from smartphones.
Site functionality
Each block and element on the site must obey the user and properly perform its function. Our back-end developer worked hard on this task.
Website admin panel
The admin panel of the site is provided by Laravel Nova from Laravel developers. It has an attractive and understandable panel with convenient content management due to customization:
01
/ 03
Laravel Nova Packages
Laravel Nova has a huge number of plugins that extend its functionality. So, in this project we used the following packages:
- laravel/telescope — for debugging the Laravel framework and monitoring site performance.
- protonemedia/laravel-cross-eloquent-search — for searching across multiple site models.
- classic-o/nova-media-library — to manage media files.
- digitalcloud/multilingual-nova — to switch the site language.
- dillingham/nova-attach-many — for easy editing of linked models.
eminiarts/nova-tabs - for grouping parts and relationships into tabs. - optimistdigital/nova-multiselect-field — to add multiselect to the arsenal of Nova fields.
- optimistdigital/nova-sortable — for reordering models using drag and drop.
- whitecube/nova-flexible-content — for flexible generation of content blocks.
- wehaa/inline-boolean-field-update — for filling and updating checkbox fields online.
waynestate/nova-ckeditor4-field - for editing text areas.
Database
After installing all the plugins, we started creating a complex client-server site architecture - a database and the modules necessary for the site:
- Catalog of specialists with filters. In order for the client to see not only a beautiful, but also a fast-working search filter, we have done serious work and competently structured a huge database with a variety of types of relationships (one-to-many and many-to-many). The most difficult was the implementation of the links «specialist — specialization», «specialist — experience» and «specialist — technology» (many to many). As a result, the site's admin panel now has the ability to easily and quickly create new pages, manage specialists' data, and associate a specialist with a profession, specialization, experience, technology, and English level.
- Static pages. We have created the About us, Contacts and Teams pages, as well as set up content management through the site admin panel.
- Teams. In the admin panel of the site, you can create and manage teams, in particular, add and combine specialists into groups.
- The main page is implemented with a dynamic display of specialists, a mini-catalog and a block with IT teams.
- SEO module. We added SEO data to all pages of the site and implemented an SEO page generator for the catalog with filters. All filter combinations in the directory have unique automatically generated SEO data: slug, title and description.
- Forms. We have implemented a simple and convenient form submission, as a result of which the reception of data from forms is carried out in one form, which can be easily accessed through the admin panel.
Summary
Competent design, high-quality content, modern animation and high functionality — this is the result we expected. Such a site of an outstaffing company is able to impress not only with its design, content and speed, but also with its efficiency.
[post_title] => Custom Software Platform Developed for a Company Based in Ukraine [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-an-outstaffing-company [to_ping] => [pinged] => [post_modified] => 2023-09-13 16:51:17 [post_modified_gmt] => 2023-09-13 13:51:17 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16524 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [3] => WP_Post Object ( [ID] => 17059 [post_author] => 14 [post_date] => 2022-09-28 11:08:50 [post_date_gmt] => 2022-09-28 08:08:50 [post_content] =>The main tasks of the project
Softwarium, a Ukrainian IT company specializing in software development, asked us to create a fast website with an individual design and a user-friendly control panel. At the same time, the development of a corporate website for an IT company had to be carried out without compromise in the form of CMS, templates and ready-made solutions.
Spoiler: we did it. So to say, from our IT company to your IT company.
Individual UI/UX design
Before we met, Softwarium already had its own site on the Wix platform, but its design and technological solutions have become outdated:
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-before.mp4Designers were the first to get down to work and created a modern page design according to all UI/UX rules: from visual analysis and concept development to adapting layouts for stationary and mobile devices:
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-menu.mp4We updated the style and retained the corporate colors, structure and content of the predecessor site. As a result, we got a concise and elegant product in the Royal Blue corporate color, carefully balancing between efficiency and lightness, as if hinting to the user that reliable and simple cooperation awaits them:
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-main-page.mp4Animation on the site performs a practical function: it gives a response to hovers and clicks without distracting users from getting to know the content.
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-microanimation-on-the-site.mp4We paid special attention to the functional side of UX and made the site blocks super informative. Now they can be easily combined with each other and different pages directly from the admin panel. But more on that later.
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-informative-blocks.mp4Responsiveness
The site looks great on computers, laptops, tablets and mobile devices. Since smartphones and tablets have touch controls, all hover animations «trigger» not when you move the mouse cursor, but when you click on a button or other interface element.
Coding on powerful frameworks Vue.js and Nuxt.js
In developing the interface, we used two reactive JavaScript frameworks at once — Vue.js and Nuxt.js, with the help of which we revived many blocks and page types.
Interesting blog features
In the «Blog» section of the site, we have connected a useful «Share» function, which makes it easy to send useful articles of the site to mail, social networks and instant messengers. And this can be done not only on the page with a separate article, but also in the article directory itself:
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-share-function.mp4Thanks to the vue-in-viewport-mixin library, on each section page it is convenient to track the scroll position and switch between items in the menu of a separate article:
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-the-menu-of-a-article-in-blog.mp4One of the most interesting tasks was the implementation of the form on the blog pages, which invites the reader to leave a comment. As soon as the user enters their first and last name in the form, the initials are immediately displayed on the profile picture. Users can not only write comments, but also bring the text to life with emojis and GIFs. This became possible thanks to the v-emoji-picker Vue library, but GIF-picker had to be created independently, since the library for Vue had not yet been invented:
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-comments.mp4Contact form
There is a separate page for contacts on the site containing an application form. Here we used the vue-phone-number-input library, which prompts you to select a country from a drop-down vertical list and checks the mobile number for correctness:
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-form-with-a-drop-down-vertical-list.mp4When you hover to the addresses of the company's branches, the map changes its appearance:
https://wnauts.com/wp-content/uploads/2022/09/softwarium.-contacts-and-map.mp4Dynamic URL
URL (Uniform Resource Locator) is the address of sites and files uploaded to the Internet and displayed in the browser bar.
We have made the URLs of the Softwarium site pages dynamic. This means that if the client changes the title of any article, he will not need to edit the title of the page address himself, as it will automatically change after the new title.
Project feature — page builder in the admin panel
The backend of the site is implemented on the Laravel 9 PHP framework, thanks to which we got a super-productive and powerful site. But that's not all. The most important feature of the project was a unique page builder within the given design concept. This means that our client can create pages, menus and blog articles without the help of programmers in just a matter of minutes. To do this, designers and developers have prepared a huge number of blocks that can be filled with content, edited and placed in any order. And if you want, to completely remake the site on a completely different topic.
Adding a block to a page:
Ability to swap blocks:
List of pages:
Menu settings page:
At the request of the client, we implemented button customization in each block of the site, and if desired, the client can even change the text and color of the buttons in the hover and click state:
The site on Laravel in this case is not only a convenient constructor, but also a kind of CRM system, since applications from all forms come to the admin panel:
SEO friendliness of the site
Optimizing a site for SEO means not only making it available to search engines, but also distinguishing it from many other competing sites. To do this, we set up all the necessary parameters: meta tags, micro-markup, alternative image captions, as well as robots.txt files (the standard for exclusions for robots) and sitemap, which helps search engines find, crawl and index pages on the site.
Super fast page loading
The complex structure of the site and the variety of its content did not prevent us from achieving, without exaggeration, fast loading pages. We achieved this effect with the help of progressive frameworks: the Nuxt.js and Vue.js JavaScript frameworks on the client side, and the Laravel PHP framework on the server side. This approach allows you to make the development process flexible and eliminate unnecessary redundancy and slowness, which ready-made CMS systems like WordPress «suffer» so much.
The integration of the client and server parts of the site occurs through the API (Application Programming Interface) — a technology that allows one program to exchange data with another.
Results of cooperation
We met non-trivial and sometimes difficult tasks from Softwarium with enthusiasm and coped with them 100%. Thus, we did our best to fit the rich 20-year experience of Softwarium comfortably into the pages of a new, stylish and modern website of the IT company, and at the same time for it to be distinguished by high speed, performance and power. We managed to implement a unique page builder right in the admin panel of the site, which will allow the client to play with blocks and create new pages without code.
Without a doubt, cooperation with the IT company Softwarium in general and the case of developing a corporate website for an IT company on Laravel + vue.js gave us a unique experience and creative development.
[post_title] => IT Company Website on Laravel [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => it-company-website-on-laravel [to_ping] => [pinged] => [post_modified] => 2023-09-13 16:45:57 [post_modified_gmt] => 2023-09-13 13:45:57 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=17059 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [4] => WP_Post Object ( [ID] => 20680 [post_author] => 20 [post_date] => 2024-04-06 16:35:07 [post_date_gmt] => 2024-04-06 13:35:07 [post_content] =>-
About the project -
Design -
Separate page with offers for the client -
Layout and animation -
Administration -
Content -
Adaptability -
Conclusions
About the project
It's nice when customers come back. It is even more pleasant to realize that Webnauts solutions move the business forward and motivate clients to improve their product together with us.
We are talking about the Sezavi luxury real estate project. The result of our first cooperation was a simple and attractive website on WordPress.
Read more:
Website of a Real Estate Agency in the UAE
This time the client was ready for an uncompromising solution, and expected from our team an impressive site for luxury segment of luxury real estate rentals in the UAE and specifically Dubai with an easily customizable admin panel. In its structure, the site was to look like a lending site, but with a separate page for catalog of properties.
We solved this problem in several steps:
- projected a unique and aesthetically pleasing design, targeting clients with a high level of affordability;
- provided an immersive user experience through animations;
- created a finely customized admin panel with a unique feature;
- optimized the site for different types of devices;
- filled the prepared pages with quality content.
What guided us and what tools we used to realize the project, read more in our case study.
Design
Home page
We paid special attention to the first screen with its animations. It must be said that it underwent a great number of variations. According to our designer, the final version of the first screen was preceded by layout variants called "Final", "Final Final" and "Well definitely final".
Here are the variants of the first screen at the beginning of the work:
01
/ 02
And this is what the final animated version of it looks like:
The design of the first screen is not simple, but still we managed to achieve lightness and airiness with the help of white color. The feeling of abundance of free space is added by competently structured information about the agency, Dubai surroundings and luxury vacation opportunities in the form of a smooth slideshow.
We achieved the perfect balance between visibility and information: typography, photos and other design elements seem to float in a weightless visual environment. All of this gives the impression of elegance and sophistication, just as the client requested:
Pages of villas and apartments
User friendliness and site conversion is facilitated by a button to go to the property listing. It is fixed together with the top menu of the site and is always available when scrolling down the page:
We decided to move away from the usual product card with a brief description and design each villa as a separate page. When a visitor gets on it, it's like traveling through the future apartments. Bright photos and short descriptions familiarize with all the necessary information in an interesting and convenient way.
At the end of the description visitors are invited to contact the manager:
Separate page with offers for the client
When a client contacts the company with a request to find suitable accommodation options for him, the manager can easily generate a selection of offers for him directly in the admin area of the site:
As a result, the client receives an individual link to the selection of apartments in the form of a separate web page:
Creating a customized villa selection page in 1 minute
Let's imagine that Sezavi manager received a request from a client Yulia for a selection of villas in Palm Jumeirah with a pool, 2 garages, 4 bedrooms and bathrooms. Thanks to the built-in builder you can literally in a minute create a page with offers within a given style of the site.
Individual approach and efficiency of managers pleasantly surprise any client. And in the highly competitive real state environment they play a decisive role: while other managers are just starting to process the order, Sezavi's client is already looking through the personalized offer.
Let's see how the process of forming a personalized selection goes:
Layout and animation
Only serious technology can turn elegant design solutions into a soft delightful presentation:
- Nuxt 3 - the framework with which the project was written;
- useFetch - technology in Nuxt 3 for working with the backend of the site;
- Pinia - library for working with data storage.
Individual interactive elements animated with such tools add brightness and dynamism to the pages:
- Splide - library for creating spectacular sliders;
- FullPage.js - library for creating on-screen scrolling;
- GSAP - library for creating animations.
Administration
The following tools were used in the development of the server part of the site to realize all the intended functions:
- PHP 8.2 programming language;
- PHP framework using Laravel 10 MVC architectural model;
- Docker technology to run the site on the server.
Our developers have successfully realized several unique admin development challenges, i.e.:
- Implemented the function of individual selection of villas and apartments. Now managers can create a personalized page with a separate link in a matter of minutes to meet the buyer's specific needs:
- Integrated the site with the client CRM so that requests go straight to the administrator.
- Set up Google reviews uploading:
This is how testimonials are displayed on the site:
Developed an interactive map displaying each object by its own coordinates:
Automated the conversion of all images as they are uploaded into the webp format, which is easy and acceptable for Google, which helped speed up the loading of pages with a large number of photos.
Provided wide opportunities for self-editing content.
Content
Once the admin panel was fully functional, the content department started filling the pages, i.e.:
- generation and translation of object descriptions,
- uploading photos of apartments and villas,
- preparing catchy headlines and inspirational texts for the homepage, etc.
As a result, the client received a fully ready-to-launch website, which is easy and simple to manage independently by filling in the required fields: adding new objects, editing existing content and creating customized pages for each client.
Adaptability
We paid a lot of attention to the mobile version of the site, as real estate rentals in the UAE are often done from a phone. Taking into account the peculiarities of the small touch screen of smartphones and tablets, we managed to keep the general concept: to organically place and animate all the elements.
To be honest, we had to sweat a lot over the playback of animations and screen scrolling. But this result was worth the developer's efforts: the mobile version is not worse than the desktop version in the efficiency and smoothness of interactions.
Conclusions
As a result of cooperation between designers, content managers and developers, we got a refined and beautiful product with a simple administration and easy management.
Today, the site not only provides users with a list of its offers. Thanks to a convenient feedback form, it collects information from visitors like a full-fledged lending site:
[post_title] => Website of UAE real estate rental agency [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-of-uae-real-estate-rental-agency [to_ping] => [pinged] => [post_modified] => 2025-08-05 12:31:18 [post_modified_gmt] => 2025-08-05 09:31:18 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=20680 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )Worked on
-
Development of the Platform for Instagram Bloggers and Influencers
-
Team:
5
-
Cases:
0
-
Reviews:
0
-
-
E-Commerce SEO Promotion in Ukraine
-
Team:
6
-
Cases:
0
-
Reviews:
0
-
-
Custom Software Platform Developed for a Company Based in Ukraine
-
Team:
6
-
Cases:
0
-
Reviews:
0
-
-
IT Company Website on Laravel
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Website of UAE real estate rental agency
-
Team:
6
-
Cases:
0
-
Reviews:
0
-
