search

mavlink / qgroundcontrol

Cross-platform ground control station for drones (Android, iOS, Mac OS, Linux, Windows)
http://qgroundcontrol.io
3.33k stars 3.64k forks source link

Daily Build / Beta Icon for all OS #5511

Open dagar opened 7 years ago

dagar commented 7 years ago

In the Play store the QGroundControl and QGC (Daily Test Build) have slightly different icons, but on the active device they're using the same icon.

image

We need an a better beta/test icon generated for android in all sizes, then build scripting to change the icon here. https://github.com/mavlink/qgroundcontrol/blob/master/android/AndroidManifest.xml#L3 https://github.com/mavlink/qgroundcontrol/blob/master/tools/update_android_version.sh#L16

hamishwillee commented 7 years ago

The UX team at Intel are going to love the opportunity to help with this. BUT if we want help we need to provide very clear direction. So, list of what you want ...

dagar commented 7 years ago

Something similar to what Google did with Android Chrome?

image https://play.google.com/store/search?q=chrome

hamishwillee commented 7 years ago

Also, are we happy with the current iconography, or tempted by elements of the proposed DC branding: https://www.youtube.com/watch?v=i4kblPyLdBw&feature=youtu.be

W.r.t. the above @dagar I like that, but this exact approach might cut the bottom off the Q. All we want is something that is recognizably QGroundControl and says "Beta" right?

anassinator commented 7 years ago

@dagar, @hamishwillee:

From my experience dogfooding, I've seen two ways of distinguishing the beta/nightly builds from prod:

What do you guys think of changing the background instead? This is a quick and rough example of what I mean:

android_dev_512x512

Original for comparison:

android_512x512

On a side note, I'd love to see a more DC-inspired icon.

dagar commented 7 years ago

I'm not sure if the default QGC coloring is sufficiently recognizable at this point. Can you still slap a beta label across it?

DonLakeFlyer commented 7 years ago

like the graph paper style thing. But agree that some sort of Beta label is likely still needed.

NaterGator commented 7 years ago

I don't have an artistic bone in my body or I would mock this up, but could you stylize the "Q" portion of the beta logo to look like a sketch / draft of the letter's geometry (roughly this premise: http://imgur.com/a/c1Kiu)

hamishwillee commented 7 years ago

@NaterGator Looks cool - but IMO a bit far from the original :-) Lets get the UXWG team to do the actual work of producing the logo. What we need to do is provide them with ideas on what we think might work/we could live with.

I think we all want "Beta" on the logo. We all want this to remain clearly "QGroundControl". We like the graph paper thing, but open to other ideas. Reasonable feedback to give them?

anassinator commented 7 years ago

@NaterGator I think the sketch could be a neat idea, but don't have the time to whip that up right now. @hamishwillee I think he meant we could have the entire icon be the same as the original but to look completely hand-drawn on a blueprint or something instead. Correct me if I'm wrong.

I am quickly putting the following up simply for a better idea of what this could look like.

Blueprint, bottom label: android_512x512_bottom

Blueprint, corner label: android_dev_512x512_corner

Original, bottom label: android_512x512_bottom_noblueprint

Original, corner label: android_512x512_corner_noblueprint

The corner label can obviously be on any corner. I also didn't put any thought into the colors, fonts, sizing, background and etc. I'm not a designer and I'm certain the UXWG team can do a better job; I'm just trying to help out so that you may have something more concrete to give.

Also, this probably goes without saying, but I think we should do the same for the desktop apps and iOS (not sure if the TestFlight is still a thing).

NaterGator commented 7 years ago

Yeah, I meant basically composite what looks like sketching the geometry of the Q in to give it a "work in progress" feel. To be honest 1 and 2 look pretty great and are a quick glance to realize this is not the stable release branch.

hamishwillee commented 7 years ago

Yes, they (https://github.com/anassinator) all look really good to me. I slightly prefer the graph background, and the "corner" orientation. If we're all basically OK, I can forward this to UXWG?

think we should do the same for the desktop apps and iOS (not sure if the TestFlight is still a thing).

So I was assuming we'd use same Beta icon for all platforms. Is that what you're saying?

FYI I did understand what @NaterGator was suggesting. I don't hate the idea. To me though it felt more like something to capture a prototype :-) than a beta.

anassinator commented 7 years ago

@hamishwillee

Yeah it should be the same design, but each platform has different sizes and formats requirements. For example, the iOS icon must not be rounded as the OS adds that itself.

Also, I would suggest either reworking the rounding radius of the icon for each platform as it seems too harsh right now. I haven't been following Android very much lately but I think I've seen a lot of completely circular (like chrome above) and completely square icons. And for example Mac or has a lot more circular icons as well. So, maybe we should investigate shapes that better suite each platform. This can also affect whether corner or bottom makes more sense.

And ok was just making sure we're on the same page 🙂

Finally, moving forward with UXWG isn't my call, but I'm OK with that 😛

DonLakeFlyer commented 7 years ago

I'd rather not have different branding on each platform. Also I'd rather not change the existing branding (other than a beta version) at this point. You bounce around too much and people don't know what's what.

hamishwillee commented 7 years ago

@DonLakeFlyer Thanks for that Don. I'll see whether UXWG care to comment. If they don't come back with clear guidance or a plan for clear guidance in a week, I personally would be happy with us all to make an executive decision :-) Perhaps on option 2 above

