76

My first side-project: a pattern library for landing pages

6 years ago from , Designer at Coinbase

Hey guys! Just launched my first side-project:

http://www.goodweb.design/

It's a pattern library like pttrns.com, but for landing pages. There are tons of great sites out there saving great sites, but I've always wanted something with more granular filtering.

When I need to reference something, it's often because I'm stuck on a specific thing like "how do I best show this feature" or "what is the most compelling hero image". In these cases, it helps to be able to see horizontally across many sites for specific examples of the section I'm designing for.

Hopefully, this resonates with some of you here. Would love to hear what you think. Design nitpicks also welcome!

If you like it, it would be super helpful if you gave us an upvote on ProductHunt.

https://www.producthunt.com/posts/good-web-design

30 comments

  • Cory MalnarickCory Malnarick, 6 years ago

    yeah I dig this. no nonsense resource for a really important piece of web design.

    4 points
  • Ryan Olson, 6 years ago

    I really like this. I just wanted to point out that the dropdown filters (features, social proof, pricing) don't always work unless moving the mouse really fast.

    https://i.imgur.com/prmuZRW.gif

    the margin-top:2px is pushing it down enough to make the mouse lose hover on the parent link.

    .dropFeatures-sub:hover #features-drop { margin-top: 2px; display: block; }
    2 points
  • milan seitler, 6 years ago

    Nice project! I'd appreciate more screenshots on one page so I don't have to paginate.

    1 point
    • Yitong ZhangYitong Zhang, 6 years ago

      Noted. Once we implement some proper lazy loading, we'll at least double the amount of ss per page. Mostly a performance thing right now as we load images dumbly :p

      0 points
  • The Night WatchThe Night Watch, 6 years ago

    Great idea.

    One thing though, I find the thumbnails animation on hover to be pretty distracting. The fact that it moves the div up and down makes for a pretty bad UX when you move your cursor across the page as it makes the whole page move in different parts. Makes you lose focus. An animation on the border-color or the opacity would be better in my opinion.

    1 point
  • Jan ZhengJan Zheng, 6 years ago

    this is freaking awesome

    1 point
  • Surjith S MSurjith S M, 6 years ago

    Looks great!

    What are the back-end technologies?

    1 point
    • Yitong ZhangYitong Zhang, 6 years ago

      Thank you! The thing is built on Rails and a PostgreSQL database. The backend was mostly done by my friend Charlie, who is a finance guy hehe. We're totally open to feedback since none of us are particularly top notch programmers :P

      1 point
  • Peedu TuiskPeedu Tuisk, 6 years ago

    Clicking on the column view at the top right corner make the site much more easily browsable, unfortunately it resets back to grid view when moving to the next page.

    1 point
    • Yitong ZhangYitong Zhang, 6 years ago

      Ah yeah. This was caught by a few other people too. Gonna get some time this weekend to fix this hopefully :)

      0 points
  • Sjors TimmerSjors Timmer, 6 years ago

    Take it one step further and you can start selling sketch templates, like the people at Great Simple are doing: https://www.greatsimple.io/ :)

    1 point
    • Yitong ZhangYitong Zhang, 6 years ago

      Heh. That's an interesting thought. We've had a few ideas for monetization (no ads!) but that's an interesting one.

      0 points
    • Jan ZhengJan Zheng, 6 years ago

      I think I'll take some of these and translate them to CSS grids!

      0 points
    • Gene M, 6 years ago

      I want to know if designers actually use sketch templates to start their client files. I see this all over the web but wonder if anyone actually buys these?

      What is the thought process behind using a template? I'm going to save some time; I have no idea where to start, or I wonder what I should do here?

      0 points
  • Premankan Seal, 6 years ago

    That's a really cool resource, thanks! I see myself turning to this rather often from now on.

    1 point
  • Sander Volbeda, 6 years ago

    Awesome side project! Shared it on my work with other designers. I hope you will add more stuff so I can use it frequently. Keep it up!

    1 point
  • Khadijah Roussi, 6 years ago

    Oh I love this!

    1 point
  • Lisa Noble, 6 years ago

    Very cool. Useful tool

    1 point
  • Sheffield LeithartSheffield Leithart, 6 years ago

    Nice work!

    Curious: what is the criteria you're using to determine whether or not a landing page is well-designed?

    1 point
    • Yitong ZhangYitong Zhang, 6 years ago

      Heya. Good question. For now, we just go through sites like typewolf, sitesee, landbook and productpage.xyz, with some light pruning (mainly to filter out sites that are hard to break into sections). These sites are already doing a pretty good job at curation, so we can save some time on that front and spend it on tagging and sorting

      2 points
  • Chris Aalid, 6 years ago

    Hey this is really cool!

    1 point
  • Varun A P, 6 years ago

    Its a really good collection. Good work.

    0 points
  • Gene M, 6 years ago

    This is pretty cool! I wish there were more filtering options, for example: In hero, if I could filter by illustration, animated, curvy etc...

    0 points
  • Tridip ThrizuTridip Thrizu, 6 years ago

    Thanks for giving value to the community. Keep up the good work. Cheers

    0 points