facebook
youtube
linkedin
tweeter
instagram
behance

bekuplast 3D

web applications

10. 05. 2022

arrow


3D baffle box configurator

3d.bekuplast.com

Designing and programming a dedicated web application - a configurator of partition boxes, for the bekuplast company, using 3D graphics, JavaScript, p5.js, php, css3 and html5.

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.

Graphic design of the application webowej 3D
Design of application layouts
Web application specification
Web application specification

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.

Technologies used:

hmtl

HTML5

CSS3

CSS3

javascript

JavaScript

p5.js

p5.js

php

PHP

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.

Programming the configurator 3D
Programming the configurator 3D
Implementation of a web application
Implementation of a web application

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


Evaluate our work:

0

   







Answer the questions and get free service pricing. In our offer you will find many services, such as graphic design, personalized book calendars, company calendars, ecological calendars advertising gadgets, printouts, advertising movies and advertising photos as well as website programming, including e-commerce, applications, or AR and VR systems.



Other projects:



Return to portfolio    arrow