Content Strategist, Marketing Analyst, Project Manager
Not can, but must!
Is text important for business? Is it possible to use it to solve the company’s problems and increase its profits?
During his studies in Computer Engineering, Viacheslav realized that with all his soul he loved not only the IT-sphere, but also working with texts and meanings.
He started his way into copywriting as a sales manager and created descriptions for product items, and now has been our indispensable employee for 1.5 years.
Viacheslav masterfully creates a positive brand image for our customers, helps to convey the benefits of their products and services, as well as encourages them to make a purchase with the right words.
Now he writes texts for blogs, weblinks, online stores, service sites, interfaces, and newsletters.
You’ve definitely seen his work on:
webnauts.pro — website layout, all text content and some blog articles;
webnauts.space — layout and texts;
cars.moscow — layout and texts;
3form.com.ua — layout of the site, service pages and their text content;
goldenkey.world — layout of the banding, text filling of the site, work with applications and the interface for content management (and a lot of internal work)
intellect.codes — texts;
pohorony.info — texts for service pages;
And this list we could go on… endlessly.
P.S. Between us we say: «Wherever there’s text, there’s Viacheslav».
- What the client's business is. What kind of product or service, what the specific is.
- About the task set before us (website development, SMM, video, etc.).
- About the method of implementation. What we did, what features were introduced, how long it took.
At the end of each project, there is a brief introduction: a link to the site, terms and cost of development, technologies used. All elements of the portfolio are provided with screenshots, which clearly show the result — even without reading the text, clients receive comprehensive information about the project.
We optimize each post in the portfolio for a specific cluster of requests, corresponding projects. Unsurprisingly, portfolio pages are the most visited on the Webnauts site.
The Webnauts website only publishes reviews from our customers. All of these reviews come from real people for whom we have performed various tasks. Under the text of the review there is a link to the project or case in the portfolio, so anyone can evaluate the results of our work.
We always ask customers to be as honest as possible in their reviews. And we work out all the arising objections already at the stage of cooperation. The block with reviews is displayed on the main page of the site.
A blog is one of the main tools for SEO promotion of a marketing agency or an IT company. When we created the blog, we set ourselves the goal of «telling simply about complex things»: we want to share our knowledge and experience, and the company’s blog suits best for this purpose.
For our blog we:
- Defined the target audience. Our materials are primarily for clients interested in Internet marketing services, website development, business promotion. However, digital specialists can also draw useful information from them.
- Created headings. There are three of them: cases, news and articles. Each section is designed for a specific format of publications. We update them regularly.
- Established uniform layout standards. Content makers publish materials in compliance with these rules. Each blog page has a promo button for one of our services, a capture block, links to categories, and recent posts.
- Developed a content plan. We regularly discuss which cases are worth sharing, which topics may be of interest. As a result, we determine what and how we will write about.
We talk about new blog posts on the Webnauts Facebook page.
Case studies are one of the most powerful internet marketing tools. Our cases define the task, reveal the solutions and communicate the final result we have arrived at. We illustrate all actions with screenshots of reports and data from analytics programs.
- Demonstrate knowledge and understanding of the task;
- Show that we have experience with a specific task;
- They serve as proof of the effectiveness of the chosen solution.
The difference with the Portfolio is that case studies do not show the whole project, but a specific problem. They describe how we got from point A to point B and what we did along the way. Case studies are not only useful for business owners — they can be adopted by other marketers.
Our cases are made up of several parts. First, we identify the problem, describe the solutions, demonstrate the result and draw a conclusion. The final figures are highlighted in large print so that they are more noticeable.
News from the digital world
The digital sphere is constantly changing, so any specialist needs to follow trends. Even at the stage of discussing the concept of our blog, we chose the news format and decided that such a section would definitely be on our website.
The blog mainly publishes news in the following areas:
- Updates, new functions and features of social networks;
- Developments, services, functionality and new search engine algorithms;
- New popular messengers;
- Interesting events in the digital sphere.
All news are provided with thematic illustrations, screenshots or videos.
Information materials are not published in our blog very often. We carefully approach the choice of topic and try to share our practical experience. So we created the guide «How to write a technical task for a landing page», the article «5 Things Good Internet Marketers Won't Tell You» and many other materials.
In each article, we try to correctly combine:
- SEO tools. Keywords, meta tags, subheadings, lists, sidebars, linking and other components of the right SEO text.
- Design and dynamic elements. We follow the style of the site and add animation. We grab the attention of the reader, do not let them get bored.
- Text for the people. We try to talk with the reader, to advise, not to teach. We do not have water in our articles and give maximum benefit.
- Honesty. We do not write about what we do not know or have not experienced.
The result of complex work
If you want to promote the site of an IT agency / digital company in search engines the way we did at Webnauts, you need to use all available marketing channels. This is a long systematic work, which in the end will pay off and will definitely bring customers.
Here the results of keyword visibility rising:
Here the results of organic traffic:[post_title] => SEO Case Study: Digital Agency Website Promotion [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => case-digital-agency-website-promotion [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:36 [post_modified_gmt] => 2023-04-17 12:06:36 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=14882 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw )  => WP_Post Object ( [ID] => 13961 [post_author] => 10 [post_date] => 2022-04-30 14:44:54 [post_date_gmt] => 2022-04-30 11:44:54 [post_content] =>
We often work with competitive topics where we have to compete for a «place in the sun». Website promotion for a company renting special equipment cannot be called easy — there are a lot of companies that provide these services. The experience of the Webnauts team allows even these search giants to be challenged.
About the project
Our client, special equipment rental service, needed competent website promotion in Google search engines. The site has an extensive catalog of construction and repair equipment. All positions are divided into non-thematic categories according to the types of machines provided for rent: «Truck cranes», «Manipulators», «Bulldozers», etc. For the convenience of the user, filters for selecting equipment by model and parameters are made in the catalog.
It should be noted that the work on the site was not smooth and had its own surprises, which negatively affected both the workflow and the results of promotion. But we will get to this story — it is better to tell about everything in order.
Before starting to promote a commercial site, we must conduct not only an automated, but also a manual audit of the resource, as well as monitoring competitors in the search results. At this stage, we identify shortcomings in the internal optimization of the site, draw up a checklist for correcting errors by programmers.
Search engine optimization helps to:
- Find errors in code and layout;
- Detect functional flaws;
Analyze behavioral factors, bounce rate on the site (including from contextual advertising), create a checklist to improve engagement and user experience on the site;
- Research and evaluate the content, its relevance to the search demand of users;
- Identify the strengths and weaknesses of competitors, develop a strategy and plan for further work.
Why is it important to pay attention to all these points in the context of SEO promotion?
Since search promotion is no longer just about preparing category descriptions and buying links, you have to work out all the search signals in a complex - only this approach can give results in 2021.
The beginning of the promotion and real difficulties
So, work on the site began with a series of standard and typical «rituals» of an SEO specialist — technical audit, correction of detected errors, collection of a semantic core, preparation of relevant content.
There was no rise in traffic in the first month, which is normal for a young site that just got into the index. However, after another month of work, we found that the site was still outside the TOP-100 for all targeted queries. There was still no traffic from the search — all our efforts did not give any result. This situation alerted us and forced us to look for possible reasons for the current state of affairs.
Soon, suspicious and unusual activity on the site was detected. A large percentage of visits to the site were made from direct hits, which is extremely atypical for a young site. Moreover, all direct visits had a high bounce rate:
The number of direct visits was carried out on an industrial scale, exceeding all other traffic. After analyzing the behavior of such traffic, it became obvious that these were bots. It was necessary to do something urgently , because in such cases the reputation of the site (especially a young site!) quickly «drains» and the resource simply becomes unsuitable for further high-quality organic promotion.
However, finding the problem turned out to be easier than fixing it. We are not alone in this issue, and there have been legends about such a problem for a long time.
Through trial, we managed to block such direct calls. However, it was necessary to make sure that the site was still able to «shoot» and would not have to move to a new domain. To do this, it was decided to send a signal to update the resource. At the same time, it was necessary to improve both the functional and content parts. All these actions led to the fact that the site finally began to appear in the search for the main queries and hits from the search started.
However, this work was not over…
Having eliminated the problem with behavioral factors and technical optimization, we continued to functionally improve the site, and also began to gradually increase the link profile for Google.
After a complex of works on the site, traffic has increased significantly. The resource shows a positive trend in the growth of traffic from search engines.
/ 05[post_title] => SEO Promotion for the Rental of Special Equipment [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => seo-promotion-for-the-rental-of-special-equipment-in-2021 [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=13961 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw )  => WP_Post Object ( [ID] => 9124 [post_author] => 10 [post_date] => 2021-11-30 07:44:34 [post_date_gmt] => 2021-11-30 04:44:34 [post_content] =>
About the project
AVOCADO CLINIC is our client from Kremenchuk, a modern dental clinic that relies on the use of innovative technologies, a high level of professionalism and quality of services. AVOCADO CLINIC has been on the market for 10 years and during this time specialists have helped more than 20 thousand patients. It's time for us to help the clinic and create a cool product for it - a dentistry website with an individual design. About how it was, and what solutions we proposed and implemented, read below.https://wnauts.com/wp-content/uploads/2021/11/avocado-clinic-video.mp4
We were given the task of creating a business card website for a premium class dental clinic. The overall structure of the site should reflect the quality of services, and the color scheme should match the finished company logo. Also, our task included basic SEO-optimization of the site for local Google issuance.
A team of our specialists has developed a website according to the aim. And the first thing we focused on is individual design.We have created a custom grid to make the site look modern and elite. The emphasis of the clinic is premium services, and the best tools to emphasize this are the big elements.
Among other things, when developing and creating layouts, we used large informative photographs to attract the user's attention. We selected from the clinic's photo bank those photos that are able to establish connections and associations with the main values of Avocado Clinic - premium quality, care of patients, safety and comfort. Photos play the main role of quickly perceived content: the client will receive what he sees on the screen. And this is: healthy and happy smile, friendly staff, cozy atmosphere of the clinic. This visual technique has long proven itself as an aid to successful sales.
A large photo in web design is already an established norm, but our designers understand that photos alone are not enough for a winning result. More importantly, the rest of the elements are harmoniously arranged. So, for example, in the background you can see an image of a tooth (as a picture) — this is a small reference to the theme of the site.
The color scheme is selected in accordance with the ready-made logo provided to us. Turquoise often appears in the list of trending colors for web design, and this color has proven itself in the psychology of the influence of color on website conversion — it works effectively when selling specialized services, especially in the medical and aesthetic fields.
When developing the clinic's website, it was important to focus on the service of total prosthetics «Full Total», because. this is a flagship service that not all competitors can boast of. This is a complete smile rehabilitation and replacement of lost/extracted teeth. The service is mentioned on the main page of the site several times along with the cost in order to attract the attention of the client and gain his trust.
We also used creative motion design as one of the important components of UX. Animation creates the feeling that the action is being completed faster than usual, and this makes the site even more modern, showing the user that their time, even spent on the site, is valued here. All moving elements not only attract attention, but also make visible the conceptual connection between page elements.
All micro-interactions are short and purposeful. We moved away from robotic linear animation from point A to point B and used more interesting transitions.
It seems that a site with an abundance of large elements is difficult to adapt to devices with a small screen. But it is the enlargement that plays into the hands of the mobile version of the site — these are both large buttons and a readable font. We also saved animation and all the most important sections of the site for smartphone users.
The «Semantic Team» of Webnauts optimized the site for search engines: we assembled the semantic core and thought out the site structure taking into account SEO queries, prescribed the necessary headings, loaded the XML map for proper indexing. We also made all the necessary indexing settings in the robots.txt file in order to “tell” search engines which pages to crawl.
We are sure that in the conditions of low regional competition, the performed optimization actions will ensure that the site gets into the TOP-10 for a number of queries. And without significant investments in SEO. The effect of the described actions is expected in a few months - we will definitely share it with you in future cases.
We have added a blog to the site structure to post useful articles on dental topics for additional SEO optimization. Also, the articles on the site are additional «weights» on the scale of decision-making in favor of treatment or diagnosis.
We decided not to use pop-up contact forms, leaving the decision on the appointment to the user. For communication, we have implemented the «Free ONLINE consultation» button at the top of the screen.
At the bottom of the site, we added a simple «Contact Us» form with three fields and one button — it turned out to be as simple and unobtrusive as possible.
In the «About us» section and on the main page of the site, you can find a photo and description of the clinic team with full name. We didn’t use stock photos of dentists with a Hollywood «cold» smile, but real photos of the clinic team — simple and not staged, in a working atmosphere. All this gives the brand a human face, which is characterized by such features as sincerity, self-irony, frankness and others.
We decided not to hide the merits of each individual member of the Avocado Clinic team, but to bring awards and documents to a prominent place. Such decisions are made not to boast, but to form additional trust and loyalty of the client. «We operate transparently and legally. You have nothing to fear. Professionals are with you» — this is what the «Certificates» block is about.
We got a concise, not overloaded with unnecessary information, well micro-animated site with high-quality typography and thought-out composition. The color scheme, transparent price list and unobtrusiveness complete the formation of a pleasant impression of the site.
All our work was aimed at making the user feel trustful, safe and clean, and for them to understand that they are on a site with premium and expensive dental services.[post_title] => Dental Clinic Website Development [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => dental-clinic-website [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:59 [post_modified_gmt] => 2023-04-17 12:06:59 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=9124 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw )  => WP_Post Object ( [ID] => 9095 [post_author] => 10 [post_date] => 2021-11-19 08:13:59 [post_date_gmt] => 2021-11-19 05:13:59 [post_content] =>
About the project
We were approached by the company «Avtostart» — an online driving school from Moscow, which provides services of preparing for the exams of traffic police in the category «B». In addition to online learning of traffic theory, the school offers:
- private lessons with a driving instructor;
- safe driving courses to prepare for situations that are inevitable in the complex Moscow traffic;
- assistance in preparing the necessary documents for the traffic police;
- supervision of the student until the acquisition of the driver's license.
We love interesting and useful for society projects, so we gladly agreed to work with the company «Avtostart».https://wnauts.com/wp-content/uploads/2021/11/startdrive-video.mp4
Before meeting the Webnauts team, the company «Avtostart» took care of advertising its services on Instagram and on the platform Yandex.Dzen. They contacted us because of their desire to create a presentable business card website, which would contain not only all the necessary information about the school, but also the ability to enroll in courses.
In the future it is planned to expand the functionality of the site: the addition of a personal account of the student and instructor, a system of tests, training materials, etc.
Taking into account all the source data and the need to further expand the website, we offered the client the development on WordPress.
WordPress is one of the most popular CMS. WP can be used to create websites of any type, today up to 30% of all existing websites are powered by it. And if we talk only about the websites that work with the CMS, WP makes up to 60%, which clearly confirms the global leadership position. WordPress is a free «engine» that helps save budgets, especially when developing websites for small businesses.
In order not to get into the familiar situation with «vague technical requirements», we prepared a brief for the client to understand how their business works. This helped to achieve the ideal result of our work.
The key to the success of any development is not only the qualification of the executors, but also the quick feedback from the client. This was exactly the case when we received all the necessary information: school information, tariffs, work schedule, instructors, etc.
Before we started developing the website, we created a text layout, in the structure of which we envisaged 4 sections: «Home», «About us», «Courses» and «Frequently asked questions». While discussing the layout, we added three more sections: «Instructors», «Reviews» and «Contacts».
After the discussion with the client, we expanded the template on the test layout and filled all the required pages with content, including SEO optimized texts.
After that, the web developer customized the template according to our wishes: translated all the English buttons and forms into Russian, hid the additional elements, formatted texts.
We created several contact points, including the «Request a call» button and the contact form to submit the application, which was placed directly on the main banner of the website.
The бContacts» section includes not only the main contact information and a map of the site, but also another «Send Message» form where you can ask a question and use the promo code.
The color palette included some of the most successful color pairs: blue + yellow.
Blue is the color of sympathy and trust, for that reason it's so often used in web design, logo creation, and even social media. To make blue not look so distant, it is best diluted with a contrasting color, in this case yellow.
Yellow is the color of positivity, optimism and creativity. It is the color of smiley and gold, and in our context, it is also the yellow color of traffic lights — «Attention!».
We used one of the most tested combinations in marketing strategies, taking into account market trends and target groups.
The problem of many companies with their websites is «facelessness». Often there is no photo of the staff on the website, but the texts scream about the fact that there is a «friendly team» working in the company. We took care of creating a trusting atmosphere in the chain «instructor-applicant» and suggested putting information about driving regulations teachers on the main page of the website and in a separate tab.
We tested the finished website for performance and errors, of course. In particular, it was checked whether the requests from site visitors come to the email, how all the buttons work, whether the site is adaptable to all types of devices, etc.
The Webnauts team has completed the task according to the set goal and is ready to add the necessary pages, forms, widgets and features to the website as the online school evolves.
As you can see, WordPress is a convenient engine for solving such problems, which has repeatedly proven itself with distinction as our web development tool.
Website for online driving school — a clear example of «turnkey» development, where we need from you only the basic information, and we provide all the stages of development, including SEO and logo design.[post_title] => Online Driving School Website on WordPress [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => online-driving-school-website-on-wordpress [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:59 [post_modified_gmt] => 2023-04-17 12:06:59 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=9095 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw )  => 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] =>
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.
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.
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:
The GSAP Scroll Trigger plugin with the locomotive-scroll.js library helped to implement an amazing parallax effect based on smooth page scrolling:
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:
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:
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:
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:
To speed up the layout process, the Gulp assembler was used - a tool that allows you to automate the routine tasks of web development.
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.
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:
Under the Cases section, a custom post type and related custom taxonomies Type and Services were created:
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.
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.
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.
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 )  => WP_Post Object ( [ID] => 16157 [post_author] => 10 [post_date] => 2022-08-26 14:02:16 [post_date_gmt] => 2022-08-26 11:02:16 [post_content] =>
Enercor, an international consulting company specializing in the management and restructuring of inefficient enterprises, approached us with the task of developing a corporate website. At the time of the request, the client already had a desktop website design with infoblocks reflecting:
- mission and benefits,
- the range of services provided,
- team composition and completed projects,
- news, vacancies and company contacts with an application form for consultations.
What we had to do was the development — to breathe life into the project and present a modern, functional and adaptive website to the client. Read about how we did it in our case.
When developing the site, we used CMS WordPress — one of the most popular platforms. It is good because in the future the client will be able to easily manage the content of the site: add web pages and place text, images and videos even without the help of a developer. WordPress also allows you to scale the site in the future — for example, add a blog or other additional features.
Our front-end developer was faced with the task of turning images into code using HTML, CSS (using the SCSS syntax of the Sass preprocessor) and JS. In his work he also used one of the modern coding techniques — Grid. What is it? Grid coding allows you to create responsive pages for any type of device and position elements on the site correctly — text, photo, video, or any other HTML block.
The implementation of modal windows on the Projects page was interesting: when you click on a case, an easy-to-read card with information appears on the screen:
The development of the server part of the site took 126 hours. In the course of the work, a complex structure of transitions between sections was implemented through many anchor and simple internal links. This means that when clicking on the link, the user goes not only to the desired page, but also to a part of it that is relevant in meaning:
Thus, the Services section reflects the company's activities with links to separate pages, where each service is described in more detail:
On the services page, there is an Expertise block with a list of key areas in which the company specializes. Paragraphs of the same name in the description of the expertise of each team member also lead to this block. In the future, the client plans to link these points also with specific projects of the company.
The Projects section is a catalog of completed projects of the company of 2 types: with brief information presented as a card and with a full description of the case in the form of a separate web page:
The Team section presents all team members with a photo, a short description, expertise and a link to the city. Clicking on one of the cards takes the user to a page with more detailed information, which contains a link to the LinkedIn profile and a list of financial and economic publications where experts have been published:
The Vacancies section contains the company's job offers, as well as a form which enables to send a resume even if there are no vacancies:
The News section of the site displays publications as a gallery, loaded from the company's profile on LinkedIn. The ability to embed this type of content on the site was implemented using the Tagembed social media aggregator:
The Contacts section contains the contact details of the company and a convenient form for contacting a specific representative office:
In order to expand the capabilities of the site, the following popular WordPress plugins were used:
- Yoast SEO is a SEO management tool that helps visitors and search engines get the most out of your site.
- ACF (Advanced Custom Fields) — for full control over edit screens and custom field data.
- CF7 (Contact Form 7) — for managing contact forms on the site and flexible configuration of the content of forms and mail.
- WP Mail SMTP — to fix email deliverability issues via SMTP (Simple Mail Transfer Protocol) - the industry standard for sending emails.
To protect the site from spam, reCAPTCHA v3 technology was used, installed through an extension from the above-mentioned CF7 plugin.
In addition to the catalog of plugins, WordPress has ample opportunities for customization — flexible site customization for client requests: changing the layout, adding various options, etc. So, our backender additionally created:
- custom post types for Team and Projects sections;
- custom taxonomies for the Services section, which in turn is linked to the Projects section, and for the cities block linked to the employees of the Team section.
As a result, the client can independently change the visual elements of the site: the order of menu items, the order of blocks, projects, team members, etc.
By the way, remember our amazing decorative cursor? The client could not decide on its color for a long time, so the developer added a color palette for the cursor to the admin panel. Now the client will be able to manage its appearance independently, without the help of a programmer.
As we wrote earlier, Enercor came to us with desktop layouts. Therefore, our frontender also took care of the convenience of the visitors of the future site, intelligently adapting layouts for mobile devices. If you visit the site from a smartphone or tablet, then you will see that it will be as convenient to perceive text and visual information as it is from a computer screen.
Presentation of the company
Another task, this time for the design department, was the presentation of Enercor. The visual design is fully consistent with the corporate identity of the company: colors, fonts and corporate symbols are consistent. 28 slides are full of peculiar elements in the form of neural networks, and the entire array of information is conveniently and clearly structured. The business tone of the narrative is softened by unobtrusive animation that will capture and hold the attention of the audience:
The completed Enercor project and our experience in developing a corporate website for consulting services on WordPress proves once again that the web site of an international consulting company can be fun and harmoniously combine serious information with smooth animation and captivating decorative elements. Add to that a structured animated presentation and you have another powerful marketing tool.[post_title] => Corporate Website of an International Consulting Company [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => corporate-website-of-an-international-consulting-company [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:20 [post_modified_gmt] => 2023-04-17 12:06:20 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=16157 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw )  => 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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
- Catalog of production of leading world manufacturers.
- Information about the company.
- Sales niches.
- Questionnaire for clients.
- 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:
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.
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.
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:
- 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.
- 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.
- 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 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 )  => WP_Post Object ( [ID] => 15789 [post_author] => 10 [post_date] => 2022-07-24 16:25:54 [post_date_gmt] => 2022-07-24 13:25:54 [post_content] => [post_title] => Investment Company Landing Page [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => investment-company-landing-page [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:22 [post_modified_gmt] => 2023-04-17 12:06:22 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=15789 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw )  => 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.
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.
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.
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:
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:
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.
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:
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:
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:
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:
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):
The concise feedback form is the crowning achievement of the page design. Let's look at it in more detail.
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:
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:
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.
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 )  => WP_Post Object ( [ID] => 16983 [post_author] => 13 [post_date] => 2022-09-28 12:13:45 [post_date_gmt] => 2022-09-28 09:13:45 [post_content] =>
Recently, we have been working on another interesting real estate project — SEZAVI PROPERTY. The main wish of the client was to create an attractive, simple and fast website for a real estate agency in the UAE. And the main technical task was the integration of the resource with the CRM system to control incoming leads.https://wnauts.com/wp-content/uploads/2022/09/sezavi-property.-main-page.mp4
About the client
SEZAVI PROPERTY provides a wide range of property management services in Dubai, short and long term rental of villas, providing professional service and peace of mind to clients at any time. The agency is based in Dubai Marina, but the rental properties can be located both in Dubai and outside of it. In addition, Sezavi Property takes on the responsibility of managing portfolios of all sizes — from managing a few properties to over a hundred.
The proposed site should not be very capacious and bulky, so it was decided to make it on the WordPress platform.
WordPress is one of the most popular CMS today. The main advantages of the engine are fully consistent with the wishes of the client, and the main one is that WordPress has the simplest, most convenient and very functional administrative panel. It takes a couple of hours to master it.
It is also important that the platform is free and at the same time, with a large number of free updates and additions, which is also suitable for customers who plan to manage the site themselves in the future.
We used Elementor as the visual editor. This is a WordPress site builder. Elementor is a feature rich page builder. It is used for coding large websites, landing pages, long reads, articles, etc. Coding takes place using ready-made elements, which are selected by simple drag and drop and making the necessary settings through a convenient admin panel.
As our practice shows, a beautiful and harmonious design is very important for such sites. The further behavior of the user directly depends on its appearance.
Therefore, our design specialists decided to focus on high-quality photographic materials and images.
Simple navigation on the first screen immediately allows the visitor to go to real estate rental offers or fill out a form and get feedback on any issue.
To ensure communication with site guests, we used the Contact Form 7 tool.
Contact Form 7 is one of the most popular plugins for creating contact forms on the site. The plugin allows you to create forms of any kind, is very flexible and easy to set up, has been developing for many years and contains a lot of improvements. The plugin can manage numerous contact forms, where you can flexibly customize the content of forms and mail with fairly simple markup. Forms have built-in support for Ajax submission, CAPTCHA, Akismet's spam filter, and more.
The search function offers the visitor in a few clicks to select suitable options for renting a villa, apartment or penthouse. For popup cards on the site, we used the visual editor Popup Builder.
Popup Builder is a tool that will help you increase your conversion rate. It is a responsive WordPress tool with many different features: customization options, different types of popups, popup scheduling, animation effects, integrations and plugins supported by 3rd party developers.
Cards of offers for rent are placed as colorful photo gallery. From the photo you can immediately go to a detailed description.
Each card contains a maximum of high-quality photos and information about the object offered for rent. The reserve button is also on the card page.
Filling with content
All content on the site was written by our company's copywriters and posted by content managers.
Each offer for rent contains a maximum of high-quality photos, a description and a list of pleasant bonuses.
We paid special attention to the description of real estate objects, because the conversion on the cards of specific objects largely depends on their informativeness and persuasiveness.
Integration with CRM system
CRM is a system that simplifies the control of incoming leads. Instead of complex tables, instant messengers and other sources, one single service remains. It minimizes the resources spent and makes it possible to quickly respond to all requests from the site.
The advantages of using such a system:
- A single customer database that stores all collected data.
- Transparency and control of work.
- Accounting and analysis of leads.
After integrating the CRM system with the site, our customer can independently process the list of users, segmenting them according to the required parameters. The entire list of resource visitors who left their data can be placed in CRM, processed and analyzed. The functionality of the system will also help to organize and analyze data on contacts, orders placed and deals.
After the work on design, content filling and improvement of technical characteristics, we received a high-quality Internet product with good performance indicators. Now the website of the real estate agency SEZAVI PROPERTY (UAE) contains a complete system for choosing housing for rent, and also provides a wide range of property management services in Dubai with simple and understandable information administration.
Refinement and improvement of the functionality of Internet resources is a task that we face quite often. If you think that improving and expanding the functionality of the site will help your business develop, then our team of specialists will be happy to advise and take on the solution of even the most difficult task.[post_title] => Website of a Real Estate Agency in the UAE [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-of-a-real-estate-agency-in-the-uae [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=16983 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw )  => WP_Post Object ( [ID] => 17010 [post_author] => 14 [post_date] => 2022-10-31 17:27:18 [post_date_gmt] => 2022-10-31 14:27:18 [post_content] =>
About the project and task
Webnauts Academy is an educational project of our company aimed at training and improving the skills of beginners and novice IT specialists.
Webnauts has long been engaged in internal training of employees, as it feels a constant staff shortage. And an attempt to bring the training center to the outside was successful and showed the unprecedented relevance of IT education among the residents of our industrial city.
Having organized the educational process in many areas and convinced of the usefulness and importance of the project, we decided to create a modern IT course website with a minimalistic interface, clear navigation and adjusted for a large amount of content: training programs, video reviews, teachers and graduate cards.
Before we started designing layouts, we started visual analysis, highlighting more than 10 exemplary sites in the field of IT education. After evaluating the basic design principles of such projects (grids, shapes, colors, fonts and media), we managed to create our own unique design concept.
Based on the results of visual analysis, the designers carefully thought out the structure of the IT academy website, namely: what will the main screen look like, what blocks will be used to appeal to users' trust, and how to talk about the benefits of educational products? This stage is the creation of a black and white sketch of the site, in which designers focus on UX (User Experience) as much as possible, that is how the interface will work and whether it will be user-friendly.
As you can see, the work of UI/UX designers is not only a creative, but also an analytical process, during which the user experience is carefully studied. This research allowed us to create an effective digital product that turns views into training applications.
Grid in web design
Even though the site contains a lot of information, it looks neat, intuitive, and visually appealing. This effect is created by the grid - the basics of the basics when creating a prototype of any site. But in our case, this is not just an invisible skeleton of the site, but an integral part of the design, and together with large typography, arrows and other signs, it evokes His Majesty the Swiss style.
We can see how thin gray lines permeate all pages, artfully structuring and separating content. Thus, all text, photos, forms and widgets are neatly inscribed in rectangles with clearly defined borders. Thanks to the block structure, we have created an organized and user-friendly interface:https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-grid-in-web-design-1.mp4-1.mp4
Brand colors and hover animation
At the initial design stage, the designers already had a logo in the Bauhaus color style: white, black and muted red for accents.https://wnauts.com/wp-content/uploads/2022/09/webnauts-academy.-brand-colors-and-logotype.mp4
So, the design of the site was made in accordance with the existing corporate colors. We used white as the background color: it gives the interface a sufficient amount of space, and at the same time, contrast for other important elements. These are black buttons and drop-down list icons that change their color to red when hovered over. Headings and text boxes with important information are also highlighted in accent red, completely capturing the user's attention:https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy-hover-animation.mp4.mp4
Layout and navigation
As soon as the design concept is ready, the project moves on to the next stage — the actual development of the educational courses website. The front-ender starts first: he codes layouts using HTML, JS, and CSS (SCSS/Sass) languages, and sets the site in motion by animating widgets using GSAP (GreenSock Animation Platform) technology. Let's break down the site and see what we got.
Website first screen
The first screen forms the user's first impression. It is important to remember that it only takes a few seconds to form it, but at the same time, you should not overload the main section with content. Based on these considerations, we placed the most important on the first screen:
- a large and understandable title that fully reflects the theme of the site;
- a horizontal version of the logo with a concise menu in the header;
- a dynamic video telling the user about the main advantage and location of the training center: «Study at the best IT company in Krivoy Rog»;
- a banner with a current offer and a button «All promotions of the academy»;
- main conversion button «Choose a course»:
Block «About us»
It plays an important role in building customer loyalty and trust. But this does not mean at all that it should take up a lot of space or even a separate page. We did without a lot of text full of victories, and limited ourselves to a photograph and really important information that fit in just a couple of sentences:
We are sure that users will appreciate the saving of their precious time, and in the meantime we will try to strengthen their confidence in the reliability of the company with the help of other important blocks and pages.
The main product of the company is a course, and there are no less than 17 of them. We have combined them into 7 categories for individual IT areas and presented them in the form of a drop-down list.
Each course leads to a separate page and introduces more detailed information:
- title, brief content and the beginning of classes with the «Register» button,
- photo gallery showing the educational process,
- the benefits of learning with the button «Full course program»,
- information about the teacher with a photo,
- learning conditions,
- application form with conversion button.
The page is easy to navigate, and all the important and necessary information is at a glance:https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy-educational-services.mp4.mp4
It is worth noting that thanks to the use of the grid, not only the design has become more beautiful, but also the code, in the literal sense of the word. And translated from the language of developers, beautiful means working, structured and readable.
We thought of many different options for the user to contact the company, and even dedicated a separate screen of the main page to this. The goal is obvious to absolutely everyone, but what a presentation! The section captivates with an original individual approach. So, introverts are invited to write, extroverts — to call, and those who doubt — to attend any class of their choice for free:
This section reinforces the «About us» block of the site and is a concise list of 4 points, neatly placed in a table:
Video reviews of graduates, or to be more precise, of employed graduates, reinforces the previous text block and inspires even more user confidence. The media section is designed as a circular gallery with black and white photos, numbering and arrows. When you hover over the photo, the photo comes to life, and when you click on it, the full video from Youtube is played.
This block was one of the most interesting and challenging in terms of development, and the result met our expectations. Here is an example of how a fairly minimalistic interface can create a truly unique user experience:https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-block-reviews.mp4.mp4
Catalog of graduates
This is another advantage of the company, embodied in a separate landing page. It is dedicated to graduates who have successfully completed their studies and are ready to start new IT projects. The page is a catalog with cards of young professionals. In turn, the card contains a photo of the graduate, brief information and a link to the portfolio, contacts for communication and a button with a resume. The page also has a simple navigation in the form of a horizontal list of 3 lines and allows you to filter candidates by specialization:https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-catalog-of-graduates.mp4.mp4
The graduates section can be accessed from the main page block or from the menu item in the site header «About Us — Graduates».
As for the development, we are ready to sing the praises of the grid layout again, because thanks to its horizontal and vertical lines, the coding of the cards was faster, eliminating such a programming phenomenon as «code duplication».
The importance of photos on the site is difficult to overestimate: real informative photos arouse interest and describe services instead of a thousand words. We designed the photo in the form of a compact ring gallery, which perfectly reflects the educational process in the creative atmosphere of a modern IT company:https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-circular-photo-gallery.mp4.mp4
The Frequently Asked Questions block is designed to cover common customer objections, thereby reducing the load on managers. In our case, the visitor closes the question of interest, revealing the desired answer. And yes, the drop-down list is still relevant today due to its compactness and ease of use:https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-faq-dropdown-list.mp4.mp4
Form and contacts
The application form is as simple as possible and includes only one field for entering a mobile number. A funny large button that changes its color on hover and sends the request for processing adds to the mood.
Users who are used to taking the initiative in their own hands can contact the company at any contact listed in the footer of the site:https://wnauts.com/wp-content/uploads/2022/10/webnauts-academy.-form-and-contacts.mp4.mp4
In addition to the desktop version of the site, Webnauts designers have worked hard to create layouts for tablets and mobile devices. All blocks and widgets automatically adjust to any screen size, and as a result, the site is convenient to use both on a smartphone and on a desktop computer.
«Not only external, but also internal beauty is important», said the back-end developer and masterfully set up the software-server part of the IT course site on WordPress, in particular:
- custom fields using the ACF plugin (Advanced Custom Fields);
- custom record types Graduates and Courses;
- Ajax forms that allow you to exchange browser data with a web server in the background;
- graduates page with Ajax filters and pagination.
The developer also installed the Loco Translate plugin on the site, which makes it possible to translate all strings wrapped in code, and then converted static strings using the __() function, which can return the original text in the absence of translation or loading of the text domain.
All these complex manipulations made it possible to set up the most convenient and understandable admin panel of the site, in which it is easy to manage the appearance and content of pages without the help of a developer:
The effectiveness of any site is measured by a first-class user experience, and the creation of such a site requires effective interaction between designers and developers. Thanks to the well-coordinated work of the team at every stage — from visual analysis to setting up the system control panel — we managed to implement a convenient and attractive IT course website, both inside and out.[post_title] => Website for IT courses on WordPress [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-for-it-courses-on-wordpress [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:05:41 [post_modified_gmt] => 2023-04-17 12:05:41 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=17010 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw )  => WP_Post Object ( [ID] => 17754 [post_author] => 14 [post_date] => 2023-01-09 14:51:28 [post_date_gmt] => 2023-01-09 11:51:28 [post_content] =>
About the project
GT Real Estate GmbH is an international real estate agency with headquarters in Germany and a wide range of services: from the selection of residential and commercial properties to the legal registration of the purchase / sale or lease / lease of real estate.
Initially, we were approached for SMM services, but during the negotiations we came to the conclusion that the company's website needs to be upgraded before promotion, especially since the client plans to actively expand in the European market.
So, we faced the following tasks:
- transfer the site-catalog of the real estate agency to the popular WordPress platform, while keeping the corporate design;
- implement multilingualism and basic SEO optimization;
- fill web pages with clear and compelling articles about the company and its services.
Did we manage to adequately present the agency on the Internet? We are telling you what we did step by step.
The company's website is designed in a minimalistic style in three colors — blue, white and turquoise. The main page greets us with a thematic photo cover and headline, a laconic header and a filter bar, as well as a list of related company services. In words, the first screen seems a bit cluttered, but in reality it looks very light, neat and presentable:
Special attention should be paid to the horizontal filter with the CTA-button «Search», which makes it easy to sort real estate for purchase / rent by type, location (country / city) and price.
Users can go to a more advanced search and filter objects by additional criteria: location radius, number of rooms, profitability, minimum and maximum area and cost. And the found options, in turn, can be sorted by recommendations, price (from low to high) and date (from new to old):https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-site-development-with-property-search-filter.mp4
An interesting feature: if you hover over one of the found objects, it is displayed on the map on the left:https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-search-filter-on-site-real-estate-agency.mp4
I must say that GT Real Estate GmbH is proud of its exclusive range of services, so this section is on the first screen, immediately indicating the high professionalism of the company. By the way, all services are described in a concise, meaningful and accessible manner by our copywriter:https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-real-estate-company-website-services-page.gif.mp4
Scrolling down, we see a well-structured and visually appealing block with 2 types of properties in the form of photo cards. If the user did not start looking for their dream home at the very beginning, the choice of a residential or commercial property can begin with this section:
«News and Articles» is an important section in terms of SEO-promotion. It also has a block structure with cards containing a cover photo, title, and heading. By filling blog pages with useful and SEO-optimized articles, you can achieve impressive results and gradually bring your site to high positions in Google search results.
The most relevant objects are collected in a separate block of the same name in the form of a compact circular photo gallery with important information: price, title, address and area. And the «buy / rent» labels in the upper right corner of each card makes it clear to the user whether the object is for sale or for rent.
Also, each card has the function of listing, previewing and adding an object to favorites. This is a very convenient and fast technique that saves the user from having to move from page to page:https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-development-circular-photo-gallery-on-site-wordpress.gif.mp4
The site footer has a dark blue background and contains the usual company contacts and user agreement:
Functionality and technical realization
As we have already said, the basis for the site was the easy-to-manage WordPress platform. The unique design was not a key requirement of the client, so we settled on a ready-made solution within the platform — Houzez, which is a special theme for placing real estate ads:
At the request of the client, we have hidden the possibility of placing ads from unregistered users on the site. To do this, sellers and tenants can contact the agency through the application form:
At the same time, we have provided site administrators with the simplest process of placing ads due to a convenient control panel:
Multilinguality of the website
The main and most labor-intensive task of the project was the implementation of multilingualism. We abandoned automatic Google Translate translation and translated the site into 5 languages using the PolyLang plugin, customizing it a bit using the PHP programming language:
The plugin perfectly integrates into the admin panel interface and duplicates all content in German, English, Polish, Ukrainian and Russian:
When all pages are translated and published, the user can only switch the language in the site header in the usual way:
After translating the content, we took care of multilingual SEO and performed basic internal optimization, as a result of which the site was open for search and successfully indexed by Google robots.
Text content of the pages
When the interface has made a first impression, the user is ready to get acquainted with the content — capacious and concise, understandable and structured. Our copywriter worked on the text content of the site, presenting complex information in a simple and understandable language:https://wnauts.com/wp-content/uploads/2022/11/gt-real-estate-gmbh-text-filling-site-pages-copywriting.mp4
The team of developers, copywriters and Seo-specialists of Webnauts did everything so that after the development the website of the real estate agency not only looked elegant and professional, but also inspired absolute confidence and reliability, and in 5 languages of the world. If you look at the site through the eyes of an administrator, you will see a convenient and understandable control panel that allows you to easily edit information, create pages and place real estate ads without the help of a developer.[post_title] => Website Development for a Real Estate Agency in Germany [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-of-a-real-estate-agency-in-germany [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:05:41 [post_modified_gmt] => 2023-04-17 12:05:41 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=17754 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )
SEO Case Study: Digital Agency Website Promotion
SEO Promotion for the Rental of Special Equipment
Dental Clinic Website Development
Online Driving School Website on WordPress
Promo Site for Webnauts UX/UI Design Services
Corporate Website of an International Consulting Company
Online Coffee and Tea Shop with Delivery
E-Commerce of Pumping Equipment (USA)
Investment Company Landing Page
Website for Renting Luxury Real Estate in the UAE
Website of a Real Estate Agency in the UAE
Website for IT courses on WordPress
Website Development for a Real Estate Agency in Germany