I am developing the website of a bakery where the client wants to offer different customization options for the various layers of a cake, namely, frosting, filling, etc.
The design that i came up with is :
Here, the image of the cake on the left represents the flavor of the layers chosen by the user by clicking on the various options on the right.
For different combination of options on the right, one gets different combination of colors on the left:
However, the design seems very unnatural and clunky to me and I was hoping to receive some suggestions on how I can improve the design.
Beyond the design, which as indicated in other answers needs several adjustments, the most relevant thing I see in your design is perhaps a conceptual failure that many of us usually commit.
In my opinion, you are designing a web page, with web page features: web menu, web body, web header … when actually what you want to make is a web application with multiple options to apply to an object. Visualizing it in this way I think it will help you to create a very good design from scratch.
To understand it better: did you think about putting a “CLEAR” button to start the cake from zero, the “UNDO” button to back steps, the “SAVE” button in case the user wants to keep the current options to continue in another time, the “SEND” button to share the selected options with another user, and the most important, the “BUY” button once the cake is ready… I know maybe this is too much for a simple site, but thinking bigger makes the smaller things better.
I recommend visiting web pages with web applications to customize objects. Here a very good example: https://www.shoesofprey.com/shoe/7Vwyhq/editor?create=1