DonLakeFlyer commented 7 years ago

I think this one is fine: 28873895-26a0e0fa-7798-11e7-90d8-1d0c5ae1ced6

hamishwillee commented 7 years ago

Me to. Just sent an email to UXWG for comment, listing that as my preference and asking for comment/professional versions in the right sizes. Lets give them a few days to respond - OK?

anassinator commented 7 years ago

@hamishwillee, @DonLakeFlyer:

That's good by me.

For reference, since I didn't see these comments in time, this is what I meant about a circular icon:

comparison

iOS would need to remain a square, but IMO this isn't changing the branding.

DonLakeFlyer commented 7 years ago

but IMO this isn't changing the branding.

The square with rounded corners are definitely part of the banding. It's used in many places.

anassinator commented 7 years ago

Ah I see what you mean. Fair enough 👍

DonLakeFlyer commented 7 years ago

Change title since we want to do this for all OS.

fabricionovak commented 7 years ago

The blueprint background and Beta tag will do the job. My only concern is about legibility in different sizes. I've made some tweaks and tests.

scene

192x192

qgc_beta_icon_homescreen

android_icon_sizes_scale

anassinator commented 7 years ago

That looks nice. Yeah the beta label might be hard to read on lower resolution devices. That's why a noticeably different background is common and would probably be the best indicator IMO. We can still have the label as well.

fabricionovak commented 7 years ago

@anassinator I'd avoid changing the background color. The color combination is part of the branding guidelines. The beta label is small, but it is pretty readable in my opinion. Here is a picture of my phone right now (not a mockup like the previous one).

img_20170803_130331

anassinator commented 7 years ago

@fabricionovak: Oh I thought you were worried about lower DPI devices where the label might be much harder to make out. As for the branding issue, I understand the concern, and it's up to you guys for sure. I prefer the one you posted anyways :)

fabricionovak commented 7 years ago

These lower DPI devices will not display the text as sharp as the high-end ones, but it will be still readable.

hamishwillee commented 7 years ago

OK, @fabricionovak I think we'll all be happy with this version you have proposed. Can we have versions suitable for desktop, android and iOS? [Do you need list of specific sizes/formats?]

fabricionovak commented 7 years ago

@hamishwillee a list would be helpful. :)

hamishwillee commented 7 years ago

@fabricionovak The android icon requirements are here: https://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html#size (note the need for the android play store icon in the following section).

iOS app icon sizes are here: https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

@DonLakeFlyer @dagar Is that correct set? What sizes are needed for desktop?

hamishwillee commented 7 years ago

@fabricionovak I know you're busy. Can you please ETA some of these icons?

fabricionovak commented 7 years ago

@hamishwillee I'll work on this today.

hamishwillee commented 7 years ago

Thanks @fabricionovak !

fabricionovak commented 7 years ago

Android icons in PNG. Still working on the iOS versions

ic_qgc_beta_android_mdpi ic_qgc_beta_android_hdpi ic_qgc_beta_android_xhdpi ic_qgc_beta_android_xxhdpi ic_qgc_beta_android_xxxhdpi ic_qgc_beta_android_google_play

fabricionovak commented 7 years ago

PSDs for android

ic_qgc_beta_android.zip

hamishwillee commented 7 years ago

Thank Fabricio! @dagar @DonLakeFlyer What else do you need/can you take it from here?

DonLakeFlyer commented 7 years ago

I'll get going on this. I'll yell if I need antyhing.

fabricionovak commented 7 years ago

PNG files for iOS devices ic_qgc_beta_appstore ic_qgc_beta_iphone_ 3x ic_qgc_beta_ipadpro_ 2x ic_qgc_beta_ipad_ 2x ic_qgc_beta_iphone_ 2x

fabricionovak commented 7 years ago

iOS icons in PSD ic_qgc_beta_iOS.zip

fabricionovak commented 7 years ago

Android icon update in XXXHDPI. Please, replace the previous files (ic_qgc_beta_android_XXXHDPI.psd and ic_qgc_beta_android_XXXHDPI.png) for these.

ic_qgc_beta_android_xxxhdpi ic_qgc_beta_android_XXXHDPI.zip

hamishwillee commented 7 years ago

Awesome @fabricionovak

@DonLakeFlyer Did you get these as well. Are we all done? Can this be closed?

DonLakeFlyer commented 7 years ago

Won't be closed until their use is implemented.

DonLakeFlyer commented 6 years ago

I started hooking these up, but they won't go in until 3.3 is out the door. Then dev/daily builds will cut over to these.

DonLakeFlyer commented 5 years ago

@dogmaphobic I had pinged you on this a while ago. I think the icons need to be in a different format for use. Don't quite remember. Would be nice to have this sorted out for 3.5

Prasad28-97 commented 3 years ago

Hii Guys I want to change the default icon of QGC in my project. Can you tell me exactly where i need to make changes?

Thanks