Prototyping: Ridgeline Project

I like the style, colour and font, very well done! :slight_smile:

Hi there Ely! I just saw your message! thanks for the comments! I recently deleted that file in order to keep practicing with the free version. With regards to the pop-up, is basically an interaction or “Scroll behavior” you add to the Prototype view mode, it’s simple and fun to do ! :grinning:

Hey folks,
I see some tremendous work by everyone in this thread. Well done!

Here is my first effort.

It is a bit rough and ready but a really good exercise to start practicing.
Seeing everyone else’s work, I can instantly get inspired to make some enhancements and refinements to make it better but all feedback is welcome. Any quick tips or recommendations to make a quick change would be welcome.
Thanks,
James

Hi! [Attached] (https://www.figma.com/proto/B1AL17t5LBcYVgP9dhOVlM/Ridgeline-HF-Wireframes?type=design&node-id=1-2&t=JYyeB965T6B7jq6w-1&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A2&show-proto-sidebar=1&mode=design) you can find the link to view my first prototypes of the product page of “The Perfect Pockets Long Parka” on Ridgeline, using Figma. Please feel free to leave any comments!

Interactions:

  • Design #1:

    • Navigation Menu: User should be able to hover on the “Men’s” tab of the navigation menu and have a dropdown menu appear.
    • Available Sizes: When user picks size “M”, the size should be highlighted.
    • “Add to Cart” Button: When the user clicks the “Add to Cart” button, a pop-up window with the product information should appear near the shopping cart along with a notification icon.
  • Design #2:

    • Navigation Arrows: User should be able to click navigation arrows back and forth to change images.
    • Available Colors: When user picks the color yellow, the color should be highlighted and the color name should appear next to "Color: ".
    • Available Sizes: When user picks size “M”, the size should be highlighted.
    • “Add to Bag” Button: When the user clicks the “Add to Bag” button, a pop-up window with the product information should appear near the shopping bag along with a notification icon.

Hey guys! I just finished my Ridgeline prototype, I’d appreciate some feedback on it, keeping in mind it’s my first-ever prototype. I hope it looks clear, detailed enough, and easy to use. Let me know what you think.

Here is the link

  1. You can click the arrows to go to the next picture.
  2. You can also click on the small images to view them.
  3. Select size M
  4. Add to cart, You’ll notice an indication of 1 item in your cart and an added to cart change.

Hello everyone. Here is my prototype :slight_smile:

Went for a simple, clean design. Could probably do better on the size options.

Prototype includes:

  1. Add to Bag
  2. Scroll to right from the first to second photo

Ridgeline Prototype

Hello!

Here is my Ridgeline Prototype. You can click through two pictures using the arrows and also select XL and add to cart.

Hi everyone! Here’s my prototype! ദ്ദി(˵ •̀ ᴗ - ˵ ) ✧

Here are the lil tidbits:

  • you can switch between the first two pictures!
  • on the first picture you can select “XL”
  • after selecting the size you can either ‘add to bag’ or ‘add to wishlist’!
    (you can also click the heart again to unselect for wishlist!)

Hi everyone!

Excited to start this career path!
Just completed my prototype project. Didn’t really make many changes in the design part but I instead played a bit more with the interactions.
The interactions I created were all the sizes selection and going through the images clicking the arrows.
Also I added add to cart in every size selection page.

Hope to hears some feedback!!

Ridgeline Prototype by Roxy! >>>>> HERE!!

Hey everyone,

I am uploading my first Wireframe.
I appreciate any feedback, thank you in advance.

1 Like

Hey,
A quick follow-up. I have created a prototype based on the wireframe above and I would love it if you share some feedback with me, thanks :smiley:

You can access the prototype HERE

Hey, here is mine, you can click some buttons, but it still needs work:

Just finished working my way thru the Ridgeline project. I focused on what happens when a person chooses a specific size. when choosing a size (small or large) the price changes accordingly and the user can then choose add to cart which updates a number by the shopping bag icon.

here’s link: www.figma.com/design/GdxBVvBFY0TvExnjdt88cj/k’Dalien-Ridgeline-proj?node-id=0-1&t=nFpONH7LVIsV3fff-0