Wirecademy: Ridgeline Project

My first attempt at Figma

Here is my wireframe! Please feel free to leave any reviews or suggestions on how I can improve. Thanks!

My starting wireframe was inspired by the Mountain Hardware product page design with the provided link in the design project. I sketched the design, then created the wireframe with Figma; with support of the Sanity Sketching Kit.

I love seeing everyone’s designs!


It’s a little messy, but this is my second draft of a wireframe for this jacket. I added some special features (which I know are difficult, but possible, to implement) to create the feeling you are buying a true luxury item.

I took inspiration from Apple, whose website doesn’t even feel like a store, more like an in depth product demonstration with the price as an afterthought. I didn’t’ go quite as far given this is for a clothing brand, so I put the price below the item images.

On either side of the product cutout view, which revolves using the buttons below, there are images of models in outdoor environments (helping the viewer picture themselves having positive experiences in the jacket). There is an option to click on text in the lower right corner to take you to a gallery view of more details.

I want to keep the details simple and sweet in the paragraph description with a tagline in bold before a very brief summary of the item. On the right, I have a bullet list of features. Between these elements, in a future iteration, I would shrink the cart button and move it and the “add to wishlist” button to the left, to allow the size and color buttons a more cohesive space on the right.

The rest, hopefully, is self-explanatory. Thoughts?

Thanks!
-Beck

Screenshot 2023-09-23 162350

Hey Everyone! I love looking through all the submissions. You are all so talented. :sob: Feel free to leave some feedback on mine :slight_smile: I just sketched mine on the freeform app on my iPad!!

I did two iterations for this project and added a mobile view of one. When I was doing research I noticed that virtually every site I opened (at least twenty) had their layout roughly the same. I thought to myself that maybe they are all doing this because you want the user experience to feel familiar and predictable. I am new to this, so maybe I am wrong. I have also read about a rule of thirds (or something like that) and noticed that each site practiced that methodology. The pages were split in roughly thirds and the image(s) took up one third, while the rest of the information was displayed on the remaining third.

Here is the other iteration.

Used procreate to digitally draw a wireframe:

My First Wireframe for the Ridgeline Project :slight_smile:

Love the finesse !This examples shows how easy it is to visualize creating a low fidelity prototype design for the product page will be ! Thanks

Hi!

These are my wireframes for this project.

Any feedback will be appreciated!

Hello to everyone!
Here is my first attempt at this wireframe task. Please feel free to comment about what you do or don’t like!

1 Like



Here are my two wireframes

2 Likes

Hello, Everyone!

I have attached my very first two Wireframes, please tell me what you think. As this is the first time I’ve drawn a site, I mostly do stick people or drawing engines when I was a kid lol. I would also like to have a mentor, thank you! Merry Christmas!

After so many awesome sketches

Here is mine :sweat_smile: :see_no_evil:

Hello everyone! Id like to share my first wireframes :sweat_smile:

This is my wireframe, I was inspired for some of that exist in this forum.

i think its super busy, but oh well lol

what did you use to make these wireframes? looks pretty good!