noiob / pulse-alert

experimental pebble app to alert the user of high pulse readings
4 stars 1 forks source link

Create Icon #1

Closed PotatoFi closed 7 years ago

PotatoFi commented 7 years ago

Thanks for including me on this project! There's a few considerations to keep in mind on this one:

  1. We've got 25x25px to work with... not much.
  2. Since this app is obviously only going to be for the Pebble 2, we have black-and-white only, so no greys for dithering, which limits us even more.

It seems like the Pebble "heart" icon would really make sense here, so here are a couple of very early ideas/drafts:

pules alert 1

Obviously this one would need some work.

pulse alert 2

...but, since the bit-depth on these images will be one, they'll really be more like this:

pulse1converted

pulse2converted

Clearly, there's a lot of pixel cleanup there to be done once we settle on the design. Let me know what you think so far, and if you have any ideas!

noiob commented 7 years ago

I really like both of them, but I'm more for the exclamation mark, if if can be done visibly enough

I was thinking of including the heart icon in the app anyways (it's prettier than writing "HR" all the time) and the exclamation mark could be used as an indicator that the current HR is greater than the threshold (probably should make a "clean UI" issue for that). So, thinking about that, I'd probably choose the exclamation mark one.

Hovever, I don't know if it's my screen resolution or sth, but it's very easy to read as "heart with vertical line in it" to me. Maybe something similar to this emoji (❣) would be easier to see? It'd probably be harder to interpret as "attention" and more as a bleeding heart or sth.

noiob commented 7 years ago

After the UI rework I don't think I want to include a heart + exclamation mark in it (the heart I added is very small), but I find myself even more in favor of the Heavy Heart Exclamation Mark Ornament as an app icon for some reason

PotatoFi commented 7 years ago

I see this process as highly iterative, so lemme know what you think and we'll move on to then next step.

1: 1

2: 2

3: 3

4: 4

5: 5

6: 6 - This one is weird because I've "cleaned up" the pixels on the dot. The same treatment will probably need to be applied to any of the other icons we use, since we're working with a black and white (not greyscale) display.

I've also got some concerns about what these icons will do on the Pebble 2 screen, since it's black and white. I've got a Pebble Classic, but no Pebble 2 (yet!) to test on, so you'll have to let me know what happens on-watch. On the Pebble Classic, there's no "white", so the colors just invert.

noiob commented 7 years ago

I guess I like 3 best, because it's the one that conveys the exclamation mark shape best. 6 is a close second, even with the filled dot.

I have one app I've done a png icon for (I just checked, it even has both white and transparent for some reason) and it inverts just fine.

PotatoFi commented 7 years ago

Ok, here they are. I'm very curious to see what the 25x25 icon does on the black and white screen. I'm fully expecting to at least edit it pixel-by-pixel to clean it up. Lemme know how it goes!

25x25 pulse alert

48x48 pulse alert

144x144 pulse alert

noiob commented 7 years ago

It works! The tip of the heart is a bit too thin, otherwise it's great! img_1516

noiob commented 7 years ago

Here's screenshots of it both highlighted and not, if it helps pebble_screenshot_2017-01-03_02-55-23 pebble_screenshot_2017-01-03_02-55-31

PotatoFi commented 7 years ago

Ok, I think the solution here is to do a pixel-by-pixel edit to clean it up, instead of a straight export from vectorized image. Gimmeh some time, we'll make it mo' better!

Also: I'm keeping an eye out for a deal on a white Pebble 2. I want one! ;)

noiob commented 7 years ago

I'm gonna go sleep now, so no rush. Thanks a lot!

PotatoFi commented 7 years ago

Give this one a try when you wake up. :)

25x25 pulse alert bw

Or this slightly different interpretation:

25x25 pulse alert bw 2

noiob commented 7 years ago

Awesome! I chose the second one. Closing this issue with the next commit. How should I refer to you when giving credit? I'd write a name (with a link if you wanna) in the Readme, App description (w/o link) and Settings page.

I do recommend the white P2. Thanks again!

PotatoFi commented 7 years ago

Attribution is not required, but if you'd like to, you can attribute it to Joel Crane. A link could be: https://twitter.com/Potato_Fi

Again, not required.

When I get my Pebble 2 I'll be sure to get this app, it looks great! Be sure to hit me up if you decide to create any new apps. :)