Prototyping: Ridgeline Project

Completed the project. Kindly view it @ https://www.figma.com/file/CQRRuIAtVfvx0cagEHWHYT/Ridgeline-Codecaemy?node-id=0%3A1

Click the image slider to move between pages.
Click on see to the specific size interaction
click on the add to cart button to see the specific interaction.

Thanks

Hello!

I just started learning Figma this week. Here is my first prototype.

LMK what you think!

Baby’s first Figma Prototype! :grin: 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:

  1. Adding to cart via Click the Green icon → Click the XL button → Click the big red Shopping Bag Icon
  2. (At main page, after restart) Slide 1 photo to the left by clicking the left arrow
  3. (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. :sweat_smile:

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.

Here’s my prototype!

Very interesting project, the examples from Jacob and Alyce are also pretty great, thanks for sharing!

Here’s my first try with UI

My first prototype RidgeLine feel free to share thoughts and tips

Hey yall!

Just completed the Ridgeline Project. It was definitely lots of fun!
Please share your feedback and let me know what you would do differently, thanks!

Hello!

Just completed my first prototype with Figma. Looking forward to the notes and feedback! :slight_smile:

hi!
I just created mine.
I think it may be a bit confusing since it confused me haha…

I would love to hear your feedback!

Hello! I just finished my first prototype. Although I think I completed it enough for this exercise, there is still plenty I could see myself adding, adjusting, or negating.

HERE is my first Prototype!

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.

I really like that you included dark mode! That is such a good idea. I also very much appreciate the ability to ‘like’ or bookmark the item.

The flow of the navigation confused me a bit, but I loved the way you can select the pictures.

Good job!

Hello guys,

I completed my ridgeline project

here is the linkRIdgeline by E

I updated my color scheme after seeing the example. The other pages are not updated.

Thanks Ebuka

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

hey guys first wireframe lmk what you think :slight_smile:

Hi there,

I really enjoyed this project.
Here’s the link.

Enjoy!

Hello everyone :wave:,

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.

Here’s the link to my Ridgeline Prototype Project!

Feel free to comment any suggestions,
Nicholas Sun

Here’s my prototype : Prototype Link

Interactive Elements:
-add to cart
-can select size

1 Like

There are absoLUTEly better wireframes out there, but here’s my crack at it!

The punchline: don’t let the perfect be the enemy of the good

Here’s the link

Hi. Here’s mine:
https://www.figma.com/file/xUyK4RKBMaeT80GRuLCaHC/Ridgeline-project?node-id=1%3A60&t=arT6RJc1eD75OT6y-1

I’m still figuring out components on Figma. Here is my first prototype.
Ridgeline Prototype Project - Blue