#360 Fedora LiveUSB Creator artwork
Closed: Fixed None Opened 9 years ago by mbriza.

I'd like to kindly ask for an application icon for the LiveUSB Creator and then some icons for the Fedora spins/products which will be shown in the menus of the application.

For a better image of how these will be utilized, please consult https://github.com/gnome-design-team/gnome-mockups/blob/master/USB-boot-creator/usb-boot-creator-degnomified.png .

  • Deadline
  • Not solid

  • Size requirements in pixels if applicable

  • Product logos should be 64, though it would be best to have bigger sizes for hiDPI screens. Application icon should be of standard size (don't know what it is exactly).

  • If this is a logo or icon for an application

  • What application is this for?

  • Fedora LiveUSB Creator

  • Brief description of what the application does

  • It writes a Fedora installation disk image on a portable drive (like USB flash sticks)

  • Packager or developer contact information (IRC nick + email + wiki profile page link)

  • lmacken@redhat.com is the original author
  • mbriza@redhat.com is implementing the new design

  • If this is for an icon, please indicate if you need desktop icons or web application icons.

  • Desktop icons.

To clarify the screenshot - there should be Product and Spin logos instead of the Fedora and Ubuntu logos. The tool will actually just install Fedora (not just Workstation, Cloud and Server, but the spins too) images, at least in the currently planned state.

gnokii is working on sketches for this. setting to triaged.

do you have anything for this yet ?

Any updates on this ? I've now created https://fedoraproject.org/wiki/Changes/LiveUsbCreatorFacelift to track the overall progress

Jakub Steiner is already working on the app icon. But it'd be better if someone of the Fedora design team created the spin logos since they should be visually aligned with the "product" logos which were created by the Fedora designers.

Jiří -- I talked with the Design team about this. They are recommending we use the standard Fedora logomark for all Fedora images inside the app. Here's why:

(1) There's not enough space in the design shown above to add legible wordmarks or emblems that would differentiate images

(2) If we use the edition logos for Server/Workstation/Cloud, and the standard Fedora logo for everything else, the editions (ironically) look less official than other things

Another idea

(3) create a separate mark to apply to all spins, maybe a symbolic version of the old LP / record image with a Fedora (f) mark in the center. I don't like this idea though because there is nothing to ground such a mark - there isn't anywhere else we would use it, so nobody would recognize it

Using the default Fedora logo instead of spin logos is what I'm currently doing in the preview version. I don't use any officially approved imagery though... at all - I downloaded everything from the Internet at random.
You're right using the full Fedora logo looks weird though. Maybe putting it on something, like a LP/CD image could be better.

mbriza - attaching the official PNG (you may need to scale down.) If you can give us a screenshot of what it looks like now if might help brainstorm alternative solutions.

official fedora logomark artwork
fedora_infinity.png

Screenshot of the UI with Fedora logos instead of DE logos
liveusb-fedora.png

mbriza - my thought is most users aren't going to have all of those variations, so just using the Fedora logo should be fine.

On the other hand, there's no added work just providing me with the logos you used for the design of the "Alternative desktops" DVD and maybe something generic for the Fedora Labs. The design of the Alternative desktops has to be somewhere already.

Replying to [comment:16 mbriza]:

On the other hand, there's no added work just providing me with the logos you used for the design of the "Alternative desktops" DVD and maybe something generic for the Fedora Labs. The design of the Alternative desktops has to be somewhere already.

The design of the alternative desktops DVD I think is very plain and not quite suited to the space you have for an icon there because of the fine details - it has the kde / xfce / lxde etc logos on it. (see https://inkscaper.fedorapeople.org/Fedora22/media-artwork/disk-labels/png/Fedora-22-livemedia-label-alternative_3-64.png)

Labs has a lot of photography and custom artwork I don't think would be appropriate to match the icon style we have in GNOME.

Just a random idea - I made this within 64x64 which I'm guessing is the correct size here - they aren't actually applied correctly to the screenshot examples (they should all say Fedora Spins) but would something like this work?

(see next attachment)

[[Image(mockup1.png)]]

mbriza and i had a long chat in #fedora-design today and he cleared up a lot of confusion about this request for me:

1) This app is partly for downloading ISO images you do not already have on your hard drive. I was making the assumption (I think based on how GNOME Boxes works, and how the old LiveUSB creator works) that it was being primarily driven by images on the user's hard drive. This has a more visual / browsable directory of images to download. So my thinking that a typical user wouldn't have that many Fedora images on their drive is flawed - they're going to see as many Fedora images as we make visible on the download websites.

2) This app is a Fedora specific app in that it is branded Fedora (the titlebar says "Fedora LiveUSB Creator" as does the application name) and the catalog of images is Fedora-only. You can liveusb create whatever images you have on your drive but you have to manually enter them into the system rather than use the nice catalog provided.

