Prototyping: Ridgeline Project

How, I’ve seen a couple of yours Prototype and they are all amazing!

BTW, this is mine. Tried to make it as minimal as possibile.

Prototype

Press Z to fill it in your monitor.

This presentations has two Flows.

  1. Size → M → Add to bag button

  2. Right arrow → Size → M → Heart button

2 Likes

Hi everyone!
This is my protoype → prototype link

Flow1 - switch the product photos by clicking the 2nd or 4th photo
Flow2 - add to bag, add to favorite

I have used Figma for work for a few months already, but I didn’t know that so many functions and shortcut keys there.
It’s fun to study Figma in practical way. :blush:

1 Like

Hi guys i share a link of my project https://www.figma.com/file/2H7LhdcEkHeDbyoz6Dt3lm/Template-Ridgeline-Prototype-Copy

1 Like

Hey there! Just finished my first prototype and I couldn’t be more excited! To many more! https://www.figma.com/file/CDItucLLu1KMAnyC36LmbU/Ridgeline-Product-Page?node-id=0%3A1

1 Like

Hi! This is my prototype, hope you enjoy it: https://www.figma.com/proto/yBS3KglwVruqJDe4vFBM23/[Template]-Ridgeline-Prototype-(Copy)?page-id=0%3A1&node-id=602%3A2&viewport=56%2C443%2C0.17&scaling=min-zoom&starting-point-node-id=602%3A2

1 Like

Hello!

Here is an image of my prototype!

Here is a Link

1 Like

Hello just wanna share my porject!

1 Like

Hi! This is a link to my Ridgeline Project!

1 Like

Not the best looking design, But its my own:
link to prototype

1 Like

1ER PROTOTIPO

2 Likes

Hi all! Here is my link to the Ridgeline product page prototype: https://www.figma.com/proto/mBxUDZY3J6XIDbX1fxXyMn/Ridgeline-Prototype?node-id=609%3A607&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=609%3A607

3 Likes

https://www.figma.com/file/wtXEs56jFvHc6hdVk3zcSY/Project-High-Fidelity here my project

1 Like

Hi!
Here is my Ridgeline

2 Likes

Hi everyone! I’m excited because this is the first prototype I’ve created! You can see it here :smiley:

1 Like

The chat feature is a nice touch! I think it looks great.

1 Like

Hi everyone, this is the link to my ridgeline prototype. Had great fun with it; would greatly appreciate any feedback. Thanks.

1 Like

Hi here is my prototype!
Hope you can give some feedback :slight_smile:

1 Like

Hello everyone~

This is my first time using Figma; I must say, it’s super cool! But as others pointed out already, wireframing with higher fidelity components/prototyping sure takes time! I can definitely see how this is a 40-hour-a-week job (haha). Anyhow~

For my wireframe, I added information about shipping based on the user’s zip code, add to your wishlist button, and added a “Customer Reviews” section.

Interaction 1: You can scroll through all 4 images in an infinite loop.
Interaction 2: You can select size L and add the item to your cart.

Hope you like it! :slight_smile: (See link below)

Ridgeline Prototype by Little Lion Studios:
(https://www.figma.com/file/1sEFiXkT8B0jC7byuVcqwW/Ridgeline-Prototype?node-id=0%3A1)

2 Likes

Hello! I completed my Ridgeline prototype last Saturday. Since I come from a graphic design background, I created the logo, changed the color of the jacket photos as needed, and came up with a general brand color scheme. I wanted this project to feel as real as possible, so I researched making my buttons and sliders into Components so that most of my project was interactive, and so that I could stay on one screen for most interactions without clearing any previous selections.

(One tip I learned about interactions: if “On Click” interactions don’t work correctly on an iPad - I used one to test often - change the interaction type to “Mouse Up” and add a small delay, maybe 10ms or so).

A list of all interactions that are working (made mainly by using Components, which I researched on my own. The only non-component interactions are when the page changes to reflect a different coat color):

  • Change which photo is displayed in the slider by either clicking the arrows or the pictures at the bottom of the slider

  • Change size

  • Change color

  • Change quantity (up to five)

  • Change which info tab is displayed

  • Clicking Add to Cart button adds a notification at the top of the page (only works on one color at a time, however)

  • Clicking Add to Favorites colors in the heart

Click here to view my working prototype.

Click here to view my case study (complete with a write-up about the project and process, rough wireframes, and a video of my project for those who would rather watch a video instead of click the prototype).

3 Likes