Myroslava Maliar

Myroslava Maliar

Web designer

Download CV

He who believes in his fortune is lucky.

Stack

  • Adobe Illustrator

    Adobe Illustrator

  • Adobe Photoshop

    Adobe Photoshop

  • Figma

    Figma

		Array
(
    [0] => WP_Post Object
        (
            [ID] => 14210
            [post_author] => 10
            [post_date] => 2022-05-30 14:43:52
            [post_date_gmt] => 2022-05-30 11:43:52
            [post_content] => 

About the project

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

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

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

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

Banner

The objective

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

Implementation

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

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

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

Design creation

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

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

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

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

Development

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

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

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

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

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

Multilingualism

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

Banner

Adding donation forms

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

Banner

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

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

Summary

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

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

About the project

The Digital Broccoli website is a project of the popular blogger Mili Kotlyarova. It is designed for beginner freelancers and offers courses, webinars, helpful articles. As a new tool for site users, we have developed a service for accounting for freelancers' finances.

The specifics of freelancing is such that income is inconsistent and comes from different services, clients and projects. Therefore, Milya Kotlyarova developed her own Google spreadsheet, inside which she built the appropriate process logic. Based on this table, our task was to develop a web service that would be easy to use and accessible from any device.

Functionality

Going to the address https://broccoli.tools/ we get to a «stub» with a list of the benefits of the service and a login button.

Broccoli.Tools offers a simple registration followed by a short guide explaining how the service works and its main pages:

01

/ 05

After scrolling through the instructions, we get to the transaction page. It is the main page of the service and consists of three blocks:

  1. The amount of income for the specified period. On the green line above you can see the amount of income for the week, month, quarter or six months.
  2. Feed of expenses and incomes. Records can be sorted by date and filtered by type (income/expense/all). Each of them, despite the concise interface, contains maximum information about the operation: date, amount, project name, groups and categories of expenses. In order for the user to quickly navigate the types of transactions, expenses are highlighted in red, and incomes in green.
  3. Adding a new transaction. In order not to overload the interface with elements, this block is translucent until the cursor is hovered over it. It allows you to enter a transaction with all of the above information.
Banner

Taking a look at the top menu, we will see three sections for analyzing the current financial situation:

  • Income reports. They allow you to visualise which services and in which month brought the most money. Under the summary table of income for the year there are two blocks that will help you evaluate which services are most profitable to provide and to which customers.

01

/ 02

  • Expense reports. Here you can see which item of expenditure is the most significant. For a more detailed analysis, you can add both expense groups and categories. For example, the group «Household expenses» and the category «Products».
Banner
  • Account balances. In this section, you can evaluate how much money is on each of the accounts, on all of them in total, and how much you managed to save during this month.
Banner

The last section «Settings» is intended for specifying the list of services, customers and accounts. You can also add expense groups and categories for them here.

Banner

Adaptivity

For a financial accounting service, it is vital to have a mobile version in order to promptly make transactions immediately after spending. For most users, this may be the main criterion for choosing such a service. Therefore, we have adapted the service for use on computers, tablets and phones. On small screens, the interface completely changes, taking the form of a mobile application.

Summary

Together with Milya Kotlyarova, we developed and launched a service for freelancers' finance accounting. It is both simple and flexible to set up, allowing you to consider revenues from different projects and evaluate which services and clients bring in the most money.

You can register on the service by clicking on the easy and memorable link
https://broccoli.tools/.

Banner [post_title] => Freelancer Income Accounting Service [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => freelancer-income-accounting-service [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:38 [post_modified_gmt] => 2023-04-17 12:06:38 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=13583 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [2] => WP_Post Object ( [ID] => 11155 [post_author] => 10 [post_date] => 2022-05-18 17:22:26 [post_date_gmt] => 2022-05-18 14:22:26 [post_content] =>

The objective

ВloggerMall is the first Ukrainian platform aimed at making it easy for advertisers and Instagram bloggers to find each other and establish effective and safe collaborations.
After a successful experience of cooperation in the development of the site, BloggerMall turned to us again, only this time for the superpower of an iOS developer who is ready to create a convenient modern application for users of apple gadgets.

See also:

BloggerMall.com.ua blogger exchange Banner

The desire of our client to make the service for regular customers even more convenient and enjoyable turned into a task: to develop a stylish and understandable application that duplicates the capabilities of the site and is in no way inferior to it in terms of its functions:

  • registration and authorization of users;
  • blogger profile with a description and detailed analytics of the target audience;
  • blogger's advertising account;
  • payment system through the UAPAY service;
  • messenger.

This is what we actually did.

The design department received the task to design layouts for the mobile application. And for our iOS developer, with 5 years of experience, one large-scale task “Develop an application” immediately broke into several specific steps:

  1. Create pixel perfect based on design layouts;
  2. Develop application screens, navigation between them, transitions and animations;
  3. Build a functional part based on API calls to the server part;
  4. Create application components and set up a library that will match the functionality and design of the layouts.

Read more about how we implemented the project in our case study.

Technological solutions

When developing complex applications for iPhone and iPad, our specialists use Swift, the native language of the iOS mobile platform: reliable, intuitive and fast not only in development, but also in work on Apple devices.

Implementation of design and animations

At the time when BloggerMall came to us with a new project, the company already had a successful site made by Webnauts with a ready-made logo, bright corporate colors and a ready-made UI kit. Previously, our designers took part in the development of website design. Now the task is to design a mobile application for iOS devices.

Banner Banner

Despite the fact that our first project assumed an adaptive design of the platform for any type of device, the design of the mobile application has its own characteristics. If the mobile version of the site looks almost the same as the site in a regular browser, then the design of the application must meet the requirements of the OS manufacturer for the user interface (in our case, the requirements of iOS). So the mobile application for apple devices will look “native”, and thanks to integration with the platform, it will work faster.

Based on the layouts developed in the Figma graphics program, our developer implemented and “revived” the pixel design of the application using the following technologies:

  • Modal ViewController - bottom sheet modal view controller. This is a useful feature with a great UI/UX design that helps present a quick preview with minimal content.
  • UINavigationControlleris a specialized view controller that manages navigation through hierarchical content. It is a navigational interface that allows you to effectively visualize data and make it easier for the user to navigate through this content. Simply put, the UINavigationController helps the application user remember where they are at the moment (name of the navigation bar) and how they can return to the previous screen (the built-in back button).

Animation plays an important role in mobile app design. It is designed not only to distinguish an IT product from competitors, but also to increase the usability of the application. Animation "reacts" to the user's actions and helps them quickly get used to it, making the process dynamic and interesting.

In the BloggerMall application, we animated interface elements such as a hamburger menu, buttons, registration fields, radio buttons and a bottom navigation (tab bar) with 3 main sections of the application (My Ads, Posts, Profile).

Animation of visual elements is implemented using the following technologies:

  • Core Animation is a program developed by Apple for rendering, compositing, and animating images. It allowed us to deliver high frame rates and smooth animations without consuming the CPU or slowing down the application.
  • Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time. Using animation with it is as easy as using static images.

Functional part of the iOS application

User registration and authorization

Registration and access to the application is possible both by entering an email and password, and by logging in through Facebook and Google.

The blogger registration process includes 6 steps, during which you must specify personal data and a password, information and blog topics, rates and a method of payment for advertising services.

01

/ 06

If you enter an incorrect password, the system offers the usual way to recover it via e-mail:

Registering an advertiser is easier and takes just 2 steps. To do this, you must fill out the form and accept the user agreement.

Blogger Profile

It contains several sections: Personal data, My Instagram account, Prices for my services, My payment card.

01

/ 08

Blogger's advertising account

Contains all information about advertising cooperation and includes 3 main sections: All advertising, In progress and Waiting. It allows you to control not only the status, terms and payment of advertising requests, but also quickly go to the chat with the advertiser to agree on the terms and details of the transaction.

Banner

Payment system

The principle of payment for advertising services on the exchange is as follows: after mutual confirmation of the order, the advertiser pays for the service from a previously linked bank card, and the funds are “frozen” on the platform (90% - payment to the blogger and 10% - exchange commission). After the advertiser has confirmed the successful completion of the order, the blogger receives his money on his bank card. In case of non-fulfillment of the order, the money is returned to the advertiser's account in full. Like on the site, all mobile payments are made using the UAPAY National Payment Service.

All of the above functionality of the BloggerMall application is implemented on the basis of API calls to the server side using technologies:

  • UI Kit is a structured library of native components based on Apple guidelines. Thanks to interface elements grouped into categories (buttons, pop-ups, navigation bars, icons) and implemented in accordance with the apple design specification (typography, style, colors), UI Kit allows you to significantly speed up the creation of an application for iPhone and iPad.
  • Alamofire is a Swift-based HTTP networking library for iOS and Mac OS X. It provides an elegant interface on top of the Apple Foundation networking stack that simplifies common networking tasks. Its features include chain methods of request and response, encoding and decoding responses, and data authentication.

Socket.IO technology was used to receive and send data between users of the BloggerMall application. It is a JavaScript library for real-time data exchange. It provides bidirectional, event-based communication between client and server with minimal data transfer delay.

Development of a messenger for an iOS application

Chat between users of the BloggerMall application was implemented using MessageKit technology, an open source Swift library for sending and rendering messages between users of iOS devices.

Perhaps the implementation of the chat was the trickiest task of the project. The server part of the messenger had previously been written for the BloggerMall website, and it should have been “transferred” to the iOS platform so that the principle of the chat was the same on the site and in the application.

But, as you know, it is easier (though longer) to write programs from scratch than to unravel someone else's code. And the use of third-party libraries can not always be clearly customized to the client's request.

Here the MessageKit technology helped, although not immediately, since our developer encountered it for the first time. At first, it was not entirely clear how to send, receive and compare data: not only text, but also large photo and video files. There were some difficulties with the design, namely with setting up the library and displaying the interface that the client requested. However, having gradually mastered the technology and figured out how the backend with the frontend works on the site, our iOS developer began to implement the messenger. As a result, we got both a convenient chat and an even more advanced specialist.

01

/ 04

The results

It took 2 months to create an iOS application, as a result of which BloggerMall received not only another source of income, but also the most thoughtful, understandable and reliable tool for effective cooperation between its clients: bloggers and advertisers. Analytics, advertising account, transaction history and internal chat - now everything is at hand for comfortable and safe cooperation. More satisfied customers means more successful transactions, and hence the growth of the company's income.

During this difficult project, we not only successfully implemented the product, but also replenished our technology stack. We love challenges, because they allow us to develop and make really cool things.

[post_title] => Mobile iOS Application for Bloggers' Platform [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => mobile-ios-application-for-blogger-exchange [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=11155 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [3] => WP_Post Object ( [ID] => 10378 [post_author] => 10 [post_date] => 2022-03-24 08:48:35 [post_date_gmt] => 2022-03-24 05:48:35 [post_content] =>

About the project

Temporal Games is a software development company in the areas of Game Development, AI Research & Deployment. They are the creators of the Riflecore mobile game and the fluxNEAT neural network, which is capable of learning gaming skills in real time with almost zero amount of given information.

Temporal Games turned to us to create a single page web application for fluxCortex Azur, a hybrid self-learning artificial intelligence architecture powered by genetic algorithms.

Setting goals

We needed to create a convenient platform for managing gaming applications, which would include:

  • An interface for creating, editing and deleting data for a specific game — it can be either the characters themselves, or their voices or entire dialogues;
  • Visualization of statistical data — the transformation of a large amount of information into understandable and minimalistic graphs;
  • Export — the ability to conveniently upload a large amount of data;

and much more.

The web application is intended for internal use, so SEO optimization and search robots, in our opinion, are not needed here. For the same reason, we also abandoned server-side rendering (SSR).

As a tool for implementing the frontend part, we used the Vue.js framework (namely, its 3rd version). The back-end part of the service was provided by the customer, so our developers were able to concentrate on front-end development, writing individual modules, components, and connecting the API.

Development process

First of all, we implemented user authorization based on access and refresh tokens. For this, Axios Interceptors, which check the token before executing the request, and Vue Router hooks, which check just before moving to another page, suited best . If the verification fails, the user will be returned back to the login page.

Banner

To visualize the data, we implemented a table with pagination, filters and sorting capabilities. Thanks to this, it is easier for the user to find the information they need in alphabetical order, by creation time and ID.

In addition, we implemented the ability to edit each record by going to a separate page or directly through the fields in the table. You can create and edit data both in the context of the selected filter, and at your own discretion.

Banner

Everyone loves minimalistically designed statistics, so we used a bar chart. The data dynamically changes when the date changes or any of the filters are switched.

Banner

The «Voice API» deserves special attention. It reproduces the written text with the voices of different characters. Thanks to this, for each of the created characters (an entry in the table), you can select a unique voice from the list, listen to it for a given phrase, or write your own text.

Banner

The main problem that we encountered when working with the «Voice API» is the delay. Because of this, the text entered from scratch was not transmitted immediately, as Temporal Games wanted. To solve this problem, we wrote middleware that checked the status of the server's response and waited for the end of the generation of the audio track.

Another interesting task that we faced during development is the implementation of data export. The thing is that the selection is data for each individual day, which are grouped monthly. Therefore, to increase convenience, we decided to add a new feature — placing data for the day in separate JSON files. After a month, they are archived and made available for download as a single zip file.

Banner

The result

While working with Temporal Games, we not only improved our own skills, but also enjoyed solving non-standard problems. As a result, we managed to create a classic single-page application (SPA) with extensive functionality and the possibility of further scaling. At the same time, customers received not only an attractive, but also a convenient product, written on the latest version of one of the most relevant Java Script frameworks of our time.

[post_title] => SPA Application on Vue.js for Data Management [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => spa-application-on-vue-js-for-data-management [to_ping] => [pinged] => [post_modified] => 2023-04-17 15:06:41 [post_modified_gmt] => 2023-04-17 12:06:41 [post_content_filtered] => [post_parent] => 0 [guid] => https://wnauts.com/?post_type=project&p=10378 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) [4] => WP_Post Object ( [ID] => 16524 [post_author] => 10 [post_date] => 2022-08-26 14:04:19 [post_date_gmt] => 2022-08-26 11:04:19 [post_content] =>

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.

Banner

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.

Banner

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:

Banner

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:

Banner

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:

Banner

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:

Banner

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:

Banner

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:

Banner

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:

Banner

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:

Banner

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):
Banner
  • 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:
Banner
  • 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:

Banner

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:

Banner

Animation on hover

The color change effect on hover increases user engagement and allows them to focus on the content inside the cards:

Banner Banner

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:

Banner

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:

Banner

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.

Banner

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-04-17 15:06:19 [post_modified_gmt] => 2023-04-17 12:06:19 [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 ) [5] => WP_Post Object ( [ID] => 17059 [post_author] => 14 [post_date] => 2022-09-28 11:08:50 [post_date_gmt] => 2022-09-28 08:08:50 [post_content] =>

The main tasks of the project

Softwarium, a Ukrainian IT company specializing in software development, asked us to create a fast website with an individual design and a user-friendly control panel. At the same time, the development of a corporate website for an IT company had to be carried out without compromise in the form of CMS, templates and ready-made solutions.

Spoiler: we did it. So to say, from our IT company to your IT company.

Banner

Individual UI/UX design

Before we met, Softwarium already had its own site on the Wix platform, but its design and technological solutions have become outdated:

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-before.mp4

Designers were the first to get down to work and created a modern page design according to all UI/UX rules: from visual analysis and concept development to adapting layouts for stationary and mobile devices:

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-menu.mp4

We updated the style and retained the corporate colors, structure and content of the predecessor site. As a result, we got a concise and elegant product in the Royal Blue corporate color, carefully balancing between efficiency and lightness, as if hinting to the user that reliable and simple cooperation awaits them:

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-main-page.mp4

Animation on the site performs a practical function: it gives a response to hovers and clicks without distracting users from getting to know the content.

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-microanimation-on-the-site.mp4

We paid special attention to the functional side of UX and made the site blocks super informative. Now they can be easily combined with each other and different pages directly from the admin panel. But more on that later.

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-informative-blocks.mp4

Responsiveness

The site looks great on computers, laptops, tablets and mobile devices. Since smartphones and tablets have touch controls, all hover animations «trigger» not when you move the mouse cursor, but when you click on a button or other interface element.

Banner

Coding on powerful frameworks Vue.js and Nuxt.js

In developing the interface, we used two reactive JavaScript frameworks at once — Vue.js and Nuxt.js, with the help of which we revived many blocks and page types.

Interesting blog features

In the «Blog» section of the site, we have connected a useful «Share» function, which makes it easy to send useful articles of the site to mail, social networks and instant messengers. And this can be done not only on the page with a separate article, but also in the article directory itself:

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-share-function.mp4

Thanks to the vue-in-viewport-mixin library, on each section page it is convenient to track the scroll position and switch between items in the menu of a separate article:

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-the-menu-of-a-article-in-blog.mp4

One of the most interesting tasks was the implementation of the form on the blog pages, which invites the reader to leave a comment. As soon as the user enters their first and last name in the form, the initials are immediately displayed on the profile picture. Users can not only write comments, but also bring the text to life with emojis and GIFs. This became possible thanks to the v-emoji-picker Vue library, but GIF-picker had to be created independently, since the library for Vue had not yet been invented:

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-comments.mp4

Contact form

There is a separate page for contacts on the site containing an application form. Here we used the vue-phone-number-input library, which prompts you to select a country from a drop-down vertical list and checks the mobile number for correctness:

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-form-with-a-drop-down-vertical-list.mp4

When you hover to the addresses of the company's branches, the map changes its appearance:

https://wnauts.com/wp-content/uploads/2022/09/softwarium.-contacts-and-map.mp4

Dynamic URL

URL (Uniform Resource Locator) is the address of sites and files uploaded to the Internet and displayed in the browser bar.

We have made the URLs of the Softwarium site pages dynamic. This means that if the client changes the title of any article, he will not need to edit the title of the page address himself, as it will automatically change after the new title.

Project feature — page builder in the admin panel

The backend of the site is implemented on the Laravel 9 PHP framework, thanks to which we got a super-productive and powerful site. But that's not all. The most important feature of the project was a unique page builder within the given design concept. This means that our client can create pages, menus and blog articles without the help of programmers in just a matter of minutes. To do this, designers and developers have prepared a huge number of blocks that can be filled with content, edited and placed in any order. And if you want, to completely remake the site on a completely different topic.

Adding a block to a page:

Banner

Ability to swap blocks:

Banner

List of pages:

Banner

Menu settings page:

Banner

At the request of the client, we implemented button customization in each block of the site, and if desired, the client can even change the text and color of the buttons in the hover and click state:

Banner

The site on Laravel in this case is not only a convenient constructor, but also a kind of CRM system, since applications from all forms come to the admin panel:

Banner

SEO friendliness of the site

Optimizing a site for SEO means not only making it available to search engines, but also distinguishing it from many other competing sites. To do this, we set up all the necessary parameters: meta tags, micro-markup, alternative image captions, as well as robots.txt files (the standard for exclusions for robots) and sitemap, which helps search engines find, crawl and index pages on the site.

Super fast page loading

The complex structure of the site and the variety of its content did not prevent us from achieving, without exaggeration, fast loading pages. We achieved this effect with the help of progressive frameworks: the Nuxt.js and Vue.js JavaScript frameworks on the client side, and the Laravel PHP framework on the server side. This approach allows you to make the development process flexible and eliminate unnecessary redundancy and slowness, which ready-made CMS systems like WordPress «suffer» so much.

The integration of the client and server parts of the site occurs through the API (Application Programming Interface) — a technology that allows one program to exchange data with another.

Results of cooperation

We met non-trivial and sometimes difficult tasks from Softwarium with enthusiasm and coped with them 100%. Thus, we did our best to fit the rich 20-year experience of Softwarium comfortably into the pages of a new, stylish and modern website of the IT company, and at the same time for it to be distinguished by high speed, performance and power. We managed to implement a unique page builder right in the admin panel of the site, which will allow the client to play with blocks and create new pages without code.

Without a doubt, cooperation with the IT company Softwarium in general and the case of developing a corporate website for an IT company on Laravel + vue.js gave us a unique experience and creative development.

[post_title] => IT Company Website on Laravel [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => closed [post_password] => [post_name] => it-company-website-on-laravel [to_ping] => [pinged] => [post_modified] => 2023-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=17059 [menu_order] => 0 [post_type] => project [post_mime_type] => [comment_count] => 0 [filter] => raw ) )