UI Design

[milohr]

I'm opening this ticket to open a discussion that helps improve the software center UI and UX design :)

cc @nomad-desktop/ui-team

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[milohr]

Here are some early mock ups for the software centre.
I know it is a big overhaul, but I'd be nice to have a good looking and complete software centre/apps manager. I'm up for helping out making it a reality the parts approved.

Home view:

Here we could display curated, popular or new apps on a nice header banner.
Also have a section to group the apps by category, so browsing for new apps feels more filtered.
And finally in the mock up I also created a section to display as a list the newly added apps and the favourite apps that can be updated.

Apps View

On this view can be displayed all the apps with or without grouping, as currently Software Centre does.
On the top I also added a section to put the apps we would like to stand up.
On the grid of apps i didn't add a get button, the idea is to have such buttons [get, update, remove] on the list cards(such cards components are being worked on Kirigami), so the to install the app the user would click the app on the grid and then from app description page get it.
This would be a very generic browsing view, to check out whats available.

Updates View

This view is pretty obvious.
It displays a cards list of the packages that can be updated.
On the secondary toolbar the actions would be:
Update all, stop all, refresh packages and finally a overlay menu for other actions, such as configuring the sources etc...
The delegate on the card list would have the "Like it" button, we could use it to know what apps are popular. Also the new version number and a update button to individually update packages.

Recent View

On this view we can display the progress of group of apps being installed.
And also have a section to display the latest installed apps.

Search View

And finally the search view.
I think is a good idea to have this centralized search view to be able to show query results invoked from any other view. For example, when clicking the category icon on the home view, would bring the search view and display the card list of matching apps.
The search result list would make use of the same cards and delegate across all the app, this allows us to fit the buttons: [update, remove, get, likeit]

And that's it for now.
I have already started working on making Software Centre make use of Kirigami and Nomad HIG, so that's a good start :)

[milohr]

Adding the whole team to this issue to get feedback 👍

[milohr]

I completely missed Uri s design on this issue #14

There are a lot of similar things, I'm sorry I jumped in so quickly without looking first.
I will review this and the UI based on what Uri already worked on.
#14

[azubieta]

I was about to say the same, please you guys need to talk about it.
You know, it would be awesome to see the software center on a phone. But right now our main target are desktops, so please be sure that the designs are desktop ready too. And not only ready but that also look awesome as they do for small screens.