The realization of these two things has changed my position on how to proceed here:

1) Since we're browsing a full catalog, not just what is on a typical user's drive, we have to be able to make it possible to easily and quickly differentiate between the many combinations of Fedora we make available.

2) The overarching brand of this app is "Fedora," so we don't have to worry quite so much about ensuring the Fedora branding on every single image. It should be okay to have just the upstream desktop project icon for a given desktop image, for example, because the primary / top brand has already been established.

3) We have a bit of a problem with the Fedora labs images - we've explicitly chosen to not create individual special marks for these images because we didn't want to create the burden of an addition set of marks to manage, and also the labs spins in particular tend to be a bit unstable from release to release, some disappearing entirely and new ones cropping up. So it's a bit of a headache to keep up every release... but it also would really help to have something to help differentiate between them in this UI. So I'm coming around to the idea of making marks for them for use only in this application, marks that would look 'Fedora' like but be very simple and clean.

Here's the list of ideas we came up with for the marks:

  • paint brush for design suite (name: design-suite)

  • robot for robotics suite (name: robotics-suite)

  • gamepad for games (name: games)

  • guitar for jam (name: jam)

  • test tube / beaker / earl meyer flask for scientific (name: scientific)

  • lock for security (name: security-lab)

Since I know gnokii has a lot on his plate right now, we'll proceed with this ticket as follows - I'm going to ask mleonova to make some sketches for each of these icons and work with gnokii to develop them and come up with final artwork.

Maria, the specs for the 6 icons above are as follows:

  • The final file size for each should be 64x64. Leave at least 2px padding around the edge of the 64x64.

  • You can create the icons and have them together in one Inkscape file (this will probably help you work between them to make sure they look consistent) but you'll need to split them out into separate files at the very end.

  • Have an SVG available for each icon, but also export each to PNG. Use the "name" specified for each icon in the list above in naming the files.

  • To try to keep the artwork as simple as possible, I suggest shooting for one-color designs. This will emulate the one-color symbols we have for the Workstation, Server, and cloud products.

  • Try to emulate the style of the various Fedora iconography we have. Here's a little graphic I put together that kind of demonstrates it - we use a lot of curves. The color palette is here: https://fedoraproject.org/wiki/Logo/UsageGuidelines#Colors

[[Image(fedora-style.png)]]

Sampler / Buffet of Fedora graphic style
fedora-style.png

So I've added a preview png and an svg if anybody wants to contribute. These are not final, I would prepare files of right size when we'll have agreed on the design :)

Thanks!

I really like the icons a lot! There's nothing from my side, maybe a little bit of variation of color. But I think having green everywhere is intentional. Anyway, if it's not, I'd maybe go for a similar color that will the Spin icons have. Like if there's a Lab with using a KDE desktop, it would (maybe?) make sense to have them in a similar or the same color.

Also: The Spin icons are already done? I'll need them too for the app.

I forgot to list out the icons we need for the desktops too:

Here they are all together for the review

these look great! what do you think mbriza?

They do! :) I'd just maybe put only "S" into the SoaS icon (but to reiterate, I'm not a designer, so...). Probably written with the same font they have on the website.

I'll be waiting for the final colorful ones! :)

Looks like it was recently announced that there's going to be an Astronomy spin for F23. So we need a last-minute icon added for that one, too.

Thanks! I recorded a short video showing how the icons look like in the application itself: https://mbriza.fedorapeople.org/liveusb-9.ogv

I'm pretty happy with the results! The images themselves are great.

I just think the icons could be a bit more color-variated. At least between the categories - I don't understand why Spins are just gray and Labs have the same background as Workstation. Or is it intentional?

With future updates, please note I'm leaving for 10 days tomorrow.

are we in charge for the desktop ones to? Can we produce them with the bg of the workstation to. For two reasons first its more clear then that it is fedora and second is, it looks more consistent then.

The rationale we used is that the officially supported ones should be the most colorful, the others are gray since they're not formally supported. I think we decided on green behind the labs bc most of them are based on workstation (instead of alternative desktops.) It's clear from the screencast the colors of the official products stand out well against the gray; my thought is maybe we should make the labs gray too (maybe a different shade) to help with consistency.

Actually, the Jam, Scientific and Security Labs are based on KDE Plasma.
There are grey Labs variants too in the archive, I'll try using them too.

