Softwarium, a Ukrainian IT company specializing in software development, asked us to create a fast website with an individual design and a user-friendly control panel. At the same time, the development of a corporate website for an IT company had to be carried out without compromise in the form of CMS, templates and ready-made solutions.
Spoiler: we did it. So to say, from our IT company to your IT company.
Individual UI/UX design
Before we met, Softwarium already had its own site on the Wix platform, but its design and technological solutions have become outdated:
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:
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:
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.
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.
The site looks great on computers, laptops, tablets and mobile devices. Since smartphones and tablets have touch controls, all hover animations «trigger» not when you move the mouse cursor, but when you click on a button or other interface element.
Coding on powerful frameworks Vue.js and Nuxt.js
In developing the interface, we used two reactive JavaScript frameworks at once — Vue.js and Nuxt.js, with the help of which we revived many blocks and page types.
Interesting blog features
In the «Blog» section of the site, we have connected a useful «Share» function, which makes it easy to send useful articles of the site to mail, social networks and instant messengers. And this can be done not only on the page with a separate article, but also in the article directory itself:
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:
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:
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:
URL (Uniform Resource Locator) is the address of sites and files uploaded to the Internet and displayed in the browser bar.
We have made the URLs of the Softwarium site pages dynamic. This means that if the client changes the title of any article, he will not need to edit the title of the page address himself, as it will automatically change after the new title.
Project feature — page builder in the admin panel
The backend of the site is implemented on the Laravel 9 PHP framework, thanks to which we got a super-productive and powerful site. But that's not all. The most important feature of the project was a unique page builder within the given design concept. This means that our client can create pages, menus and blog articles without the help of programmers in just a matter of minutes. To do this, designers and developers have prepared a huge number of blocks that can be filled with content, edited and placed in any order. And if you want, to completely remake the site on a completely different topic.
Adding a block to a page:
Ability to swap blocks:
List of pages:
Menu settings page:
At the request of the client, we implemented button customization in each block of the site, and if desired, the client can even change the text and color of the buttons in the hover and click state:
The site on Laravel in this case is not only a convenient constructor, but also a kind of CRM system, since applications from all forms come to the admin panel:
SEO friendliness of the site
Optimizing a site for SEO means not only making it available to search engines, but also distinguishing it from many other competing sites. To do this, we set up all the necessary parameters: meta tags, micro-markup, alternative image captions, as well as robots.txt files (the standard for exclusions for robots) and sitemap, which helps search engines find, crawl and index pages on the site.
Super fast page loading
The complex structure of the site and the variety of its content did not prevent us from achieving, without exaggeration, fast loading pages. We achieved this effect with the help of progressive frameworks: the Nuxt.js and Vue.js JavaScript frameworks on the client side, and the Laravel PHP framework on the server side. This approach allows you to make the development process flexible and eliminate unnecessary redundancy and slowness, which ready-made CMS systems like WordPress «suffer» so much.
The integration of the client and server parts of the site occurs through the API (Application Programming Interface) — a technology that allows one program to exchange data with another.
Results of cooperation
We met non-trivial and sometimes difficult tasks from Softwarium with enthusiasm and coped with them 100%. Thus, we did our best to fit the rich 20-year experience of Softwarium comfortably into the pages of a new, stylish and modern website of the IT company, and at the same time for it to be distinguished by high speed, performance and power. We managed to implement a unique page builder right in the admin panel of the site, which will allow the client to play with blocks and create new pages without code.
Without a doubt, cooperation with the IT company Softwarium in general and the case of developing a corporate website for an IT company on Laravel + vue.js gave us a unique experience and creative development.
