Create a list of illustrations/icons

[madsrh]

Some illustrations are missing or needs to be revisited. We would love something with a mascot and a bit of humor like Chrome or Firefox has.

Loading / splash screen

No search result

Can't connect to server / offline

Updates?

[add screenshot]

Feel free to edit this list 😃
Slightly related to https://github.com/ubuntu-flutter-community/software/issues/257

[anasereijo]

@Zoospora it would be great to have the brand team input / help on this. Maybe this is something we can both brief them once we have a complete list?

we can chat in more detail in our 121

[ghost]

Sure! Let's see what else is missing and then we'll get on with it. 😊

[anasereijo]

@Zoospora and I will be creating a brief to hand-over this to the Brand team. It would be great if we could update this issue with screenshots to provide more context. Anything you find, please share it here :)

[ghost]

Hey! Regarding the illustration for the loading screen, how many frames do you currently use?
I know that in animation the minimum is usually about 12 frames per second, but I don't know in this case if the different states are known.
Because I understand that an illustration is required for each part of the progress? Thanks

Update:

• Can you add a screenshot of the state of the animation when it is more advanced (assuming the animation is frame-based)?
• Another question, is the animation looping or does it represent the actual installation cycle?
• I see that the debian logo is inside the illustration. Is this a requirement, should there be one for each logo or a general one?
  This is all very important because what goes from a single illustration becomes potentially 24. Even if they are similar, they should be reflected in the brief.

Thanks!!

[madsrh]

I see that the debian logo is inside the illustration. Is this a requirement, should there be one for each logo or a general one?

IMO preferably a (new) snap/app store logo would be more fitting for the loading/splash screen 😉

I know that in animation the minimum is usually about 12 frames per second

What format are you planing here? As @Feichtmeier mentioned the offline icon is a flutter widget by @Jupi007 so better align the work with him.

[Jupi007]

@Zoospora In fact, animated icons are canvas based. So there's no static illustration, and it plays for a determined duration (they can also loop), with as much interpolated frame as flutter can render.
This mean that in a perfect situation, it will be rendered at 60 fps.

[Feichtmeier]

Morning 👋 currently the only place where we show the liquid indicator is in the store splash screen which usually does not show up because it starts so fast 💅

The offline icon is a fully fledged flutter widget by @Jupi007
https://ubuntu.github.io/yaru_icons.dart/#/

You can test it in the snap-store snap when you are on the explore page and disconnect from your wifi

I think the most important illustrations we miss are the following:

• no snap found with that name
• eventually: no debian package found with that name (TBD)
• we can not connect to the store / maintenance

If you have ideas about static illustrations I think @Jupi007 could help out with the animation in flutter

[madsrh]

no snap found with that name
eventually: no debian package found with that name (TBD)

@Feichtmeier couldn't these just be joined into "we didn't find anything with that name"? Does it have to be package format specific?

[anasereijo]

I also think we could just have one generic illustration for the empty state search results.

[ghost]

To sum up again:

If the loading illustration is not needed and if we put all empty states together, we would only need:

• No search result
• Can't connect to server / offline

Is this the case? If not, correct me again. Thanks!

[ghost]

Thank you!
I have to fill in a brief for each illustration and that's why I ask you so many questions, isn't the loading one necessary? If it is, please check my message again as I have recently updated it.

From the illustration:
"eventually: no debian package found with that name (TBD)"
Do you have a screenshot? Or does it not currently exist?

or now I have noted down the following illustrations, please correct me if any of them are not necessary in the end:

• Loading / splash screen (?)
• No search result
• Can't connect to server / offline
• No debian package found with that name (TBD)

Thanks

[Feichtmeier]

isn't the loading one necessary?

Currently not as the screens are no longer included, except for the start if your computer is really slow

Can you add a screenshot of the state of the animation when it is more advanced (assuming the animation is frame-based)?

2023-02-17.09-09-20.mp4

Another question, is the animation looping or does it represent the actual installation cycle?

The start-of-the-app-splash-screen is only looping and the whole screen is gone once the app is loaded

• all package types selected, nothing found in the store:
  

• only snap selected, nothing found in the store:
  

• only deb selected, nothing found in the store:
  

• searching locally, no snap found with that name:
  
  (the message shown here is crap and a bug)

• searching locally, no deb found with that name:
  

[Jupi007]

Other things about animated icons.
I have full control on them, which mean I can implement some coloured parts, or anything else if you want.
The only drawback is that every draw instruction is done "by hand" in dart, so it is a bit heavy process (that's why there's only two animated yaru icon currently 😅), even if I have honestly a good creating process now.
A good point is as it is only composed of some canvas instructions, it is very light to run for everyone!

[anasereijo]

@Zoospora might be also important to figure out what deliverables they (brand team) need to send.
@Jupi007 @Feichtmeier will SVGs be sufficient?

@Jupi007 If it's an animation, will it help for them to send a gif (or video) with the idea they have in mind, as a guide?

[Jupi007]

Another point: remember that you can navigate into yaru_icons.dart to take some inspiration, and so keep consistency with our actual icon set 🙂

[ghost]

Do you want them consistent with the normal icons or with the colour set? Should the illustrations be in colour or grey?

[Jupi007]

It would be very nice to add some colours to the animated icons 🙂
If they need to be consistent, it is by comparison with the actual icon set. If you look at the actual animated icons I've done, they are all based on static ones. What I mean is that there is a Yaru style, who should be used to have a consistent look with the whole ubuntu desktop.

At least, the icons for the menu sidebar should respect this rule. But maybe some real illustrations can be done in some other places, with their own style.

[madsrh]

TBH I don't think there's anything "wrong" with the Offline icon. Currently it's just a large animated icon and not really an illustration. So i guess it depends on what you are planning @Zoospora 🙈

To get a sense of the fullcolor style, you can browse the current Yaru icons here https://github.com/ubuntu/yaru/tree/master/icons/Yaru

[Jupi007]

I agree 🙂
Just, maybe the yaru_icons.dart web app is more comfortable to navigate: https://ubuntu.github.io/yaru_icons.dart/

[ghost]

Thanks for all the information! 🤩

[anasereijo]

update: we are in touch with the project manager, who will send the briefs out to brand team!