Baby’s first Figma Prototype! I’d still do some minor fiddling with white space etc., but that’s about what I envisioned. Still fond of the vertical navbar so that’s what I went with. Mainly grey-blueish colors because I want the mood to be calm and kinda zen, like one might feel during a trek through the mountains.
Interactions that work:
Adding to cart via Click the Green icon → Click the XL button → Click the big red Shopping Bag Icon
(At main page, after restart) Slide 1 photo to the left by clicking the left arrow
(At main page, after restart) Click on the icon with the truck to get info on possible shipping options for the item
Lemme know what y’all think! Everyone’s looks different from each other but very cool so I’m kinda nervous now.
Super fun project! Toward the end when I was duplicating all of the canvases, I initially was gonna include changes in color and size on top of the “Add to Cart”, the favorite button, and picture changes, but the scope for that was huge, so I decided to dial it back so it wasn’t too complicated for my first project. Once I learn the components, I think I’ll revisit this to improve it.
After looking at both of the examples, I can see there are more tricks to duplicating layers for the flows. To me it looked like I needed to duplicate the entire page every time. I like the flow that was created in example 1 the most.
However, I disagree with both examples’ color choices. Example 1 specifically has an interesting choice in text. But to be fair, so does mine. I could probably simplify the text on my prototype. I like the display and ease of example 2 specifically the organization of the product information and the selecteble pictures.
I want to add selecting pictures to change the main picture in my prototype. I’d like to simplify the font, and possibly also adjust the sizing of nearly every layer. Lastly, I’d like to implement a similar flow to what example 1 did with selecting color and size. Also adding a notification in the shopping cart seems like a good idea.
Well my design is similar because we’re using the same images /page lol. I used Amazon as a reference, My description is in deafferent location and my images are on the left side instead of bottom as the other designs. I don’t dislike it but the answer the last question I would say that I’d be more creative like the example designs. I would’ve added more color and been more creative with the nav bar. Here is my design
I just finished my first prototype! After this exercise, I realized that I need to also focus more on the iconography as well as understand how to keep my layers organized for when I start to prototype. After finishing and looking at the examples the way they use their components is more efficient than mine where I just created a whole new canvas.