How we moved from widgets and “bricks” to an intuitive layout with the ability to embed html, css and javascript
Hello dear readers, after almost a year of running-in and tests, we have released the first public version of our product - a universal platform for web-designers . Why in general it was created - you ask. This will be discussed below.
The idea of creating a platform came to our mind when on complex pages, in the process of typesetting, there was a lot of disagreement between the layout designer and the designer, and the output was not quite what was initially seen. Especially when it came to complex effects. Of course, to achieve the proper quality, we spent a lot of time “grinding” the work. The idea that it is necessary to somehow simplify the process, especially on medium-sized budget projects, is already stuck in our heads.
At first, we tested different ready-made solutions, but in each bit of something was missing. And so the requirements were born - what we want:
')
So, here are 10 requirements that we presented to the platform so that our designers can work and develop creatively in it. Obviously, the platform will continue to evolve, but these requirements are what can be obtained "here and now." What will happen next - time will tell. In any case, we will emphasize the perfect work of what we have.
The project began as an ordinary editor, of which there are many. We quickly understood it and wanted more! And so they gradually moved away from the development of simple websites “for themselves”, to the platform they dreamed of.
It is clear that we could not make the product fully paid. We needed the opportunity for each client to see everything himself, test the functionality and compare it with other platforms. And here we had a choice - either to give unlimited free access to the main functions, or to limit the test period in time. In the first case, we would have to think through an analogy with Ucoz, but we really did not want to. As developers and designers in one person, we understood that various pop-up windows would do more harm than good. Because we stopped at a limited test period.
With technical support everything turned out to be much more complicated. Initially, we developed a product that is ideal for us, but as it turned out, quite complex, even for clients with experience. Until we developed accessible and understandable training materials, did not debug the work of support-managers, we lost 80% of clients. Now the problem is gone, but the platform is still focused on developers and web-designers.
Separate attention deserved basic patterns. Each of the 50 templates we have worked to the smallest detail, tried to diversify the collection as much as possible. However, due to the global update of the platform, we had to redo them. Now the choice is limited, but we are expanding the collection.
Otherwise, the capabilities of the service are similar to those of other platforms, with the exception of “functionality for companies and agencies”. This will be discussed next time.
Let's take a look further. Welcome to the visual editor.
The functionality of the editor itself includes both standard features and new ones for Russian-speaking editors. For example, triggers are small event handlers that allow you to control elements.
The left and right panels can be hidden, so as not to interfere with the process of creativity.
Now let's talk about the main technical difference between our platform. We have gone beyond the usual editor and do not offer to develop a site from ready-made bricks. We have very few of them, and those in the form of ready-made widgets:
It may be worth adding new ones, but the design of the platform is such that you yourself can assemble more complex functional structures using these simple blocks. Therefore, while concentrating on another functional.
In other words, our platform allows you to create an individual adaptive layout, without going into the code. By necessity, html, css and javascript are easily implemented, allowing you to place your own blocks. This is the uniqueness of our editor - we can implement fairly complex “design solutions” using the tools presented in the editor without using third-party code.
So, the first points of our requirements are implemented. The editor is, sites are created.
Since we as a target audience consider all those involved in the development of custom-made websites - freelance, digital agencies and a business with several sites - the editor must include controls. We sell services to customers who sell services to customers. Therefore, we focused on a multi-user application, in which each client will receive not even a room, but a mansion, where he can distribute rooms as he likes. And we did it. You get a personal account, arrange it (branding) and distribute the rights to access sites between your customers. In your personal account, you can hide the PIXLI information by specifying your contact information instead. The fee from your customers is not charged, it is part of the tariff. So you decide where to put the costs - in the client's site or in his service.
We have already identified our target audience: freelancing, agencies and companies. For each of these segments, the platform has its advantages.
Freelance
The platform gives sole control over all developments, which eliminates the need for cooperation with frontend-developers. Design layouts can be done directly in the browser, using a visual editor - it has the necessary capabilities. This will save time. Customer's access to the personal account allows him to see the whole process of creation from beginning to end. This will help lead the development in the mode of constant refinements, rather than receive post-factum comments. The design is performed simultaneously with adaptive layout.
Digital agencies
Tests have shown that the PIXLI platform reduces design development by almost three times. This results in a dynamic site with a unique design, adapted to all modern devices. Professional visual editor allowed to combine prototyping, design and adaptive layout, with a clean semantic code at the output.
The organization of a private office involves teamwork on different projects. This is an important advantage - managing a large number of projects on different hosting sites often leads to confusion and temporary delays.
Each created site is managed by a built-in CMS. You can give it access to the client, and he will manage it himself. It is possible to export the code of the developed site with further transfer to the client or placement on the hosting. You are free to manage your development.
Companies
The main advantage for companies is the optimization of site creation processes. The platform accelerates the process of creating and launching unique landing pages and promo sites. From the idea to its implementation, a few days pass.
For startups, the speed of changing a site or application can be critical. The platform helps to quickly change the design depending on the tests.
Let us try to analyze whether our platform will allow us to reduce the cost of creating a website and, if so, how much?
We have conducted a small study of the financial and time costs of creating the site. Surveys and analysis of the proposals of the sites of firms - developers helped to derive some average figures. The sample was quite representative - from freelancers with small orders to quite successful developers. Nevertheless, we do not claim the role of truth in the last resort - any research in the field of web-design is relative.
Analysis of studies in 2016 showed that in the IT-sphere the professions in demand are:
As you can see, the first places are occupied by designers and designers. What is surprising with the number of proposals for the development of sites. However, it should be noted that this is not about freelancers with a dubious portfolio, but about real professionals.
Site creation - the process is quite long. The time of its creation is not limited, since this work is creative, depends on the requirements of the customer. There are 5 main stages:
We took the average time spent on each step. Of course, time essentially depends on the level of the developer, the number of people in the team, and also on the customer. If the customer of the site firmly knows what he wants, then the process is shortened. The minimum number of days that an average studio spends with a team of 5 people, when working in parallel, is 7 days. The maximum is 80 days, this is in the case of developing complex services. Of course, these figures are very approximate.
What is the cost of the site? Again from the cost of each development stage. As a rule, firms declare a minimum cost, which is very different and depends on labor costs, promotion of the company, portfolio size and even on the region. For example, a corporate adaptive website in Nizhny Novgorod can be ordered from 20,000 rubles, and in Moscow from 60000 rubles.
On average, if you disassemble the cost of the site according to the stages of its creation, you can get the following picture for a corporate site with CMS elements:
Based on these figures, we can conclude that the advertising site for 20000 p. - This is either the starting price in the long bargaining, or the price for the finished design in WordPress. If we talk about sites that are really created for the customer with a unique design, taking into account the wishes, and manual layout, here prices start at 50,000 rubles minimum. It just can't be less.
It is a pity to admit it, but manual quality layout becomes the lot of the chosen, good layout designers are worth their weight in gold, and their services are expensive. This was greatly influenced by the development of technology. 10 years ago, happiness was to get a rubber mock-up, and now it should be adaptive for several different devices. Accordingly, there is a huge demand for simplifying the site layout process. And if there is a demand, there will be an offer.
Let's try to calculate the cost of the site under the order and on the site created using the PIXLI platform, the tariff "Professional" and the price that we derived above.
Immediately, we note that the “Professional” tariff is intended for developers who, in addition to their corporate website, periodically launch landing pages. They have a real need to constantly develop and maintain multiple sites. Simple calculations show that the development and maintenance of a third-party site is quite expensive. Hosting from the agency must be bought, PIXLI includes it in the tariff plan. The cost of support was derived as the average, after analyzing different offers.
As a result, we get the cost of ordering the site in the amount of the cost of the site + domain + hosting = 52949r. in the first year. Prices for hosting and tariff were taken from the site RU-CENTER. If we consider the annual support, the amount grows by several times - by 180,000 a year. Total 232949 rubles for the first year.
Regarding the use of the editor, of course everything will be cheaper, since hosting and support are included in the subscription fee. The cost of annual maintenance for PIXLI will be about 15000r.
So, let's see what the site developer gets for himself for 15,000 rubles a year at PIXLI:
Website design can be made on the basis of a template or ordered on the side. Now it costs from 20,000 rubles. We do not take into account the salary of the employee who is engaged in the creation of the site for the reason that the company is unlikely to hire someone on the side. Most often, as our experience shows, if they needed such services, it means that there is already someone who can create a website. So, you save by layout, support, hosting.
If you are a digital agency or freelancer, then save the time of the layout maker by giving him exclusive piece orders. Time for the layout of the site of the average price category is reduced by several times, respectively, you can take additional orders. In addition, labor costs are reduced due to a single client management center. No need to visit all hosting sites where your customers keep sites. All in one place.
When developing the PIXLI platform , we proceeded from our own experience in creating custom websites. It was not difficult for us to side with the target audience and look through its eyes at the development tools. We tried to automate the layout as much as possible, leaving enough room for creativity. In addition to the editor, we have built a platform that allows a developer to manage his business from one location - a personal account.
The PIXLI environment is still young, is in continuous development. And we promise that it will not stop for a very long time, delighting our customers with new features and tasty bonuses.
We have tried to simplify the lives of website developers in the middle price segment as much as possible. After all, nothing will replace a professional website, made with love by the whole team and licked to the smallest detail for the client, but you must admit that such work cannot be cheap, and how many clients want to pay a lot?
To manually impose the site or use the tools - everyone decides for himself. However, the very presence of choice already makes life easier and more pleasant.
The idea of creating a platform came to our mind when on complex pages, in the process of typesetting, there was a lot of disagreement between the layout designer and the designer, and the output was not quite what was initially seen. Especially when it came to complex effects. Of course, to achieve the proper quality, we spent a lot of time “grinding” the work. The idea that it is necessary to somehow simplify the process, especially on medium-sized budget projects, is already stuck in our heads.
At first, we tested different ready-made solutions, but in each bit of something was missing. And so the requirements were born - what we want:
')
- Convenient functionality, simple training.
- Adaptive cross-browser layout.
- The ability to create a site with a “clean slate”, with minimal restriction of functionality from the platform.
- Ability to program items yourself.
- The ability to create a website without programming elements.
- Personal Area.
- Branded personal account.
- Ability to create multiple sites and manage them.
- Ability to transfer site management to their customers.
- The ability to manage your customers.
So, here are 10 requirements that we presented to the platform so that our designers can work and develop creatively in it. Obviously, the platform will continue to evolve, but these requirements are what can be obtained "here and now." What will happen next - time will tell. In any case, we will emphasize the perfect work of what we have.
How we started our journey
The project began as an ordinary editor, of which there are many. We quickly understood it and wanted more! And so they gradually moved away from the development of simple websites “for themselves”, to the platform they dreamed of.
It is clear that we could not make the product fully paid. We needed the opportunity for each client to see everything himself, test the functionality and compare it with other platforms. And here we had a choice - either to give unlimited free access to the main functions, or to limit the test period in time. In the first case, we would have to think through an analogy with Ucoz, but we really did not want to. As developers and designers in one person, we understood that various pop-up windows would do more harm than good. Because we stopped at a limited test period.
With technical support everything turned out to be much more complicated. Initially, we developed a product that is ideal for us, but as it turned out, quite complex, even for clients with experience. Until we developed accessible and understandable training materials, did not debug the work of support-managers, we lost 80% of clients. Now the problem is gone, but the platform is still focused on developers and web-designers.
Separate attention deserved basic patterns. Each of the 50 templates we have worked to the smallest detail, tried to diversify the collection as much as possible. However, due to the global update of the platform, we had to redo them. Now the choice is limited, but we are expanding the collection.
Otherwise, the capabilities of the service are similar to those of other platforms, with the exception of “functionality for companies and agencies”. This will be discussed next time.
Let's take a look further. Welcome to the visual editor.
The functionality of the editor itself includes both standard features and new ones for Russian-speaking editors. For example, triggers are small event handlers that allow you to control elements.
The left and right panels can be hidden, so as not to interfere with the process of creativity.
Now let's talk about the main technical difference between our platform. We have gone beyond the usual editor and do not offer to develop a site from ready-made bricks. We have very few of them, and those in the form of ready-made widgets:
- tabs;
- video;
- gallery;
- slider, etc.
It may be worth adding new ones, but the design of the platform is such that you yourself can assemble more complex functional structures using these simple blocks. Therefore, while concentrating on another functional.
In other words, our platform allows you to create an individual adaptive layout, without going into the code. By necessity, html, css and javascript are easily implemented, allowing you to place your own blocks. This is the uniqueness of our editor - we can implement fairly complex “design solutions” using the tools presented in the editor without using third-party code.
So, the first points of our requirements are implemented. The editor is, sites are created.
Since we as a target audience consider all those involved in the development of custom-made websites - freelance, digital agencies and a business with several sites - the editor must include controls. We sell services to customers who sell services to customers. Therefore, we focused on a multi-user application, in which each client will receive not even a room, but a mansion, where he can distribute rooms as he likes. And we did it. You get a personal account, arrange it (branding) and distribute the rights to access sites between your customers. In your personal account, you can hide the PIXLI information by specifying your contact information instead. The fee from your customers is not charged, it is part of the tariff. So you decide where to put the costs - in the client's site or in his service.
What gives PIXLI to developers
We have already identified our target audience: freelancing, agencies and companies. For each of these segments, the platform has its advantages.
Freelance
The platform gives sole control over all developments, which eliminates the need for cooperation with frontend-developers. Design layouts can be done directly in the browser, using a visual editor - it has the necessary capabilities. This will save time. Customer's access to the personal account allows him to see the whole process of creation from beginning to end. This will help lead the development in the mode of constant refinements, rather than receive post-factum comments. The design is performed simultaneously with adaptive layout.
Digital agencies
Tests have shown that the PIXLI platform reduces design development by almost three times. This results in a dynamic site with a unique design, adapted to all modern devices. Professional visual editor allowed to combine prototyping, design and adaptive layout, with a clean semantic code at the output.
The organization of a private office involves teamwork on different projects. This is an important advantage - managing a large number of projects on different hosting sites often leads to confusion and temporary delays.
Each created site is managed by a built-in CMS. You can give it access to the client, and he will manage it himself. It is possible to export the code of the developed site with further transfer to the client or placement on the hosting. You are free to manage your development.
Companies
The main advantage for companies is the optimization of site creation processes. The platform accelerates the process of creating and launching unique landing pages and promo sites. From the idea to its implementation, a few days pass.
For startups, the speed of changing a site or application can be critical. The platform helps to quickly change the design depending on the tests.
How much to hang in grams?
Let us try to analyze whether our platform will allow us to reduce the cost of creating a website and, if so, how much?
We have conducted a small study of the financial and time costs of creating the site. Surveys and analysis of the proposals of the sites of firms - developers helped to derive some average figures. The sample was quite representative - from freelancers with small orders to quite successful developers. Nevertheless, we do not claim the role of truth in the last resort - any research in the field of web-design is relative.
Analysis of studies in 2016 showed that in the IT-sphere the professions in demand are:
- Web developer:
- html maker;
- web designer;
- web programmer;
- Content manager;
- 1C programmer;
- mobile application developer;
- System Administrator.
As you can see, the first places are occupied by designers and designers. What is surprising with the number of proposals for the development of sites. However, it should be noted that this is not about freelancers with a dubious portfolio, but about real professionals.
Site: time frame
Site creation - the process is quite long. The time of its creation is not limited, since this work is creative, depends on the requirements of the customer. There are 5 main stages:
- Development of technical specifications - 5 - 12 days.
- Content preparation - 5 - 15 days.
- Site design - 4-18 days.
- Website layout - 7-14 days.
- Programming - 5-21 days.
We took the average time spent on each step. Of course, time essentially depends on the level of the developer, the number of people in the team, and also on the customer. If the customer of the site firmly knows what he wants, then the process is shortened. The minimum number of days that an average studio spends with a team of 5 people, when working in parallel, is 7 days. The maximum is 80 days, this is in the case of developing complex services. Of course, these figures are very approximate.
The financial side of the issue
What is the cost of the site? Again from the cost of each development stage. As a rule, firms declare a minimum cost, which is very different and depends on labor costs, promotion of the company, portfolio size and even on the region. For example, a corporate adaptive website in Nizhny Novgorod can be ordered from 20,000 rubles, and in Moscow from 60000 rubles.
On average, if you disassemble the cost of the site according to the stages of its creation, you can get the following picture for a corporate site with CMS elements:
- Development of technical specifications - for free.
- Content preparation - decent text starts at 200 rubles. per 1000 characters without spaces. The number of characters on one page on average is about 3000. For 10 pages we get something around 6000r.
- Site design - from 2000 in freelancing and up to 0.5 million rubles. for an exclusive.
- Site layout - 7000-20000 rubles.
- Programming - from 6000 p. on freelance and further without restrictions.
Based on these figures, we can conclude that the advertising site for 20000 p. - This is either the starting price in the long bargaining, or the price for the finished design in WordPress. If we talk about sites that are really created for the customer with a unique design, taking into account the wishes, and manual layout, here prices start at 50,000 rubles minimum. It just can't be less.
Is it possible to simplify the layout?
It is a pity to admit it, but manual quality layout becomes the lot of the chosen, good layout designers are worth their weight in gold, and their services are expensive. This was greatly influenced by the development of technology. 10 years ago, happiness was to get a rubber mock-up, and now it should be adaptive for several different devices. Accordingly, there is a huge demand for simplifying the site layout process. And if there is a demand, there will be an offer.
PIXLI - cost optimization?
Let's try to calculate the cost of the site under the order and on the site created using the PIXLI platform, the tariff "Professional" and the price that we derived above.
| Tariff name
| Cost of
| Number of sites
| Hosting
| Second level domain
| Number of connected domains
| Website maintenance
| |
|---|---|---|---|---|---|---|---|
| PIXLI
| Professional
| 1230 RUR / month
| 15
| unlimited
| free
| 3
| technical support
|
| Design studio
| Corporate website
| 50000r.
| one
| - | - | one
| 15000r. / Month
|
Immediately, we note that the “Professional” tariff is intended for developers who, in addition to their corporate website, periodically launch landing pages. They have a real need to constantly develop and maintain multiple sites. Simple calculations show that the development and maintenance of a third-party site is quite expensive. Hosting from the agency must be bought, PIXLI includes it in the tariff plan. The cost of support was derived as the average, after analyzing different offers.
As a result, we get the cost of ordering the site in the amount of the cost of the site + domain + hosting = 52949r. in the first year. Prices for hosting and tariff were taken from the site RU-CENTER. If we consider the annual support, the amount grows by several times - by 180,000 a year. Total 232949 rubles for the first year.
Regarding the use of the editor, of course everything will be cheaper, since hosting and support are included in the subscription fee. The cost of annual maintenance for PIXLI will be about 15000r.
So, let's see what the site developer gets for himself for 15,000 rubles a year at PIXLI:
- Ability to create 15 sites. Your task is to develop the design and assembly of elements in the editor.
- Technical support and hosting.
- The ability to independently maintain your site - create a backup, update information, change the design.
Website design can be made on the basis of a template or ordered on the side. Now it costs from 20,000 rubles. We do not take into account the salary of the employee who is engaged in the creation of the site for the reason that the company is unlikely to hire someone on the side. Most often, as our experience shows, if they needed such services, it means that there is already someone who can create a website. So, you save by layout, support, hosting.
If you are a digital agency or freelancer, then save the time of the layout maker by giving him exclusive piece orders. Time for the layout of the site of the average price category is reduced by several times, respectively, you can take additional orders. In addition, labor costs are reduced due to a single client management center. No need to visit all hosting sites where your customers keep sites. All in one place.
Conclusion
When developing the PIXLI platform , we proceeded from our own experience in creating custom websites. It was not difficult for us to side with the target audience and look through its eyes at the development tools. We tried to automate the layout as much as possible, leaving enough room for creativity. In addition to the editor, we have built a platform that allows a developer to manage his business from one location - a personal account.
The PIXLI environment is still young, is in continuous development. And we promise that it will not stop for a very long time, delighting our customers with new features and tasty bonuses.
We have tried to simplify the lives of website developers in the middle price segment as much as possible. After all, nothing will replace a professional website, made with love by the whole team and licked to the smallest detail for the client, but you must admit that such work cannot be cheap, and how many clients want to pay a lot?
To manually impose the site or use the tools - everyone decides for himself. However, the very presence of choice already makes life easier and more pleasant.
Source: https://habr.com/ru/post/321976/
All Articles