App banners #634
Replies: 9 comments 26 replies
-
|
@Zoospora will upload here a proposal for the look and feel of the app banners :) |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone! Nice to meet you all! Feel free to give feedback. It is always welcome. Thank you! This would be the proposal with a description line (ignore the store itself, as it is a quick scheme):
Here's how the same proposal would work with longer descriptions:
Finally, I have tried putting both options together and it doesn't seem to work, as there is too much blank space left on the card.
I would probably choose a short description, but since I'm new to the project, I don't have too much context 😊 Thanks for your attention!! |
Beta Was this translation helpful? Give feedback.
-
|
Make sense then! |
Beta Was this translation helpful? Give feedback.
-
|
@Jupi007 I think we currently do not have it inside yaru_colors or yaru.dart, or is it warning color? Oo |
Beta Was this translation helpful? Give feedback.
-
|
yep, it's warning 🤦 |
Beta Was this translation helpful? Give feedback.
-
@Jupi007 thanks for letting me know, it makes sense! Maybe we can leave the icon as it is now. Later on, we can then do some sort of auditing and look at existing icons both from yaru and vanilla ones and see if there's anything we can do to align both. |
Beta Was this translation helpful? Give feedback.
-
|
Sounds good to me 👍 |
Beta Was this translation helpful? Give feedback.
-
+1 that would make sense 👍 @Feichtmeier WDYT of the light background?
|
Beta Was this translation helpful? Give feedback.
-
|
@madsrh please ignore the search icon and the overall store layout. I believe @Zoospora was just mocking up something in situ, so the focus here should the app banners (cards) |
Beta Was this translation helpful? Give feedback.
-
|
I would keep the overall visuals, colours and borders like they are for now and get the content and size of the banners working for now |
Beta Was this translation helpful? Give feedback.
-
|
One thing we should also have a look is at the placeholder app icon we use for when it's 'empty' This is what we currently have on snapcraft.io: What we currenlty have on Ubuntu Software It's a good opportunity to align both stores, but also it is quite outdated, especially since the Canonical rebranding. @Zoospora perhaps this is something you can also look at, when you have time :) Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
I'm quite interested about this, because I need to do a placeholder widget (https://github.com/ubuntu/yaru_widgets.dart/issues/396). |
Beta Was this translation helpful? Give feedback.
-
|
Of course Ana, we can also check that. Regarding the colors I used: Just FYI 😊In case you wanted to know |
Beta Was this translation helpful? Give feedback.
-
|
this will be tracked here |
Beta Was this translation helpful? Give feedback.
-
|
@Zoospora In main now:
|
Beta Was this translation helpful? Give feedback.
-
|
Great work @Feichtmeier 🎉 @Zoospora are you sure we can't use the original Snap logo colors? 🙈 The orange looks odd IMHO. The red color is kind of hard to see on the dark background. Maybe just making the deb icon more bold/strong would fix this. |
Beta Was this translation helpful? Give feedback.
-
|
heey! It's looking great! The other day Ana and I were talking and it's true that the two colour logos look very saturated. The eye goes straight there and forgets everything else. Regarding the orange or green, the logos of the whole company have changed and now there is no bluish/greenish variant for the snapcraft logo. I would rethink try to using greys in that case (but then, shouldn't we check in the style guides if it's possible for us to use those logos in grey?) I should check that too (for snapcraft). Anyway, we're planning to keep thinking about these tags, because it looks like we still have some details to cover. We will also work on the empty state of the icon. As for the feedback on these latest designs, I see they're taking shape! I think the stars feel a bit big (but I see you've made them the same size as the logos). In my case I used the stars at 16x16 and the logos at 24x24. In case you want to try how it looks like. Now we have a break for a couple of weeks, keep up the good work and when we come back we'll continue polishing the details together! |
Beta Was this translation helpful? Give feedback.
-
Wouldn't that just be no icon?
It is attention grabbing for sure. I wonder if doing the same in monochrome would work better 🤔 but yes, this needs rethinking 😅
|
Beta Was this translation helpful? Give feedback.
-
|
I think the description text colour is too light, very hard to read. It should be the same colour as the title (black or dark grey - I can't really tell). I also find the text small, not just the description, but everything. But maybe this can be looked at across the whole Store - wdyt? |
Beta Was this translation helpful? Give feedback.
-
|
Hi again! As you know we have been studying for some time now the different options regarding how to display the type of packages in the banners.
Below, I attach screenshots related to the search results according to the filters applied in the store (two for each type of filter): ALL PACKAGES + ALL CATEGORIES
SNAP PACKAGES + ALL CATEGORIES
DEBIAN PACKAGES
This is our proposal. As I say, many members of the design team have been involved and we feel that this way it is always clear (top right) who is the main package and bottom right the other existing options. Any constructive feedback is welcome 😊 @anasereijo , I don't know if you want to say anything else. Regarding the card design in general, I left some more comments here yesterday: Greetings and thanks! |
Beta Was this translation helpful? Give feedback.
-
|
I like this solution 👍
@Zoospora What is the reason behind aligning the icons top? I find it looking a bit misaligned and would prefer to keep the centered proposal by @Feichtmeier |
Beta Was this translation helpful? Give feedback.
-
|
In narrow windows, we might need to hide the "Also published as" label. There should be a tooltip on hover.
|
Beta Was this translation helpful? Give feedback.
-
|
Hi again! No problem, just take what I always tell you as a proposal, everything is open for discussion 😊 As for the alignment, it's simply the way we work in Vanilla. We feel that the visual balance is better spread across different examples if we do it this way (at least the way we use it). It is known that in graphic design, sometimes when something is strictly centred, our visual perception can place it slightly below. But all this always has a subjective point. So don't worry. In relation to labels, perfect too! Thanks for the good work! |
Beta Was this translation helpful? Give feedback.
-
|
package icons is being tracked here |
Beta Was this translation helpful? Give feedback.
-
|
Just a reminder that when we revisit the banners for the explore/start page, we should make the content responsive like below: responsive-banners.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Yeah indeed. We should really go full magazine poser mode on the explore page. And make people scroll and scroll and scroll :) |
Beta Was this translation helpful? Give feedback.
-
This discussion is dedicated to the app banners (or app cards as we call it internally :D)
How it looks like (12 Dec 2022)
App banners on Explore page
App banners on Search results
Notes
Beta Was this translation helpful? Give feedback.
All reactions