Wirecademy: Ridgeline Project

Congratulations on completing your wireframe 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?

Upload a photo of your wireframe sketches as a reply below to garner feedback from your peers and evaluate their approach to possible solutions for this wireframe 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

Sharing my very first wireframe! ( Honored to be the first one to upload) :purple_heart:
Very excited to go further on this journey.
Would love to see other’s too!

  • Instead of 2 detail pages, I did a home page & a detail page.
  • Done with iPad Air.
13 Likes

A true trail blazer! :wink:

Thank you for being our brave first wireframe! I think you have some really great ideas here. First off, I love that you went beyond the scope of the assignment and designed two separate pages. I also love that you thought of other elements to include that we hadn’t included in the requirements, the location pin and tooltips particularly stick out as two great inclusions.

Great wireframes, well done :smiley:

2 Likes

3 Likes

1 Like

Here is my wireframe project.

5 Likes

Here’s my version of the activity!

4 Likes


There you go. My third attempt at sketching a wireframe for Wirecademy : Ridgeline Project
I didn’t imagine it can be that challenging. I guess with practice I should improve and get better. What do you reckon? Your reviews are welcome

2 Likes

Of all the iterations I went through, I’ve settled on these two wireframes as the top contenders for the Ridgeline project.

It’s hard to judge yourself on something like this, you tend to be more critical, but I think this exercise was a great way to open myself up to the challenge. It’s also really inspiring seeing everyone else’s iterations! Go team!!

Side note, now I view pretty much most web pages in terms of what their wireframes may have looked like. Safe to say I’m enjoying the course.

4 Likes

Hi everyone! So far I’ve only done 2 designs, here they are along with the questions listed above:

  • How are they similar? They include the same elements since we had the same requirements
  • How are they different? Mine have less photos and when it comes to interaction less clicks are needed (no dropdown for sizes, colors, and only of my drafts has a carrousel image option). I’m missing notes. Also I wanted to keep in mind cellphone view and that’s why I structured some things in big blocks (1. photos and product info + 2. reviews, size chart and shipping info)
  • What do you like about the example designs? Clarity, they’re easy to understand.
  • What do you dislike about the example designs? Some feel very crowded.
  • After reviewing the example designs, is there anything you would change about your sketches? I would use a pen and a ruler because they look messy lol other than that not really, I feel pretty pleased but I’m open to suggestions! Thanks :slight_smile:

6 Likes

Adding my first two attempts here! A few things I think I could do differently:

  • Simplify the whole page by making the size options a drop down rather than individual buttons. I would like the UI to be a little more simple, I think there is too much going on to give the user a clear picture
  • After seeing some other folks designs, I like the idea of putting the reviews by the product name as one of the first things you can click. I know I use reviews to guide my purchase decisions often
  • I would move “add to cart” ahead of add to wishlist and shipping information - The wishlist is a good option, but I think encouraging the user to buy now would be better for the client.

Any other ideas? I plan to keep iterating this project until I have a very spiffy UI!

4 Likes

Here are my Wireframes :smiley:

2 Likes


My version of Project Ridgeline Wireframe! A minimal layout with a review section, with lots of white space.

2 Likes

Here’s my wireframe work for Ridgeline. I’ve been coding for the past few weeks and was completely lost since I’m pretty much a visual learner. Using wireframes has made me realize how it’s all possible. I love the process and exploring different site, even Youtube and IG and seeing them as framework and how they link it each other. It’s such a fun process and i can’t start using it to creating my own site with programming.

1 Like


My wireframes :smiley:

2 Likes


here is my wireframe!

4 Likes

Her is my first wireframe

3 Likes

Here’s my first go at a Wireframe! :slight_smile:

3 Likes


Here is my Wireframe :star_struck:
I prefer the layout which has enough space on both sides and the vertical layout of image thumbnails(small).
It’s pretty interesting to see other solutions, here :+1:

3 Likes

Here’s my version for the Ridgeline wireframe !
I was so happy for the first one, but doing a second one enforce my vision of doing something more elegant, and maybe a lot more breathly !

That’s a really good exercise ! can’t wait to do more :smiley:

4 Likes