Code Monkey home page Code Monkey logo

Comments (7)

euf avatar euf commented on July 3, 2024 1

Yes, I do 🙂 This was my personal choice after trying a dozen of different designs, including Material icons.

That's what I came up with:

1-eye-on
1-eye-off

First, I found that a closed eye is less recognizable and visually distinctive than a crossed one (simply speaking, the glyph looks too small and doesn't differ much). Crafting a good crossed one took some time, but I'm very happy with the result.

Secondly, I opted for drawing the eye icons from scratch instead of using Material ones because I was able to achieve better visual balance with other icons. In OM rounded shapes are preferred to sharper ones; icons are consistent with material by keeping 2px stroke on 24px canvas but margins are carefully chosen dependent on icon shape to make them look better next to each other; etc.

Overall, I was aiming to achieve a softer and nicer look while staying consistent and semantic. All of this was done for iOS, where we try to mix and match an older Material-inspired UI style with a more modern SF Icons visual style. Maybe Android is okay by just reusing Material icons as is.

Maybe I could write up a github wiki page with a UI icons guideline, what do think?

from organicmaps.

fitojb avatar fitojb commented on July 3, 2024

... redrawn in the Material style of course :)

The eyes are a much better metaphor.

from organicmaps.

RedAuburn avatar RedAuburn commented on July 3, 2024

@Jean-BaptisteC you don't think so?

also, there are some already made material ones 👍️:
image
(https://fonts.google.com/icons?icon.query=eye)

from organicmaps.

Jean-BaptisteC avatar Jean-BaptisteC commented on July 3, 2024

Default checkbox is not good, because checkbox is used to select items in list not to set visibility of items.
Personnaly, I don't like eye icon to set visibility, I prefer map icon like in OSMAnd (it's a little different because he use toggle to set visibility of items)
I have found an map icon https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Amap%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4024 but I didn't have found version icon with bar like for eye icon.

from organicmaps.

biodranik avatar biodranik commented on July 3, 2024

@Jean-BaptisteC which OSMand icons are you talking about?

Visibility icon should be more or less clear, as it is standardized by Google.

from organicmaps.

Jean-BaptisteC avatar Jean-BaptisteC commented on July 3, 2024

This icon https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Amap%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4024

from organicmaps.

biodranik avatar biodranik commented on July 3, 2024

@euf, do you remember the reason for using a crossed-eye icon instead of a closed-eye?

from organicmaps.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.