Replies: 18 comments 48 replies
-
|
That's a cool idea |
Beta Was this translation helpful? Give feedback.
-
|
I love the banners this way |
Beta Was this translation helpful? Give feedback.
-
|
@madsrh where do you got those images from? |
Beta Was this translation helpful? Give feedback.
-
Icons or background? For the backgrounds, I tried a few different things, so I don't recall, but I usually go to unsplash or pexels. |
Beta Was this translation helpful? Give feedback.
-
|
The gradient thing is easy, but it's a nice idea to have those fancy category banner backgrounds and then put a squircle (lol) with the app icon on top like you did. This can also help to mitigate the bad quality of the average store banners |
Beta Was this translation helpful? Give feedback.
-
2022-11-17.10-08-42.mp4A little preparation if we go to the "section banner" idea
WDYT? Edit: plus the new banners in mads mock-up |
Beta Was this translation helpful? Give feedback.
-
|
I only need to figure out some nice colors for each section :)
|
Beta Was this translation helpful? Give feedback.
-
Wow, awesome! Perfect for scaling and not loading large background images. You're such a wizard 🧙♂️ |
Beta Was this translation helpful? Give feedback.
-
|
@madsrh I basically need 2 hex colours from your for each category 😹 |
Beta Was this translation helpful? Give feedback.
-
|
Yes, we can create a list! I can't do it right now, but have a look at www.uigradients.com for inspiration 🎨 |
Beta Was this translation helpful? Give feedback.
-
|
Cool :) Or you add them yourself when this is live
Also we need some fancy slogans, I am not a marketing man :) |
Beta Was this translation helpful? Give feedback.
-
|
wow, this is really nice! 🤩 p.s. are you using any special tricks to ensure that logos look ok against light and dark backgrounds? |
Beta Was this translation helpful? Give feedback.
-
Currently only a little drop Shadow on the text |
Beta Was this translation helpful? Give feedback.
-
|
@madsrh the banners are looking great!! 😍 From what I read above, the background is separated from the icons – does this mean that the icons can be updated/replaced automatically? If it's not updated manually, we have to be conscious that the logos' colours might clash with the background. |
Beta Was this translation helpful? Give feedback.
-
Thank you 🙏 I just did the mockups 😊 @Feichtmeier did all the actual work. Yes, the icons are placed on a squircles with a solid background, so there shouldn't be anything to clash with. I think Feichtmeier better explain (in todays meeting perhaps?) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for reminding me of the meeting 👴 🧠 Yes the icons come the servers but are then drawn on this white squircle (rounded square) For each section, which have a finite number, I currently safe two color values to then create the background container
I am not a native english speaker so we really need people from marketing/design to create catchy slogans in english. 😄 The icons are widgets themself and are loaded async so the UI is not blocked
|
Beta Was this translation helpful? Give feedback.
-
|
FYI this will be my focus now. I will post a UX proposal as soon as possible. |
Beta Was this translation helpful? Give feedback.
-
|
Random screenshots of the playstore app page for desktop as an inspiration/design reference:
|
Beta Was this translation helpful? Give feedback.
-
|
played a bit and found this to my quite useful components (cards with our border with a half cut image etc etc, using the snap banner)
|
Beta Was this translation helpful? Give feedback.
-
|
I really like these. Have the entire screen filled with them, might look a bit too busy though. But perhaps we can mix them with the normal cards? I would also love to bring back the category banners https://github.com/ubuntu-flutter-community/software/pull/525 |
Beta Was this translation helpful? Give feedback.
-
|
sure! it is a re-usable component we could align somehow. In a small grid, big grid or just a row or inside some other container |
Beta Was this translation helpful? Give feedback.
-
|
ohhh nice nice! I agree it could be mixed with the other cards and category banners. I will include these on the wireframes! Thanks for sharing |
Beta Was this translation helpful? Give feedback.
-
|
Cool! I add them without using them so the code can be re-used if needed |
Beta Was this translation helpful? Give feedback.
-
|
Update: I am creating a list with ideas for big banners on explore page, stuff like “Must-have snaps for developers” and “Everything you need for your game night” (as suggested here), and so on... |
Beta Was this translation helpful? Give feedback.
-
|
I found this an interesting layout. Not the visual design but how things are arranged:
|
Beta Was this translation helpful? Give feedback.
-
|
didn't want to open another discussion and since it is related to "explore" "discover" features, we could show X amount of popular snap categories directly in the sidebar, similar to what 🍎 and 🪟 do:
|
Beta Was this translation helpful? Give feedback.
-
|
I don't know we can test |
Beta Was this translation helpful? Give feedback.
-
|
eventually in some cases the banners provided are indeed better than the gradients
|
Beta Was this translation helpful? Give feedback.
-
|
but it is just too damn random gradients are much more safe! or any other "fixed" pattern @madsrh could you work on the gradients? :P Some are really jarring or just bad |
Beta Was this translation helpful? Give feedback.
-
|
your idea with the icons is good I think |
Beta Was this translation helpful? Give feedback.
-
I'll take a look later today 👍 |
Beta Was this translation helpful? Give feedback.
-
|
We finally have something to share! 🙌 We’ve worked together with the Desktop and Snap Store Product Managers to define the experience and product goals for the Explore page. A design refresh of snapcraft.io front page is planned, so we are taking this opportunity to align both stores. As discussed here before, we all aim to create an experience that provides ‘freshness’ and ‘excitement’, but also as automated as possible to rely less on humans to update it frequently. That said, we had a chat with the Snap Store team to understand what can we get from the APIs and this is what we agreed for them to work on. To make the layout more interesting and less repetitive we created different types of app banners, and full width banners to give more ‘rhythm’ to the page.
Please keep in mind that banners content, gradients and copy are just placeholders 🙂Light and Dark theme
Light theme
Dark theme
Example of landing page
Apart from this, from the design team we are working on the creation of a gradient pack (for banners), which will be provided with a specification doc to make it easier to implement. We will share a first iteration of it soon to get your input and help! |
Beta Was this translation helpful? Give feedback.
-
Yes
I'm guessing it will be really easy to test the two versions once the code is there |
Beta Was this translation helpful? Give feedback.
-
|
The Ubuntu desktop uses the gnome icon theme "yaru" and there are basically icons for anything in a full colour SVG or exported PNG which we can reuse or extend in this repo Some examples
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Oh, I didn't know that collection. It could definitely be interesting to explore that option and see whether or not it adds a lot of noise. It will depend on the size and columns that are finally used, but I think that if there are enough icons, it would at least be worth a try. |
Beta Was this translation helpful? Give feedback.
-
|
@Zoospora could you please let us know what font weights you used for the banner headings? Is it bold and thin? Thank you |
Beta Was this translation helpful? Give feedback.
-
|
I don't think we have thin on Desktop, so we should replace it with something else. Maybe @madsrh has some suggestions? :) |
Beta Was this translation helpful? Give feedback.
-
|
Let me check how it would look like in Bold/Regular. Do we have light at least?
|
Beta Was this translation helpful? Give feedback.
-
|
Personally, I prefer the 2nd or 3rd version as I think it will be more readable with various different background colours. Maybe the 3rd is the 'safest'. WDYT @madsrh ? |
Beta Was this translation helpful? Give feedback.
-
|
I do prefer the 2nd. In the 3rd the subslogan weight looks too close to the headline - I like that there's a difference. But let's see how this will look inside the app. |
Beta Was this translation helpful? Give feedback.
-
|
@madsrh it does look too similar, I agree. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @anasereijo @Zoospora and @madsrh If you think some of the mock-ups shown here are good to implement feel free to open an issue for this including the screenshot. There are those three dots right at each comment with "create an issue" |
Beta Was this translation helpful? Give feedback.
-
|
Could we add a small section (2-4 apps) to the explore page with (recently?) installed apps asking the users to review them? Quick mockup - don't pay attention to the wording. This could be click to rate, add your review or 🤷♂️
|
Beta Was this translation helpful? Give feedback.
-
|
I love this idea @madsrh! The copy and layout needs some work indeed, but this is a good start 👍 |
Beta Was this translation helpful? Give feedback.
-
What if the frontpage showed a banner representing a category (not an app)? The banners for the individual apps (like the frontpage has now), are moved into each category.
Background images are created for each category and selected/featured app icons are placed on top so they can be changed aka not part of the image.
I see that I have a few updates 😄
Beta Was this translation helpful? Give feedback.
All reactions