Kirigami: software center example

Mock History

Current Revision71

Mock Description

Since I think we failed to explain well Kirigami guidelines, I'm trying to mockup some examples of how Kirigami guidelines should be applied (imo).

alex-l created Kirigami: software center example.Mar 18 2017, 8:04 PM
alex-l added a project: VDG.
alex-l added a subscriber: jensreuterberg.
romangg added a subscriber: romangg.EditedMar 21 2017, 1:23 PM

I really like this mockup! It looks very light and clean. The current design of Discover carries a certain "thickness" with it in comparison (probably because of the big icons and the Plasma logo with shadow top left).

I added some smaller ideas for improvements.

Inline Comments

Button for "home / launch view".

Instead of the separate and and small/hard to click "MORE" buttons, maybe just make the "Categories", "New and Updated" and so on headers do this?

Or at least move this button somehow to the left side of the interface, since the user will concentrate more on this side. Moving the cursor/finger to the right is therefore more taxing for such a basic functionality.

The category controls take a lot of vertical space although they only show one line of text, which leads to a lot of unnecessary scrolling. Maybe on the desktop make the height of buttons variable such that:

  • there is a minimum still looking good
  • your current one as maximum
  • in between stretch them such that it fits the vertical space exactly without scrollbar

There needs to be a back / home button. For all following red arrow traversals as well.

Do we really want the burger menu to overlap other clickable content?

romangg added a subscriber: apol.Mar 21 2017, 1:24 PM

@subdiff yours are all good suggestions, I made the mockup really quickly to stress the right navigation pattern :-)
About "more" buttons, I think it would be good to find a solution and make it a guideline.
Same for categories controls: those are just placeholders, I think it would be nice something like elementary OS Software Center.
In general a minumum + maximum sizes would be a good addition to guidelines.

Inline Comments

these rows are scrollable horizontally

Home view

my mistake: no context drawer here

I just realized something fundamental is missing yet: A search field.

I think it should be the most prominent object on the home screen and in a smaller version available as well on all the other screens.

@subdiff the search could be the FAB. I should do a complete mockup, because this one is just to stress the navigation.

This looks great. Better than the current plasma-discover, that's for sure.
What about reviews, though?

alex-l added a comment.EditedApr 1 2017, 2:16 PM

@ivanthekdefan as I said this mockup is just to show the right navigation pattern in Kirigami. "Comments" tabs was intended for app reviews.