Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New fluent design icon suggestion #627

Closed
Donnnno opened this issue Apr 2, 2020 · 29 comments
Closed

New fluent design icon suggestion #627

Donnnno opened this issue Apr 2, 2020 · 29 comments

Comments

@Donnnno
Copy link

Donnnno commented Apr 2, 2020

Hey, I'm new here and really love QuickLook But I was looking at the new fluid design icons for all Microsoft apps. And then I was thinking wouldn't it be cool if QuickLook had a fresh updated icon too.
So I created a quick mockup how it would look with the new design guidelines and this is my result:

quicklook_dark
quicklook_light

Let me know what you think :^)

@QubitsDev
Copy link

Hi, I am the designer of the current icon and a few days ago I am working on the new icon.
Quicklook
Tray Icon (Dark & White Theme)
Tray-Black@100% Tray-Black@100%
this new version is very different from the current one. Please I want to know your opinions.

@Donnnno
Copy link
Author

Donnnno commented Apr 2, 2020

Oh haha didn't know that oops :)
It looks great! The colors look very good and the eye magnifying glass combination is also super cool.
Maybe put some subtle gradient in the magnifying glass shape and a 45º angle in the gradient. Great work :^)

@QubitsDev
Copy link

I used as a reference the Whiteboard icon "the pencil has no gradient".
CalendarPhotosQuicklookWhiteboard

I want to replace the blue color, there are many blue icons in windows and add a gradient in the magnifying glass lens, I will publish some tests

@Donnnno
Copy link
Author

Donnnno commented Apr 2, 2020

Maybe use some subtle rounded corners like with the other icons.

@QubitsDev
Copy link

QuickLook Icon V2
Quicklook
Icon Tray preview mockup
Tray Preview

@WilliamDrt
Copy link

@QubitsDev That's nice

Here's a (crazy) though.
Lose the eye all together and put an iris (a dot) inside the circle. That way the circle will be double serving as the eye and the magnify glass.
Hey now that I am thinking of it why not triple serving. Make the handle same color as the circle and make it a little bit shorter so that it will be a magnifying glass and the capital letter Q.
So, we have a circle with a dot in the middle with a little handle on the right lower side.
I like minimalism. I got the idea when I looked the tray icon.

Just a crazy thought...

@QubitsDev
Copy link

the first versions had the magnifying glass in the form of a Q but it does not match with other icons, I decided to make the magnifier with a realistic shape like the Snip & Sketch scissors and the white part form a Q.
QuickLook Icon V3 | Snip & Sketch Icon
Quicklooksnip

@simioni
Copy link

simioni commented Apr 4, 2020

Great work on these new icons!

IMHO this is the one that best matches the new Microsoft icons. It's also a straight update to the current one, which already feels familiar. I don't see the need to redesign the icon entirely.

image

@xupefei
Copy link
Member

xupefei commented Apr 4, 2020

Great works! I am thinking the same as @simioni: the current icon + gradient looks very nice.

I am wondering -- will it looks better after adding a dark grey handle in the magnifier (like @QubitsDev's design V2/V3) in the OP's design?

@QubitsDev
Copy link

QubitsDev commented Apr 4, 2020

I like the @simioni icon, the blue color and the gradient looks great.
I still believe in using another color, I made a gray version of my icon.
Quicklook - Gray Quicklook – Bue
i don't know what other color could work...

I think the design and color of the icon should look good on the light and dark theme...
EUtLXXXWoAYbUzU
EUtLWQGXsAkOfMT

The gray version is very similar to the camera icon 🤔
Quicklook - Gray Camera

@Donnnno
Copy link
Author

Donnnno commented Apr 4, 2020

I think the design and color of the icon should look good on the light and dark theme...

I could make some adjustments to make it work on light/dark themes.
Either way I like both versions (the eye one and the updated one).

@xupefei
Copy link
Member

xupefei commented Apr 4, 2020

I could make some adjustments to make it work on light/dark themes.

Could you do it and post it here? Note that it should be a single icon that looks good on both light and dark themes.

@Donnnno
Copy link
Author

Donnnno commented Apr 4, 2020

I've created these adjustments & variations so that you can see how it looks in light/ dark modes.

Artboard 17

@QubitsDev
Copy link

This design looks better, use a color palette similar to the other Windows icons so it will be consistent.
20200404_141837

@Donnnno
Copy link
Author

Donnnno commented Apr 4, 2020

Ah thanks, so something like this then (I used the calendar & camera colors).
Artboard 31

@xupefei
Copy link
Member

xupefei commented Apr 4, 2020

This one looks nice to me:
image

Can you provide the PNG so I can try? You can send it to me by email xupaddy#gmail if you don't want to upload it here.

@Donnnno
Copy link
Author

Donnnno commented Apr 4, 2020

sure, I also can send you the svg file if you need that :)

@Donnnno
Copy link
Author

Donnnno commented Apr 4, 2020

Here's a zip with the png & svg file. If there's anything else you'll need just let me know :)
QuickLook_icon.zip

@xupefei
Copy link
Member

xupefei commented Apr 5, 2020

So it looks like this (MSI version, the Store version will be slightly different):
image

Looks perfect to me :) Thank you, guys!

xupefei added a commit that referenced this issue Apr 5, 2020
@Donnnno
Copy link
Author

Donnnno commented Apr 5, 2020

Woah nice! should I make the drop shadow more visible? and is the size right?

@xupefei
Copy link
Member

xupefei commented Apr 5, 2020

I think the size is correct - it is auto-generated according to the guideline anyway.
The current shadow is okay. Since Windows 10 shows the EXE icon in the start menu, adding more shadows will make the EXE icon itself unrecognisable.

@rabelux
Copy link
Member

rabelux commented Apr 6, 2020

Thank you guys for the update, really like the new design! 👍 🎉

@jonaskuske
Copy link

jonaskuske commented Apr 6, 2020

Since Windows 10 shows the EXE icon in the start menu

Not if you add a {exeName}.VisualElementsManifest.xml :)

(in case you don't yet, I'm using the Store version myself so don't know)

Edit: This also requires you to specify a background color for the tile ("transparent" doesn't work), so might not be desired

@simioni
Copy link

simioni commented Apr 8, 2020

This looks incredible! Thank you, everyone!

@eman613
Copy link

eman613 commented Apr 18, 2020

@xupefei hi, I like this new icon, but I found that the tray icon is still in old style, and I am using the zip version, so is there anything I missing?
Snipaste_2020-04-18_19-32-06

@xupefei
Copy link
Member

xupefei commented Apr 18, 2020

@eman613 The tray icon is not changed. The new icon is used in the start menu.

@eman613
Copy link

eman613 commented Apr 19, 2020

@xupefei OOOK, looking forward to the new tray icon

@simioni
Copy link

simioni commented Apr 19, 2020

@eman613 Colored system tray icons are being phased out. The standard for system tray icons in Windows 10 is monochrome. Those are displayed in white or in black, depending if you have windows configured in dark or light mode. The current Quicklook tray icon is already up to standard, and behaves just like Microsoft own icons in this regard, changing from dark to light depending on your theme.

@Nyameliaaaa
Copy link
Contributor

This Issue Now Needs To Be Closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants