Programmers are not to be measured by their ingenuity and their logic but by the completeness of their case analysis.
© Alan Jay Perlis
Alexander has worked on:
iqosa.com — back-end development on Laravel, Laravel Nova, MySQL, REST api. Implemented multilingual versions of the site, implemented the content constructor and its sorting, added the ability to separate content sorting for mobile and desktop versions, implemented saving images and videos, notifications about submitting forms, wrote API documentation.
maxnoah.com — back-end development on Laravel, Laravel Nova, MySQL, REST api. Added multilingualism, pages for categories and products, implemented a feedback form, created content constructors, manual sorting of products, saving and sending forms, links between products and categories, wrote API documentation.
aught.com — back-end development on Laravel, Laravel Nova, MySQL, REST api. Added multilingual versions of the site, implemented article search and form submission, implemented a system for sending messages to the administrator’s mail, created the ability to conveniently upload images and videos, built links in the database to ensure their integrity.
yod.com — back-end site development on Laravel, Laravel Nova, MySQL, REST api. Made edits to forms, redesigned project requests and site search logic, rewrote projects and services using a database, added routes and controllers to get project lists, fixed errors in multilingual versions, and added functionality for duplicating and uploading resources.
webnauts.com — creating a company bot to control chats: saving, matching names and numbers with Telegram data, adding all information to the database with bindings to specific chats. Implemented two levels of matching – by phone number and full name. In addition, developed an interface on Laravel Nova that supports authentication, uploading files, registration of accounts, and working with the final list of accounts with further uploading to Excel.
w8shipping.ua — back-end development using Laravel, MySQL. Improvements to the site, adding individual pages, updating information in the database, implementing reCAPTCHA. Front-end development with the Blade template.
Stack
-
HTML 5
-
CSS
-
SQL
-
Git
-
PHP
-
Laravel
- Adding content with translation into three languages;
- Adding multiple «room» entities;
- Saving images and videos;
- Work with images in a separate section of admin panels;
- Implementing builders for editing with Flexible Content. Thanks to this, the administrator can create blocks with any set of fields and swap them.
In addition, we used the REST API, with which you can «give» all the content in a convenient json format.
01
/ 05
Front-end development with Vue.js
The main goal of the project is to attract customers with the subsequent booking of rooms, so the site must be indexed by search engines. The Nuxt.js framework is best suited for this. It is based on the more well-known Vue.js and allows us to achieve our goal through Server Side Rendering (SSR). Thanks to this, already from the start, the site supports the necessary functionality for SEO promotion in search engines.
Tourism is an international hobby, which interests more and more people from different parts of the world every year. For this reason, we decided to implement multilingualism using i18n and add Ukrainian, Russian and English versions of the site.
Note that this is not a standard auto-translation - the content is filled in separately for each language and has unique URLs.
Among the interesting tasks during development, we note the addition of a large number of effects and animations. We have implemented the vast majority of them using the GSAP library.
Here are some examples of animations implemented on the site:
- Scroll Trigger — the appearance of blocks when the scroll on the page reaches a certain position.
- Split Text — the appearance of text character by character.
- Timeline + Scroll Trigger + smooth scroll — parallax effect.
In addition, we have implemented a rather interesting transition animation between slides, which supports several effects at once. To create it, we used the Hover Effects library, based on Three.js.
As the name implies, it works on hover, so we had to refine and adapt it for an element with automatic slide change after a specified period of time (autoplay).
We have also integrated a booking module that allows you to view the availability of rooms by date and leave a request for a specific time.
The result
As a result, we got a stylish and fully adaptable site with many interesting effects. A minimalist and user-friendly booking page should be singled out, where everyone can get a brief description, a list of services and benefits, photos, price and possibility of booking.
[post_title] => SPA Hotel Website with Room Booking [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => website-with-room-booking [to_ping] => [pinged] => [post_modified] => 2023-09-17 15:08:37 [post_modified_gmt] => 2023-09-17 12:08:37 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=10532 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [1] => 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.mp4The objective
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.
Solution
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.
Adaptability
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.
SEO optimization
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.
Other features
Useful articles
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.
Unobtrusive interface
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.
The team
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.
Certificates
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.
Summary
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-09-14 17:02:22 [post_modified_gmt] => 2023-09-14 14:02:22 [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 ) [2] => WP_Post Object ( [ID] => 5887 [post_author] => 10 [post_date] => 2021-01-18 12:28:34 [post_date_gmt] => 2021-01-18 09:28:34 [post_content] =>About the project
Santerra is a company engaged in the creation of turnkey landscaping, including lawns, lighting, and automatic irrigation. We were tasked with developing a website for the company that would allow to acquaint clients with the services provided, showcase a portfolio, and leave a request for work.
https://wnauts.com/wp-content/uploads/2021/01/san-tera-video.mp4Custom design
If the company's activities are even halfway related to design, then the website should also make a good impression. For this project, we did not use template solutions but developed a custom turnkey design.
The main page is designed in the format of a landing page, where the visitor can get acquainted with the company's projects and services. At first glance, the arrangement of individual elements may seem a bit chaotic, but they are all inscribed in the grid structure. As an indication of the company's activities, sometimes there are decorative inserts in the form of branches, leaves, or stones for the garden on a white background.
01
/ 04
The design adapts to any screen size and device format. On a small screen, all elements line up but are displayed completely correctly.
Contact points
When the visitor has read the information and is ready to order the service, they can contact the company in three ways:
- Сall the phone number provided in the header of the website and on the contact page.
- Request a call by entering your name and phone number.
- Leave a request for a free estimate by filling out a mini report with three items: You have to select a service, indicate the area of the job site, and the approximate date the work will begin.
01
/ 04
Blogging
An important promotional tool for such sites is a blog. With it, visitors can get acquainted with thematic material that will help them navigate and make the right decision.
During the development of the website, we paid special attention to the blog: our copywriter wrote 10 articles on a list of topics previously agreed with the client. They highlight the most important topics for a potential landscape design client. We plan to continue this blog as part of the SEO promotion for the project.
Results
The Webnauts team developed a stylish business card website that focused on unique design, conversion elements, and promotion. The website was developed on the WordPress platform, which allows you to conveniently manage and maintain a company blog in the future.
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 ) )Worked on
-
SPA Hotel Website with Room Booking
-
Team:
3
-
Cases:
0
-
Reviews:
0
-
-
Dental Clinic Website Development
-
Team:
7
-
Cases:
0
-
Reviews:
0
-
-
Brochure Website for the Sale of Landscape Design Services
-
Team:
4
-
Cases:
0
-
Reviews:
0
-
-
Custom Software Platform Developed for a Company Based in Ukraine
-
Team:
6
-
Cases:
0
-
Reviews:
0
-