bekuplast 3D

Graphic design of the application

Designing the interface and user experience

Implementation of a graphic mock up for the project with addition of the user interface elements. Taking into account the colors according to the visual identification system. Selection of appropriate icons for the user interface, as well as choosing appropriate technologies to implement all of the needed functionalities. Designing layouts for the mobile and tablet versions. Preparation of a test prototype of the project.

Application functionality

Project Specification

The application is used as a configurator for three-dimensional models of partition boxes, with the option of sending orders for a specific number of personalized boxes.

Using the application, you can:

• Search for a suitable box using filtering based on available attributes.
• Learn the details of the specifications of the boxes offered.
• Make personalization of the selected box.
• Select the color of the box from predefined RAL colors or from the full color palette.
• Perform interaction with the 3D box model by rotating or scaling it.
• Superimpose the logo on the model in .jpg, .png or .gif format.
• Select the position of the logo on the sides of the box.
• Select the number of boxes, which will automatically be converted to the number of pallets.
• Send a request with an email confirmation for the selected model along with the personalization made earlier using the program.
• Print the personalization design.
• Share the link to the program on social media channels.
• Save the graphic of the personalized box from the 3D render.

Programming the configurator

Project development process

At the very beginning, after developing the design for the project, a prototype was created to check the capabilities of the selected technologies and their compliance with the project specifications. The JavaScript library, p5.js, which is responsible for displaying, modifying and manipulating 3D objects in the application was used to render 3D models. Layouts for the application have been coded with HTML5 and CSS3, taking into account the responsiveness of the project. The main front-end functions such as filtering, color selection, numerical conversion and layout modifications were written using JavaScript. It also holds the functions responsible for processing orders, sending them to e-mail and saving them on the server, where they are coded using PHP.

Application deployment

Server works

The application, after making corrections from the client, was set on a dedicated subdomain of the company. It has been secured with an SSL certificate, and the emails generated from the program have been refined in terms of their credibility, so that they do not end up in spam, on a wide range of mailboxes using SMTP authentication. The project was tested by the client until it was fully approved. After approval, the client introduced the English version of the program.

The project can be viewed at: 3d.bekuplast.com