Alok B
30 upvotes
Hello, Designers before I want to say anything, I would like to recommend you to check High-Quality Rendered video that I posted on my Instagram(Reel). Instagram.com/ux.alok. I hope u have checked that out! First of all this solving challenge was Incredibly fun!!!! Thank you Crowwwn. Now to visualize the toppings on pizza in real time! with interactive button, seemed challenging on the 1st day, I gave it a day to think. Soon after that, this idea along with many started knocking my door. To prototype the above idea, I grabbed delicious Pizza stock image and used it as a base, then I looked for toppings on Dominos (because I'm not a Pizza guy) after collecting names of toppings, I masked the toppings in photoshop realistically possible. Then I exported all the toppings and base pizza into separate transparent images. Then It was time for Figma. I designed modern interface for my Pizza ordering app, and imported pizza and its toppings layers, prototyped so that each topping falls on the pizza when the corresponding button is active & vice versa, then I gave option for users to zoom into the final Pizza + Toppings rendered image. for futuristic touch I have also added a button "view in 360". I hope I was able to explain my self. Reach out to me for any quarry or you can drop them in feedback section. Link to HD Video(Instagram Reel)- shorturl.at/abmz1
Hello, Designers before I want to say anything, I would like to recommend you to check High-Quality Rendered video that I posted on my Instagram(Reel). Instagram.com/ux.alok. I hope u have checked that out! First of all this solving challenge was Incredibly fun!!!! Thank you Crowwwn. Now to visualize the toppings on pizza in real time! with interactive button, seemed challenging on the 1st day, I gave it a day to think. Soon after that, this idea along with many started knocking my door. To prototype the above idea, I grabbed delicious Pizza stock image and used it as a base, then I looked for toppings on Dominos (because I'm not a Pizza guy) after collecting names of toppings, I masked the toppings in photoshop realistically possible. Then I exported all the toppings and base pizza into separate transparent images. Then It was time for Figma. I designed modern interface for my Pizza ordering app, and imported pizza and its toppings layers, prototyped so that each topping falls on the pizza when the corresponding button is active & vice versa, then I gave option for users to zoom into the final Pizza + Toppings rendered image. for futuristic touch I have also added a button "view in 360". I hope I was able to explain my self. Reach out to me for any quarry or you can drop them in feedback section. Link to HD Video(Instagram Reel)- shorturl.at/abmz1

Feedback (25)
wow, awesome
Please check this out https://www.instagram.com/p/Cgi5JFZLsGv/?utm_source=ig_web_copy_link
Thank you @ Battula yogesh I had to speed up the video to reduce the size of GIF. & yes I referred to Dominos,
Thank you @Muhammed Fuwad will surely consider your suggestion
Thanx @Lavanya Arya This is how I created animation πŸ‘‡ 1) I sketched the rough idea. 2) Designed Interface 3) Masked pizza & toppings into separate layers. 4) Arranged the layers accordingly into the placeholder for Pizza 5) Prototyped the elements with Smart Animate. 7) Screenrecorded the prototype. 8) Added a few motion graphics into after effects. 9) exported as GIF. 10)compressed the GIF. 11)Uploaded here
Good editing. That was a quick-to-understand prototype for buying pizza with information on the toppings, but what I believe is that the list of pizzas was straightforward and was modelled like the current Dominos App page. Additionally, I believe that the colour theory was not followed when adding items to the basket because of the somewhat confusing loading screen. Final thought: make the next video a little slower to make it easier to follow.
Hi Alok...First of all nice work but a suggestion is that from next time onwards try to give some breathing space between the cards and texts. Also just suggesting that the pizza icon used when "processing the order" could be some other icon or illustration would be better.
Hey great design! How did you create the animation for this one?
Link to video πŸ‘‡ https://www.instagram.com/reel/CgZdOa5uqz1/?utm_source=ig_web_copy_link
@Ali thank you so much
@Ali the Challenging part for me was, uploading my creation here, some how I managed to reduce the size by sacrificing the video quality! The original reel video is 1080p, please consider watching it
Thanx @ Manisha Rawat
Wow, nice design and I like how you show the process. Only thing is it came out blurry when watching. I've been tinkering with animation file sizes so maybe a gif? Or translating it to a smaller video high resolution than changing to gif I've found helpful. Great work!
nice design
Hey @Bhuvan Thanx mate ❀️😊
What a design bro!!
Thank you @Vishrut 😍🌟
Looks good Alok πŸ”₯
πŸŒŸπŸ™πŸ™ŒπŸ˜‡ Thanx @Jayashree
Kudos!!!!
hey @sush yes! there is a file size limit when it comes to uploading the GIF. the original file was around 50MB, I had to make it to 7MB so that it accepts my file. That's the reason it looks so low in quality
Thank you @Sachin ❀️❀️❀️❀️ please check out the HD version.
Hey! Alok great prototype! I guess you are the 1st one to show us. the video/gif. The video/Gif is very low in quality. and it doesn't play in the thumbnail. though the idea and execution came out really awesome. you made a very cool reel. πŸ‘Œ
Bro πŸ™Œ supercoooool
Link to HD video - https://www.instagram.com/reel/CgZdOa5uqz1/?utm_source=ig_web_copy_link