I'm uploading a couple versions for Astronomy icon, so you could help me choose, which one you like the most. Colors are just for preview purposes.
[[Image(http://img.susepaste.org/images/30196114.png)]]

Hey Maria, I like the center design (with the filled telescope) the best - maybe to give it a little motion like the other icons add a small star or two around the telescope (maybe at the top and in the lower right?)

Hi,

can I ask for a new icon pack with the final color scheme? I'd like to build a new version of liveusb-creator containing them.

Thanks

Hi!
Do you have any comments regarding the astronomy icon? I will prepare the set for you.

Replying to [comment:34 mbriza]:

Hi,

can I ask for a new icon pack with the final color scheme? I'd like to build a new version of liveusb-creator containing them.

Thanks

Hi, no comments, I agree with Máirín that filled one is the best and it looks even better with the stars. :)

Replying to [comment:35 mleonova]:

Hi!
Do you have any comments regarding the astronomy icon? I will prepare the set for you.

Replying to [comment:34 mbriza]:

Hi,

can I ask for a new icon pack with the final color scheme? I'd like to build a new version of liveusb-creator containing them.

Thanks

I've uploaded a different shade of grey icons in case you want to use those, and an archive with green and black astronomy icon. So now there are all colors of all icons to choose from ;)

The application with the three different icon color schemes
liveusb-icons.png

Hi!

So I tried the application with the provided color schemes. There's a screenshot of all three versions attached somewhere above for you to have a look at.

I'm kinda leery regarding the color schemes though. While I agree we should somehow differentiate between the Spins and the Labs, using a different shade of grey seems a bit counter-intuitive. At the same time I disagree with usage of the green Workstation-y background for the Labs. While 3/6 are build on Workstation, they're providing a completely different user experience.

My idea is to have them all use the same color/background and put a nice small header above each section explaining something along the lines of "the images below are a part of Fedora Labs" and what Fedora Labs actually is.

What's your designer opinion on this topic, please? Again, to reiterate, this is just my opinion as a developer and I rely on your input more than on my mine.

Thank you

Hey mbriza!

I think the first screenshot on the far left is probably the right scheme to go with... I do like your idea of sectioning off the labs and providing an explanation of them and agree that's a good approach.

Is there a GNOME 3 gui pattern for this kind of sectioning off in a list like this that you have in mind to use or is part of the issue here figuring out how to do the sectioning off visually?

Hi,

well to me it still looks pretty weird how the Products have that triangly background but the others are a different shade of grey.

There's not a real UI pattern for it. The app doesn't actually have much to do with GNOME. It's written using the Qt toolkit, just to mimic GNOME.

Putting up a mockup for you to look at with the sections.

The screenshot looks absolutely fine to me. Only thing that seems off to me is the colored icons for workstation / server are aliased on the edges.

To me, it looks like the brighter ones were disabled or unavailable at the time. When we have hard sectioning using the separator, I think it's not necessary to differentiate with the icon color.

And yeah, the aliased icons don't have the right resolution for the job so they look bad. Can you please get a better variant for me, please?

Also, I'll need bigger png files for each of the current ones. I can't use svg directly because Qt on Mac doesn't seem to support the format. I think 128x128 or maybe even 256x256 would be required. Can you generate those for me, please?

Sure, we can generate the larger sizes.

Would black versions of the currently grey icons work better?

Yeah. I'd still like something more colorful better but it seems there's no guideline for that. So one shade of (dark) gray or black would work good I think.

So we had a discussion with Martin, and in order to keep the Labs icons green, have come up wit two solutions: make Spins their original colors or keep their backgrounds grey, but make it a pattern, so they won't look inactive.
It's a little big, so I put it here: http://i.imgur.com/oXyKBq9.png

Well what I actually meant was having the same color pattern for both the Spins and the Labs. I'm sorry I didn't make myself clear enough.
That means either having both Labs and Spins grey (the checkered pattern looks great!) or having them both colorful.
In my opinion (and I presented the app to a few users and generally they agree) when you have most of the options colorful and some of them grey, then it signals the user the grey ones are not available.

Okay so here's a possible solution with all the same colors for Labs and Spins: either patterned grey or Fedora blue http://i.imgur.com/6BXS7lF.png

Attached the grey patterned icons 256x256 px, both svg and png

We're doing triage work in the team meeting now and this ticket came up, wondering if we're all set and it's okay to close now?

mleonova double checked with mbriza and we're good to close so clsoing ticket now. :)

Login to comment on this ticket.

Metadata