In May 2014 a client turned to us with a request to estimate the complexity and the cost of an application that generates a mosaic from the user's photos. In November the order was canceled, but we liked the idea so much that we decided to research the most popular mosaic generation services. The research has shown that all of these websites have issues with either UX, technologies used or both:
After analyzing the pros and cons, we allocated a budget and a staff for this project and the work began. We developed prototypes and invested some time in developing design. As a result, we decided to build main page that users can immediately start creating mosaic.
Mosaic creation consists of 3 steps. At first you select the main image, size and type of mosaic. At the second step, you upload photos. The third step is viewing and sharing results. You can download the result image or buy a high resolution one to print.
At the beginning of 2015, we launched the project. It received very positive reviews and scored quickly attendance. People liked convenient design and nice UX there.
We managed to solve the following tasks:
In May 2015 the project was sold and the copyright was transferred to the new owner. We reserved the development rights and now we keep maintaining this website.
We have been at the market since 2005 and we always try to simplify and speed up our daily operations. One of the major problems that we faced every day is the presentation of project structure and mockups.
"I smile when I think back on the days when I had to go to the client personally to present the mockups. I had to show him in person to be sure that mockups are correctly displayed and understood.
During the presentation it was important to follow the correct order and it was very inconvenient to switch from one mockup to another. There were some other issues, for example, it was not easy to store all the comments and suggestions regarding the mockups. This was already difficult enough, not to mention travel time, waiting time and traffic jams"
In early 2014 we decided to create a convenient online tool for organizing project presentations to the client. We had to solve a number of issues for this:
The company allocated a budget and a staff to work on this project. We started looking for turnkey solutions but the existing ones did not meet our requirements. So we decided to establish the SaaS service for ourselves and to help other designers and web studios.
As a result, in early March 2014, the first version of the project was launched. Until September 2014, we were working on various updates for this service. We managed not only to achieve the goals set, but also to exceed our own expectations. Service consists of 3 parts: a selling website, tools for designer and tools for presentation. The principle of operation is as follows:
The project was picked up very quickly by our customers. After that we decided to launch an advertising campaign to promote the service. Unfortunately, our budget was not enough and we stopped the promotion of this resource.
When monitors with cathode-ray tube started disappearing, new monitors with a variety of sizes and resolutions started appearing at the market. Later it became necessary that the websites would be beautifully displayed on the most popular resolutions and would be adapted to them. At the end of 2010 we started working on the solution of this problem.
We experimented a lot and concluded that a decrease or an increase of the font didn’t give the desired effect. It is necessary to change the size of all the blocks, icons, images, fonts, and even background images. We have examined all the popular resolutions at that moment and their usage statistics. We divided them into 4 groups and for each group determined the size of the workspace, padding, and the recommended sizes.
One of our regular customers agreed to try to build his website using our new technology and we began the development. For the first time we drew layouts for more than one screen size. For us and for the customer it was important to understand what the website should look like on all the resolutions. Also we had to provide a high-quality mapping for the website where one size flowed into another. We made it a rule that all 4 sizes for the user website should look the same, but it shouldn’t be just a proportional shrinking of the entire layout. We conducted some additional tests and found out that on bigger screens it was more important to increase the font size rather than the size of the images. As for tablets it was interesting to see that the font size had to remain large to make reading easier. But the size of the images could be reduced significantly.
The next step we needed to automate the process. We took main.css as a foundation. We decided to add comments to the styles that should change depending on the screen size. The comment included changes to style properties for each size. Then, during deployment a small php script forms a file for each size and stores it in the data folder. This way each project contains 4 sets of styles and images. Pictures have to be created manually because each size requires pictures of different proportions. This does not apply to the background images, but we also store them in 4 sizes for faster downloads on small screens and better quality on the large ones.
After the successful launch of the first website that used 4size technology we have applied for copyright registration and after 6 months we obtained a copyright for this technology. At this moment we have developed more than 25 sites using 4size. These were mostly the websites for public companies, for which it was important to showcase.