emergency-phone icon

[aparlato]

For id-support from #270

Emergency Phone on taginfo

icon for emergency:phone

Other icons of this:

reference to Maki 1 icon for emergency-phone

cc @nickidlugash

[aparlato]

First draft pushed to maki-2-updates branch.

emergency-phone-15: https://github.com/mapbox/maki/blob/maki-2-updates/icons/emergency-phone-15.svg
emergency-phone-11: https://github.com/mapbox/maki/blob/maki-2-updates/icons/emergency-phone-11.svg

[natslaughter]

@aparlato
First icon project! \0/ \0/ \0/

• Overall I think the icon concept is good as it's globally recognizable.
• You might want to take a look at the existing Maki icon telephone, and use the existing telephone geometry we have for consistency.
• Also, you'll want to make sure the geometry is pixel aligned, and snaps to the grid

[aparlato]

Question

I have two options for emergency-phone-11. One has a thicker cross. I'm more inclined toward the thinner cross as I think it improves clarity, but it would break the general rule of strokes being 1px wide (it is 1/2 px wide). I've seen other icons do this (eg. waste-basket), so the question is, should I maintain 1px stroke, or if it does not matter, which appears to work better?

11:

OR

---

15:

[aparlato]

Draft 2

Not sure 11 is working yet. Still feels cramped and unclear.

emergency-phone-11
emergency-phone-15

edit: Screenshots for quick viewing below
11:

15:

[natslaughter]

@aparlato
Looking good.

One thing to note about the emergency-phone-15 that also will apply to the other icons is how pixels are given a color value percentage based on what is in the pixel. The plus sign for example is based on a half grid, which makes it a little blurry.
One way you can check for this is the pixel preview (shift+command+y) and quickly see what it will look like at 100% scale

normal view

pixel preview

[natslaughter]

@aparlato
for the emergency-phone-11, try making the plus sign .5 pixel widths instead of 1 pixel, and position the plus so that the vertical stroke is centered within the pixel grid.

[aparlato]

Question: I posted two versions of the 11px revised at actual size in pixel preview. The second one is much clearer but the plus sign falls a little outside of trim area. Is this still the better option or do I work to keep it inside of trim area as a first priority in which case I'll have to continue working option 1?

[natslaughter]

@aparlato
you can try uploading an .svg to the maki editor and seeing how applying background fills look.

[aparlato]

1) emergency-phone-11 (with plus outside trim)
2) emergency-phone-11 (inside trim)
3) telephone-11 (for reference)

in circle background: 0px padding

in circle background: 4px padding

Based on this I'm leaning toward the one inside trim, less so because of the trim, moreso because it appears clearer on a background. I'll try to make that one more clear.

[nickidlugash]

Based on this I'm leaning toward the one inside trim

Sounds good to me.

[aparlato]

I know @natslaughter was going to work on a new phone icon, but I kind of like it turned vertically.

Also pretty good turned 90 deg.

(both pics at 11px)

[aparlato]

With new telephone icon (Thank you @natslaughter !)

11:

15:

---

I think this looks good. The plus in the 11px version crosses a pixel on the horizontal stroke leaves a little blurry grey-ness, however, after trying different positions and sizes, I have found this to be the most clear and consistent with the 15px. Below is an example of what it looks like to have a clearer plus. When it gets larger and more clear like this, it also has to get closer to the phone and the whole thing begins to feel like a single mark rather than two (a phone with a plus).

[aparlato]

This was done.