Website Plugin UI

I really like version 1. It's very clear and provide good discoverability for users coming on the page for the first time. There's room to breath. It focuses on what's important to new users: discovering the top rated plugins, those that are the most useful and the most likely to be useful for those new users.

In version 2, the carousel would make sense if its content were pictures, but in this case, I don't think there will be any. Also, the side bar on the left takes a lot of space, provide little value for new users, and won't be easy to transpose for the mobile version of the website.

In my day job working in games, I specialize in UX and onboarding new users, so don't hesitate to ask me directly if you need guidance on those topics! :slight_smile:

3 Likes

11 posts were merged into an existing topic: What shall be shown in Website Plugin

Do you mean something looks like this?


I can merge them in the top bar. If this is good with the majority, I can change it right away.

1 Like

type any may reduce the text field or put in the header (only Extend Your Joplin) as it occupies 30 %

I think its better to have one text field since type to trigger might be confusing for new visitors.

You mean like the one I mentioned above? Remove the one in the hero section and put the search field in the top bar? This sounds good to me.

I like this but be prepared that even the text may have to disappear.
Maybe some community member has a good idea of how the top shall look like to include anything

@narF anything to add based on your experience?

1 Like

Hi guys,
I've built a demo with Astro and deployed it on my personal Github repo.
https://retr0ve.github.io/website-plugin/
This demo is not completed yet, many features such as search and the detail page are not finished.
Please feel free to make suggestions on UI, especially on how the banner should look like. Thank you!

3 Likes

So does it look on my mobile

Just two comments.

The search field isn't obvious. Maybe a magnifying glass or simply the text "Search" could help? This would make it look similar to the note search field that's already used in Joplin.

There's almost no indication on mouse hover over categories in the left sidebar. I think the text colour changes very slightly, but it's basically unnoticeable. How about making the hover effect more obvious? Especially since hovering over other elements, e.g. plugins is very clear with background colour changes, etc.

1 Like

I haven't done anything to make it adapt to mobile screens. This demo is only tested on desktop now and there are still many bugs.

If we agree to this basic layout then I'll start writing code in the main repo and creating PRs. And I'll ensure this I'll take the small screens into account. :grinning:

1 Like

Thanks for your advice! These suggestions are really practical. I'll implement them soon.

I'm currently only on mobile :grin:

I capture a few full-sized screenshots for you. :grinning: Even if after I optimized for mobile devices, the layout will look a bit different than the desktop version. I think we should take the desktop layout as a starting point since currently mobile Joplin don't have a plugin system now.

Screenshots



1 Like

But you can use the mobile to scan the available plug-ins

Yeah, I agree. That's why I said I'll make it adapted to smaller screens, I'm just suggesting that maybe we should use the desktop version as the starting point?

understood and agreed

1 Like

please, add in Website Plugin with models, plugins too.

reference: Website Joplin with Models, Plugins for Repository - #2

Thanks for your advice xaholo3700! I've gone through your post, the idea is attractive to me. However, I think things other than plugins are out of the scope of this project. Maybe after some discussion, this idea could be an improvement after this Plugin Website is done. :grinning:

@Retr0ve my concept/redesign ;D