Prototyping: Ridgeline Project

Congratulations on completing your prototype project! :tada:

Compare your project with our example designs (#1 and #2). They may look very different, that’s expected! Design never has one “right” answer. Consider:

  • How are they similar?

  • How are they different?

  • What do you like about the example designs?

  • What do you dislike about the example designs?

  • After reviewing the example designs, is there anything you would change about your sketches?

Post a link to your interactive prototype as a reply below to garner feedback from your peers and evaluate their approach to possible solutions for this prototype project.

About community guidelines: This is a supportive and kind community of people learning and developing their skills. All comments here are expected to keep to our community guidelines

4 Likes

Hey ya’ll! :blue_heart:
Just completed my first prototype project ‘Ridgeline’ on Figma.
Had a lot of fun doing it, but it does take up a lot of time. :sweat_smile:
Hope I get the hang of it soon!

*Note: I didn’t include interactions for EVERY situation on prototyping, the interactions I created are in order:

‘Ridgeline’ Prototype Project by HaYeong >> HERE

  1. Enjoy the main page by clicking right and left arrows on the main photos.
    (I wanted to show how many photos are available on display thus added 4 dots at the bottom of it.)
  2. Click ‘Shop’ to go to the detail product page.
  3. First, check out the ‘?’ by the size chart.
  4. Select ‘Yellow’ and see what happens.
  5. Now select size ‘M’ and see what it shows.
  6. Hover on ‘?’ by the delivery date information.
  7. Click ‘Add to Cart’ and see what happens on the cart icon at the top right.
  • Icons used for my project are from “Huge Icon Pack” on Figma.
  • Reference: my wireframe for this prototype project.
6 Likes

Glad you stuck through with it and made this AWESOME prototype! It’s okay to not have every interaction as that can, indeed, be a lot of work, but this prototype does show all the types of interactions which is great. :smiley:

We determined it to be a bit out of scope for the intro course but if you’re looking to make a lot of interactions more easily, you may want to look into components. They can make it easy to have a lot of different variations without needing new pages. One of our examples actually uses this feature

2 Likes

Hello!
Thank you so much for taking time to review my project, and for the amazing tips about components! :smiley:

1 Like

I created my first prototype :slight_smile:
simple interaction

  1. selecting the size S turns it into black
  2. click on the first alternate image (bottom left) Switch it with the main one
    What do you think?

You can see it Here

2 Likes

Awesome work on this very clean design! I like the “Free Shipping” banner you added at the top, it’s great idea!

Just finished my ridgeline prototype. You can view it here

1 Like

Here’s my version of the activity: Ridgeline.

Interactions: Select each photo.

1 Like

Hi!

I just finished my first Figma prototype. This is the link to it: [Prototype] Figma

The interactions I added are:

switch between pictures using the arrows and by clicking on the pictures
select size ‘XL’ then click ‘Add to bag’ and the item is added to the shopping bag

I would really appreciate some constructive feedback :slight_smile:

Thank you. :grinning:

2 Likes

Hi everyone!

I just finished my prototype and was inspired in the Patagonia website. I think it is useful, usable, desirable and findable.
The interactions are the following (make sure to scroll down):
-Click on the right and left arrows to view the product in different colors.
-You can select the desirable color, it will be marked with a check mark (all options are clickable)
-Size selection (all options are clickable)
-You can add the item to cart and will be indicated in the shopping bag.
Components were a huge help! I had a blast designing it :slight_smile:
Let me know your thoughts!

Here is the link to my prototype Ridgeline Prototype

2 Likes

Hello fellow designer!

I finished my prototype. It takes longer than I expected. Primarily because of aesthetic iteration. I utilized the power of Figma on this. It’s truly a fantastic tool.

Ridgeline Prototype by Damar

2 Likes

Hello :slight_smile: Just more or less finished my first prototype and it was so fun to create. I would really appreciate feedback!! :smiley:

1 Like

My Prototype for Project Ridgeline :slight_smile:
I made sure to keep a minimalistic and straight-to-the-point design. Lots of white space for the eyes to rest on.

Link to Project Ridgeline Prototype

3 Likes

Hello guys, thank you for sharing your work, it looks very cool, respect to everyone. I also wanted to share, there is https://create.vista.com/colors/color-names/maroon/ just a bunch of everything useful and everything that can be used for projects, there are even tutorials.

1 Like

Hi Everyone,

I’m excited to complete my first Figma Project.
Here’s the link of my version of Ridgeline :slight_smile:

Regards,
Jennifer S.

3 Likes

My Prototype for project Ridgeline. I really enjoyed working om this although it’s time consuming. Ridgeline prototype

The interactions I added:
click on size “L”, ,click on “add to bag” , click on right navigation button for the next picture of the jacket, click on right navigation button on present page and it takes you back to the first picture.

constructive feedback is very much welcome.

Thank you.

1 Like

Hello, everyone! :smile:
I just completed my first prototype project ‘Ridgeline’ on Figma.
Had a lot of fun doing it and I love it so much :heart_eyes:
I want to share my work with all.

Hope to hear your advice. Thank you!

‘Ridgeline’ Prototype Project by Yu >> HERE

1 Like

Hey, I had so much fun during this project!
Maybe I will switch from Front-End to UX :slight_smile:

I just did a stupid thing in the very beginning of the project - I choose the wrong screen size and now its suuuuper huge. So press Z to fit it on your screen! :see_no_evil:

Check it out HERE

1 Like

Hello!

This was a very good lesson and practice.
Thanks.
Here’s my result.

Prototype

1 Like

I DID IT!

Ridgeline Prototype
My interactions are:
Select Size S
Add to Cart
From the Product page, click on second photo and back on the first one to get back to main product page.

I decided to turn the opacity down for the unselected photos instead of using arrows. I hope it is clear and accessible enough.

What do you think?

2 Likes